@lobehub/chat 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+## [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>
+
+#### ♻ Code Refactoring
+
+- **misc**: 优化 edit 代码结构.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 优化 edit 代码结构 ([fdb3a3f](https://github.com/lobehub/lobe-chat/commit/fdb3a3f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.4.2](https://github.com/lobehub/lobe-chat/compare/v0.4.1...v0.4.2)
 
 <sup>Released on **2023-07-22**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.4.2",
+  "version": "0.5.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/pages/chat/[id]/Config/index.tsx

@@ -12,8 +12,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import HeaderSpacing from '@/components/HeaderSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
-import HeaderSpacing from '@/features/HeaderSpacing';
 import { useSessionStore } from '@/store/session';
 
 import ReadMode from './ReadMode';

package/src/pages/chat/[id]/Conversation/index.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/features/HeaderSpacing';
+import HeaderSpacing from '@/components/HeaderSpacing';
 import ChatInput from '@/pages/chat/[id]/Conversation/Input';
 
 import ChatList from './ChatList';

package/src/pages/chat/[id]/edit/{Prompt.tsx → AgentConfig/Prompt.tsx}

@@ -8,7 +8,7 @@ import { shallow } from 'zustand/shallow';
 
 import { agentSelectors, useSessionStore } from '@/store/session';
 
-import { FormItem } from './FormItem';
+import { FormItem } from '../FormItem';
 
 export const useStyles = createStyles(({ css, token }) => ({
   input: css`

package/src/pages/chat/[id]/edit/{AgentConfig.tsx → 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';
@@ -7,9 +7,9 @@ import { shallow } from 'zustand/shallow';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 
-import { FormItem } from './FormItem';
+import { FormItem } from '../FormItem';
+import { useStyles } from '../style';
 import Prompt from './Prompt';
-import { useStyles } from './style';
 
 const AgentConfig = () => {
   const { t } = useTranslation('common');
@@ -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.tsx → 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';
@@ -8,8 +8,9 @@ import { shallow } from 'zustand/shallow';
 
 import { agentSelectors, useSessionStore } from '@/store/session';
 
-import { FormItem } from './FormItem';
-import { useStyles } from './style';
+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/pages/chat/[id]/edit/index.page.tsx

@@ -7,7 +7,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/features/HeaderSpacing';
+import HeaderSpacing from '@/components/HeaderSpacing';
 
 import ChatLayout from '../../layout';
 import AgentConfig from './AgentConfig';

package/src/pages/setting/index.page.tsx

@@ -3,7 +3,7 @@ import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/features/HeaderSpacing';
+import HeaderSpacing from '@/components/HeaderSpacing';
 import { createI18nNext } from '@/locales/create';
 import ChatLayout from '@/pages/chat/layout';
 

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

@@ -59,25 +59,24 @@ const systemRoleSel = (s: SessionStore): string => {
   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 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,
-  totalTokens,
 };

package/src/store/settings/action.ts

@@ -7,11 +7,33 @@ import type { SidebarTabKey } from './initialState';
 import { DEFAULT_SETTINGS, GlobalSettingsState } from './initialState';
 import type { SettingsStore } from './store';
 
+/**
+ * 设置操作
+ */
 export interface SettingsAction {
+  /**
+   * 重置设置
+   */
   resetSettings: () => void;
+  /**
+   * 设置全局设置
+   * @param settings - 全局设置
+   */
   setGlobalSettings: (settings: GlobalSettingsState) => void;
+  /**
+   * 设置部分配置设置
+   * @param settings - 部分配置设置
+   */
   setSettings: (settings: Partial<ConfigSettings>) => void;
+  /**
+   * 设置主题模式
+   * @param themeMode - 主题模式
+   */
   setThemeMode: (themeMode: ThemeMode) => void;
+  /**
+   * 切换侧边栏选项
+   * @param key - 选中的侧边栏选项
+   */
   switchSideBar: (key: SidebarTabKey) => void;
 }
 

package/src/store/settings/initialState.ts

@@ -1,6 +1,8 @@
 import type { ConfigSettings } from '@/types/exportConfig';
+import { LanguageModel } from '@/types/llm';
 
 export type SidebarTabKey = 'chat' | 'market';
+
 export const DEFAULT_SETTINGS: ConfigSettings = {
   accessCode: '',
   avatar: '',
@@ -14,7 +16,7 @@ export const DEFAULT_SETTINGS: ConfigSettings = {
   historyCount: 24,
   language: 'zh-CN',
   maxTokens: 2000,
-  model: 'gpt-3.5-turbo',
+  model: LanguageModel.GPT3_5,
   neutralColor: '',
   presencePenalty: 0,
   primaryColor: '',

package/src/types/exportConfig.ts

@@ -1,6 +1,8 @@
 import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
 import { ThemeMode } from 'antd-style';
 
+import { LanguageModel } from '@/types/llm';
+
 import { Locales } from './locale';
 
 /**
@@ -19,7 +21,7 @@ export interface ConfigSettings {
   historyCount: number;
   language: Locales;
   maxTokens: number;
-  model: string;
+  model: LanguageModel;
   neutralColor: NeutralColors | '';
   presencePenalty: number;
   primaryColor: PrimaryColors | '';

package/tsconfig.json

@@ -18,7 +18,7 @@
     "baseUrl": ".",
     "types": ["vitest/globals"],
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["./src/*"]
     }
   },
   "exclude": ["node_modules"],

package/src/helpers/prompt.test.ts

@@ -1,36 +0,0 @@
-import { ChatMessage } from '@lobehub/ui';
-
-import { getInputVariablesFromMessages } from '@/helpers/prompt';
-
-describe('getInputVariablesFromMessages 方法', () => {
-  it('应当在输入为空数组时返回空数组', () => {
-    const result = getInputVariablesFromMessages([]);
-    expect(result).toEqual([]);
-  });
-
-  it('应当在输入消息不包含变量时返回空数组', () => {
-    const input: ChatMessage[] = [{ role: 'user', content: 'Hello, how are you?' }];
-    const result = getInputVariablesFromMessages(input);
-    expect(result).toEqual([]);
-  });
-
-  it('应当在输入消息包含变量时返回包含变量、模板和消息索引的对象数组', () => {
-    const input: ChatMessage[] = [
-      { role: 'user', content: 'Hello {name}, how are you?' },
-      { role: 'user', content: 'My name is {name}' },
-    ];
-    const expectedOutput = ['name'];
-    const result = getInputVariablesFromMessages(input);
-    expect(result).toEqual(expectedOutput);
-  });
-
-  it('多个变量的情况', () => {
-    const input: ChatMessage[] = [
-      { role: 'user', content: 'Hello {name}, how are {you}?' },
-      { role: 'user', content: 'My name is {name}' },
-    ];
-    const expectedOutput = ['name', 'you'];
-    const result = getInputVariablesFromMessages(input);
-    expect(result).toEqual(expectedOutput);
-  });
-});

package/src/helpers/prompt.ts

@@ -1,36 +0,0 @@
-import { ChatMessage } from '@lobehub/ui';
-import {
-  AIMessagePromptTemplate,
-  ChatPromptTemplate,
-  HumanMessagePromptTemplate,
-  SystemMessagePromptTemplate,
-} from 'langchain/prompts';
-
-export const getChatPromptTemplate = (chatMessages: ChatMessage[]) =>
-  ChatPromptTemplate.fromPromptMessages(
-    chatMessages.map((m) => {
-      switch (m.role) {
-        default:
-        case 'user': {
-          return HumanMessagePromptTemplate.fromTemplate(m.content);
-        }
-
-        case 'system': {
-          return SystemMessagePromptTemplate.fromTemplate(m.content);
-        }
-
-        case 'assistant': {
-          return AIMessagePromptTemplate.fromTemplate(m.content);
-        }
-      }
-    }),
-  );
-export const getInputVariablesFromMessages = (chatMessages: ChatMessage[]) => {
-  let inputVariables: string[] = [];
-  try {
-    const chatPrompt = getChatPromptTemplate(chatMessages);
-    inputVariables = chatPrompt.inputVariables;
-  } catch {}
-
-  return inputVariables;
-};