@lobehub/chat 0.92.0 → 0.93.0

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+## [Version 0.93.0](https://github.com/lobehub/lobe-chat/compare/v0.92.0...v0.93.0)
+
+<sup>Released on **2023-10-18**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor chain.
+
+#### ✨ Features
+
+- **misc**: Support multi-language translate.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor chain ([49c4863](https://github.com/lobehub/lobe-chat/commit/49c4863))
+
+#### What's improved
+
+- **misc**: Support multi-language translate ([548bc5d](https://github.com/lobehub/lobe-chat/commit/548bc5d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.92.0](https://github.com/lobehub/lobe-chat/compare/v0.91.0...v0.92.0)
 
 <sup>Released on **2023-10-18**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.92.0",
+  "version": "0.93.0",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",

package/src/app/chat/features/Conversation/ChatList/Actions/customAction.ts

@@ -2,14 +2,16 @@ import { ActionIconGroupItems } from '@lobehub/ui/es/ActionIconGroup';
 import { LanguagesIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
+import { localeOptions } from '@/locales/options';
+
 export const useCustomActions = () => {
   const { t } = useTranslation('chat');
 
   const translate = {
-    // children: localeOptions.map((i) => ({
-    //   key: i.value,
-    //   label: t(`lang.${i.value}`, { ns: 'common' }),
-    // })),
+    children: localeOptions.map((i) => ({
+      key: i.value,
+      label: t(`lang.${i.value}`, { ns: 'common' }),
+    })),
     icon: LanguagesIcon,
     key: 'translate',
     label: t('translateTo'),

package/src/app/chat/features/Conversation/ChatList/index.tsx

@@ -5,7 +5,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 import { PREFIX_KEY, REGENERATE_KEY } from '@/const/hotkeys';
-import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, chatSelectors } from '@/store/session/selectors';
 
@@ -43,14 +42,11 @@ const List = memo(() => {
     ];
   });
 
-  const targetLang = useGlobalStore(settingsSelectors.currentLanguage);
-
   const hotkeys = [PREFIX_KEY, REGENERATE_KEY].join('+');
 
   useHotkeys(
     hotkeys,
     () => {
-      console.log(111);
       const lastMessage = data.at(-1);
       if (!lastMessage || lastMessage.id === 'default' || lastMessage.role === 'system') return;
       resendMessage(lastMessage.id);
@@ -68,17 +64,28 @@ const List = memo(() => {
       enableHistoryCount={enableHistoryCount}
       historyCount={historyCount}
       loadingId={chatLoadingId}
-      onActionsClick={{
-        del: ({ id }) => deleteMessage(id),
-        regenerate: ({ id, error }) => {
-          resendMessage(id);
+      onActionsClick={(action, { id, error }) => {
+        switch (action.key) {
+          case 'del': {
+            deleteMessage(id);
+            break;
+          }
+          case 'regenerate': {
+            resendMessage(id);
+
+            // if this message is an error message, we need to delete it
+            if (error) deleteMessage(id);
+            break;
+          }
+        }
 
-          // if this message is an error message, we need to delete it
-          if (error) deleteMessage(id);
-        },
-        translate: ({ id }) => {
-          translateMessage(id, targetLang);
-        },
+        // click the menu item with translate item, the result is:
+        // key: 'en-US'
+        // keyPath: ['en-US','translate']
+        if (action.keyPath.at(-1) === 'translate') {
+          const lang = action.keyPath[0];
+          translateMessage(id, lang);
+        }
       }}
       onMessageChange={(id, content) =>
         dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content })

package/src/chains/langDetect.ts

@@ -0,0 +1,31 @@
+import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+
+export const chainLangDetect = (content: string): Partial<OpenAIChatStreamPayload> => ({
+  messages: [
+    {
+      content:
+        '你是一名精通全世界语言的语言专家，你需要识别用户输入的内容，以国际标准 locale 进行输出',
+      role: 'system',
+    },
+    {
+      content: '{你好}',
+      role: 'user',
+    },
+    {
+      content: 'zh-CN',
+      role: 'assistant',
+    },
+    {
+      content: '{hello}',
+      role: 'user',
+    },
+    {
+      content: 'en-US',
+      role: 'assistant',
+    },
+    {
+      content: `{${content}}`,
+      role: 'user',
+    },
+  ],
+});

package/src/chains/pickEmoji.ts

@@ -0,0 +1,34 @@
+import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+
+/**
+ * pick emoji for user prompt
+ * @param content
+ */
+export const chainPickEmoji = (content: string): Partial<OpenAIChatStreamPayload> => ({
+  messages: [
+    {
+      content: '你是一名非常懂设计与时尚的设计师，你需要从用户的描述中匹配一个合适的 emoji。',
+      role: 'system',
+    },
+    {
+      content: `输入:你是一名精通体验设计的设计系统设计师，设计系统存在诸多类别的 token，比如品牌色、成功色等，你需要为各个类别的 token 提供说明文案。`,
+      role: 'user',
+    },
+    {
+      content: `💅`,
+      role: 'assistant',
+    },
+    {
+      content: `输入:用户会输入一串 ts 代码，为了确保所有功能和分支的 100% 的覆盖率，你需要给出需要考虑哪些数据场景。`,
+      role: 'user',
+    },
+    {
+      content: `🧪`,
+      role: 'assistant',
+    },
+    {
+      content: `输入:${content}`,
+      role: 'user',
+    },
+  ],
+});

package/src/chains/{agent.ts → summaryAgentName.ts}

@@ -1,7 +1,10 @@
 import { OpenAIChatStreamPayload } from '@/types/openai/chat';
 
-// 自动起名
-export const promptSummaryAgentName = (content: string): Partial<OpenAIChatStreamPayload> => ({
+/**
+ * summary agent name for user prompt
+ * @param content
+ */
+export const chainSummaryAgentName = (content: string): Partial<OpenAIChatStreamPayload> => ({
   messages: [
     {
       content: `你是一名擅长起名的起名大师，你需要将用户的描述总结为 20 个字以内的角色，格式要求如下：
@@ -30,47 +33,3 @@ export const promptSummaryAgentName = (content: string): Partial<OpenAIChatStrea
     { content: `输入: {${content}}`, role: 'user' },
   ],
 });
-
-// 自动挑选 emoji 和背景色
-export const promptPickEmoji = (content: string): Partial<OpenAIChatStreamPayload> => ({
-  messages: [
-    {
-      content: '你是一名非常懂设计与时尚的设计师，你需要从用户的描述中匹配一个合适的 emoji。',
-      role: 'system',
-    },
-    {
-      content: `输入:你是一名精通体验设计的设计系统设计师，设计系统存在诸多类别的 token，比如品牌色、成功色等，你需要为各个类别的 token 提供说明文案。`,
-      role: 'user',
-    },
-    {
-      content: `💅`,
-      role: 'assistant',
-    },
-    {
-      content: `输入:用户会输入一串 ts 代码，为了确保所有功能和分支的 100% 的覆盖率，你需要给出需要考虑哪些数据场景。`,
-      role: 'user',
-    },
-    {
-      content: `🧪`,
-      role: 'assistant',
-    },
-    {
-      content: `输入:${content}`,
-      role: 'user',
-    },
-  ],
-});
-
-export const promptSummaryDescription = (content: string): Partial<OpenAIChatStreamPayload> => ({
-  messages: [
-    {
-      content:
-        '你是一名擅长会话的助理，你需要将用户的输入的内容总结为一个专家的简介，不超过 20 个字',
-      role: 'system',
-    },
-    {
-      content: `${content}`,
-      role: 'user',
-    },
-  ],
-});

package/src/chains/summaryDescription.ts

@@ -0,0 +1,15 @@
+import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+
+export const chainSummaryDescription = (content: string): Partial<OpenAIChatStreamPayload> => ({
+  messages: [
+    {
+      content:
+        '你是一名擅长会话的助理，你需要将用户的输入的内容总结为一个专家的简介，不超过 20 个字',
+      role: 'system',
+    },
+    {
+      content: `${content}`,
+      role: 'user',
+    },
+  ],
+});

package/src/chains/summaryTitle.ts

@@ -0,0 +1,32 @@
+import { chatHelpers } from '@/store/session/slices/chat/helpers';
+import { LanguageModel } from '@/types/llm';
+import { OpenAIChatMessage, OpenAIChatStreamPayload } from '@/types/openai/chat';
+
+export const chainSummaryTitle = async (
+  messages: OpenAIChatMessage[],
+): Promise<Partial<OpenAIChatStreamPayload>> => {
+  const finalMessages: OpenAIChatMessage[] = [
+    {
+      content:
+        '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不需要包含标点符号',
+      role: 'system',
+    },
+    {
+      content: `${messages.map((message) => `${message.role}: ${message.content}`).join('\n')}
+
+请总结上述对话为10个字以内的标题，不需要包含标点符号`,
+      role: 'user',
+    },
+  ];
+  // 如果超过 4k，则使用 GPT3.5 16K 模型
+  const tokens = await chatHelpers.getMessagesTokenCount(finalMessages);
+  let model: LanguageModel | undefined = undefined;
+  if (tokens > 4000) {
+    model = LanguageModel.GPT3_5_16K;
+  }
+
+  return {
+    messages: finalMessages,
+    model,
+  };
+};

package/src/chains/translate.ts

@@ -0,0 +1,17 @@
+import { OpenAIChatStreamPayload } from '@/types/openai/chat';
+
+export const chainTranslate = (
+  content: string,
+  targetLang: string,
+): Partial<OpenAIChatStreamPayload> => ({
+  messages: [
+    {
+      content: '你是一名擅长翻译的助理，你需要将输入的语言翻译为目标语言',
+      role: 'system',
+    },
+    {
+      content: `请将以下内容 ${content}，翻译为 ${targetLang} `,
+      role: 'user',
+    },
+  ],
+});

package/src/features/AgentSetting/store/action.ts

@@ -1,6 +1,8 @@
 import { StateCreator } from 'zustand/vanilla';
 
-import { promptPickEmoji, promptSummaryAgentName, promptSummaryDescription } from '@/chains/agent';
+import { chainPickEmoji } from '@/chains/pickEmoji';
+import { chainSummaryAgentName } from '@/chains/summaryAgentName';
+import { chainSummaryDescription } from '@/chains/summaryDescription';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
 import { fetchPresetTaskResult } from '@/utils/fetch';
@@ -73,7 +75,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
       onLoadingChange: (loading) => {
         get().updateLoadingState('avatar', loading);
       },
-      params: promptPickEmoji(systemRole),
+      params: chainPickEmoji(systemRole),
     });
 
     if (emoji) {
@@ -100,7 +102,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
         updateLoadingState('description', loading);
       },
       onMessageHandle: streamUpdateMeta('description'),
-      params: promptSummaryDescription(systemRole),
+      params: chainSummaryDescription(systemRole),
     });
   },
   autocompleteAgentTitle: async () => {
@@ -123,7 +125,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
         updateLoadingState('title', loading);
       },
       onMessageHandle: streamUpdateMeta('title'),
-      params: promptSummaryAgentName(systemRole),
+      params: chainSummaryAgentName(systemRole),
     });
   },
   autocompleteAllMeta: (replace) => {

package/src/store/session/slices/chat/actions/topic.ts

@@ -1,6 +1,6 @@
 import { StateCreator } from 'zustand/vanilla';
 
-import { chainSummaryTitle } from '@/chains/chat';
+import { chainSummaryTitle } from '@/chains/summaryTitle';
 import { LOADING_FLAT } from '@/const/message';
 import { SessionStore } from '@/store/session';
 import { fetchPresetTaskResult } from '@/utils/fetch';

package/src/store/session/slices/chat/actions/translate.ts

@@ -1,7 +1,8 @@
 import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
-import { chainLangDetect, chainTranslate } from '@/chains/chat';
+import { chainLangDetect } from '@/chains/langDetect';
+import { chainTranslate } from '@/chains/translate';
 import { supportLocales } from '@/locales/options';
 import { SessionStore } from '@/store/session';
 import { fetchPresetTaskResult } from '@/utils/fetch';

package/src/chains/chat.ts

@@ -1,77 +0,0 @@
-import { chatHelpers } from '@/store/session/helpers';
-import { LanguageModel } from '@/types/llm';
-import { OpenAIChatMessage, OpenAIChatStreamPayload } from '@/types/openai/chat';
-
-export const chainSummaryTitle = async (
-  messages: OpenAIChatMessage[],
-): Promise<Partial<OpenAIChatStreamPayload>> => {
-  const finalMessages: OpenAIChatMessage[] = [
-    {
-      content:
-        '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不需要包含标点符号',
-      role: 'system',
-    },
-    {
-      content: `${messages.map((message) => `${message.role}: ${message.content}`).join('\n')}
-
-请总结上述对话为10个字以内的标题，不需要包含标点符号`,
-      role: 'user',
-    },
-  ];
-  // 如果超过 4k，则使用 GPT3.5 16K 模型
-  const tokens = await chatHelpers.getMessagesTokenCount(finalMessages);
-  let model: LanguageModel | undefined = undefined;
-  if (tokens > 4000) {
-    model = LanguageModel.GPT3_5_16K;
-  }
-
-  return {
-    messages: finalMessages,
-    model,
-  };
-};
-
-export const chainTranslate = (
-  content: string,
-  targetLang: string,
-): Partial<OpenAIChatStreamPayload> => ({
-  messages: [
-    {
-      content: '你是一名擅长翻译的助理，你需要将输入的语言翻译为目标语言',
-      role: 'system',
-    },
-    {
-      content: `请将以下内容 ${content}，翻译为 ${targetLang} `,
-      role: 'user',
-    },
-  ],
-});
-export const chainLangDetect = (content: string): Partial<OpenAIChatStreamPayload> => ({
-  messages: [
-    {
-      content:
-        '你是一名精通全世界语言的语言专家，你需要识别用户输入的内容，以国际标准 locale 进行输出',
-      role: 'system',
-    },
-    {
-      content: '{你好}',
-      role: 'user',
-    },
-    {
-      content: 'zh-CN',
-      role: 'assistant',
-    },
-    {
-      content: '{hello}',
-      role: 'user',
-    },
-    {
-      content: 'en-US',
-      role: 'assistant',
-    },
-    {
-      content: `{${content}}`,
-      role: 'user',
-    },
-  ],
-});