Add back in selector on prompt input (#289)

resolves #286

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx

@@ -1,4 +1,4 @@
-import { Gear, PaperPlaneRight } from "@phosphor-icons/react";
+import { Chats, Gear, PaperPlaneRight, Quotes } from "@phosphor-icons/react";
 import React, { useState, useRef } from "react";
 import { isMobile } from "react-device-detect";
 import { Loader } from "react-feather";
@@ -87,6 +87,7 @@ export default function PromptInput({
                   className="w-7 h-7 text-white/60 hover:text-white cursor-pointer"
                   weight="fill"
                 />
+                <ChatModeSelector workspace={workspace} />
                 {/* <TextT
                   className="w-7 h-7 text-white/30 cursor-not-allowed"
                   weight="fill"
@@ -106,3 +107,55 @@ export default function PromptInput({
     </div>
   );
 }
+
+function ChatModeSelector({ workspace }) {
+  const STORAGE_KEY = `workspace_chat_mode_${workspace.slug}`;
+  const [chatMode, setChatMode] = useState(
+    window.localStorage.getItem(STORAGE_KEY) ?? "chat"
+  );
+  const [showToolTip, setShowTooltip] = useState(false);
+  const [delayHandler, setDelayHandler] = useState(null);
+
+  function toggleMode() {
+    const newChatMode = chatMode === "chat" ? "query" : "chat";
+    setChatMode(newChatMode);
+    window.localStorage.setItem(STORAGE_KEY, newChatMode);
+  }
+
+  function handleMouseEnter() {
+    if (isMobile) return false;
+    setDelayHandler(
+      setTimeout(() => {
+        setShowTooltip(true);
+      }, 700)
+    );
+  }
+
+  const cleanupTooltipListener = () => {
+    clearTimeout(delayHandler);
+    setShowTooltip(false);
+  };
+
+  const ModeIcon = chatMode === "chat" ? Chats : Quotes;
+  return (
+    <div
+      className="relative"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={cleanupTooltipListener}
+    >
+      <div
+        className={`opacity-${
+          showToolTip ? 1 : 0
+        } pointer-events-none transition-all duration-300 tip absolute bottom-10 z-99 left-0 bg-white/50 text-gray-200 text-xs p-1.5 rounded shadow-lg whitespace-nowrap`}
+      >
+        You are currently in {chatMode} mode. Click to switch to{" "}
+        {chatMode === "chat" ? "query" : "chat"} mode.
+      </div>
+      <ModeIcon
+        onClick={toggleMode}
+        className="w-7 h-7 text-white/60 hover:text-white cursor-pointer"
+        weight="fill"
+      />
+    </div>
+  );
+}

frontend/src/index.css

@@ -337,3 +337,20 @@ dialog::backdrop {
 .white-fill {
   fill: white;
 }
+
+.tip:before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+
+  border-bottom: 8px solid transparent;
+  border-top: 8px solid rgba(255, 255, 255, 0.5);
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-radius: 0px 0px 0px 5px;
+  left: 1%;
+
+  top: 100%;
+}