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