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

View File

@ -6,7 +6,6 @@ import {
Quotes,
} from "@phosphor-icons/react";
import React, { useState, useRef } from "react";
import { isMobile } from "react-device-detect";
import ManageWorkspace, {
useManageWorkspaceModal,
} from "../../../Modals/MangeWorkspace";
@ -15,6 +14,8 @@ import SlashCommandsButton, {
SlashCommands,
useSlashCommands,
} from "./SlashCommands";
import { isMobile } from "react-device-detect";
import { Tooltip } from "react-tooltip";
export default function PromptInput({
workspace,
@ -98,13 +99,23 @@ export default function PromptInput({
</button>
</div>
<div className="flex justify-between py-3.5">
<div className="flex gap-2">
<div className="flex gap-x-2">
{user?.role !== "default" && (
<Gear
onClick={showModal}
className="w-7 h-7 text-white/60 hover:text-white cursor-pointer"
weight="fill"
/>
<div>
<Gear
onClick={showModal}
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} />
<SlashCommandsButton
@ -128,8 +139,6 @@ function ChatModeSelector({ workspace }) {
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";
@ -137,40 +146,25 @@ function ChatModeSelector({ workspace }) {
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}
data-tooltip-id="chat-mode-toggle"
data-tooltip-content={`You are currently in ${chatMode} mode. Click to switch to ${
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
onClick={toggleMode}
className="w-7 h-7 text-white/60 hover:text-white cursor-pointer"
weight="fill"
/>
<Tooltip
id="chat-mode-toggle"
place="top"
delayShow={300}
className="tooltip !text-xs z-99"
/>
</div>
);
}