@lobehub/chat 0.25.0 → 0.26.1

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

@@ -1,8 +1,9 @@
 import { StateCreator } from 'zustand/vanilla';
 
 import { fetchChatModel } from '@/services/chatModel';
+import { fetchPlugin } from '@/services/plugin';
 import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@/store/session';
-import { ChatMessage } from '@/types/chatMessage';
+import { ChatMessage, OpenAIFunctionCall } from '@/types/chatMessage';
 import { fetchSSE } from '@/utils/fetch';
 import { isFunctionMessage } from '@/utils/message';
 import { nanoid } from '@/utils/uuid';
@@ -42,8 +43,7 @@ export interface ChatMessageAction {
   generateMessage: (
     messages: ChatMessage[],
     assistantMessageId: string,
-    withPlugin?: boolean,
-  ) => Promise<{ isFunctionCall: boolean; output: string }>;
+  ) => Promise<{ isFunctionCall: boolean }>;
 
   /**
    * 实际获取 AI 响应
@@ -63,6 +63,7 @@ export interface ChatMessageAction {
    * @param text - 消息文本
    */
   sendMessage: (text: string) => Promise<void>;
+  triggerFunctionCall: (id: string) => Promise<void>;
 }
 
 export const chatMessage: StateCreator<
@@ -108,16 +109,13 @@ export const chatMessage: StateCreator<
     get().dispatchSession({ chats, id: activeId, type: 'updateSessionChat' });
   },
 
-  generateMessage: async (messages, assistantId, withPlugin) => {
+  generateMessage: async (messages, assistantId) => {
     const { dispatchMessage } = get();
-    set({ chatLoading: true });
+    set({ chatLoadingId: assistantId });
     const config = agentSelectors.currentAgentConfigSafe(get());
 
     const fetcher = () =>
-      fetchChatModel(
-        { messages, model: config.model, ...config.params, plugins: config.plugins },
-        { withPlugin },
-      );
+      fetchChatModel({ messages, model: config.model, ...config.params, plugins: config.plugins });
 
     let output = '';
     let isFunctionCall = false;
@@ -139,13 +137,6 @@ export const chatMessage: StateCreator<
         // 如果是 function call
         if (isFunctionMessage(output)) {
           isFunctionCall = true;
-          // 设为 function
-          dispatchMessage({
-            id: assistantId,
-            key: 'role',
-            type: 'updateMessage',
-            value: 'function',
-          });
         }
 
         // 滚动到最后一条消息
@@ -156,13 +147,13 @@ export const chatMessage: StateCreator<
       },
     });
 
-    set({ chatLoading: false });
+    set({ chatLoadingId: undefined });
 
-    return { isFunctionCall, output };
+    return { isFunctionCall };
   },
 
   realFetchAIResponse: async (messages, userMessageId) => {
-    const { dispatchMessage, generateMessage, activeTopicId } = get();
+    const { dispatchMessage, generateMessage, triggerFunctionCall, activeTopicId } = get();
 
     // 添加 systemRole
     const { systemRole, model } = agentSelectors.currentAgentConfigSafe(get());
@@ -191,31 +182,11 @@ export const chatMessage: StateCreator<
     dispatchMessage({ id: mid, key: 'fromModel', type: 'updateMessageExtra', value: model });
 
     // 生成 ai message
-    const { output, isFunctionCall } = await generateMessage(messages, mid);
+    const { isFunctionCall } = await generateMessage(messages, mid);
 
     // 如果是 function，则发送函数调用方法
     if (isFunctionCall) {
-      const { function_call } = JSON.parse(output);
-
-      dispatchMessage({
-        id: mid,
-        key: 'function_call',
-        type: 'updateMessage',
-        value: function_call,
-      });
-
-      await generateMessage(
-        [...messages, { content: '', function_call, id: mid, role: 'assistant' } as ChatMessage],
-        mid,
-        true,
-      );
-
-      dispatchMessage({
-        id: mid,
-        key: 'role',
-        type: 'updateMessage',
-        value: 'assistant',
-      });
+      triggerFunctionCall(mid);
     }
   },
 
@@ -245,7 +216,6 @@ export const chatMessage: StateCreator<
 
     await realFetchAIResponse(histories, latestMsg.id);
   },
-
   sendMessage: async (message) => {
     const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta, activeTopicId } =
       get();
@@ -270,4 +240,53 @@ export const chatMessage: StateCreator<
       autocompleteSessionAgentMeta(session.id);
     }
   },
+
+  triggerFunctionCall: async (id) => {
+    const { dispatchMessage, generateMessage } = get();
+    const session = sessionSelectors.currentSession(get());
+
+    if (!session) return;
+
+    const message = session.chats[id];
+    if (!message) return;
+
+    let payload: OpenAIFunctionCall = { name: '' };
+    if (message.content) {
+      const { function_call } = JSON.parse(message.content);
+      dispatchMessage({ id, key: 'function_call', type: 'updateMessage', value: function_call });
+      dispatchMessage({ id, key: 'content', type: 'updateMessage', value: '' });
+      payload = function_call;
+    } else {
+      if (message.function_call) {
+        payload = message.function_call;
+      }
+    }
+
+    if (!payload.name) return;
+
+    // const fid = nanoid();
+    dispatchMessage({ id, key: 'role', type: 'updateMessage', value: 'function' });
+    dispatchMessage({ id, key: 'name', type: 'updateMessage', value: payload.name });
+    dispatchMessage({ id, key: 'function_call', type: 'updateMessage', value: payload });
+
+    // dispatchMessage({
+    //   id: id,
+    //   message: FUNCTION_LOADING,
+    //   parentId: message.,
+    //   role: 'function',
+    //   type: 'addMessage',
+    // });
+
+    const data = await fetchPlugin(payload);
+
+    dispatchMessage({ id, key: 'content', type: 'updateMessage', value: data });
+
+    const mid = nanoid();
+
+    dispatchMessage({ id: mid, message: LOADING_FLAT, role: 'assistant', type: 'addMessage' });
+
+    const chats = chatSelectors.currentChats(get());
+
+    await generateMessage(chats, mid);
+  },
 });

package/src/store/session/slices/chat/initialState.ts

@@ -1,9 +1,7 @@
 export interface ChatState {
   activeTopicId?: string;
-  chatLoading: boolean;
+  chatLoadingId?: string;
   topicLoadingId?: string;
 }
 
-export const initialChatState: ChatState = {
-  chatLoading: false,
-};
+export const initialChatState: ChatState = {};

package/src/store/session/slices/chat/selectors/utils.test.ts

@@ -295,7 +295,7 @@ describe('organizeChats', () => {
       const result = organizeChats(session, avatar);
       const meta = result[0].meta;
 
-      expect(meta.avatar).toBe(avatar.assistant);
+      expect(meta.avatar).toBe('assistant-avatar');
       expect(meta.title).toBeUndefined();
     });
 
@@ -329,6 +329,7 @@ describe('organizeChats', () => {
           function_call: {
             name: 'realtimeWeather',
           },
+          name: 'realtimeWeather',
         } as ChatMessage;
 
         session.chats[message.id] = message;
@@ -336,7 +337,7 @@ describe('organizeChats', () => {
         const result = organizeChats(session, avatar);
         const meta = result[3].meta;
 
-        expect(meta.avatar).toBe('☂️');
+        expect(meta.avatar).toBe('🧩');
         expect(meta.title).toBe('realtimeWeather');
       });
     });

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

@@ -1,4 +1,4 @@
-import pluginList from '@/plugins';
+import { PluginsMap } from '@/plugins';
 import { ChatMessage } from '@/types/chatMessage';
 import { LobeAgentSession } from '@/types/session';
 
@@ -27,9 +27,10 @@ export const organizeChats = (
       }
 
       case 'function': {
-        const plugin = pluginList.find((p) => p.name === message.function_call?.name);
+        const plugin = PluginsMap[message.name || ''];
+
         return {
-          avatar: plugin?.avatar || '🧩',
+          avatar: '🧩',
           title: plugin?.name || 'plugin-unknown',
         };
       }

package/src/types/chatMessage.ts

@@ -1,3 +1,5 @@
+import { ErrorType } from '@/types/fetch';
+
 import { LLMRoleType } from './llm';
 import { BaseDataModel } from './meta';
 
@@ -5,12 +7,13 @@ import { BaseDataModel } from './meta';
  * 聊天消息错误对象
  */
 export interface ChatMessageError {
-  /**
-   * 错误信息
-   */
+  body?: any;
   message: string;
-  status: number;
-  type: 'general' | 'llm';
+  type: ErrorType;
+}
+export interface OpenAIFunctionCall {
+  arguments?: string;
+  name: string;
 }
 
 export interface ChatMessage extends BaseDataModel {
@@ -30,7 +33,7 @@ export interface ChatMessage extends BaseDataModel {
     };
   } & Record<string, any>;
 
-  function_call?: { arguments?: string; name: string };
+  function_call?: OpenAIFunctionCall;
   name?: string;
 
   parentId?: string;

package/src/types/fetch.ts

@@ -0,0 +1,26 @@
+export enum ErrorType {
+  // ******* 业务错误语义 ******* //
+
+  // 密码无效
+  InvalidAccessCode = 'InvalidAccessCode',
+  // OpenAI 返回的业务错误
+  OpenAIBizError = 'OpenAIBizError',
+
+  // ******* 客户端错误 ******* //
+  BadRequest = 400,
+  Unauthorized = 401,
+  Forbidden = 403,
+  ContentNotFound = 404, // 没找到接口
+  TooManyRequests = 429,
+
+  // ******* 服务端错误 ******* //
+  InternalServerError = 500,
+  BadGateway = 502,
+  ServiceUnavailable = 503,
+  GatewayTimeout = 504,
+}
+
+export interface ErrorResponse {
+  body: any;
+  errorType: ErrorType;
+}

package/src/types/openai.ts

@@ -1,3 +1,4 @@
+import { OpenAIFunctionCall } from '@/types/chatMessage';
 import { LLMRoleType } from '@/types/llm';
 
 export interface OpenAIChatMessage {
@@ -7,6 +8,8 @@ export interface OpenAIChatMessage {
    */
   content: string;
 
+  function_call?: OpenAIFunctionCall;
+  name?: string;
   /**
    * 角色
    * @description 消息发送者的角色

package/src/types/plugin.ts

@@ -0,0 +1,4 @@
+export interface OpenAIPluginPayload {
+  arguments: string;
+  name: string;
+}

package/src/utils/fetch.ts

@@ -1,24 +1,8 @@
-// import { notification } from '@/layout';
+import { t } from 'i18next';
+
 import { fetchChatModel } from '@/services/chatModel';
 import { ChatMessageError } from '@/types/chatMessage';
-
-const codeMessage: Record<number, string> = {
-  200: '成功获取数据，服务已响应',
-  201: '操作成功，数据已保存',
-  202: '您的请求已进入后台排队，请耐心等待异步任务完成',
-  204: '数据已成功删除',
-  400: '很抱歉，您的请求出错，服务器未执行任何数据的创建或修改操作',
-  401: '很抱歉，您的权限不足。请确认用户名或密码是否正确',
-  403: '很抱歉，您无权访问此内容',
-  404: '很抱歉，您请求的记录不存在，服务器未能执行任何操作',
-  406: '很抱歉，服务器不支持该请求格式',
-  410: '很抱歉，你所请求的资源已永久删除',
-  422: '很抱歉，在创建对象时遇到验证错误，请稍后再试',
-  500: '很抱歉，服务器出现了问题，请稍后再试',
-  502: '很抱歉，您遇到了网关错误。这可能是由于网络故障或服务器问题导致的。请稍后再试，或联系管理员以获取更多帮助',
-  503: '很抱歉，我们的服务器过载或处在维护中，服务暂时不可用',
-  504: '很抱歉，网关请求超时，请稍后再试',
-};
+import { ErrorResponse } from '@/types/fetch';
 
 export interface FetchSSEOptions {
   onErrorHandle?: (error: ChatMessageError) => void;
@@ -33,13 +17,25 @@ export interface FetchSSEOptions {
 export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchSSEOptions = {}) => {
   const response = await fetchFn();
 
-  // 如果不 ok 说明有连接请求错误
+  // 如果不 ok 说明有请求错误
   if (!response.ok) {
-    const chatMessageError: ChatMessageError = {
-      message: codeMessage[response.status],
-      status: response.status,
-      type: 'general',
-    };
+    let chatMessageError: ChatMessageError;
+
+    // 尝试取一波业务错误语义
+    try {
+      const data = (await response.json()) as ErrorResponse;
+      chatMessageError = {
+        body: data.body,
+        message: t(`response.${data.errorType}`),
+        type: data.errorType,
+      };
+    } catch {
+      // 如果无法正常返回，说明是常规报错
+      chatMessageError = {
+        message: t(`response.${response.status}`),
+        type: response.status,
+      };
+    }
 
     options.onErrorHandle?.(chatMessageError);
     return;

package/src/utils/message.ts

@@ -3,3 +3,19 @@ import { FUNCTION_MESSAGE_FLAG } from '@/const/message';
 export const isFunctionMessage = (content: string) => {
   return content.startsWith(FUNCTION_MESSAGE_FLAG);
 };
+
+// export const createFunctionCallMessage = () => {
+//   return [
+//     {
+//       content: '',
+//       function_call: { arguments: '{\n  "city": "杭州"\n}', name: 'realtimeWeather' },
+//       role: 'assistant',
+//     },
+//     {
+//       content:
+//         '{"status":"1","count":"1","info":"OK","infocode":"10000","forecasts":[{"city":"杭州市","adcode":"300","province":"浙江","reporttime":"2023-07-28 20:32:48","casts":[{"date":"2023-07-28","week":"5","dayweather"小雨","nightweather":"小雨-中雨","daytemp":"32","nighttemp":"26","daywind":"东","nightwind":"东","daypower":"6power":"6","daytemp_float":"32.0","nighttemp_float":"26.0"},{"date":"2023-07-29","week":"6","dayweather":"小雨雨","nightweather":"小雨","daytemp":"30","nighttemp":"25","daywind":"东南","nightwind":"东南","daypower":"4","wer":"4","daytemp_float":"30.0","nighttemp_float":"25.0"},{"date":"2023-07-30","week":"7","dayweather":"小雨",ightweather":"雷阵雨","daytemp":"31","nighttemp":"25","daywind":"东南","nightwind":"东南","daypower":"4","nigh:"4","daytemp_float":"31.0","nighttemp_float":"25.0"},{"date":"2023-07-31","week":"1","dayweather":"雷阵雨","ntweather":"雷阵雨","daytemp":"33","nighttemp":"25","daywind":"东","nightwind":"东","daypower":"4","nightpower""daytemp_float":"33.0","nighttemp_float":"25.0"}]}]}',
+//       name: 'realtimeWeather',
+//       role: 'function',
+//     },
+//   ];
+// };

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

@@ -1,69 +0,0 @@
-import { ChatList, ChatMessage } from '@lobehub/ui';
-import isEqual from 'fast-deep-equal';
-import { ReactNode, memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
-
-import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
-import { isFunctionMessage } from '@/utils/message';
-
-import FunctionMessage from './FunctionMessage';
-import MessageExtra from './MessageExtra';
-
-const List = () => {
-  const { t } = useTranslation('common');
-  const data = useSessionStore(chatSelectors.currentChats, isEqual);
-  const [displayMode, deleteMessage, resendMessage, dispatchMessage] = useSessionStore(
-    (s) => [
-      agentSelectors.currentAgentConfigSafe(s).displayMode,
-      s.deleteMessage,
-      s.resendMessage,
-      s.dispatchMessage,
-    ],
-    shallow,
-  );
-
-  const renderMessage = (content: ReactNode, message: ChatMessage) => {
-    if (message.role === 'function')
-      return isFunctionMessage(message.content) ? <FunctionMessage /> : content;
-
-    return content;
-  };
-
-  return (
-    <ChatList
-      data={data}
-      onActionClick={(key, id) => {
-        switch (key) {
-          case 'delete': {
-            deleteMessage(id);
-            break;
-          }
-
-          case 'regenerate': {
-            resendMessage(id);
-            break;
-          }
-        }
-      }}
-      onMessageChange={(id, content) => {
-        dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content });
-      }}
-      renderMessage={renderMessage}
-      renderMessageExtra={MessageExtra}
-      style={{ marginTop: 24 }}
-      text={{
-        cancel: t('cancel'),
-        confirm: t('ok'),
-        copy: t('copy'),
-        copySuccess: t('copySuccess'),
-        delete: t('delete'),
-        edit: t('edit'),
-        regenerate: t('regenerate'),
-      }}
-      type={displayMode}
-    />
-  );
-};
-
-export default memo(List);

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

@@ -1,31 +0,0 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-const useStyles = createStyles(({ css, token }) => ({
-  container: css`
-    padding: 4px 8px;
-
-    color: ${token.colorTextSecondary};
-
-    background: ${token.colorFillTertiary};
-    border: 1px solid ${token.colorBorder};
-    border-radius: 6px;
-  `,
-}));
-const FunctionMessage = memo(() => {
-  const { t } = useTranslation('plugin');
-  const { styles } = useStyles();
-  return (
-    <Flexbox className={styles.container} gap={8} horizontal>
-      <div>
-        <LoadingOutlined />
-      </div>
-      {t('pluginLoading')}
-    </Flexbox>
-  );
-});
-
-export default FunctionMessage;