@lobehub/chat 0.156.2 → 0.157.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 0.157.0](https://github.com/lobehub/lobe-chat/compare/v0.156.2...v0.157.0)
+
+<sup>Released on **2024-05-11**</sup>
+
+#### ✨ Features
+
+- **misc**: upgrade to the new `tool calls` mode.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: upgrade to the new `tool calls` mode, closes [#2414](https://github.com/lobehub/lobe-chat/issues/2414) ([7404f3b](https://github.com/lobehub/lobe-chat/commit/7404f3b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.156.2](https://github.com/lobehub/lobe-chat/compare/v0.156.1...v0.156.2)
 
 <sup>Released on **2024-05-10**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.156.2",
+  "version": "0.157.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.6",
-    "@anthropic-ai/sdk": "^0.18.0",
+    "@anthropic-ai/sdk": "^0.20.9",
     "@auth/core": "0.28.0",
     "@aws-sdk/client-bedrock-runtime": "^3.565.0",
     "@azure/openai": "^1.0.0-beta.12",
@@ -97,6 +97,7 @@
     "@lobehub/icons": "latest",
     "@lobehub/tts": "latest",
     "@lobehub/ui": "^1.138.17",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@next/third-parties": "^14.2.3",
     "@sentry/nextjs": "^7.112.2",
     "@t3-oss/env-nextjs": "^0.10.1",

package/src/config/modelProviders/anthropic.ts

@@ -8,6 +8,7 @@ const Anthropic: ModelProviderCard = {
         'Ideal balance of intelligence and speed for enterprise workloads. Maximum utility at a lower price, dependable, balanced for scaled deployments',
       displayName: 'Claude 3 Sonnet',
       enabled: true,
+      functionCall: true,
       id: 'claude-3-sonnet-20240229',
       maxOutput: 4096,
       tokens: 200_000,
@@ -18,6 +19,7 @@ const Anthropic: ModelProviderCard = {
         'Most powerful model for highly complex tasks. Top-level performance, intelligence, fluency, and understanding',
       displayName: 'Claude 3 Opus',
       enabled: true,
+      functionCall: true,
       id: 'claude-3-opus-20240229',
       maxOutput: 4096,
       tokens: 200_000,
@@ -28,6 +30,7 @@ const Anthropic: ModelProviderCard = {
         'Fastest and most compact model for near-instant responsiveness. Quick and accurate targeted performance',
       displayName: 'Claude 3 Haiku',
       enabled: true,
+      functionCall: true,
       id: 'claude-3-haiku-20240307',
       maxOutput: 4096,
       tokens: 200_000,

package/src/config/modelProviders/google.ts

@@ -22,6 +22,7 @@ const Google: ModelProviderCard = {
       description: 'The best model for scaling across a wide range of tasks',
       displayName: 'Gemini 1.0 Pro',
       enabled: true,
+      functionCall: true,
       id: 'gemini-pro',
       maxOutput: 2048,
       tokens: 30_720 + 2048,
@@ -47,6 +48,7 @@ const Google: ModelProviderCard = {
       description:
         'The best model for scaling across a wide range of tasks. This is a stable model that supports tuning.',
       displayName: 'Gemini 1.0 Pro 001 (Tuning)',
+      functionCall: true,
       id: 'gemini-1.0-pro-001',
       maxOutput: 2048,
       tokens: 30_720 + 2048,
@@ -71,6 +73,7 @@ const Google: ModelProviderCard = {
       description: 'Mid-size multimodal model that supports up to 1 million tokens',
       displayName: 'Gemini 1.5 Pro',
       enabled: true,
+      functionCall: true,
       id: 'gemini-1.5-pro-latest',
       maxOutput: 8192,
       tokens: 1_048_576 + 8192,

package/src/config/modelProviders/groq.ts

@@ -6,24 +6,28 @@ const Groq: ModelProviderCard = {
     {
       displayName: 'LLaMA3-3-70B',
       enabled: true,
+      functionCall: true,
       id: 'llama3-70b-8192',
       tokens: 8192,
     },
     {
-      displayName: 'Mixtral-8x7b-Instruct-v0.1',
+      displayName: 'Mixtral-8x7b',
       enabled: true,
+      functionCall: true,
       id: 'mixtral-8x7b-32768',
       tokens: 32_768,
     },
     {
       displayName: 'Gemma-7b-it',
       enabled: true,
+      functionCall: true,
       id: 'gemma-7b-it',
       tokens: 8192,
     },
     {
       displayName: 'LLaMA3-3-8B',
       enabled: true,
+      functionCall: true,
       id: 'llama3-8b-8192',
       tokens: 8192,
     },

package/src/config/modelProviders/minimax.ts

@@ -3,24 +3,27 @@ import { ModelProviderCard } from '@/types/llm';
 // ref https://www.minimaxi.com/document/guides/chat-model/pro/api
 const Minimax: ModelProviderCard = {
   chatModels: [
-    {
-      description: '复杂场景，例如应用题计算、科学计算等场景',
-      displayName: 'abab6.5',
-      enabled: true,
-      id: 'abab6.5-chat',
-      tokens: 8192,
-    },
     {
       description: '通用场景',
       displayName: 'abab6.5s',
       enabled: true,
+      functionCall: true,
       id: 'abab6.5s-chat',
       tokens: 245_760,
     },
+    {
+      description: '复杂场景，例如应用题计算、科学计算等场景',
+      displayName: 'abab6.5',
+      enabled: true,
+      functionCall: true,
+      id: 'abab6.5-chat',
+      tokens: 8192,
+    },
     {
       description: '更复杂的格式化文本生成',
       displayName: 'abab6',
       enabled: true,
+      functionCall: true,
       id: 'abab6-chat',
       tokens: 32_768,
     },

package/src/config/modelProviders/mistral.ts

@@ -18,6 +18,7 @@ const Mistral: ModelProviderCard = {
     {
       displayName: 'Mixtral 8x22B',
       enabled: true,
+      functionCall: true,
       id: 'open-mixtral-8x22b',
       tokens: 65_536,
     },

package/src/config/modelProviders/moonshot.ts

@@ -6,18 +6,21 @@ const Moonshot: ModelProviderCard = {
     {
       displayName: 'Moonshot V1 8K',
       enabled: true,
+      functionCall: true,
       id: 'moonshot-v1-8k',
       tokens: 8192,
     },
     {
       displayName: 'Moonshot V1 32K',
       enabled: true,
+      functionCall: true,
       id: 'moonshot-v1-32k',
       tokens: 32_768,
     },
     {
       displayName: 'Moonshot V1 128K',
       enabled: true,
+      functionCall: true,
       id: 'moonshot-v1-128k',
       tokens: 128_000,
     },

package/src/config/modelProviders/zhipu.ts

@@ -1,9 +1,5 @@
 import { ModelProviderCard } from '@/types/llm';
 
-// TODO: 等待 ZhiPu 修复 API 问题后开启 functionCall
-// 暂时不透出 GLM 系列的 function_call 功能
-// refs https://github.com/lobehub/lobe-chat/discussions/737#discussioncomment-8315815
-
 // ref https://open.bigmodel.cn/dev/howuse/model
 const ZhiPu: ModelProviderCard = {
   chatModels: [
@@ -11,7 +7,7 @@ const ZhiPu: ModelProviderCard = {
       description: '最新的 GLM-4 、最大支持 128k 上下文、支持 Function Call 、Retreival',
       displayName: 'GLM-4',
       enabled: true,
-      // functionCall: true,
+      functionCall: true,
       id: 'glm-4',
       tokens: 128_000,
     },
@@ -28,7 +24,7 @@ const ZhiPu: ModelProviderCard = {
       description: '最新的glm-3-turbo、最大支持 128k上下文、支持Function Call、Retreival',
       displayName: 'GLM-3 Turbo',
       enabled: true,
-      // functionCall: true,
+      functionCall: true,
       id: 'glm-3-turbo',
       tokens: 128_000,
     },

package/src/config/server/provider.ts

@@ -211,7 +211,7 @@ export const getProviderConfig = () => {
     AWS_ACCESS_KEY_ID: AWS_ACCESS_KEY_ID,
     AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY || '',
 
-    ENABLE_OLLAMA: process.env.ENABLE_OLLAMA as unknown as boolean,
+    ENABLE_OLLAMA: Boolean(process.env.ENABLE_OLLAMA),
     OLLAMA_PROXY_URL: process.env.OLLAMA_PROXY_URL || '',
     OLLAMA_MODEL_LIST: process.env.OLLAMA_MODEL_LIST || process.env.OLLAMA_CUSTOM_MODELS,
   };

package/src/database/client/core/db.ts

@@ -19,6 +19,7 @@ import {
   dbSchemaV5,
   dbSchemaV6,
   dbSchemaV7,
+  dbSchemaV9,
 } from './schemas';
 import { DBModel, LOBE_CHAT_LOCAL_DB_NAME } from './types/db';
 
@@ -67,6 +68,10 @@ export class BrowserDB extends Dexie {
       .stores(dbSchemaV7)
       .upgrade((trans) => this.upgradeToV8(trans));
 
+    this.version(9)
+      .stores(dbSchemaV9)
+      .upgrade((trans) => this.upgradeToV9(trans));
+
     this.files = this.table('files');
     this.sessions = this.table('sessions');
     this.messages = this.table('messages');
@@ -153,6 +158,33 @@ export class BrowserDB extends Dexie {
       }
     });
   };
+
+  upgradeToV9 = async (trans: Transaction) => {
+    const messages = trans.table('messages');
+    await messages.toCollection().modify(async (message: DBModel<DB_Message>) => {
+      if ((message.role as string) === 'function') {
+        const origin = Object.assign({}, message);
+
+        const toolCallId = `tool_call_${message.id}`;
+        const assistantMessageId = `tool_calls_${message.id}`;
+
+        message.role = 'tool';
+        message.tool_call_id = toolCallId;
+        message.parentId = assistantMessageId;
+
+        await messages.add({
+          ...origin,
+          content: '',
+          createdAt: message.createdAt - 10,
+          error: undefined,
+          id: assistantMessageId,
+          role: 'assistant',
+          tools: [{ ...message.plugin!, id: toolCallId }],
+          updatedAt: message.updatedAt - 10,
+        } as DBModel<DB_Message>);
+      }
+    });
+  };
 }
 
 export const browserDB = new BrowserDB();

package/src/database/client/core/schemas.ts

@@ -76,3 +76,12 @@ export const dbSchemaV7 = {
   plugins:
     '&identifier, id, type, manifest.type, manifest.meta.title, manifest.meta.description, manifest.meta.author, createdAt, updatedAt',
 };
+// ************************************** //
+// ******* Version 9 - 2024-03-14 ******* //
+// ************************************** //
+// - Added id to `plugins` table
+export const dbSchemaV9 = {
+  ...dbSchemaV7,
+  messages:
+    '&id, role, content, fromModel, favorite, tool_call_id, plugin.identifier, plugin.apiName, translate.content, createdAt, updatedAt, sessionId, topicId, quotaId, parentId, [sessionId+topicId], traceId',
+};

package/src/database/client/models/__tests__/message.test.ts

@@ -264,14 +264,14 @@ describe('MessageModel', () => {
     it('should update a role and plugins', async () => {
       const createdMessage = await MessageModel.create(messageData);
       const updateData = {
-        role: 'function' as const,
+        role: 'tool' as const,
         plugin: { apiName: 'a', identifier: 'b', arguments: 'abc' },
       };
 
       await MessageModel.update(createdMessage.id, updateData);
       const updatedMessage = await MessageModel.findById(createdMessage.id);
 
-      expect(updatedMessage).toHaveProperty('role', 'function');
+      expect(updatedMessage).toHaveProperty('role', 'tool');
     });
   });
 

package/src/database/client/schemas/message.ts

@@ -14,13 +14,20 @@ const PluginSchema = z.object({
   type: z.enum(['default', 'markdown', 'standalone', 'builtin']).default('default'),
 });
 
+const ToolCallSchema = PluginSchema.extend({
+  id: z.string(),
+});
+
 export const DB_MessageSchema = z.object({
-  role: z.enum(['user', 'system', 'assistant', 'function']),
+  role: z.enum(['user', 'system', 'assistant', 'tool']),
   content: z.string(),
   files: z.array(z.string()).optional(),
   favorite: z.number().int().min(0).max(1).optional(),
   error: z.any().optional(),
 
+  tools: z.array(ToolCallSchema).optional(),
+  tool_call_id: z.string().optional(),
+
   plugin: PluginSchema.optional(),
   pluginState: z.any().optional(),
   fromModel: z.string().optional(),

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

@@ -8,6 +8,7 @@ import { TraceNameMap, TracePayload, TraceTopicType } from '@/const/trace';
 import { chatService } from '@/services/chat';
 import { LobeAgentConfig } from '@/types/agent';
 import { MetaData } from '@/types/meta';
+import { MessageTextChunk } from '@/utils/fetch';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { SessionLoadingState } from '../store/initialState';
@@ -246,17 +247,25 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
 
   streamUpdateMetaArray: (key: keyof MetaData) => {
     let value = '';
-    return (text: string) => {
-      value += text;
-      get().dispatchMeta({ type: 'update', value: { [key]: value.split(',') } });
+    return (chunk: MessageTextChunk) => {
+      switch (chunk.type) {
+        case 'text': {
+          value += chunk.text;
+          get().dispatchMeta({ type: 'update', value: { [key]: value.split(',') } });
+        }
+      }
     };
   },
 
   streamUpdateMetaString: (key: keyof MetaData) => {
     let value = '';
-    return (text: string) => {
-      value += text;
-      get().dispatchMeta({ type: 'update', value: { [key]: value } });
+    return (chunk: MessageTextChunk) => {
+      switch (chunk.type) {
+        case 'text': {
+          value += chunk.text;
+          get().dispatchMeta({ type: 'update', value: { [key]: value } });
+        }
+      }
     };
   },
 

package/src/features/Conversation/Actions/Tool.tsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import { RenderAction } from '../types';
+
+export const ToolActionsBar: RenderAction = memo(() => {
+  return undefined;
+  // const { regenerate } = useChatListActionsBar();
+  // return (
+  //   <ActionIconGroup
+  //     dropdownMenu={[regenerate]}
+  //     items={[regenerate]}
+  //     onActionClick={onActionClick}
+  //     type="ghost"
+  //   />
+  // );
+});

package/src/features/Conversation/Actions/index.ts

@@ -8,13 +8,13 @@ import { LLMRoleType } from '@/types/llm';
 import { OnActionsClick, RenderAction } from '../types';
 import { AssistantActionsBar } from './Assistant';
 import { DefaultActionsBar } from './Fallback';
-import { FunctionActionsBar } from './Function';
+import { ToolActionsBar } from './Tool';
 import { UserActionsBar } from './User';
 
 export const renderActions: Record<LLMRoleType, RenderAction> = {
   assistant: AssistantActionsBar,
-  function: FunctionActionsBar,
   system: DefaultActionsBar,
+  tool: ToolActionsBar,
   user: UserActionsBar,
 };
 

package/src/features/Conversation/Messages/Assistant/ToolCalls/index.tsx

@@ -0,0 +1,78 @@
+import { Avatar, Highlighter, Icon } from '@lobehub/ui';
+import isEqual from 'fast-deep-equal';
+import { Loader2, LucideChevronDown, LucideChevronRight, LucideToyBrick } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/slices/message/selectors';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { toolSelectors } from '@/store/tool/selectors';
+
+import { useStyles } from './style';
+
+export interface InspectorProps {
+  arguments?: string;
+  identifier: string;
+  messageId: string;
+}
+
+const CallItem = memo<InspectorProps>(
+  ({ arguments: requestArgs = '{}', messageId, identifier }) => {
+    const { t } = useTranslation('plugin');
+    const { styles } = useStyles();
+    const [open, setOpen] = useState(false);
+    const loading = useChatStore(chatSelectors.isMessageGenerating(messageId));
+
+    const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
+
+    const pluginAvatar = pluginHelpers.getPluginAvatar(pluginMeta);
+
+    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
+
+    const avatar = pluginAvatar ? (
+      <Avatar avatar={pluginAvatar} size={32} />
+    ) : (
+      <Icon icon={LucideToyBrick} />
+    );
+
+    let params;
+    try {
+      params = JSON.stringify(JSON.parse(requestArgs), null, 2);
+    } catch {
+      params = requestArgs;
+    }
+
+    return (
+      <Flexbox gap={8}>
+        <Flexbox
+          align={'center'}
+          className={styles.container}
+          distribution={'space-between'}
+          gap={8}
+          height={32}
+          horizontal
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          <Flexbox align={'center'} gap={8} horizontal>
+            {loading ? (
+              <Center height={30} width={24}>
+                <Icon icon={Loader2} spin />
+              </Center>
+            ) : (
+              avatar
+            )}
+            {pluginTitle}
+          </Flexbox>
+          <Icon icon={open ? LucideChevronDown : LucideChevronRight} />
+        </Flexbox>
+        {(open || loading) && <Highlighter language={'json'}>{params}</Highlighter>}
+      </Flexbox>
+    );
+  },
+);
+
+export default CallItem;

package/src/features/Conversation/Messages/Assistant/ToolCalls/style.ts

@@ -0,0 +1,25 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    width: fit-content;
+    padding-inline: 4px 6px;
+
+    color: ${token.colorText};
+
+    background: ${token.colorFillTertiary};
+    border-radius: 8px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
+  `,
+  plugin: css`
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+  `,
+}));

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -0,0 +1,47 @@
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { LOADING_FLAT } from '@/const/message';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/message';
+
+import { DefaultMessage } from '../Default';
+import ToolCalls from './ToolCalls';
+
+export const AssistantMessage = memo<
+  ChatMessage & {
+    editableContent: ReactNode;
+  }
+>(({ id, tools, content, ...props }) => {
+  const editing = useChatStore(chatSelectors.isMessageEditing(id));
+  const generating = useChatStore(chatSelectors.isMessageGenerating(id));
+
+  const isToolCallGenerating = generating && (content === LOADING_FLAT || !content) && !!tools;
+
+  return (
+    <Flexbox gap={8} id={id}>
+      {(content || editing) && (
+        <DefaultMessage
+          content={content}
+          // we have id above, so don't need to pass it again
+          id={undefined as any}
+          isToolCallGenerating={isToolCallGenerating}
+          {...props}
+        />
+      )}
+      {!editing && tools && (
+        <Flexbox gap={8} horizontal>
+          {tools.map((toolCall) => (
+            <ToolCalls
+              arguments={toolCall.arguments}
+              identifier={toolCall.identifier}
+              key={toolCall.id}
+              messageId={id}
+            />
+          ))}
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});

package/src/features/Conversation/Messages/Default.tsx

@@ -8,8 +8,11 @@ import BubblesLoading from '../components/BubblesLoading';
 export const DefaultMessage = memo<
   ChatMessage & {
     editableContent: ReactNode;
+    isToolCallGenerating?: boolean;
   }
->(({ id, editableContent, content }) => {
+>(({ id, editableContent, content, isToolCallGenerating }) => {
+  if (isToolCallGenerating) return;
+
   if (content === LOADING_FLAT) return <BubblesLoading />;
 
   return <div id={id}>{editableContent}</div>;