✨ feat: 补充 token 详情

lobehub · Jul 22, 2023 · 098f7ff · 098f7ff
1 parent 2ad0ef9
commit 098f7ff
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/src/locales/default/common.ts b/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': '更新提示词',
 };
diff --git a/src/pages/chat/[id]/Conversation/Input.tsx b/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}