@lobehub/chat 0.37.0 → 0.39.0

package/CHANGELOG.md

@@ -2,6 +2,65 @@
 
 # Changelog
 
+## [Version 0.39.0](https://github.com/lobehub/lobe-chat/compare/v0.38.0...v0.39.0)
+
+<sup>Released on **2023-08-04**</sup>
+
+#### ✨ Features
+
+- **misc**: 支持多轮的插件意图识别, 支持自定义 OpenAI 代理地址.
+
+#### 💄 Styles
+
+- **misc**: 优化插件的展示逻辑.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 支持多轮的插件意图识别 ([5127f1b](https://github.com/lobehub/lobe-chat/commit/5127f1b))
+- **misc**: 支持自定义 OpenAI 代理地址 ([33a111c](https://github.com/lobehub/lobe-chat/commit/33a111c))
+
+#### Styles
+
+- **misc**: 优化插件的展示逻辑 ([7621bad](https://github.com/lobehub/lobe-chat/commit/7621bad))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.38.0](https://github.com/lobehub/lobe-chat/compare/v0.37.0...v0.38.0)
+
+<sup>Released on **2023-08-04**</sup>
+
+#### ✨ Features
+
+- **misc**: Add topic empty.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add topic empty ([b9f267c](https://github.com/lobehub/lobe-chat/commit/b9f267c))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.37.0](https://github.com/lobehub/lobe-chat/compare/v0.36.1...v0.37.0)
 
 <sup>Released on **2023-08-03**</sup>

package/locales/en_US/empty.json

@@ -0,0 +1,6 @@
+{
+  "topic": {
+    "desc": "Click the button on the left to save the current conversation as a historical topic and start a new conversation",
+    "title": "Topic List"
+  }
+}

package/locales/en_US/setting.json

@@ -61,7 +61,10 @@
       "title": "Enable History Message Length Compression Threshold"
     },
     "enableHistoryCount": {
-      "title": "Enable History Message Count Limit"
+      "title": "Enable History Message Count Limit",
+      "alias": "Unlimited",
+      "limited": "Only include {{number}} chat messages",
+      "unlimited": "Unlimited chat history"
     },
     "historyCount": {
       "desc": "Number of history messages carried in each request",

package/locales/zh_CN/empty.json

@@ -0,0 +1,6 @@
+{
+  "topic": {
+    "desc": "点击发送左侧按钮可将当前会话保存为历史话题，并开启新一轮会话",
+    "title": "话题列表"
+  }
+}

package/locales/zh_CN/setting.json

@@ -61,7 +61,10 @@
       "title": "是否开启历史消息长度压缩阈值"
     },
     "enableHistoryCount": {
-      "title": "是否开启携带的历史消息数限制"
+      "alias": "不限制",
+      "limited": "只包含 {{number}} 条会话消息",
+      "title": "限制历史消息数",
+      "unlimited": "不限历史消息数"
     },
     "historyCount": {
       "desc": "每次请求携带的历史消息数",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.37.0",
+  "version": "0.39.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/components/Empty/index.tsx

@@ -0,0 +1,34 @@
+import { ActionIcon } from '@lobehub/ui';
+import { X } from 'lucide-react';
+import { memo, useState } from 'react';
+
+import { useStyles } from './style';
+
+interface EmptyProps {
+  cover: string;
+  desc: string;
+  title: string;
+}
+
+const Empty = memo<EmptyProps>(({ cover, title, desc }) => {
+  const [visiable, setVisiable] = useState(true);
+  const { styles } = useStyles();
+  if (!visiable) return null;
+  return (
+    <div className={styles.container}>
+      <ActionIcon
+        className={styles.close}
+        icon={X}
+        onClick={() => setVisiable(false)}
+        size={{ blockSize: 24, fontSize: 16 }}
+      />
+      {cover && <img alt="empty" src={cover} width="100%" />}
+      <div className={styles.content}>
+        {title && <h3>{title}</h3>}
+        {desc && <p className={styles.desc}>{desc}</p>}
+      </div>
+    </div>
+  );
+});
+
+export default Empty;

package/src/components/Empty/style.ts

@@ -0,0 +1,28 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  close: css`
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  `,
+  container: css`
+    position: relative;
+
+    overflow: hidden;
+
+    background: linear-gradient(
+      to bottom,
+      ${isDarkMode ? token.colorBgElevated : token.colorBgLayout},
+      ${token.colorBgContainer}
+    );
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadius}px;
+  `,
+  content: css`
+    padding: 0 16px 16px;
+  `,
+  desc: css`
+    color: ${token.colorTextDescription};
+  `,
+}));

package/src/const/fetch.ts

@@ -1,3 +1,5 @@
+export const OPENAI_END_POINT = 'X-OPENAI-END_POINT';
+
 export const OPENAI_API_KEY_HEADER_KEY = 'X-OPENAI-API-KEY';
 
 export const LOBE_CHAT_ACCESS_CODE = 'X-LOBE_CHAT_ACCESS_CODE';

package/src/locales/default/empty.ts

@@ -0,0 +1,6 @@
+export default {
+  topic: {
+    desc: '点击发送左侧按钮可将当前会话保存为历史话题，并开启新一轮会话',
+    title: '话题列表',
+  },
+};

package/src/locales/default/plugin.ts

@@ -1,4 +1,9 @@
 export default {
+  debug: {
+    arguments: '调用参数',
+    function_call: '函数调用',
+    response: '返回结果',
+  },
   loading: {
     content: '数据获取中...',
     plugin: '插件运行中...',
@@ -8,6 +13,7 @@ export default {
     realtimeWeather: '实时天气预报',
     searchEngine: '搜索引擎',
     undefined: '插件检测中...',
+
     websiteCrawler: '网页内容提取',
   },
   realtimeWeather: {

package/src/locales/resources/en_US.ts

@@ -1,3 +1,15 @@
-const resources = {} as const;
+import common from '../../../locales/en_US/common.json';
+import empty from '../../../locales/en_US/empty.json';
+import error from '../../../locales/en_US/error.json';
+import plugin from '../../../locales/en_US/plugin.json';
+import setting from '../../../locales/en_US/setting.json';
+
+const resources = {
+  common,
+  empty,
+  error,
+  plugin,
+  setting,
+} as const;
 
 export default resources;

package/src/locales/resources/zh_CN.ts

@@ -1,10 +1,12 @@
 import common from '../default/common';
+import empty from '../default/empty';
 import error from '../default/error';
 import plugin from '../default/plugin';
 import setting from '../default/setting';
 
 const resources = {
   common,
+  empty,
   error,
   plugin,
   setting,

package/src/pages/api/openai.api.ts

@@ -1,4 +1,4 @@
-import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
+import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
 import { ErrorType } from '@/types/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
@@ -12,6 +12,7 @@ export default async function handler(req: Request) {
   const payload = (await req.json()) as OpenAIStreamPayload;
   const apiKey = req.headers.get(OPENAI_API_KEY_HEADER_KEY);
   const accessCode = req.headers.get(LOBE_CHAT_ACCESS_CODE);
+  const endpoint = req.headers.get(OPENAI_END_POINT);
 
   const result = checkAuth({ accessCode, apiKey });
 
@@ -19,5 +20,5 @@ export default async function handler(req: Request) {
     return createErrorResponse(result.error as ErrorType);
   }
 
-  return createChatCompletion({ OPENAI_API_KEY: apiKey, payload });
+  return createChatCompletion({ OPENAI_API_KEY: apiKey, endpoint, payload });
 }

package/src/pages/api/openai.ts

@@ -11,19 +11,23 @@ import { OpenAIStreamPayload } from '@/types/openai';
 const isDev = process.env.NODE_ENV === 'development';
 
 // 创建 OpenAI 实例
-export const createOpenAI = (userApiKey: string | null) => {
+export const createOpenAI = (userApiKey: string | null, endpoint?: string | null) => {
   const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getServerConfig();
 
   const config = new Configuration({
     apiKey: !userApiKey ? OPENAI_API_KEY : userApiKey,
   });
 
-  return new OpenAIApi(config, isDev && OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined);
+  return new OpenAIApi(
+    config,
+    endpoint ? endpoint : isDev && OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined,
+  );
 };
 
 interface CreateChatCompletionOptions {
   OPENAI_API_KEY: string | null;
   callbacks?: (payload: OpenAIStreamPayload) => OpenAIStreamCallbacks;
+  endpoint?: string | null;
   payload: OpenAIStreamPayload;
 }
 
@@ -31,10 +35,11 @@ export const createChatCompletion = async ({
   payload,
   callbacks,
   OPENAI_API_KEY,
+  endpoint,
 }: CreateChatCompletionOptions) => {
   // ============  0.创建 OpenAI 实例   ============ //
 
-  const openai = createOpenAI(OPENAI_API_KEY);
+  const openai = createOpenAI(OPENAI_API_KEY, endpoint);
 
   const { messages, plugins: enabledPlugins, ...params } = payload;
 

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/FunctionCall.tsx

@@ -1,5 +1,6 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { Tabs } from 'antd';
 import { LucideChevronDown, LucideChevronUp, LucideToyBrick } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,14 +9,16 @@ import { Flexbox } from 'react-layout-kit';
 import { PluginsMap } from '@/plugins';
 import { OpenAIFunctionCall } from '@/types/chatMessage';
 
+import PluginResult from './PluginResultRender';
 import { useStyles } from './style';
 
 export interface FunctionCallProps {
+  content: string;
   function_call?: OpenAIFunctionCall;
   loading?: boolean;
 }
 
-const FunctionCall = memo<FunctionCallProps>(({ function_call, loading }) => {
+const FunctionCall = memo<FunctionCallProps>(({ function_call, loading, content }) => {
   const { t } = useTranslation('plugin');
   const { styles } = useStyles();
   const [open, setOpen] = useState(false);
@@ -28,7 +31,8 @@ const FunctionCall = memo<FunctionCallProps>(({ function_call, loading }) => {
     <Icon icon={LucideToyBrick} />
   );
 
-  const args = JSON.stringify(JSON.parse(function_call?.arguments || '{}'), null, 2);
+  const args = JSON.stringify(function_call, null, 2);
+  const params = JSON.stringify(JSON.parse(function_call?.arguments || '{}'), null, 2);
 
   return (
     <Flexbox gap={8}>
@@ -51,7 +55,27 @@ const FunctionCall = memo<FunctionCallProps>(({ function_call, loading }) => {
         {t(`plugins.${function_call?.name}` as any, { ns: 'plugin' })}
         <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
       </Flexbox>
-      {open && <Highlighter language={'json'}>{args}</Highlighter>}
+      {open && (
+        <Tabs
+          items={[
+            {
+              children: <Highlighter language={'json'}>{args}</Highlighter>,
+              key: 'function_call',
+              label: t('debug.function_call'),
+            },
+            {
+              children: <Highlighter language={'json'}>{params}</Highlighter>,
+              key: 'arguments',
+              label: t('debug.arguments'),
+            },
+            {
+              children: <PluginResult content={content} />,
+              key: 'response',
+              label: t('debug.response'),
+            },
+          ]}
+        />
+      )}
     </Flexbox>
   );
 });

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginMessage.tsx

@@ -6,8 +6,6 @@ import { Flexbox } from 'react-layout-kit';
 import { PluginsRender } from '@/plugins/Render';
 import { ChatMessage } from '@/types/chatMessage';
 
-import PluginResult from './PluginResultRender';
-
 export interface FunctionMessageProps extends ChatMessage {
   loading?: boolean;
 }
@@ -39,7 +37,7 @@ const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
     return <Render content={JSON.parse(content)} name={name || 'unknown'} />;
   }
 
-  return <PluginResult content={content} />;
+  return null;
 });
 
 export default PluginMessage;

package/src/pages/chat/[id]/Conversation/ChatList/Plugins/PluginResultRender.tsx

@@ -1,21 +1,11 @@
-import { Avatar, Highlighter, Icon } from '@lobehub/ui';
-import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import { useStyles } from './style';
+import { Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
 
 export interface FunctionMessageProps {
   content: string;
 }
 
 const PluginResult = memo<FunctionMessageProps>(({ content }) => {
-  const { t } = useTranslation('plugin');
-  const { styles } = useStyles();
-
-  const [open, setOpen] = useState(false);
-
   let data;
 
   try {
@@ -25,26 +15,9 @@ const PluginResult = memo<FunctionMessageProps>(({ content }) => {
   }
 
   return (
-    <Flexbox gap={8}>
-      <Flexbox
-        align={'center'}
-        className={styles.container}
-        gap={8}
-        horizontal
-        onClick={() => {
-          setOpen(!open);
-        }}
-      >
-        <Avatar avatar={'💾'} size={24} />
-        {t('responseData')}
-        <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
-      </Flexbox>
-      {open && (
-        <Highlighter language={'json'} style={{ maxHeight: 200, maxWidth: 600 }}>
-          {data}
-        </Highlighter>
-      )}
-    </Flexbox>
+    <Highlighter language={'json'} style={{ maxHeight: 200, maxWidth: 800 }}>
+      {data}
+    </Highlighter>
   );
 });
 

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

@@ -48,6 +48,7 @@ const List = () => {
         return (
           <Flexbox gap={12}>
             <FunctionCall
+              content={message.content}
               function_call={message.function_call}
               loading={message.id === chatLoadingId}
             />
@@ -58,6 +59,7 @@ const List = () => {
       if (message.role === 'assistant') {
         return isFunctionMessage(message.content) || !!message.function_call ? (
           <FunctionCall
+            content={message.content}
             function_call={message.function_call}
             loading={message.id === chatLoadingId}
           />

package/src/pages/chat/[id]/Sidebar/Topic/index.tsx

@@ -1,15 +1,28 @@
+import { useThemeMode } from 'antd-style';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import Empty from '@/components/Empty';
 import { topicSelectors, useSessionStore } from '@/store/session';
 
 import TopicItem from './TopicItem';
 
 export const Topic = () => {
   const topics = useSessionStore(topicSelectors.currentTopics);
+  const { isDarkMode } = useThemeMode();
   const [activeTopicId] = useSessionStore((s) => [s.activeTopicId], shallow);
+  const { t } = useTranslation('empty');
   return (
     <Flexbox gap={8}>
+      {topics?.length === 0 && (
+        <Empty
+          cover={`/images/empty_topic_${isDarkMode ? 'dark' : 'light'}.webp`}
+          desc={t('topic.desc')}
+          title={t('topic.title')}
+        />
+      )}
+
       <TopicItem active={!activeTopicId} fav={false} title={'默认话题'} />
 
       {topics.map(({ id, favorite, title }) => (

package/src/services/chatModel.ts

@@ -1,6 +1,6 @@
 import { merge } from 'lodash-es';
 
-import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY } from '@/const/fetch';
+import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
 import { initialLobeAgentConfig } from '@/store/session';
 import { useSettings } from '@/store/settings';
 import type { OpenAIStreamPayload } from '@/types/openai';
@@ -33,6 +33,7 @@ export const fetchChatModel = (
       'Content-Type': 'application/json',
       [LOBE_CHAT_ACCESS_CODE]: useSettings.getState().settings.password || '',
       [OPENAI_API_KEY_HEADER_KEY]: useSettings.getState().settings.OPENAI_API_KEY || '',
+      [OPENAI_END_POINT]: useSettings.getState().settings.endpoint || '',
     },
     method: 'POST',
     signal: options?.signal,

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

@@ -282,7 +282,7 @@ export const chatMessage: StateCreator<
   },
 
   triggerFunctionCall: async (id) => {
-    const { dispatchMessage, generateMessage } = get();
+    const { dispatchMessage, realFetchAIResponse } = get();
     const session = sessionSelectors.currentSession(get());
 
     if (!session) return;
@@ -321,12 +321,8 @@ export const chatMessage: StateCreator<
 
     dispatchMessage({ id, key: 'content', type: 'updateMessage', value: data });
 
-    const mid = nanoid();
-
     const chats = chatSelectors.currentChats(get());
 
-    dispatchMessage({ id: mid, message: LOADING_FLAT, role: 'assistant', type: 'addMessage' });
-
-    await generateMessage(chats, mid);
+    await realFetchAIResponse(chats, message.id);
   },
 });