@lobehub/chat 0.4.3 → 0.6.0

package/CHANGELOG.md

@@ -2,6 +2,72 @@
 
 # Changelog
 
+## [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>
+
+#### ✨ Features
+
+- **misc**: 支持选择 Emoji.
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正 total token 计算不正确的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 支持选择 Emoji ([6cb4828](https://github.com/lobehub/lobe-chat/commit/6cb4828))
+
+#### What's fixed
+
+- **misc**: 修正 total token 计算不正确的问题 ([17815c6](https://github.com/lobehub/lobe-chat/commit/17815c6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.4.3](https://github.com/lobehub/lobe-chat/compare/v0.4.2...v0.4.3)
 
 <sup>Released on **2023-07-22**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.4.3",
+  "version": "0.6.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -61,6 +61,8 @@
     "@ant-design/colors": "^7",
     "@ant-design/icons": "^5",
     "@commitlint/cli": "^17",
+    "@emoji-mart/data": "^1",
+    "@emoji-mart/react": "^1",
     "@lobehub/ui": "^1",
     "@vercel/analytics": "^1",
     "ahooks": "^3",

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/pages/chat/[id]/edit/AgentConfig/index.tsx

@@ -1,4 +1,4 @@
-import { Collapse, InputNumber, Segmented, Slider } from 'antd';
+import { Collapse, ConfigProvider, InputNumber, Segmented, Slider } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -21,7 +21,15 @@ const AgentConfig = () => {
   const [updateAgentConfig] = useSessionStore((s) => [s.updateAgentConfig], shallow);
 
   return (
-    <>
+    <ConfigProvider
+      theme={{
+        components: {
+          Segmented: {
+            colorBgLayout: theme.isDarkMode ? '#111' : '#f1f1f1',
+          },
+        },
+      }}
+    >
       <Flexbox
         align={'center'}
         distribution={'space-between'}
@@ -87,8 +95,8 @@ const AgentConfig = () => {
             },
           ]}
         />
-      </Flexbox>
-    </>
+      </Flexbox>{' '}
+    </ConfigProvider>
   );
 };
 

package/src/pages/chat/[id]/edit/AgentMeta/EmojiPicker.tsx

@@ -0,0 +1,74 @@
+import data from '@emoji-mart/data';
+import i18n from '@emoji-mart/data/i18n/zh.json';
+import Picker from '@emoji-mart/react';
+import { Avatar } from '@lobehub/ui';
+import { Popover } from 'antd';
+import { createStyles } from 'antd-style';
+import chroma from 'chroma-js';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+const useStyles = createStyles(({ css, token, prefixCls }) => ({
+  avatar: css`
+    border-radius: 50%;
+    transition: scale 400ms ${token.motionEaseOut}, box-shadow 100ms ${token.motionEaseOut};
+
+    &:hover {
+      box-shadow: 0 0 0 3px ${token.colorText};
+    }
+
+    &:active {
+      scale: 0.8;
+    }
+  `,
+  picker: css`
+    em-emoji-picker {
+      --rgb-accent: ${chroma(token.colorPrimary) .rgb() .join(',')};
+      --shadow: none;
+    }
+  `,
+  popover: css`
+    .${prefixCls}-popover-inner {
+      padding: 0;
+    }
+  `,
+}));
+
+const EmojiPicker = () => {
+  const { styles } = useStyles();
+  const [avatar, updateAgentMeta] = useSessionStore(
+    (s) => [agentSelectors.currentAgentAvatar(s), s.updateAgentMeta],
+    shallow,
+  );
+
+  return (
+    <Popover
+      content={
+        <div className={styles.picker}>
+          <Picker
+            data={data}
+            i18n={i18n}
+            locale={'zh'}
+            onEmojiSelect={(e: any) => {
+              updateAgentMeta({ avatar: e.native });
+            }}
+            skinTonePosition={'none'}
+            theme={'auto'}
+          />
+        </div>
+      }
+      placement={'left'}
+      rootClassName={styles.popover}
+      trigger={'click'}
+    >
+      <div className={styles.avatar} style={{ width: 'fit-content' }}>
+        <Avatar avatar={avatar} size={200} />
+      </div>
+    </Popover>
+  );
+};
+
+export default memo(EmojiPicker);

package/src/pages/chat/[id]/edit/AgentMeta/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Avatar, Input, Tooltip } from '@lobehub/ui';
+import { ActionIcon, Input, Tooltip } from '@lobehub/ui';
 import { Button, Collapse } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideSparkles } from 'lucide-react';
@@ -10,6 +10,7 @@ import { agentSelectors, useSessionStore } from '@/store/session';
 
 import { FormItem } from '../FormItem';
 import { useStyles } from '../style';
+import EmojiPicker from './EmojiPicker';
 
 const AgentMeta = () => {
   const { t } = useTranslation('common');
@@ -83,7 +84,7 @@ const AgentMeta = () => {
                 ))}
               </Flexbox>
               <FormItem label={t('agentAvatar')}>
-                <Avatar avatar={metaData.avatar} size={200} />
+                <EmojiPicker />
               </FormItem>
             </Flexbox>
           ),

package/src/prompts/agent.ts

@@ -35,15 +35,25 @@ export const promptSummaryAgentName = (content: string): Partial<OpenAIStreamPay
 export const promptPickEmoji = (content: string): Partial<OpenAIStreamPayload> => ({
   messages: [
     {
-      content: `你是一名非常懂设计与时尚的设计师，你需要从用户的描述中匹配一个合适的 emoji。
-输入:你是一名精通体验设计的设计系统设计师，设计系统存在诸多类别的 token，比如品牌色、成功色等，你需要为各个类别的 token 提供说明文案。
-输出: 💅
-
-输入:用户会输入一串 ts 代码，为了确保所有功能和分支的 100% 的覆盖率，你需要给出需要考虑哪些数据场景。
-输出: 🧪
-`,
+      content: '你是一名非常懂设计与时尚的设计师，你需要从用户的描述中匹配一个合适的 emoji。',
       role: 'system',
     },
+    {
+      content: `输入:你是一名精通体验设计的设计系统设计师，设计系统存在诸多类别的 token，比如品牌色、成功色等，你需要为各个类别的 token 提供说明文案。`,
+      role: 'user',
+    },
+    {
+      content: `💅`,
+      role: 'assistant',
+    },
+    {
+      content: `输入:用户会输入一串 ts 代码，为了确保所有功能和分支的 100% 的覆盖率，你需要给出需要考虑哪些数据场景。`,
+      role: 'user',
+    },
+    {
+      content: `🧪`,
+      role: 'assistant',
+    },
     {
       content: `输入:${content}`,
       role: 'user',
@@ -54,11 +64,12 @@ export const promptPickEmoji = (content: string): Partial<OpenAIStreamPayload> =
 export const promptSummaryDescription = (content: string): Partial<OpenAIStreamPayload> => ({
   messages: [
     {
-      content: '你是一名擅长会话的助理，你需要将用户的提示词做一个3句话以内的总结。',
+      content:
+        '你是一名擅长会话的助理，你需要将用户的输入的内容总结为一个专家的简介，不超过 20 个字',
       role: 'system',
     },
     {
-      content: `输入:${content}`,
+      content: `${content}`,
       role: 'user',
     },
   ],

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,31 +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 totalTokens = (s: SessionStore): number[] => {
-  const chats = currentChats(s);
-  return encode(chats.map((m) => m.content).join(''));
-};
-
-const systemRoleTokens = (s: SessionStore): number[] => {
-  const systemRole = systemRoleSel(s);
-
-  return encode(systemRole || '');
-};
-
-const totalTokenCount = (s: SessionStore) => totalTokens(s).length;
-
-const systemRoleTokenCount = (s: SessionStore) => systemRoleTokens(s).length;
-
-export const chatSelectors = {
-  currentChats,
-  systemRoleTokenCount,
-  systemRoleTokens,
-  totalTokenCount,
-  totalTokens,
-};

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);