FE: Refactor input control tooltips (#797)

Co-authored-by: Zero Liu <zero@lumos.com>

src/components/ChatComponents/ChatControls.tsx

@@ -3,42 +3,33 @@ import { CopilotPlusModal } from "@/components/CopilotPlusModal";
 import { VAULT_VECTOR_STORE_STRATEGY } from "@/constants";
 import { CustomError } from "@/error";
 import { CopilotSettings } from "@/settings/SettingsPage";
-import { ChatMessage } from "@/sharedState";
-import { Notice, Vault } from "obsidian";
+import { Notice } from "obsidian";
 import React, { useEffect, useState } from "react";
 
 import { ChainType } from "@/chainFactory";
-import { RefreshIcon, SaveAsNoteIcon, UseActiveNoteAsContextIcon } from "@/components/Icons";
 import { stringToChainType } from "@/utils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, Download, Puzzle, RefreshCw } from "lucide-react";
+import { TooltipActionButton } from "@/components/ChatComponents/TooltipActionButton";
 
 interface ChatControlsProps {
-  currentModelKey: string;
-  setCurrentModelKey: (modelKey: string) => void;
   currentChain: ChainType;
   setCurrentChain: (chain: ChainType, options?: SetChainOptions) => void;
   onNewChat: (openNote: boolean) => void;
   onSaveAsNote: () => void;
   onRefreshVaultContext: () => void;
-  addMessage: (message: ChatMessage) => void;
   settings: CopilotSettings;
-  vault: Vault;
   vault_qa_strategy: string;
   debug?: boolean;
 }
 
 const ChatControls: React.FC<ChatControlsProps> = ({
-  currentModelKey,
-  setCurrentModelKey,
   currentChain,
   setCurrentChain,
   onNewChat,
   onSaveAsNote,
   onRefreshVaultContext,
-  addMessage,
   settings,
-  vault,
   vault_qa_strategy,
   debug,
 }) => {
@@ -106,36 +97,25 @@ const ChatControls: React.FC<ChatControlsProps> = ({
 
   return (
     <div className="chat-icons-container">
-      <button className="chat-icon-button clickable-icon" onClick={() => onNewChat(false)}>
-        <RefreshIcon className="icon-scaler" />
-        <span className="tooltip-text">
-          New Chat
-          <br />
-          (unsaved history will be lost)
-        </span>
-      </button>
-      <button className="chat-icon-button clickable-icon" onClick={onSaveAsNote}>
-        <SaveAsNoteIcon className="icon-scaler" />
-        <span className="tooltip-text">Save as Note</span>
-      </button>
+      <TooltipActionButton
+        onClick={() => {
+          onNewChat(false);
+        }}
+        Icon={<RefreshCw className="icon-scaler" />}
+      >
+        <div>New Chat</div>
+        {!settings.autosaveChat && <div>(Unsaved history will be lost)</div>}
+      </TooltipActionButton>
+      <TooltipActionButton onClick={onSaveAsNote} Icon={<Download className="icon-scaler" />}>
+        Save as Note
+      </TooltipActionButton>
       {selectedChain === "vault_qa" && (
-        <>
-          <button className="chat-icon-button clickable-icon" onClick={onRefreshVaultContext}>
-            <UseActiveNoteAsContextIcon className="icon-scaler" />
-            <div
-              className="tooltip-text"
-              style={{
-                transform: "translateX(-90%)",
-              }}
-            >
-              <span>Refresh Index for Vault</span>
-            </div>
-          </button>
-          {/* <button className="chat-icon-button clickable-icon" onClick={handleFindSimilarNotes}>
-            <ConnectionIcon className="icon-scaler" />
-            <span className="tooltip-text">Find Similar Notes for Active Note</span>
-          </button> */}
-        </>
+        <TooltipActionButton
+          onClick={onRefreshVaultContext}
+          Icon={<Puzzle className="icon-scaler" />}
+        >
+          Refresh Index for Vault
+        </TooltipActionButton>
       )}
       <div className="chat-icon-selection-tooltip">
         <DropdownMenu.Root>

src/components/ChatComponents/ChatInput.tsx

@@ -6,7 +6,6 @@ import { CustomPromptProcessor } from "@/customPromptProcessor";
 import { CopilotSettings } from "@/settings/SettingsPage";
 import { ChatMessage } from "@/sharedState";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import * as Tooltip from "@radix-ui/react-tooltip";
 import { ChevronUp, Command, CornerDownLeft, StopCircle } from "lucide-react";
 import { App, Platform, TFile, Vault } from "obsidian";
 import React, { useEffect, useRef, useState } from "react";
@@ -198,8 +197,6 @@ const ChatInput: React.FC<ChatInputProps> = ({
   return (
     <div className="chat-input-container" ref={containerRef}>
       <ChatControls
-        currentModelKey={currentModelKey}
-        setCurrentModelKey={setCurrentModelKey}
         currentChain={currentChain}
         setCurrentChain={setCurrentChain}
         onNewChat={onNewChat}
@@ -208,8 +205,6 @@ const ChatInput: React.FC<ChatInputProps> = ({
         settings={settings}
         vault_qa_strategy={vault_qa_strategy}
         debug={debug}
-        addMessage={addMessage}
-        vault={vault}
       />
 
       <textarea
@@ -247,40 +242,24 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
         <div className="chat-input-buttons">
           {isGenerating && (
-            <Tooltip.Provider delayDuration={0}>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <button onClick={() => onStopGenerating()} className="submit-button cancel">
-                    <StopCircle />
-                  </button>
-                </Tooltip.Trigger>
-              </Tooltip.Root>
-            </Tooltip.Provider>
+            <button onClick={() => onStopGenerating()} className="submit-button cancel">
+              <StopCircle />
+            </button>
           )}
-          <Tooltip.Provider delayDuration={0}>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <button onClick={handleSendMessage} className="submit-button">
-                  <CornerDownLeft size={16} />
-                  <span>chat</span>
-                </button>
-              </Tooltip.Trigger>
-            </Tooltip.Root>
+          <button onClick={handleSendMessage} className="submit-button">
+            <CornerDownLeft size={16} />
+            <span>chat</span>
+          </button>
 
-            {currentChain === "copilot_plus" && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <button onClick={handleSendMessage} className="submit-button vault">
-                    <div className="button-content">
-                      {Platform.isMacOS && <Command size={12} />}
-                      <CornerDownLeft size={16} />
-                      <span>vault</span>
-                    </div>
-                  </button>
-                </Tooltip.Trigger>
-              </Tooltip.Root>
-            )}
-          </Tooltip.Provider>
+          {currentChain === "copilot_plus" && (
+            <button onClick={handleSendMessage} className="submit-button vault">
+              <div className="button-content">
+                {Platform.isMacOS && <Command size={12} />}
+                <CornerDownLeft size={16} />
+                <span>vault</span>
+              </div>
+            </button>
+          )}
         </div>
       </div>
     </div>

src/components/ChatComponents/TooltipActionButton.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { PropsWithChildren } from "react";
+
+interface Props {
+  onClick: () => void;
+  Icon: React.ReactNode;
+}
+
+export function TooltipActionButton({ onClick, Icon, children }: PropsWithChildren<Props>) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button className="chat-icon-button clickable-icon" onClick={onClick}>
+          {Icon}
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content sideOffset={5} className="tooltip-text">
+          {children}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+}

src/components/CopilotView.tsx

@@ -8,6 +8,7 @@ import SharedState from "@/sharedState";
 import { ItemView, WorkspaceLeaf } from "obsidian";
 import * as React from "react";
 import { Root, createRoot } from "react-dom/client";
+import * as Tooltip from "@radix-ui/react-tooltip";
 
 export default class CopilotView extends ItemView {
   private chainManager: ChainManager;
@@ -59,21 +60,23 @@ export default class CopilotView extends ItemView {
     root.render(
       <AppContext.Provider value={this.app}>
         <React.StrictMode>
-          <Chat
-            sharedState={this.sharedState}
-            settings={this.settings}
-            chainManager={this.chainManager}
-            emitter={this.emitter}
-            defaultSaveFolder={this.defaultSaveFolder}
-            updateUserMessageHistory={(newMessage) => {
-              this.plugin.updateUserMessageHistory(newMessage);
-            }}
-            plugin={this.plugin}
-            debug={this.debug}
-            onSaveChat={(saveFunction) => {
-              this.handleSaveAsNote = saveFunction;
-            }}
-          />
+          <Tooltip.Provider delayDuration={0}>
+            <Chat
+              sharedState={this.sharedState}
+              settings={this.settings}
+              chainManager={this.chainManager}
+              emitter={this.emitter}
+              defaultSaveFolder={this.defaultSaveFolder}
+              updateUserMessageHistory={(newMessage) => {
+                this.plugin.updateUserMessageHistory(newMessage);
+              }}
+              plugin={this.plugin}
+              debug={this.debug}
+              onSaveChat={(saveFunction) => {
+                this.handleSaveAsNote = saveFunction;
+              }}
+            />
+          </Tooltip.Provider>
         </React.StrictMode>
       </AppContext.Provider>
     );

styles.css

@@ -102,25 +102,16 @@ If your plugin does not need CSS, delete this file.
 }
 
 .icon-scaler {
-  transform: scale(0.5);
+  transform: scale(0.7);
 }
 
 .tooltip-text {
   max-width: 400px;
-  visibility: hidden;
-  opacity: 0;
   background-color: var(--background-secondary);
   color: var(--text-normal);
   text-align: center;
   border-radius: 5px;
   padding: 5px;
-  position: absolute;
-  z-index: 1;
-  bottom: 100%;
-  left: 50%;
-  margin-bottom: 4px;
-  transform: translateX(-50%);
-  transition: opacity 0.3s;
   font-size: var(--font-ui-smaller);
   white-space: nowrap;
 }
@@ -130,12 +121,6 @@ If your plugin does not need CSS, delete this file.
   display: inline-block;
 }
 
-.select-wrapper:hover .tooltip-text,
-.chat-icon-button.clickable-icon:hover .tooltip-text {
-  visibility: visible !important;
-  opacity: 1 !important;
-}
-
 .chat-icon-button.clickable-icon,
 .chat-icon-selection,
 .model-select-button,
@@ -299,61 +284,18 @@ If your plugin does not need CSS, delete this file.
   opacity: 1;
 }
 
-/* Tooltip Styles */
-.tooltip-text {
-  max-width: 400px;
-  visibility: hidden;
-  opacity: 0;
-  background-color: var(--background-secondary);
-  color: var(--text-normal);
-  text-align: center;
-  border-radius: 5px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  bottom: 100%;
-  left: 50%;
-  margin-bottom: 4px;
-  transform: translateX(-50%);
-  transition: opacity 0.3s;
-  font-size: var(--font-ui-smaller);
-  white-space: nowrap;
-}
-
 /* Button and Tooltip Container */
 .chat-icon-button {
   position: relative;
 }
 
-/* Show tooltip on hover */
-.chat-icon-button:hover .tooltip-text {
-  visibility: visible;
-  opacity: 1;
-}
-
-/* Ensure tooltips are visible for all icon buttons */
-.chat-icon-button.clickable-icon .tooltip-text {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.chat-icon-button.clickable-icon:hover .tooltip-text {
-  visibility: visible !important;
-  opacity: 1 !important;
-}
-
 .submit-button svg,
 .model-select-button svg,
 .chain-select-button svg {
   width: 12px;
   height: 12px;
 }
 
-.chat-icon-button.clickable-icon:hover .tooltip-text {
-  visibility: visible;
-  opacity: 1;
-}
-
 .chat-messages {
   display: flex;
   flex-direction: column;