@lobehub/chat 0.5.0 → 0.6.1

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+### [Version 0.6.1](https://github.com/lobehub/lobe-chat/compare/v0.6.0...v0.6.1)
+
+<sup>Released on **2023-07-22**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Add deps.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Add deps ([3dc45fe](https://github.com/lobehub/lobe-chat/commit/3dc45fe))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.6.0](https://github.com/lobehub/lobe-chat/compare/v0.5.0...v0.6.0)
+
+<sup>Released on **2023-07-22**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 重构 selector 文件组织.
+
+#### ✨ Features
+
+- **misc**: 补充 token 详情.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 重构 selector 文件组织 ([2ad0ef9](https://github.com/lobehub/lobe-chat/commit/2ad0ef9))
+
+#### What's improved
+
+- **misc**: 补充 token 详情 ([098f7ff](https://github.com/lobehub/lobe-chat/commit/098f7ff))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.5.0](https://github.com/lobehub/lobe-chat/compare/v0.4.3...v0.5.0)
 
 <sup>Released on **2023-07-22**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -71,6 +71,7 @@
     "antd-style": "^3",
     "brotli-wasm": "^1",
     "chroma-js": "^2",
+    "emoji-mart": "^5",
     "fast-deep-equal": "^3",
     "gpt-tokenizer": "^2",
     "i18next": "^23",

package/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': '更新提示词',
 };

package/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}

package/src/store/session/slices/chat/{selectors.ts → selectors/chat.ts}

@@ -1,13 +1,11 @@
-import { encode } from 'gpt-tokenizer';
-
 import { agentSelectors } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 
-import type { SessionStore } from '../../store';
-import { sessionSelectors } from '../session';
+import type { SessionStore } from '../../../store';
+import { sessionSelectors } from '../../session';
 
 // 展示在聊天框中的消息
-const currentChats = (s: SessionStore): ChatMessage[] => {
+export const currentChats = (s: SessionStore): ChatMessage[] => {
   const session = sessionSelectors.currentSession(s);
   if (!session) return [];
 
@@ -53,30 +51,8 @@ const currentChats = (s: SessionStore): ChatMessage[] => {
   return finalList;
 };
 
-const systemRoleSel = (s: SessionStore): string => {
+export const systemRoleSel = (s: SessionStore): string => {
   const config = agentSelectors.currentAgentConfigSafe(s);
 
   return config.systemRole;
 };
-
-const systemRoleTokens = (s: SessionStore): number[] => {
-  const systemRole = systemRoleSel(s);
-
-  return encode(systemRole || '');
-};
-
-const chatsTokens = (s: SessionStore): number[] => {
-  const chats = currentChats(s);
-  return encode(chats.map((m) => m.content).join(''));
-};
-
-const systemRoleTokenCount = (s: SessionStore) => systemRoleTokens(s).length;
-
-const totalTokenCount = (s: SessionStore) => chatsTokens(s).length + systemRoleTokenCount(s);
-
-export const chatSelectors = {
-  currentChats,
-  systemRoleTokenCount,
-  systemRoleTokens,
-  totalTokenCount,
-};

package/src/store/session/slices/chat/selectors/index.ts

@@ -0,0 +1,9 @@
+import { currentChats } from './chat';
+import { chatsTokenCount, systemRoleTokenCount, totalTokenCount } from './token';
+
+export const chatSelectors = {
+  chatsTokenCount,
+  currentChats,
+  systemRoleTokenCount,
+  totalTokenCount,
+};

package/src/store/session/slices/chat/selectors/token.ts

@@ -0,0 +1,21 @@
+import { encode } from 'gpt-tokenizer';
+
+import type { SessionStore } from '../../../store';
+import { currentChats, systemRoleSel } from './chat';
+
+const systemRoleTokens = (s: SessionStore): number[] => {
+  const systemRole = systemRoleSel(s);
+
+  return encode(systemRole || '');
+};
+
+const chatsTokens = (s: SessionStore): number[] => {
+  const chats = currentChats(s);
+  return encode(chats.map((m) => m.content).join(''));
+};
+
+export const chatsTokenCount = (s: SessionStore) => chatsTokens(s).length;
+
+export const systemRoleTokenCount = (s: SessionStore) => systemRoleTokens(s).length;
+
+export const totalTokenCount = (s: SessionStore) => chatsTokens(s).length + systemRoleTokenCount(s);