mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2025-03-15 22:52:23 +00:00
parent
9f7b0c837a
commit
9f1a5d9dbc
2 changed files with 71 additions and 1 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue