From 4990c28b509f99d60e966517e492474aee83f51b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E5=8F=AF=E7=8B=B8?= Date: Thu, 5 Jun 2025 12:46:20 +0800 Subject: [PATCH] feat(Settings): Add token count display toggle (#6772) * feat(Settings): add token count toggle * fix(i18n): update token usage messages for zh-cn and zh-tw locales * fix(InstallNpxUv): optimize checkBinaries function with useCallback for better performance --------- Co-authored-by: Pleasurecruise <3196812536@qq.com> --- src/renderer/src/hooks/useSettings.ts | 4 ++++ src/renderer/src/i18n/locales/en-us.json | 1 + src/renderer/src/i18n/locales/ja-jp.json | 1 + src/renderer/src/i18n/locales/ru-ru.json | 1 + src/renderer/src/i18n/locales/zh-cn.json | 1 + src/renderer/src/i18n/locales/zh-tw.json | 1 + src/renderer/src/pages/home/Messages/MessageTokens.tsx | 6 ++++-- src/renderer/src/pages/home/Tabs/SettingsTab.tsx | 9 ++++++++- .../src/pages/settings/MCPSettings/InstallNpxUv.tsx | 8 ++++---- src/renderer/src/store/settings.ts | 6 ++++++ 10 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/renderer/src/hooks/useSettings.ts b/src/renderer/src/hooks/useSettings.ts index 66d9615ee3..c058a95237 100644 --- a/src/renderer/src/hooks/useSettings.ts +++ b/src/renderer/src/hooks/useSettings.ts @@ -8,6 +8,7 @@ import { setLaunchToTray, setPinTopicsToTop, setSendMessageShortcut as _setSendMessageShortcut, + setShowTokens, setSidebarIcons, setTargetLanguage, setTheme, @@ -83,6 +84,9 @@ export function useSettings() { }, setAssistantIconType(assistantIconType: AssistantIconType) { dispatch(setAssistantIconType(assistantIconType)) + }, + setShowTokens(showTokens: boolean) { + dispatch(setShowTokens(showTokens)) } } } diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json index 3fd4886f97..e6afa7fb4f 100644 --- a/src/renderer/src/i18n/locales/en-us.json +++ b/src/renderer/src/i18n/locales/en-us.json @@ -1498,6 +1498,7 @@ "advancedSettings": "Advanced Settings" }, "messages.prompt": "Show prompt", + "messages.tokens": "Show token usage", "messages.divider": "Show divider between messages", "messages.grid_columns": "Message grid display columns", "messages.grid_popover_trigger": "Grid detail trigger", diff --git a/src/renderer/src/i18n/locales/ja-jp.json b/src/renderer/src/i18n/locales/ja-jp.json index 92488e5bc0..5f5a1d11fd 100644 --- a/src/renderer/src/i18n/locales/ja-jp.json +++ b/src/renderer/src/i18n/locales/ja-jp.json @@ -1494,6 +1494,7 @@ "advancedSettings": "詳細設定" }, "messages.prompt": "プロンプト表示", + "messages.tokens": "トークン使用量を表示", "messages.divider": "メッセージ間に区切り線を表示", "messages.grid_columns": "メッセージグリッドの表示列数", "messages.grid_popover_trigger": "グリッド詳細トリガー", diff --git a/src/renderer/src/i18n/locales/ru-ru.json b/src/renderer/src/i18n/locales/ru-ru.json index 942fc2f2dc..a26b78ba3a 100644 --- a/src/renderer/src/i18n/locales/ru-ru.json +++ b/src/renderer/src/i18n/locales/ru-ru.json @@ -1494,6 +1494,7 @@ "advancedSettings": "Расширенные настройки" }, "messages.prompt": "Показывать подсказки", + "messages.tokens": "Показать использование токенов", "messages.divider": "Показывать разделитель между сообщениями", "messages.grid_columns": "Количество столбцов сетки сообщений", "messages.grid_popover_trigger": "Триггер для отображения подробной информации в сетке", diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json index 437d8db25c..a344549317 100644 --- a/src/renderer/src/i18n/locales/zh-cn.json +++ b/src/renderer/src/i18n/locales/zh-cn.json @@ -1498,6 +1498,7 @@ "advancedSettings": "高级设置" }, "messages.prompt": "显示提示词", + "messages.tokens": "显示Token用量", "messages.divider": "消息分割线", "messages.grid_columns": "消息网格展示列数", "messages.grid_popover_trigger": "网格详情触发", diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json index 3546889bed..ce1a1a5403 100644 --- a/src/renderer/src/i18n/locales/zh-tw.json +++ b/src/renderer/src/i18n/locales/zh-tw.json @@ -1497,6 +1497,7 @@ "advancedSettings": "高級設定" }, "messages.prompt": "提示詞顯示", + "messages.tokens": "Token用量顯示", "messages.divider": "訊息間顯示分隔線", "messages.grid_columns": "訊息網格展示列數", "messages.grid_popover_trigger": "網格詳細資訊觸發", diff --git a/src/renderer/src/pages/home/Messages/MessageTokens.tsx b/src/renderer/src/pages/home/Messages/MessageTokens.tsx index 2695767f44..26c5cdc0c5 100644 --- a/src/renderer/src/pages/home/Messages/MessageTokens.tsx +++ b/src/renderer/src/pages/home/Messages/MessageTokens.tsx @@ -1,4 +1,5 @@ // import { useRuntime } from '@renderer/hooks/useRuntime' +import { useSettings } from '@renderer/hooks/useSettings' import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService' import type { Message } from '@renderer/types/newMessage' import { Popover } from 'antd' @@ -11,6 +12,7 @@ interface MessageTokensProps { } const MessgeTokens: React.FC = ({ message }) => { + const { showTokens } = useSettings() // const { generating } = useRuntime() const locateMessage = () => { EventEmitter.emit(EVENT_NAMES.LOCATE_MESSAGE + ':' + message.id, false) @@ -23,7 +25,7 @@ const MessgeTokens: React.FC = ({ message }) => { if (message.role === 'user') { return ( - Tokens: {message?.usage?.total_tokens} + {showTokens && `Tokens: ${message?.usage?.total_tokens}`} ) } @@ -54,7 +56,7 @@ const MessgeTokens: React.FC = ({ message }) => { {hasMetrics ? ( - {tokensInfo} + {showTokens && tokensInfo} ) : ( tokensInfo diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx index 06792f789e..e3f2f72cd9 100644 --- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx +++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx @@ -46,6 +46,7 @@ import { setShowInputEstimatedTokens, setShowMessageDivider, setShowPrompt, + setShowTokens, setShowTranslateConfirm, setThoughtAutoCollapse } from '@renderer/store/settings' @@ -113,7 +114,8 @@ const SettingsTab: FC = (props) => { messageNavigation, enableQuickPanelTriggers, enableBackspaceDeleteModel, - showTranslateConfirm + showTranslateConfirm, + showTokens } = useSettings() const onUpdateAssistantSettings = (settings: Partial) => { @@ -336,6 +338,11 @@ const SettingsTab: FC = (props) => { dispatch(setShowPrompt(checked))} /> + + {t('settings.messages.tokens')} + dispatch(setShowTokens(checked))} /> + + {t('settings.messages.divider')} = ({ mini = false }) => { const [binariesDir, setBinariesDir] = useState(null) const { t } = useTranslation() const navigate = useNavigate() - const checkBinaries = async () => { + const checkBinaries = useCallback(async () => { const uvExists = await window.api.isBinaryExist('uv') const bunExists = await window.api.isBinaryExist('bun') const { uvPath, bunPath, dir } = await window.api.mcp.getInstallInfo() @@ -36,7 +36,7 @@ const InstallNpxUv: FC = ({ mini = false }) => { setUvPath(uvPath) setBunPath(bunPath) setBinariesDir(dir) - } + }, [dispatch]) const installUV = async () => { try { @@ -69,7 +69,7 @@ const InstallNpxUv: FC = ({ mini = false }) => { useEffect(() => { checkBinaries() - }, []) + }, [checkBinaries]) if (mini) { const installed = isUvInstalled && isBunInstalled diff --git a/src/renderer/src/store/settings.ts b/src/renderer/src/store/settings.ts index d8e778866c..70e91e56aa 100644 --- a/src/renderer/src/store/settings.ts +++ b/src/renderer/src/store/settings.ts @@ -47,6 +47,7 @@ export interface SettingsState { proxyUrl?: string userName: string showPrompt: boolean + showTokens: boolean showMessageDivider: boolean messageFont: 'system' | 'serif' showInputEstimatedTokens: boolean @@ -191,6 +192,7 @@ export const initialState: SettingsState = { proxyUrl: undefined, userName: '', showPrompt: true, + showTokens: true, showMessageDivider: true, messageFont: 'system', showInputEstimatedTokens: false, @@ -355,6 +357,9 @@ const settingsSlice = createSlice({ setShowPrompt: (state, action: PayloadAction) => { state.showPrompt = action.payload }, + setShowTokens: (state, action: PayloadAction) => { + state.showTokens = action.payload + }, setShowMessageDivider: (state, action: PayloadAction) => { state.showMessageDivider = action.payload }, @@ -672,6 +677,7 @@ export const { setProxyUrl, setUserName, setShowPrompt, + setShowTokens, setShowMessageDivider, setMessageFont, setShowInputEstimatedTokens,