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.
This commit is contained in:
kangfenmao 2025-03-14 10:54:36 +08:00
parent a39ff78758
commit 1b0b2f6736
2 changed files with 47 additions and 17 deletions

View File

@ -7,11 +7,10 @@ import {
GlobalOutlined, GlobalOutlined,
HolderOutlined, HolderOutlined,
PauseCircleOutlined, PauseCircleOutlined,
PicCenterOutlined,
QuestionCircleOutlined QuestionCircleOutlined
} from '@ant-design/icons' } from '@ant-design/icons'
import TranslateButton from '@renderer/components/TranslateButton' 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 db from '@renderer/databases'
import { useAssistant } from '@renderer/hooks/useAssistant' import { useAssistant } from '@renderer/hooks/useAssistant'
import { useMessageOperations } from '@renderer/hooks/useMessageOperations' import { useMessageOperations } from '@renderer/hooks/useMessageOperations'
@ -49,6 +48,7 @@ import KnowledgeBaseButton from './KnowledgeBaseButton'
import MCPToolsButton from './MCPToolsButton' import MCPToolsButton from './MCPToolsButton'
import MentionModelsButton from './MentionModelsButton' import MentionModelsButton from './MentionModelsButton'
import MentionModelsInput from './MentionModelsInput' import MentionModelsInput from './MentionModelsInput'
import NewContextButton from './NewContextButton'
import SendMessageButton from './SendMessageButton' import SendMessageButton from './SendMessageButton'
import TokenCount from './TokenCount' import TokenCount from './TokenCount'
interface Props { interface Props {
@ -103,6 +103,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
const navigate = useNavigate() const navigate = useNavigate()
const showKnowledgeIcon = useSidebarIconShow('knowledge') const showKnowledgeIcon = useSidebarIconShow('knowledge')
const showMCPToolsIcon = isFunctionCallingModel(model)
const [tokenCount, setTokenCount] = useState(0) const [tokenCount, setTokenCount] = useState(0)
@ -125,7 +126,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
const inputTokenCount = showInputEstimatedTokens ? tokenCount : 0 const inputTokenCount = showInputEstimatedTokens ? tokenCount : 0
const newTopicShortcut = useShortcutDisplay('new_topic') const newTopicShortcut = useShortcutDisplay('new_topic')
const newContextShortcut = useShortcutDisplay('toggle_new_context')
const cleanTopicShortcut = useShortcutDisplay('clear_topic') const cleanTopicShortcut = useShortcutDisplay('clear_topic')
const inputEmpty = isEmpty(text.trim()) && files.length === 0 const inputEmpty = isEmpty(text.trim()) && files.length === 0
@ -145,7 +145,9 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
if (uploadedFiles) { if (uploadedFiles) {
userMessage.files = uploadedFiles userMessage.files = uploadedFiles
} }
const knowledgeBaseIds = selectedKnowledgeBases?.map((base) => base.id) const knowledgeBaseIds = selectedKnowledgeBases?.map((base) => base.id)
if (knowledgeBaseIds) { if (knowledgeBaseIds) {
userMessage.knowledgeBaseIds = knowledgeBaseIds userMessage.knowledgeBaseIds = knowledgeBaseIds
} }
@ -157,6 +159,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
if (enabledMCPs) { if (enabledMCPs) {
userMessage.enabledMCPs = enabledMCPs userMessage.enabledMCPs = enabledMCPs
} }
userMessage.usage = await estimateMessageUsage(userMessage) userMessage.usage = await estimateMessageUsage(userMessage)
currentMessageId.current = userMessage.id currentMessageId.current = userMessage.id
@ -501,10 +504,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
clearTopic() clearTopic()
}) })
useShortcut('toggle_new_context', () => {
onNewContext()
})
useEffect(() => { useEffect(() => {
const _setEstimateTokenCount = debounce(setEstimateTokenCount, 100, { leading: false, trailing: true }) const _setEstimateTokenCount = debounce(setEstimateTokenCount, 100, { leading: false, trailing: true })
const unsubscribes = [ const unsubscribes = [
@ -712,11 +711,13 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
disabled={files.length > 0} disabled={files.length > 0}
/> />
)} )}
<MCPToolsButton {showMCPToolsIcon && (
enabledMCPs={enabledMCPs} <MCPToolsButton
toggelEnableMCP={toggelEnableMCP} enabledMCPs={enabledMCPs}
ToolbarButton={ToolbarButton} toggelEnableMCP={toggelEnableMCP}
/> ToolbarButton={ToolbarButton}
/>
)}
<AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} /> <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
<Tooltip placement="top" title={t('chat.input.clear', { Command: cleanTopicShortcut })} arrow> <Tooltip placement="top" title={t('chat.input.clear', { Command: cleanTopicShortcut })} arrow>
<Popconfirm <Popconfirm
@ -731,11 +732,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
</ToolbarButton> </ToolbarButton>
</Popconfirm> </Popconfirm>
</Tooltip> </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> <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
<ToolbarButton type="text" onClick={onToggleExpended}> <ToolbarButton type="text" onClick={onToggleExpended}>
{expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />} {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
@ -748,6 +744,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
</ToolbarButton> </ToolbarButton>
</Tooltip> </Tooltip>
)} )}
<NewContextButton onNewContext={onNewContext} ToolbarButton={ToolbarButton} />
<TokenCount <TokenCount
estimateTokenCount={estimateTokenCount} estimateTokenCount={estimateTokenCount}
inputTokenCount={inputTokenCount} inputTokenCount={inputTokenCount}

View File

@ -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