From 1b0b2f6736e46de8e4c828d7870276be0d4761bf Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Fri, 14 Mar 2025 10:54:36 +0800
Subject: [PATCH] feat(Inputbar): Introduce NewContextButton and refactor
 context handling

- Added NewContextButton component to manage new context creation with a dedicated button.
- Refactored Inputbar to utilize the new NewContextButton, improving code organization.
- Removed deprecated context shortcut handling from Inputbar.
- Enhanced MCPToolsButton visibility logic based on model type.
---
 .../src/pages/home/Inputbar/Inputbar.tsx      | 31 ++++++++---------
 .../pages/home/Inputbar/NewContextButton.tsx  | 33 +++++++++++++++++++
 2 files changed, 47 insertions(+), 17 deletions(-)
 create mode 100644 src/renderer/src/pages/home/Inputbar/NewContextButton.tsx

diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
index a7d3c7f6..22a14757 100644
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -7,11 +7,10 @@ import {
   GlobalOutlined,
   HolderOutlined,
   PauseCircleOutlined,
-  PicCenterOutlined,
   QuestionCircleOutlined
 } from '@ant-design/icons'
 import TranslateButton from '@renderer/components/TranslateButton'
-import { isVisionModel, isWebSearchModel } from '@renderer/config/models'
+import { isFunctionCallingModel, isVisionModel, isWebSearchModel } from '@renderer/config/models'
 import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useMessageOperations } from '@renderer/hooks/useMessageOperations'
@@ -49,6 +48,7 @@ import KnowledgeBaseButton from './KnowledgeBaseButton'
 import MCPToolsButton from './MCPToolsButton'
 import MentionModelsButton from './MentionModelsButton'
 import MentionModelsInput from './MentionModelsInput'
+import NewContextButton from './NewContextButton'
 import SendMessageButton from './SendMessageButton'
 import TokenCount from './TokenCount'
 interface Props {
@@ -103,6 +103,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
   const navigate = useNavigate()
 
   const showKnowledgeIcon = useSidebarIconShow('knowledge')
+  const showMCPToolsIcon = isFunctionCallingModel(model)
 
   const [tokenCount, setTokenCount] = useState(0)
 
@@ -125,7 +126,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
   const inputTokenCount = showInputEstimatedTokens ? tokenCount : 0
 
   const newTopicShortcut = useShortcutDisplay('new_topic')
-  const newContextShortcut = useShortcutDisplay('toggle_new_context')
   const cleanTopicShortcut = useShortcutDisplay('clear_topic')
   const inputEmpty = isEmpty(text.trim()) && files.length === 0
 
@@ -145,7 +145,9 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
       if (uploadedFiles) {
         userMessage.files = uploadedFiles
       }
+
       const knowledgeBaseIds = selectedKnowledgeBases?.map((base) => base.id)
+
       if (knowledgeBaseIds) {
         userMessage.knowledgeBaseIds = knowledgeBaseIds
       }
@@ -157,6 +159,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
       if (enabledMCPs) {
         userMessage.enabledMCPs = enabledMCPs
       }
+
       userMessage.usage = await estimateMessageUsage(userMessage)
       currentMessageId.current = userMessage.id
 
@@ -501,10 +504,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
     clearTopic()
   })
 
-  useShortcut('toggle_new_context', () => {
-    onNewContext()
-  })
-
   useEffect(() => {
     const _setEstimateTokenCount = debounce(setEstimateTokenCount, 100, { leading: false, trailing: true })
     const unsubscribes = [
@@ -712,11 +711,13 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
                   disabled={files.length > 0}
                 />
               )}
-              <MCPToolsButton
-                enabledMCPs={enabledMCPs}
-                toggelEnableMCP={toggelEnableMCP}
-                ToolbarButton={ToolbarButton}
-              />
+              {showMCPToolsIcon && (
+                <MCPToolsButton
+                  enabledMCPs={enabledMCPs}
+                  toggelEnableMCP={toggelEnableMCP}
+                  ToolbarButton={ToolbarButton}
+                />
+              )}
               <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
               <Tooltip placement="top" title={t('chat.input.clear', { Command: cleanTopicShortcut })} arrow>
                 <Popconfirm
@@ -731,11 +732,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
                   </ToolbarButton>
                 </Popconfirm>
               </Tooltip>
-              <Tooltip placement="top" title={t('chat.input.new.context', { Command: newContextShortcut })} arrow>
-                <ToolbarButton type="text" onClick={onNewContext}>
-                  <PicCenterOutlined />
-                </ToolbarButton>
-              </Tooltip>
               <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
                 <ToolbarButton type="text" onClick={onToggleExpended}>
                   {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
@@ -748,6 +744,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
                   </ToolbarButton>
                 </Tooltip>
               )}
+              <NewContextButton onNewContext={onNewContext} ToolbarButton={ToolbarButton} />
               <TokenCount
                 estimateTokenCount={estimateTokenCount}
                 inputTokenCount={inputTokenCount}
diff --git a/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx b/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx
new file mode 100644
index 00000000..0b8c6024
--- /dev/null
+++ b/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx
@@ -0,0 +1,33 @@
+import { PicCenterOutlined } from '@ant-design/icons'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShortcut, useShortcutDisplay } from '@renderer/hooks/useShortcuts'
+import { Tooltip } from 'antd'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  onNewContext: () => void
+  ToolbarButton: any
+}
+
+const NewContextButton: FC<Props> = ({ onNewContext, ToolbarButton }) => {
+  const newContextShortcut = useShortcutDisplay('toggle_new_context')
+  const { t } = useTranslation()
+  const { showInputEstimatedTokens } = useSettings()
+
+  useShortcut('toggle_new_context', onNewContext)
+
+  if (!showInputEstimatedTokens) {
+    return null
+  }
+
+  return (
+    <Tooltip placement="top" title={t('chat.input.new.context', { Command: newContextShortcut })} arrow>
+      <ToolbarButton type="text" onClick={onNewContext}>
+        <PicCenterOutlined />
+      </ToolbarButton>
+    </Tooltip>
+  )
+}
+
+export default NewContextButton