refactor(Inputbar): make button tooltips disappear faster (#8011)

src/renderer/src/components/TranslateButton.tsx

@@ -77,6 +77,7 @@ const TranslateButton: FC<Props> = ({ text, onTranslated, disabled, style, isLoa
     <Tooltip
       placement="top"
       title={t('chat.input.translate', { target_language: getLanguageByLangcode(targetLanguage).label() })}
+      mouseLeaveDelay={0}
       arrow>
       <ToolbarButton onClick={handleTranslate} disabled={disabled || isTranslating} style={style} type="text">
         {isTranslating ? <LoadingOutlined spin /> : <Languages size={18} />}

src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx

@@ -54,7 +54,11 @@ const AttachmentButton: FC<Props> = ({
   }))
 
   return (
-    <Tooltip placement="top" title={couldAddImageFile ? t('chat.input.upload') : t('chat.input.upload.document')} arrow>
+    <Tooltip
+      placement="top"
+      title={couldAddImageFile ? t('chat.input.upload') : t('chat.input.upload.document')}
+      mouseLeaveDelay={0}
+      arrow>
       <ToolbarButton type="text" onClick={onSelectFile} disabled={disabled}>
         <Paperclip size={18} style={{ color: files.length ? 'var(--color-primary)' : 'var(--color-icon)' }} />
       </ToolbarButton>

src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx

@@ -21,6 +21,7 @@ const GenerateImageButton: FC<Props> = ({ model, ToolbarButton, assistant, onEna
       title={
         isGenerateImageModel(model) ? t('chat.input.generate_image') : t('chat.input.generate_image_not_supported')
       }
+      mouseLeaveDelay={0}
       arrow>
       <ToolbarButton type="text" disabled={!isGenerateImageModel(model)} onClick={onEnableGenerateImage}>
         <Image size={18} color={assistant.enableGenerateImage ? 'var(--color-link)' : 'var(--color-icon)'} />

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -909,7 +909,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
               />
               <TranslateButton text={text} onTranslated={onTranslated} isLoading={isTranslating} />
               {loading && (
-                <Tooltip placement="top" title={t('chat.input.pause')} arrow>
+                <Tooltip placement="top" title={t('chat.input.pause')} mouseLeaveDelay={0} arrow>
                   <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>
                     <CirclePause style={{ color: 'var(--color-error)', fontSize: 20 }} />
                   </ToolbarButton>

src/renderer/src/pages/home/Inputbar/InputbarTools.tsx

@@ -290,7 +290,11 @@ const InputbarTools = ({
         key: 'new_topic',
         label: t('chat.input.new_topic', { Command: '' }),
         component: (
-          <Tooltip placement="top" title={t('chat.input.new_topic', { Command: newTopicShortcut })} arrow>
+          <Tooltip
+            placement="top"
+            title={t('chat.input.new_topic', { Command: newTopicShortcut })}
+            mouseLeaveDelay={0}
+            arrow>
             <ToolbarButton type="text" onClick={addNewTopic}>
               <MessageSquareDiff size={19} />
             </ToolbarButton>
@@ -395,7 +399,11 @@ const InputbarTools = ({
         key: 'clear_topic',
         label: t('chat.input.clear', { Command: '' }),
         component: (
-          <Tooltip placement="top" title={t('chat.input.clear', { Command: cleanTopicShortcut })} arrow>
+          <Tooltip
+            placement="top"
+            title={t('chat.input.clear', { Command: cleanTopicShortcut })}
+            mouseLeaveDelay={0}
+            arrow>
             <ToolbarButton type="text" onClick={clearTopic}>
               <PaintbrushVertical size={18} />
             </ToolbarButton>
@@ -406,7 +414,11 @@ const InputbarTools = ({
         key: 'toggle_expand',
         label: isExpended ? t('chat.input.collapse') : t('chat.input.expand'),
         component: (
-          <Tooltip placement="top" title={isExpended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
+          <Tooltip
+            placement="top"
+            title={isExpended ? t('chat.input.collapse') : t('chat.input.expand')}
+            mouseLeaveDelay={0}
+            arrow>
             <ToolbarButton type="text" onClick={onToggleExpended}>
               {isExpended ? <Minimize size={18} /> : <Maximize size={18} />}
             </ToolbarButton>

src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx

@@ -85,7 +85,7 @@ const KnowledgeBaseButton: FC<Props> = ({ ref, selectedBases, onSelect, disabled
   }))
 
   return (
-    <Tooltip placement="top" title={t('chat.input.knowledge_base')} arrow>
+    <Tooltip placement="top" title={t('chat.input.knowledge_base')} mouseLeaveDelay={0} arrow>
       <ToolbarButton type="text" onClick={handleOpenQuickPanel} disabled={disabled}>
         <FileSearch size={18} />
       </ToolbarButton>

src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx

@@ -454,7 +454,7 @@ const MCPToolsButton: FC<Props> = ({ ref, setInputValue, resizeTextArea, Toolbar
   }))
 
   return (
-    <Tooltip placement="top" title={t('settings.mcp.title')} arrow>
+    <Tooltip placement="top" title={t('settings.mcp.title')} mouseLeaveDelay={0} arrow>
       <ToolbarButton type="text" onClick={handleOpenQuickPanel}>
         <SquareTerminal
           size={18}

src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx

@@ -162,7 +162,7 @@ const MentionModelsButton: FC<Props> = ({
   }))
 
   return (
-    <Tooltip placement="top" title={t('agents.edit.model.select.title')} arrow>
+    <Tooltip placement="top" title={t('agents.edit.model.select.title')} mouseLeaveDelay={0} arrow>
       <ToolbarButton type="text" onClick={handleOpenQuickPanel}>
         <AtSign size={18} />
       </ToolbarButton>

src/renderer/src/pages/home/Inputbar/NewContextButton.tsx

@@ -16,7 +16,11 @@ const NewContextButton: FC<Props> = ({ onNewContext, ToolbarButton }) => {
   useShortcut('toggle_new_context', onNewContext)
 
   return (
-    <Tooltip placement="top" title={t('chat.input.new.context', { Command: newContextShortcut })} arrow>
+    <Tooltip
+      placement="top"
+      title={t('chat.input.new.context', { Command: newContextShortcut })}
+      mouseLeaveDelay={0}
+      arrow>
       <ToolbarButton type="text" onClick={onNewContext}>
         <Eraser size={18} />
       </ToolbarButton>

src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx

@@ -148,7 +148,7 @@ const QuickPhrasesButton = ({ ref, setInputValue, resizeTextArea, ToolbarButton,
 
   return (
     <>
-      <Tooltip placement="top" title={t('settings.quickPhrase.title')} arrow>
+      <Tooltip placement="top" title={t('settings.quickPhrase.title')} mouseLeaveDelay={0} arrow>
         <ToolbarButton type="text" onClick={handleOpenQuickPanel}>
           <Zap size={18} />
         </ToolbarButton>

src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx

@@ -190,7 +190,7 @@ const ThinkingButton: FC<Props> = ({ ref, model, assistant, ToolbarButton }): Re
   }))
 
   return (
-    <Tooltip placement="top" title={t('assistants.settings.reasoning_effort')} arrow>
+    <Tooltip placement="top" title={t('assistants.settings.reasoning_effort')} mouseLeaveDelay={0} arrow>
       <ToolbarButton type="text" onClick={handleOpenQuickPanel}>
         {getThinkingIcon()}
       </ToolbarButton>

src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx

@@ -127,7 +127,11 @@ const WebSearchButton: FC<Props> = ({ ref, assistant, ToolbarButton }) => {
   }))
 
   return (
-    <Tooltip placement="top" title={enableWebSearch ? t('common.close') : t('chat.input.web_search')} arrow>
+    <Tooltip
+      placement="top"
+      title={enableWebSearch ? t('common.close') : t('chat.input.web_search')}
+      mouseLeaveDelay={0}
+      arrow>
       <ToolbarButton type="text" onClick={handleOpenQuickPanel}>
         <Globe
           size={18}