✨ feat: 补充 token 详情

src/locales/default/common.ts

@@ -12,10 +12,13 @@ export default {
   'agentTag': '标签',
   'agentTagPlaceholder': '请输入标签',
   'archive': '归档',
+  'archiveCurrentMessages': '归档当前会话',
   'autoGenerate': '自动补全',
   'autoGenerateTooltip': '基于提示词自动补全助手描述',
   'cancel': '取消',
+  'clearCurrentMessages': '清空当前会话消息',
   'close': '关闭',
+  'confirmClearCurrentMessages': '即将清空当前会话消息，清空后将无法找回，请确认你的操作',
   'confirmRemoveSessionItemAlert': '即将删除该助手，删除后该将无法找回，请确认你的操作',
   'defaultAgent': '默认助手',
   'edit': '编辑',
@@ -36,6 +39,7 @@ export default {
   'sessionSetting': '会话设置',
   'setting': '设置',
   'share': '分享',
+  'tokenDetail': '系统设定: {{systemRoleToken}} 历史消息: {{chatsToken}}',
   'updateAgent': '更新助理信息',
   'updatePrompt': '更新提示词',
 };

src/pages/chat/[id]/Conversation/Input.tsx

@@ -1,8 +1,9 @@
-import { ActionIcon, ChatInputArea, DraggablePanel, Icon, TokenTag } from '@lobehub/ui';
-import { Button } from 'antd';
+import { ActionIcon, ChatInputArea, DraggablePanel, Icon, TokenTag, Tooltip } from '@lobehub/ui';
+import { Button, Popconfirm } from 'antd';
 import { encode } from 'gpt-tokenizer';
 import { Archive, Eraser, Languages } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
@@ -11,20 +12,24 @@ import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session'
 import { useSettings } from '@/store/settings';
 
 const ChatInput = () => {
+  const { t } = useTranslation();
   const [expand, setExpand] = useState<boolean>(false);
   const [text, setText] = useState('');
-  const textTokenCount = useMemo(() => encode(text).length, [text]);
+  const inputTokenCount = useMemo(() => encode(text).length, [text]);
 
   const [inputHeight] = useSettings((s) => [s.inputHeight], shallow);
-  const [totalToken, model, sendMessage, clearMessage] = useSessionStore(
-    (s) => [
-      chatSelectors.totalTokenCount(s),
-      agentSelectors.currentAgentModel(s),
-      s.createOrSendMsg,
-      s.clearMessage,
-    ],
-    shallow,
-  );
+  const [totalToken, systemRoleToken, chatsToken, model, sendMessage, clearMessage] =
+    useSessionStore(
+      (s) => [
+        chatSelectors.totalTokenCount(s),
+        chatSelectors.systemRoleTokenCount(s),
+        chatSelectors.chatsTokenCount(s),
+        agentSelectors.currentAgentModel(s),
+        s.createOrSendMsg,
+        s.clearMessage,
+      ],
+      shallow,
+    );
 
   return (
     <DraggablePanel
@@ -46,12 +51,16 @@ const ChatInput = () => {
         actions={
           <>
             <ActionIcon icon={Languages} />
-            <ActionIcon icon={Eraser} onClick={clearMessage} />
-            <TokenTag maxValue={ModelTokens[model]} value={totalToken + textTokenCount} />
+            <Popconfirm onConfirm={() => clearMessage()} title={t('confirmClearCurrentMessages')}>
+              <ActionIcon icon={Eraser} title={t('clearCurrentMessages')} />
+            </Popconfirm>
+            <Tooltip title={t('tokenDetail', { chatsToken, systemRoleToken })}>
+              <TokenTag maxValue={ModelTokens[model]} value={totalToken + inputTokenCount} />
+            </Tooltip>
           </>
         }
         expand={expand}
-        footer={<Button icon={<Icon icon={Archive} />} />}
+        footer={<Button icon={<Icon icon={Archive} title={t('archiveCurrentMessages')} />} />}
         minHeight={CHAT_TEXTAREA_HEIGHT}
         onExpandChange={setExpand}
         onInputChange={setText}