From 9f1a5d9dbcd2d54bc04a9889c57095a28600de6e Mon Sep 17 00:00:00 2001
From: Timothy Carambat <rambat1010@gmail.com>
Date: Wed, 25 Oct 2023 16:01:45 -0700
Subject: [PATCH] Add back in selector on prompt input (#289)

resolves #286
---
 .../ChatContainer/PromptInput/index.jsx       | 55 ++++++++++++++++++-
 frontend/src/index.css                        | 17 ++++++
 2 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index 556cc6712..6ff16cdc5 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/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>
+  );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a6cb2aec2..bd88e2b8a 100644
--- a/frontend/src/index.css
+++ b/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%;
+}