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%;
+}