Add back in selector on prompt input ()

resolves 
This commit is contained in:
Timothy Carambat 2023-10-25 16:01:45 -07:00 committed by GitHub
parent 9f7b0c837a
commit 9f1a5d9dbc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 1 deletions
frontend/src
components/WorkspaceChat/ChatContainer/PromptInput
index.css

View file

@ -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>
);
}

View file

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