@lobehub/chat 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 0.13.0](https://github.com/lobehub/lobe-chat/compare/v0.12.1...v0.13.0)
+
+<sup>Released on **2023-07-23**</sup>
+
+#### ✨ Features
+
+- **misc**: 优化插件模式下的用户体验.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 优化插件模式下的用户体验, closes [#13](https://github.com/lobehub/lobe-chat/issues/13) ([4596f12](https://github.com/lobehub/lobe-chat/commit/4596f12))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.12.1](https://github.com/lobehub/lobe-chat/compare/v0.12.0...v0.12.1)
+
+<sup>Released on **2023-07-23**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正 message parentId 不正确的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: 修正 message parentId 不正确的问题 ([f86852a](https://github.com/lobehub/lobe-chat/commit/f86852a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.12.0](https://github.com/lobehub/lobe-chat/compare/v0.11.0...v0.12.0)
 
 <sup>Released on **2023-07-23**</sup>

package/next.config.mjs

@@ -13,7 +13,7 @@ const withPWA = nextPWA({
 const nextConfig = {
   reactStrictMode: true,
   pageExtensions: ['page.tsx', 'api.ts'],
-  transpilePackages: ['@lobehub/ui', 'antd-style'],
+  transpilePackages: ['@lobehub/ui'],
 
   webpack(config) {
     config.experiments = {
@@ -31,8 +31,8 @@ const nextConfig = {
         destination: `${API_END_PORT_URL}/api/openai`,
       },
       {
-        source: '/api/chain-dev',
-        destination: `${API_END_PORT_URL}/api/chain`,
+        source: '/api/plugins-dev',
+        destination: `${API_END_PORT_URL}/api/plugins`,
       },
     ];
   },

package/package.json

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

package/src/const/message.ts

@@ -0,0 +1,2 @@
+// 只要 start with 这个，就可以判断为 function message
+export const FUNCTION_MESSAGE_FLAG = '{"function';

package/src/locales/default/common.ts

@@ -38,6 +38,7 @@ export default {
   'plugin-realtimeWeather': '实时天气预报',
   'plugin-searchEngine': '搜索引擎',
   'pluginList': '插件列表',
+  'pluginLoading': '插件运行中...',
   'profile': '助手身份',
   'reset': '重置',
   'searchAgentPlaceholder': '搜索助手和对话...',

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

@@ -1,74 +1,15 @@
-import { OpenAIStream, StreamingTextResponse } from 'ai';
-import { Configuration, OpenAIApi } from 'openai-edge';
-import { ChatCompletionFunctions, ChatCompletionRequestMessage } from 'openai-edge/types/api';
+import { StreamingTextResponse } from 'ai';
 
 import { OpenAIStreamPayload } from '@/types/openai';
 
-import pluginList from '../../plugins';
+import { createChatCompletion } from './openai';
 
 export const runtime = 'edge';
 
-const isDev = process.env.NODE_ENV === 'development';
-const OPENAI_PROXY_URL = process.env.OPENAI_PROXY_URL;
-
-// Create an OpenAI API client (that's edge friendly!)
-const config = new Configuration({
-  apiKey: process.env.OPENAI_API_KEY,
-});
-
-const openai = new OpenAIApi(config, isDev && OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined);
-
 export default async function handler(req: Request) {
-  const {
-    messages,
-    plugins: enabledPlugins,
-    ...params
-  } = (await req.json()) as OpenAIStreamPayload;
-
-  // ============  1. 前置处理 functions   ============ //
-
-  const filterFunctions: ChatCompletionFunctions[] = pluginList
-    .filter((p) => {
-      // 如果不存在 enabledPlugins，那么全部不启用
-      if (!enabledPlugins) return false;
-
-      // 如果存在 enabledPlugins，那么只启用 enabledPlugins 中的插件
-      return enabledPlugins.includes(p.name);
-    })
-    .map((f) => f.schema);
-
-  const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
-
-  // ============  2. 前置处理 messages   ============ //
-  const formatMessages = messages.map((m) => ({ content: m.content, role: m.role }));
-
-  const response = await openai.createChatCompletion({
-    functions,
-    messages: formatMessages,
-    stream: true,
-    ...params,
-  });
-
-  const stream = OpenAIStream(response, {
-    experimental_onFunctionCall: async ({ name, arguments: args }, createFunctionCallMessages) => {
-      console.log(`执行 functionCall [${name}]`, 'args:', args);
-
-      const func = pluginList.find((f) => f.name === name);
-
-      if (func) {
-        const result = await func.runner(args as any);
-
-        const newMessages = createFunctionCallMessages(result) as ChatCompletionRequestMessage[];
+  const payload = (await req.json()) as OpenAIStreamPayload;
 
-        return openai.createChatCompletion({
-          functions,
-          messages: [...formatMessages, ...newMessages],
-          stream: true,
-          ...params,
-        });
-      }
-    },
-  });
+  const stream = await createChatCompletion(payload);
 
   return new StreamingTextResponse(stream);
 }

package/src/pages/api/openai.ts

@@ -0,0 +1,50 @@
+import { OpenAIStream, OpenAIStreamCallbacks } from 'ai';
+import { Configuration, OpenAIApi } from 'openai-edge';
+import { ChatCompletionFunctions } from 'openai-edge/types/api';
+
+import { OpenAIStreamPayload } from '@/types/openai';
+
+import pluginList from '../../plugins';
+
+const isDev = process.env.NODE_ENV === 'development';
+const OPENAI_PROXY_URL = process.env.OPENAI_PROXY_URL;
+
+// Create an OpenAI API client (that's edge friendly!)
+const config = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+export const openai = new OpenAIApi(
+  config,
+  isDev && OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined,
+);
+
+export const createChatCompletion = async (
+  payload: OpenAIStreamPayload,
+  callbacks?: (payload: OpenAIStreamPayload) => OpenAIStreamCallbacks,
+) => {
+  const { messages, plugins: enabledPlugins, ...params } = payload;
+
+  // ============  1. 前置处理 functions   ============ //
+
+  const filterFunctions: ChatCompletionFunctions[] = pluginList
+    .filter((p) => {
+      // 如果不存在 enabledPlugins，那么全部不启用
+      if (!enabledPlugins) return false;
+
+      // 如果存在 enabledPlugins，那么只启用 enabledPlugins 中的插件
+      return enabledPlugins.includes(p.name);
+    })
+    .map((f) => f.schema);
+
+  const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
+
+  // ============  2. 前置处理 messages   ============ //
+  const formatMessages = messages.map((m) => ({ content: m.content, role: m.role }));
+
+  const requestParams = { functions, messages: formatMessages, stream: true, ...params };
+
+  const response = await openai.createChatCompletion(requestParams);
+
+  return OpenAIStream(response, callbacks?.(requestParams));
+};

package/src/pages/api/plugins.api.ts

@@ -0,0 +1,34 @@
+import { StreamingTextResponse } from 'ai';
+import { ChatCompletionRequestMessage } from 'openai-edge';
+
+import { OpenAIStreamPayload } from '@/types/openai';
+
+import pluginList from '../../plugins';
+import { createChatCompletion, openai } from './openai';
+
+export const runtime = 'edge';
+
+export default async function handler(req: Request) {
+  const payload = (await req.json()) as OpenAIStreamPayload;
+
+  const stream = await createChatCompletion(payload, (payload) => ({
+    experimental_onFunctionCall: async ({ name, arguments: args }, createFunctionCallMessages) => {
+      console.log(`执行 functionCall [${name}]`, 'args:', args);
+
+      const func = pluginList.find((f) => f.name === name);
+
+      if (func) {
+        const result = await func.runner(args as any);
+
+        const newMessages = createFunctionCallMessages(result) as ChatCompletionRequestMessage[];
+
+        return openai.createChatCompletion({
+          ...payload,
+          messages: [...payload.messages, ...newMessages],
+        });
+      }
+    },
+  }));
+
+  return new StreamingTextResponse(stream);
+}

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

@@ -1,10 +1,12 @@
-import { ChatList } from '@lobehub/ui';
+import { ChatList, ChatMessage } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { chatSelectors, useSessionStore } from '@/store/session';
+import { isFunctionMessage } from '@/utils/message';
 
+import FunctionMessage from './FunctionMessage';
 import MessageExtra from './MessageExtra';
 
 const List = () => {
@@ -14,6 +16,13 @@ const List = () => {
     shallow,
   );
 
+  const renderMessage = (content: ReactNode, message: ChatMessage) => {
+    if (message.role === 'function')
+      return isFunctionMessage(message.content) ? <FunctionMessage /> : content;
+
+    return content;
+  };
+
   return (
     <ChatList
       data={data}
@@ -33,6 +42,7 @@ const List = () => {
       onMessageChange={(id, content) => {
         dispatchMessage({ id, key: 'content', type: 'updateMessage', value: content });
       }}
+      renderMessage={renderMessage}
       renderMessageExtra={MessageExtra}
       style={{ marginTop: 24 }}
     />

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

@@ -0,0 +1,31 @@
+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();
+  const { styles } = useStyles();
+  return (
+    <Flexbox className={styles.container} gap={8} horizontal>
+      <div>
+        <LoadingOutlined />
+      </div>
+      {t('pluginLoading')}
+    </Flexbox>
+  );
+});
+
+export default FunctionMessage;

package/src/pages/chat/[id]/Conversation/Input/Action.tsx

@@ -0,0 +1,24 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Popconfirm } from 'antd';
+import { Eraser, Languages } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import { useSessionStore } from '@/store/session';
+
+const InputActions = memo(() => {
+  const { t } = useTranslation();
+  const [clearMessage] = useSessionStore((s) => [s.clearMessage], shallow);
+
+  return (
+    <>
+      <ActionIcon icon={Languages} />
+      <Popconfirm onConfirm={() => clearMessage()} title={t('confirmClearCurrentMessages')}>
+        <ActionIcon icon={Eraser} title={t('clearCurrentMessages')} />
+      </Popconfirm>
+    </>
+  );
+});
+
+export default InputActions;

package/src/pages/chat/[id]/Conversation/Input/Token.tsx

@@ -0,0 +1,32 @@
+import { TokenTag, Tooltip } from '@lobehub/ui';
+import { encode } from 'gpt-tokenizer';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
+
+import { ModelTokens } from '@/const/modelTokens';
+import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
+
+const Token = memo<{ input: string }>(({ input }) => {
+  const { t } = useTranslation();
+
+  const inputTokenCount = useMemo(() => encode(input).length, [input]);
+
+  const [totalToken, systemRoleToken, chatsToken, model] = useSessionStore(
+    (s) => [
+      chatSelectors.totalTokenCount(s),
+      chatSelectors.systemRoleTokenCount(s),
+      chatSelectors.chatsTokenCount(s),
+      agentSelectors.currentAgentModel(s),
+    ],
+    shallow,
+  );
+
+  return (
+    <Tooltip title={t('tokenDetail', { chatsToken, systemRoleToken })}>
+      <TokenTag maxValue={ModelTokens[model]} value={totalToken + inputTokenCount} />
+    </Tooltip>
+  );
+});
+
+export default Token;

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

@@ -0,0 +1,62 @@
+import { ChatInputArea, DraggablePanel, Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { Archive } 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';
+import { useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
+
+import InputActions from './Action';
+import Token from './Token';
+
+const ChatInput = () => {
+  const { t } = useTranslation();
+  const [expand, setExpand] = useState<boolean>(false);
+  const [text, setText] = useState('');
+
+  const [inputHeight] = useSettings((s) => [s.inputHeight], shallow);
+  const [sendMessage] = useSessionStore((s) => [s.createOrSendMsg], shallow);
+
+  const footer = useMemo(
+    () => <Button icon={<Icon icon={Archive} title={t('archiveCurrentMessages')} />} />,
+    [],
+  );
+
+  return (
+    <DraggablePanel
+      expandable={false}
+      fullscreen={expand}
+      headerHeight={HEADER_HEIGHT}
+      minHeight={CHAT_TEXTAREA_HEIGHT}
+      onSizeChange={(_, size) => {
+        if (!size) return;
+        useSettings.setState({
+          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
+        });
+      }}
+      placement="bottom"
+      size={{ height: inputHeight, width: '100%' }}
+      style={{ zIndex: 10 }}
+    >
+      <ChatInputArea
+        actions={
+          <>
+            <InputActions />
+            <Token input={text} />
+          </>
+        }
+        expand={expand}
+        footer={footer}
+        minHeight={CHAT_TEXTAREA_HEIGHT}
+        onExpandChange={setExpand}
+        onInputChange={setText}
+        onSend={sendMessage}
+      />
+    </DraggablePanel>
+  );
+};
+
+export default memo(ChatInput);

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

@@ -1,9 +1,13 @@
+import { Avatar, Icon, Tooltip } from '@lobehub/ui';
 import { Tag } from 'antd';
 import { createStyles } from 'antd-style';
+import { LucideToyBrick } from 'lucide-react';
 import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import pluginList from '@/plugins';
 import { agentSelectors, useSessionStore } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
 
@@ -11,27 +15,70 @@ const useStyles = createStyles(({ css }) => ({
   container: css`
     margin-top: 8px;
   `,
+  plugin: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+  `,
 }));
 
-const MessageExtra = ({ role, extra }: ChatMessage): ReactNode => {
+const MessageExtra = ({ role, extra, function_call }: ChatMessage): ReactNode => {
   const { styles } = useStyles();
 
+  const { t } = useTranslation();
   const [model] = useSessionStore((s) => [agentSelectors.currentAgentModel(s)], shallow);
 
-  // 1. 只有 ai 的 message
-  // 2. 且存在 fromModel
-  // 3. 且当前的 model 和 fromModel 不一致时
-  if (role === 'assistant' && extra?.fromModel && model !== extra?.fromModel)
-    // 才需要展示 model tag
-    return (
-      <Flexbox className={styles.container}>
-        <div>
-          <Tag bordered={false} style={{ borderRadius: 6 }}>
-            {extra?.fromModel}
-          </Tag>
-        </div>
-      </Flexbox>
-    );
+  const plugin = pluginList.find((p) => p.name === function_call?.name);
+  const funcTag = (
+    <Tooltip title={function_call?.arguments}>
+      <Tag bordered={false} className={styles.plugin} style={{ borderRadius: 6 }}>
+        {plugin?.avatar ? (
+          <Avatar avatar={plugin?.avatar} size={18} />
+        ) : (
+          <Icon icon={LucideToyBrick} />
+        )}
+        {t(`plugin-${function_call?.name}` as any)}
+      </Tag>
+    </Tooltip>
+  );
+
+  const modelTag = (
+    <div>
+      <Tag bordered={false} style={{ borderRadius: 6 }}>
+        {extra?.fromModel}
+      </Tag>
+    </div>
+  );
+
+  // 1. 存在 fromModel
+  // 2. 且当前的 model 和 fromModel 不一致时
+  const hasModelTag = extra?.fromModel && model !== extra?.fromModel;
+
+  const hasFuncTag = !!function_call;
+
+  switch (role) {
+    case 'user':
+    case 'system': {
+      return;
+    }
+    case 'assistant': {
+      // 1. 只有 ai 的 message
+      // 2. 且存在 fromModel
+      // 3. 且当前的 model 和 fromModel 不一致时
+      if (!(hasModelTag || hasFuncTag)) return;
+
+      return (
+        <Flexbox className={styles.container}>
+          {hasFuncTag && funcTag}
+          {hasModelTag && modelTag}
+        </Flexbox>
+      );
+    }
+    case 'function': {
+      return <Flexbox className={styles.container}>{funcTag}</Flexbox>;
+    }
+  }
 };
 
 export default MessageExtra;

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

@@ -2,9 +2,9 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
-import ChatInput from '@/pages/chat/[id]/Conversation/Input';
 
 import ChatList from './ChatList';
+import ChatInput from './Input';
 
 const Conversation = () => {
   return (

package/src/services/chatModel.ts

@@ -9,7 +9,7 @@ import { URLS } from './url';
  */
 export const fetchChatModel = (
   params: Partial<OpenAIStreamPayload>,
-  signal?: AbortSignal | undefined,
+  options?: { signal?: AbortSignal | undefined; withPlugin?: boolean },
 ) => {
   const payload = merge(
     {
@@ -23,12 +23,12 @@ export const fetchChatModel = (
     params,
   );
 
-  return fetch(URLS.openai, {
+  return fetch(options?.withPlugin ? URLS.plugins : URLS.openai, {
     body: JSON.stringify(payload),
     headers: {
       'Content-Type': 'application/json',
     },
     method: 'POST',
-    signal,
+    signal: options?.signal,
   });
 };

package/src/services/url.ts

@@ -4,4 +4,5 @@ const prefix = isDev ? '-dev' : '';
 
 export const URLS = {
   openai: '/api/openai' + prefix,
+  plugins: '/api/plugins' + prefix,
 };

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

@@ -3,7 +3,8 @@ import { StateCreator } from 'zustand/vanilla';
 import { fetchChatModel } from '@/services/chatModel';
 import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
-import { FetchSSEOptions, fetchSSE } from '@/utils/fetch';
+import { fetchSSE } from '@/utils/fetch';
+import { isFunctionMessage } from '@/utils/message';
 import { nanoid } from '@/utils/uuid';
 
 import { MessageDispatch, messagesReducer } from './messageReducer';
@@ -38,7 +39,11 @@ export interface ChatAction {
    * @param messages - 聊天消息数组
    * @param options - 获取 SSE 选项
    */
-  generateMessage: (messages: ChatMessage[], options: FetchSSEOptions) => Promise<void>;
+  generateMessage: (
+    messages: ChatMessage[],
+    assistantMessageId: string,
+    withPlugin?: boolean,
+  ) => Promise<{ isFunctionCall: boolean; output: string }>;
   /**
    * 处理消息编辑
    * @param messageId - 消息 ID，可选
@@ -50,7 +55,7 @@ export interface ChatAction {
    * @param messages - 聊天消息数组
    * @param parentId - 父消息 ID，可选
    */
-  realFetchAIResponse: (messages: ChatMessage[], parentId?: string) => Promise<void>;
+  realFetchAIResponse: (messages: ChatMessage[], parentId: string) => Promise<void>;
   /**
    * 重新发送消息
    * @param id - 消息 ID
@@ -100,23 +105,64 @@ export const createChatSlice: StateCreator<
     get().dispatchSession({ chats, id: activeId, type: 'updateSessionChat' });
   },
 
-  generateMessage: async (messages, options) => {
+  generateMessage: async (messages, assistantId, withPlugin) => {
+    const { dispatchMessage } = get();
     set({ chatLoading: true });
     const config = agentSelectors.currentAgentConfigSafe(get());
 
     const fetcher = () =>
-      fetchChatModel({ messages, model: config.model, ...config.params, plugins: config.plugins });
+      fetchChatModel(
+        { messages, model: config.model, ...config.params, plugins: config.plugins },
+        { withPlugin },
+      );
 
-    await fetchSSE(fetcher, options);
+    let output = '';
+    let isFunctionCall = false;
+
+    await fetchSSE(fetcher, {
+      onErrorHandle: (error) => {
+        dispatchMessage({ id: assistantId, key: 'error', type: 'updateMessage', value: error });
+      },
+      onMessageHandle: (text) => {
+        output += text;
+
+        dispatchMessage({
+          id: assistantId,
+          key: 'content',
+          type: 'updateMessage',
+          value: output,
+        });
+
+        // 如果是 function call
+        if (isFunctionMessage(output)) {
+          isFunctionCall = true;
+          // 设为 function
+          dispatchMessage({
+            id: assistantId,
+            key: 'role',
+            type: 'updateMessage',
+            value: 'function',
+          });
+        }
+
+        // 滚动到最后一条消息
+        const item = document.querySelector('#for-loading');
+        if (!item) return;
+
+        item.scrollIntoView({ behavior: 'smooth' });
+      },
+    });
 
     set({ chatLoading: false });
+
+    return { isFunctionCall, output };
   },
 
   handleMessageEditing: (messageId) => {
     set({ editingMessageId: messageId });
   },
 
-  realFetchAIResponse: async (messages: ChatMessage[], parentId?: string) => {
+  realFetchAIResponse: async (messages, userMessageId) => {
     const { dispatchMessage, generateMessage } = get();
 
     // 添加 systemRole
@@ -128,12 +174,11 @@ export const createChatSlice: StateCreator<
     // 再添加一个空的信息用于放置 ai 响应，注意顺序不能反
     // 因为如果顺序反了，messages 中将包含新增的 ai message
     const assistantId = nanoid();
-    const userId = parentId ?? nanoid();
 
     dispatchMessage({
       id: assistantId,
       message: LOADING_FLAT,
-      parentId: userId,
+      parentId: userMessageId,
       role: 'assistant',
       type: 'addMessage',
     });
@@ -146,29 +191,36 @@ export const createChatSlice: StateCreator<
       value: model,
     });
 
-    let output = '';
     // 生成 ai message
-    await generateMessage(messages, {
-      onErrorHandle: (error) => {
-        dispatchMessage({ id: assistantId, key: 'error', type: 'updateMessage', value: error });
-      },
-      onMessageHandle: (text) => {
-        output += text;
-
-        dispatchMessage({
-          id: assistantId,
-          key: 'content',
-          type: 'updateMessage',
-          value: output,
-        });
-
-        // 滚动到最后一条消息
-        const item = document.querySelector('#for-loading');
-        if (!item) return;
-
-        item.scrollIntoView({ behavior: 'smooth' });
-      },
-    });
+    const { output, isFunctionCall } = await generateMessage(messages, assistantId);
+
+    // 如果是 function，则发送函数调用方法
+    if (isFunctionCall) {
+      const { function_call } = JSON.parse(output);
+
+      dispatchMessage({
+        id: assistantId,
+        key: 'function_call',
+        type: 'updateMessage',
+        value: function_call,
+      });
+
+      await generateMessage(
+        [
+          ...messages,
+          { content: '', function_call, id: assistantId, role: 'assistant' } as ChatMessage,
+        ],
+        assistantId,
+        true,
+      );
+
+      dispatchMessage({
+        id: assistantId,
+        key: 'role',
+        type: 'updateMessage',
+        value: 'assistant',
+      });
+    }
   },
 
   resendMessage: async (messageId) => {
@@ -183,7 +235,7 @@ export const createChatSlice: StateCreator<
 
     const histories = chats
       .slice(0, currentIndex + 1)
-      // 如果点击重新发送的 message 其 role 是 assistant，那么需要移除
+      // 如果点击重新发送的 message 其 role 是 assistant 或者 function，那么需要移除
       // 如果点击重新发送的 message 其 role 是 user，则不需要移除
       .filter((c) => !(c.role === 'assistant' && c.id === messageId));
 
@@ -209,7 +261,7 @@ export const createChatSlice: StateCreator<
     // 先拿到当前的 messages
     const messages = chatSelectors.currentChats(get());
 
-    await realFetchAIResponse(messages);
+    await realFetchAIResponse(messages, userId);
 
     const chats = chatSelectors.currentChats(get());
     if (chats.length >= 4) {

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

@@ -5,57 +5,17 @@ import { ChatMessage } from '@/types/chatMessage';
 import type { SessionStore } from '../../../store';
 import { DEFAULT_AVATAR } from '../../agentConfig';
 import { sessionSelectors } from '../../session';
+import { organizeChats } from './utils';
 
 // 展示在聊天框中的消息
 export const currentChats = (s: SessionStore): ChatMessage[] => {
   const session = sessionSelectors.currentSession(s);
   if (!session) return [];
 
-  const basic = Object.values<ChatMessage>(session.chats)
-    // 首先按照时间顺序排序，越早的在越前面
-    .sort((pre, next) => pre.createAt - next.createAt)
-    // 过滤掉已归档的消息，归档消息不应该出现在聊天框中
-    .filter((m) => !m.archive)
-    // 映射头像关系
-    .map((m) => {
-      return {
-        ...m,
-        meta:
-          m.role === 'assistant'
-            ? {
-                avatar: agentSelectors.currentAgentAvatar(s),
-                title: session.meta.title,
-              }
-            : m.role === 'user'
-            ? {
-                avatar: useSettings.getState().settings.avatar || DEFAULT_AVATAR,
-              }
-            : m.meta,
-      };
-    });
-
-  const finalList: ChatMessage[] = [];
-
-  const addItem = (item: ChatMessage) => {
-    const isExist = finalList.findIndex((i) => item.id === i.id) > -1;
-    if (!isExist) {
-      finalList.push(item);
-    }
-  };
-
-  // 基于添加逻辑进行重排序
-  for (const item of basic) {
-    // 先判存在与否，不存在就加入
-    addItem(item);
-
-    for (const another of basic) {
-      if (another.parentId === item.id) {
-        addItem(another);
-      }
-    }
-  }
-
-  return finalList;
+  return organizeChats(session, {
+    assistant: agentSelectors.currentAgentAvatar(s),
+    user: useSettings.getState().settings.avatar || DEFAULT_AVATAR,
+  });
 };
 
 export const systemRoleSel = (s: SessionStore): string => {

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

@@ -0,0 +1,264 @@
+import { beforeEach } from 'vitest';
+
+import { LobeAgentSession } from '@/types/session';
+
+import { organizeChats } from './utils';
+
+let session: LobeAgentSession;
+
+beforeEach(() => {
+  session = {
+    chats: {
+      '1': {
+        id: '1',
+        createAt: 1639440000000,
+        updateAt: 1639440000000,
+        meta: {},
+        content: 'Message 1',
+        role: 'assistant',
+      },
+      '2': {
+        id: '2',
+        createAt: 1639450000000,
+        updateAt: 1639450000000,
+        meta: {},
+        content: 'Message 2',
+        role: 'user',
+      },
+      '3': {
+        id: '3',
+        createAt: 1639460000000,
+        updateAt: 1639460000000,
+        meta: {},
+        content: 'Message 3',
+        role: 'assistant',
+      },
+    },
+    config: {
+      model: 'gpt-4',
+      params: {
+        temperature: 0.6,
+      },
+      systemRole: '',
+    },
+    type: 'agent',
+    createAt: 1690110700808,
+    id: 'abc',
+    meta: {},
+    updateAt: 1690110700808,
+  } as LobeAgentSession;
+});
+
+describe('organizeChats', () => {
+  it('should return an array of chat messages', () => {
+    const result = organizeChats(session, { assistant: '', user: '' });
+    expect(Array.isArray(result)).toBe(true);
+    expect(result.length).toBe(3);
+    expect(result[0].id).toBe('1');
+    expect(result[1].id).toBe('2');
+    expect(result[2].id).toBe('3');
+  });
+
+  it('should sort chat messages in ascending order of createAt', () => {
+    const result = organizeChats(session, { assistant: '', user: '' });
+    expect(result[0].id).toBe('1');
+    expect(result[1].id).toBe('2');
+    expect(result[2].id).toBe('3');
+  });
+
+  it('should filter out archived messages', () => {
+    session.chats['2'].archive = true;
+    const result = organizeChats(session, { assistant: '', user: '' });
+    expect(result.length).toBe(2);
+    expect(result[0].id).toBe('1');
+    expect(result[1].id).toBe('3');
+  });
+
+  it('should map avatars correctly', () => {
+    const avatar = 'https://example.com/avatar.png';
+    const settings = {
+      avatar: 'https://example.com/user-avatar.png',
+    };
+
+    const result = organizeChats(session, {
+      assistant: avatar,
+      user: settings.avatar,
+    });
+
+    expect(result[0].meta.avatar).toBe(avatar);
+    expect(result[1].meta.avatar).toBe(settings.avatar);
+    expect(result[2].meta.avatar).toBe(avatar);
+  });
+
+  it('should reorder messages based on parent-child relationship', () => {
+    session.chats['2'].parentId = '1';
+    session.chats['3'].parentId = '2';
+    const result = organizeChats(session, { assistant: '', user: '' });
+    expect(result.length).toBe(3);
+    expect(result[0].id).toBe('1');
+    expect(result[1].id).toBe('2');
+    expect(result[2].id).toBe('3');
+  });
+
+  it('should remove duplicate messages', () => {
+    session.chats['2'].parentId = '1';
+    session.chats['3'].parentId = '2';
+    session.chats['3'].id = '2';
+    const result = organizeChats(session, { assistant: '', user: '' });
+    expect(result.length).toBe(2);
+    expect(result[0].id).toBe('1');
+    expect(result[1].id).toBe('2');
+  });
+
+  it('should return an empty array for empty session', () => {
+    const emptySession = {
+      chats: {},
+      config: {},
+      type: 'agent',
+    } as LobeAgentSession;
+    const result = organizeChats(emptySession, { assistant: '', user: '' });
+    expect(Array.isArray(result)).toBe(true);
+    expect(result.length).toBe(0);
+  });
+
+  it('should handle large number of chat messages', () => {
+    const largeSession = {
+      chats: {},
+      config: {},
+      type: 'agent',
+      meta: {},
+    } as LobeAgentSession;
+
+    const numMessages = 1000;
+
+    for (let i = 1; i <= numMessages; i++) {
+      largeSession.chats[i.toString()] = {
+        id: i.toString(),
+        createAt: i,
+        updateAt: i,
+        meta: {},
+        content: `Message ${i}`,
+        role: 'assistant',
+      };
+    }
+
+    const result = organizeChats(largeSession, { assistant: '', user: '' });
+    expect(result.length).toBe(numMessages);
+    expect(result[0].id).toBe('1');
+    expect(result[numMessages - 1].id).toBe(numMessages.toString());
+  });
+
+  it('按照预期进行排序', () => {
+    const realSession = {
+      chats: {
+        'Ftei28dF': {
+          content: '鲁迅为何暴打周树人',
+          createAt: 1690111354731,
+          id: 'Ftei28dF',
+          meta: {},
+          role: 'user',
+          updateAt: 1690111354731,
+        },
+        '9bQW9hTs': {
+          content:
+            '这是一种误解。鲁迅和周树人是同一人，指的都是现代文学家周樟寿。"鲁迅"是他的笔名，"周树人"则是他的原名。所以，鲁迅并没有暴打周树人，这只是一种说法上的误解。',
+          createAt: 1690111354734,
+          id: '9bQW9hTs',
+          meta: {},
+          parentId: 'Ftei28dF',
+          role: 'assistant',
+          updateAt: 1690111361514,
+          extra: {
+            fromModel: 'gpt-4',
+          },
+        },
+        'HRQGSszU': {
+          content:
+            '这个问题基于一个误解。实际上，鲁迅和周树人是同一个人，这是中国现代文学的开山鼻祖周树人的笔名。他的本名是周树人，鲁迅则是他在30岁时开始使用的笔名。因此，鲁迅不能暴打周树人，因为他们是同一个人。',
+          createAt: 1690111364344,
+          id: 'HRQGSszU',
+          meta: {},
+          parentId: 'Ftei28dF',
+          role: 'assistant',
+          updateAt: 1690111369519,
+          extra: {
+            fromModel: 'gpt-4',
+          },
+        },
+        '981qr9n0': {
+          content:
+            '这是一个误解。鲁迅和周树人是同一个人，是中国现代文学的奠基人。鲁迅是他的笔名，周树人是他的本名。所以，鲁迅不可能暴打周树人。这种说法可能是源于一些误解或误传。',
+          createAt: 1690111375456,
+          id: '981qr9n0',
+          meta: {},
+          parentId: 'Ftei28dF',
+          role: 'assistant',
+          updateAt: 1690111381458,
+          extra: {
+            fromModel: 'gpt-4',
+          },
+        },
+        'ddd': {
+          content: '鲁迅是谁',
+          createAt: 1690211354731,
+          id: 'ddd',
+          meta: {},
+          role: 'user',
+          updateAt: 1690211354731,
+        },
+      },
+      config: {
+        model: 'gpt-4',
+        params: {
+          temperature: 0.6,
+        },
+        systemRole: '',
+      },
+      createAt: 1690110700808,
+      id: '1515e861-0c64-49a3-bb85-2b24d65a19d6',
+      meta: {},
+      type: 'agent',
+      updateAt: 1690110700808,
+    } as LobeAgentSession;
+
+    const result = organizeChats(realSession, { assistant: '', user: '' });
+
+    expect(
+      result.map((i) => ({ id: i.id, content: i.content, role: i.role, createAt: i.createAt })),
+    ).toEqual([
+      {
+        content: '鲁迅为何暴打周树人',
+        createAt: 1690111354731,
+        id: 'Ftei28dF',
+        role: 'user',
+      },
+      {
+        content:
+          '这是一种误解。鲁迅和周树人是同一人，指的都是现代文学家周樟寿。"鲁迅"是他的笔名，"周树人"则是他的原名。所以，鲁迅并没有暴打周树人，这只是一种说法上的误解。',
+        createAt: 1690111354734,
+        id: '9bQW9hTs',
+        role: 'assistant',
+      },
+      {
+        content:
+          '这个问题基于一个误解。实际上，鲁迅和周树人是同一个人，这是中国现代文学的开山鼻祖周树人的笔名。他的本名是周树人，鲁迅则是他在30岁时开始使用的笔名。因此，鲁迅不能暴打周树人，因为他们是同一个人。',
+        createAt: 1690111364344,
+        id: 'HRQGSszU',
+        role: 'assistant',
+      },
+      {
+        content:
+          '这是一个误解。鲁迅和周树人是同一个人，是中国现代文学的奠基人。鲁迅是他的笔名，周树人是他的本名。所以，鲁迅不可能暴打周树人。这种说法可能是源于一些误解或误传。',
+        createAt: 1690111375456,
+        id: '981qr9n0',
+        role: 'assistant',
+      },
+      {
+        content: '鲁迅是谁',
+        createAt: 1690211354731,
+        id: 'ddd',
+        role: 'user',
+      },
+    ]);
+  });
+});

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

@@ -0,0 +1,73 @@
+import pluginList from '@/plugins';
+import { ChatMessage } from '@/types/chatMessage';
+import { LobeAgentSession } from '@/types/session';
+
+export const organizeChats = (
+  session: LobeAgentSession,
+  avatar: { assistant: string; user: string },
+) => {
+  const getMeta = (message: ChatMessage) => {
+    switch (message.role) {
+      case 'user': {
+        return {
+          avatar: avatar.user,
+        };
+      }
+
+      case 'system': {
+        return message.meta;
+      }
+
+      case 'assistant': {
+        return {
+          avatar: avatar.assistant,
+          title: session.meta.title,
+        };
+      }
+
+      case 'function': {
+        const plugin = pluginList.find((p) => p.name === message.function_call?.name);
+        return {
+          avatar: plugin?.avatar || '🧩',
+          title: plugin?.name || 'plugin-unknown',
+        };
+      }
+    }
+  };
+
+  const basic = Object.values<ChatMessage>(session.chats)
+    // 首先按照时间顺序排序，越早的在越前面
+    .sort((pre, next) => pre.createAt - next.createAt)
+    // 过滤掉已归档的消息，归档消息不应该出现在聊天框中
+    .filter((m) => !m.archive)
+    // 映射头像关系
+    .map((m) => {
+      return {
+        ...m,
+        meta: getMeta(m),
+      };
+    });
+
+  const finalList: ChatMessage[] = [];
+
+  const addItem = (item: ChatMessage) => {
+    const isExist = finalList.findIndex((i) => item.id === i.id) > -1;
+    if (!isExist) {
+      finalList.push(item);
+    }
+  };
+
+  // 基于添加逻辑进行重排序
+  for (const item of basic) {
+    // 先判存在与否，不存在就加入
+    addItem(item);
+
+    for (const another of basic) {
+      if (another.parentId === item.id) {
+        addItem(another);
+      }
+    }
+  }
+
+  return finalList;
+};

package/src/types/chatMessage.ts

@@ -22,7 +22,6 @@ export interface ChatMessage extends BaseDataModel {
    */
   content: string;
   error?: any;
-
   // 扩展字段
   extra?: {
     fromModel?: string;
@@ -33,6 +32,9 @@ export interface ChatMessage extends BaseDataModel {
     };
   } & Record<string, any>;
 
+  function_call?: { arguments?: string; name: string };
+  name?: string;
+
   parentId?: string;
   // 引用
   quotaId?: string;

package/src/types/llm.ts

@@ -39,7 +39,7 @@ export interface LLMParams {
   top_p?: number;
 }
 
-export type LLMRoleType = 'user' | 'system' | 'assistant';
+export type LLMRoleType = 'user' | 'system' | 'assistant' | 'function';
 
 export interface LLMMessage {
   content: string;

package/src/utils/fetch.ts

@@ -91,7 +91,7 @@ interface FetchAITaskResultParams<T> {
 }
 
 export const fetchAIFactory =
-  <T>(fetcher: (params: T, signal?: AbortSignal) => Promise<Response>) =>
+  <T>(fetcher: (params: T, options: { signal?: AbortSignal }) => Promise<Response>) =>
   async ({
     params,
     onMessageHandle,
@@ -117,7 +117,7 @@ export const fetchAIFactory =
 
     onLoadingChange?.(true);
 
-    const data = await fetchSSE(() => fetcher(params, abortController?.signal), {
+    const data = await fetchSSE(() => fetcher(params, { signal: abortController?.signal }), {
       onErrorHandle: (error) => {
         errorHandle(new Error(error.message));
       },

package/src/utils/message.ts

@@ -0,0 +1,5 @@
+import { FUNCTION_MESSAGE_FLAG } from '@/const/message';
+
+export const isFunctionMessage = (content: string) => {
+  return content.startsWith(FUNCTION_MESSAGE_FLAG);
+};

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

@@ -1,73 +0,0 @@
-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';
-import { ModelTokens } from '@/const/modelTokens';
-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 inputTokenCount = useMemo(() => encode(text).length, [text]);
-
-  const [inputHeight] = useSettings((s) => [s.inputHeight], 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
-      expandable={false}
-      fullscreen={expand}
-      headerHeight={HEADER_HEIGHT}
-      minHeight={CHAT_TEXTAREA_HEIGHT}
-      onSizeChange={(_, size) => {
-        if (!size) return;
-        useSettings.setState({
-          inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-        });
-      }}
-      placement="bottom"
-      size={{ height: inputHeight, width: '100%' }}
-      style={{ zIndex: 10 }}
-    >
-      <ChatInputArea
-        actions={
-          <>
-            <ActionIcon icon={Languages} />
-            <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} title={t('archiveCurrentMessages')} />} />}
-        minHeight={CHAT_TEXTAREA_HEIGHT}
-        onExpandChange={setExpand}
-        onInputChange={setText}
-        onSend={sendMessage}
-      />
-    </DraggablePanel>
-  );
-};
-
-export default memo(ChatInput);