Remove custom tooltip implementation (#716)

This commit is contained in:
Timothy Carambat 2024-02-13 14:26:56 -08:00 committed by GitHub
parent d52f8aafd4
commit ee3a79fdcf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 37 additions and 34 deletions

View File

@ -1,10 +1,13 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import SlashCommandIcon from "./icons/slash-commands-icon.svg"; import SlashCommandIcon from "./icons/slash-commands-icon.svg";
import { Tooltip } from "react-tooltip";
export default function SlashCommandsButton({ showing, setShowSlashCommand }) { export default function SlashCommandsButton({ showing, setShowSlashCommand }) {
return ( return (
<div <div
id="slash-cmd-btn" id="slash-cmd-btn"
data-tooltip-id="tooltip-slash-cmd-btn"
data-tooltip-content="View all available slash commands for chatting."
onClick={() => setShowSlashCommand(!showing)} onClick={() => setShowSlashCommand(!showing)}
className={`flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${ className={`flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${
showing ? "!opacity-100" : "" showing ? "!opacity-100" : ""
@ -15,6 +18,12 @@ export default function SlashCommandsButton({ showing, setShowSlashCommand }) {
className="w-6 h-6 pointer-events-none" className="w-6 h-6 pointer-events-none"
alt="Slash commands button" alt="Slash commands button"
/> />
<Tooltip
id="tooltip-slash-cmd-btn"
place="top"
delayShow={300}
className="tooltip !text-xs z-99"
/>
</div> </div>
); );
} }

View File

@ -6,7 +6,6 @@ import {
Quotes, Quotes,
} from "@phosphor-icons/react"; } from "@phosphor-icons/react";
import React, { useState, useRef } from "react"; import React, { useState, useRef } from "react";
import { isMobile } from "react-device-detect";
import ManageWorkspace, { import ManageWorkspace, {
useManageWorkspaceModal, useManageWorkspaceModal,
} from "../../../Modals/MangeWorkspace"; } from "../../../Modals/MangeWorkspace";
@ -15,6 +14,8 @@ import SlashCommandsButton, {
SlashCommands, SlashCommands,
useSlashCommands, useSlashCommands,
} from "./SlashCommands"; } from "./SlashCommands";
import { isMobile } from "react-device-detect";
import { Tooltip } from "react-tooltip";
export default function PromptInput({ export default function PromptInput({
workspace, workspace,
@ -98,13 +99,23 @@ export default function PromptInput({
</button> </button>
</div> </div>
<div className="flex justify-between py-3.5"> <div className="flex justify-between py-3.5">
<div className="flex gap-2"> <div className="flex gap-x-2">
{user?.role !== "default" && ( {user?.role !== "default" && (
<Gear <div>
onClick={showModal} <Gear
className="w-7 h-7 text-white/60 hover:text-white cursor-pointer" onClick={showModal}
weight="fill" data-tooltip-id="tooltip-workspace-settings-prompt"
/> data-tooltip-content={`Open the ${workspace.name} workspace settings`}
className="w-7 h-7 text-white/60 hover:text-white cursor-pointer"
weight="fill"
/>
<Tooltip
id="tooltip-workspace-settings-prompt"
place="top"
delayShow={300}
className="tooltip !text-xs z-99"
/>
</div>
)} )}
<ChatModeSelector workspace={workspace} /> <ChatModeSelector workspace={workspace} />
<SlashCommandsButton <SlashCommandsButton
@ -128,8 +139,6 @@ function ChatModeSelector({ workspace }) {
const [chatMode, setChatMode] = useState( const [chatMode, setChatMode] = useState(
window.localStorage.getItem(STORAGE_KEY) ?? "chat" window.localStorage.getItem(STORAGE_KEY) ?? "chat"
); );
const [showToolTip, setShowTooltip] = useState(false);
const [delayHandler, setDelayHandler] = useState(null);
function toggleMode() { function toggleMode() {
const newChatMode = chatMode === "chat" ? "query" : "chat"; const newChatMode = chatMode === "chat" ? "query" : "chat";
@ -137,40 +146,25 @@ function ChatModeSelector({ workspace }) {
window.localStorage.setItem(STORAGE_KEY, 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; const ModeIcon = chatMode === "chat" ? Chats : Quotes;
return ( return (
<div <div
className="relative" data-tooltip-id="chat-mode-toggle"
onMouseEnter={handleMouseEnter} data-tooltip-content={`You are currently in ${chatMode} mode. Click to switch to ${
onMouseLeave={cleanupTooltipListener} chatMode === "chat" ? "query" : "chat"
} mode.`}
> >
<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 <ModeIcon
onClick={toggleMode} onClick={toggleMode}
className="w-7 h-7 text-white/60 hover:text-white cursor-pointer" className="w-7 h-7 text-white/60 hover:text-white cursor-pointer"
weight="fill" weight="fill"
/> />
<Tooltip
id="chat-mode-toggle"
place="top"
delayShow={300}
className="tooltip !text-xs z-99"
/>
</div> </div>
); );
} }