@lobehub/chat 0.156.2 → 0.157.0

package/src/features/Conversation/{Plugins → Messages/Tool}/Inspector/index.tsx

@@ -1,13 +1,12 @@
 import { Loading3QuartersOutlined } from '@ant-design/icons';
-import { LobePluginType } from '@lobehub/chat-plugin-sdk';
-import { ActionIcon, Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { ActionIcon, Avatar, Highlighter, Icon, Tag } from '@lobehub/ui';
 import { Tabs } from 'antd';
 import isEqual from 'fast-deep-equal';
 import {
   LucideBug,
   LucideBugOff,
   LucideChevronDown,
-  LucideChevronUp,
+  LucideChevronRight,
   LucideToyBrick,
 } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -16,6 +15,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors, toolSelectors } from '@/store/tool/selectors';
+import { ChatPluginPayload } from '@/types/message';
 
 import PluginResult from './PluginResultJSON';
 import Settings from './Settings';
@@ -23,36 +23,34 @@ import { useStyles } from './style';
 
 export interface InspectorProps {
   arguments?: string;
-  command?: any;
   content: string;
-  id?: string;
+  identifier?: string;
   loading?: boolean;
+  payload?: ChatPluginPayload;
   setShow?: (showRender: boolean) => void;
   showRender?: boolean;
-  type?: LobePluginType;
 }
 
 const Inspector = memo<InspectorProps>(
   ({
     arguments: requestArgs = '{}',
-    command,
+    payload,
     showRender,
     loading,
     setShow,
     content,
-    id = 'unknown',
-    // type,
+    identifier = 'unknown',
   }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
 
-    const pluginMeta = useToolStore(toolSelectors.getMetaById(id), isEqual);
+    const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
-    const showRightAction = useToolStore(pluginSelectors.isPluginHasUI(id));
+    const showRightAction = useToolStore(pluginSelectors.isPluginHasUI(identifier));
     const pluginAvatar = pluginHelpers.getPluginAvatar(pluginMeta);
 
-    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('plugins.loading');
+    const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
     const avatar = pluginAvatar ? (
       <Avatar avatar={pluginAvatar} size={32} />
@@ -62,7 +60,7 @@ const Inspector = memo<InspectorProps>(
 
     let args, params;
     try {
-      args = JSON.stringify(command, null, 2);
+      args = JSON.stringify(payload, null, 2);
       params = JSON.stringify(JSON.parse(requestArgs), null, 2);
     } catch {
       args = '';
@@ -81,29 +79,30 @@ const Inspector = memo<InspectorProps>(
               setShow?.(!showRender);
             }}
           >
-            {loading ? (
-              <div>
-                <Loading3QuartersOutlined spin />
-              </div>
-            ) : (
-              avatar
-            )}
-            {pluginTitle}
-            {showRightAction && <Icon icon={showRender ? LucideChevronUp : LucideChevronDown} />}
-          </Flexbox>
-          {
-            <Flexbox horizontal>
-              {/*{type === 'standalone' && <ActionIcon icon={LucideOrbit} />}*/}
-              <ActionIcon
-                icon={open ? LucideBugOff : LucideBug}
-                onClick={() => {
-                  setOpen(!open);
-                }}
-                title={t(open ? 'debug.off' : 'debug.on')}
-              />
-              <Settings id={id} />
+            <Flexbox align={'center'} gap={8} horizontal>
+              {loading ? (
+                <div>
+                  <Loading3QuartersOutlined spin />
+                </div>
+              ) : (
+                avatar
+              )}
+              <div>{pluginTitle}</div>
+              <Tag>{payload?.apiName}</Tag>
             </Flexbox>
-          }
+            {showRightAction && <Icon icon={showRender ? LucideChevronDown : LucideChevronRight} />}
+          </Flexbox>
+
+          <Flexbox horizontal>
+            <ActionIcon
+              icon={open ? LucideBugOff : LucideBug}
+              onClick={() => {
+                setOpen(!open);
+              }}
+              title={t(open ? 'debug.off' : 'debug.on')}
+            />
+            <Settings id={identifier} />
+          </Flexbox>
         </Flexbox>
         {open && (
           <Tabs

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

@@ -0,0 +1,44 @@
+import { Snippet } from '@lobehub/ui';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/message';
+
+import PluginRender from '../../Plugins/Render';
+import Inspector from './Inspector';
+
+export const ToolMessage = memo<ChatMessage>(({ id, content, plugin }) => {
+  const loading = useChatStore(chatSelectors.isMessageGenerating(id));
+
+  const [showRender, setShow] = useState(plugin?.type !== 'default');
+
+  return (
+    <Flexbox gap={12} id={id} width={'100%'}>
+      <Inspector
+        arguments={plugin?.arguments}
+        content={content}
+        identifier={plugin?.identifier}
+        loading={loading}
+        payload={plugin}
+        setShow={setShow}
+        showRender={showRender}
+      />
+      {showRender || loading ? (
+        <PluginRender
+          content={content}
+          id={id}
+          identifier={plugin?.identifier}
+          loading={loading}
+          payload={plugin}
+          type={plugin?.type}
+        />
+      ) : (
+        <Flexbox>
+          <Snippet>{plugin?.arguments || ''}</Snippet>
+        </Flexbox>
+      )}
+    </Flexbox>
+  );
+});

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

@@ -6,13 +6,14 @@ import { sessionSelectors } from '@/store/session/selectors';
 import { OnAvatarsClick, RenderMessage } from '../types';
 import { AssistantMessage } from './Assistant';
 import { DefaultMessage } from './Default';
-import { FunctionMessage } from './Function';
+import { ToolMessage } from './Tool';
 import { UserMessage } from './User';
 
 export const renderMessages: Record<string, RenderMessage> = {
   assistant: AssistantMessage,
   default: DefaultMessage,
-  function: FunctionMessage,
+  function: DefaultMessage,
+  tool: ToolMessage,
   user: UserMessage,
 };
 

package/src/features/Conversation/Plugins/Render/StandaloneType/Iframe.tsx

@@ -126,7 +126,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
     // we need to know which message to trigger
     if (messageId !== id) return;
 
-    triggerAIMessage(id);
+    triggerAIMessage({ parentId: id });
   });
 
   // when plugin want to create an assistant message

package/src/features/Conversation/components/SkeletonList.tsx

@@ -34,14 +34,14 @@ const SkeletonList = memo<SkeletonListProps>(({ mobile }) => {
       <Skeleton
         active
         avatar={{ size: mobile ? 32 : 40 }}
-        className={styles.message}
+        className={cx(styles.message, styles.user)}
         paragraph={{ width: mobile ? ['80%', '40%'] : ['50%', '30%'] }}
         title={false}
       />
       <Skeleton
         active
         avatar={{ size: mobile ? 32 : 40 }}
-        className={cx(styles.message, styles.user)}
+        className={styles.message}
         paragraph={{ width: mobile ? ['80%', '40%'] : ['50%', '30%'] }}
         title={false}
       />

package/src/features/Conversation/index.tsx

@@ -1,9 +1,8 @@
-import { Suspense, lazy } from 'react';
+import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SkeletonList from './components/SkeletonList';
-
-const ChatList = lazy(() => import('./components/VirtualizedList'));
+import ChatList from './components/VirtualizedList';
 
 interface ConversationProps {
   mobile?: boolean;

package/src/libs/agent-runtime/BaseAI.ts

@@ -1,4 +1,3 @@
-import { StreamingTextResponse } from 'ai';
 import OpenAI from 'openai';
 
 import { ChatModelCard } from '@/types/llm';
@@ -7,10 +6,7 @@ import { ChatCompetitionOptions, ChatStreamPayload } from './types';
 
 export interface LobeRuntimeAI {
   baseURL?: string;
-  chat(
-    payload: ChatStreamPayload,
-    options?: ChatCompetitionOptions,
-  ): Promise<StreamingTextResponse>;
+  chat(payload: ChatStreamPayload, options?: ChatCompetitionOptions): Promise<Response>;
 
   models?(): Promise<any>;
 }
@@ -19,10 +15,7 @@ export abstract class LobeOpenAICompatibleRuntime {
   abstract baseURL: string;
   abstract client: OpenAI;
 
-  abstract chat(
-    payload: ChatStreamPayload,
-    options?: ChatCompetitionOptions,
-  ): Promise<StreamingTextResponse>;
+  abstract chat(payload: ChatStreamPayload, options?: ChatCompetitionOptions): Promise<Response>;
 
   abstract models(): Promise<ChatModelCard[]>;
 }

package/src/libs/agent-runtime/anthropic/index.test.ts

@@ -1,6 +1,9 @@
 // @vitest-environment node
 import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { ChatCompletionTool } from '@/libs/agent-runtime';
+
+import * as anthropicHelpers from '../utils/anthropicHelpers';
 import * as debugStreamModule from '../utils/debugStream';
 import { LobeAnthropicAI } from './index';
 
@@ -16,6 +19,10 @@ beforeEach(() => {
 
   // 使用 vi.spyOn 来模拟 chat.completions.create 方法
   vi.spyOn(instance['client'].messages, 'create').mockReturnValue(new ReadableStream() as any);
+
+  vi.spyOn(instance['client'].beta.tools.messages, 'create').mockReturnValue({
+    content: [],
+  } as any);
 });
 
 afterEach(() => {
@@ -233,6 +240,54 @@ describe('LobeAnthropicAI', () => {
       process.env.DEBUG_ANTHROPIC_CHAT_COMPLETION = originalDebugValue;
     });
 
+    describe('chat with tools', () => {
+      it('should call client.beta.tools.messages.create when tools are provided', async () => {
+        // Arrange
+        const tools: ChatCompletionTool[] = [
+          { function: { name: 'tool1', description: 'desc1' }, type: 'function' },
+        ];
+        const spyOn = vi.spyOn(anthropicHelpers, 'buildAnthropicTools');
+
+        // Act
+        await instance.chat({
+          messages: [{ content: 'Hello', role: 'user' }],
+          model: 'claude-3-haiku-20240307',
+          temperature: 1,
+          tools,
+        });
+
+        // Assert
+        expect(instance['client'].beta.tools.messages.create).toHaveBeenCalled();
+        expect(spyOn).toHaveBeenCalledWith(tools);
+      });
+
+      it('should handle text and tool_use content correctly in transformResponseToStream', async () => {
+        // Arrange
+        const mockResponse = {
+          content: [
+            { type: 'text', text: 'Hello' },
+            { type: 'tool_use', id: 'tool1', name: 'tool1', input: 'input1' },
+          ],
+        };
+        // @ts-ignore
+        vi.spyOn(instance, 'transformResponseToStream').mockReturnValue(new ReadableStream());
+        vi.spyOn(instance['client'].beta.tools.messages, 'create').mockResolvedValue(
+          mockResponse as any,
+        );
+
+        // Act
+        await instance.chat({
+          messages: [{ content: 'Hello', role: 'user' }],
+          model: 'claude-3-haiku-20240307',
+          temperature: 0,
+          tools: [{ function: { name: 'tool1', description: 'desc1' }, type: 'function' }],
+        });
+
+        // Assert
+        expect(instance['transformResponseToStream']).toHaveBeenCalledWith(mockResponse);
+      });
+    });
+
     describe('Error', () => {
       it('should throw InvalidAnthropicAPIKey error on API_KEY_INVALID error', async () => {
         // Arrange
@@ -305,5 +360,145 @@ describe('LobeAnthropicAI', () => {
         }
       });
     });
+
+    describe('Error handling', () => {
+      it('should throw LocationNotSupportError on 403 error', async () => {
+        // Arrange
+        const apiError = { status: 403 };
+        (instance['client'].messages.create as Mock).mockRejectedValue(apiError);
+
+        // Act & Assert
+        await expect(
+          instance.chat({
+            messages: [{ content: 'Hello', role: 'user' }],
+            model: 'claude-3-haiku-20240307',
+            temperature: 1,
+          }),
+        ).rejects.toEqual({
+          endpoint: 'https://api.anthropic.com',
+          error: apiError,
+          errorType: 'LocationNotSupportError',
+          provider,
+        });
+      });
+
+      it('should throw AnthropicBizError on other error status codes', async () => {
+        // Arrange
+        const apiError = { status: 500 };
+        (instance['client'].messages.create as Mock).mockRejectedValue(apiError);
+
+        // Act & Assert
+        await expect(
+          instance.chat({
+            messages: [{ content: 'Hello', role: 'user' }],
+            model: 'claude-3-haiku-20240307',
+            temperature: 1,
+          }),
+        ).rejects.toEqual({
+          endpoint: 'https://api.anthropic.com',
+          error: apiError,
+          errorType: 'AnthropicBizError',
+          provider,
+        });
+      });
+
+      it('should desensitize custom baseURL in error message', async () => {
+        // Arrange
+        const apiError = { status: 401 };
+        const customInstance = new LobeAnthropicAI({
+          apiKey: 'test',
+          baseURL: 'https://api.custom.com/v1',
+        });
+        vi.spyOn(customInstance['client'].messages, 'create').mockRejectedValue(apiError);
+
+        // Act & Assert
+        await expect(
+          customInstance.chat({
+            messages: [{ content: 'Hello', role: 'user' }],
+            model: 'claude-3-haiku-20240307',
+            temperature: 0,
+          }),
+        ).rejects.toEqual({
+          endpoint: 'https://api.cu****om.com/v1',
+          error: apiError,
+          errorType: 'InvalidAnthropicAPIKey',
+          provider,
+        });
+      });
+    });
+
+    describe('Options', () => {
+      it('should pass signal to API call', async () => {
+        // Arrange
+        const controller = new AbortController();
+
+        // Act
+        await instance.chat(
+          {
+            messages: [{ content: 'Hello', role: 'user' }],
+            model: 'claude-3-haiku-20240307',
+            temperature: 1,
+          },
+          { signal: controller.signal },
+        );
+
+        // Assert
+        expect(instance['client'].messages.create).toHaveBeenCalledWith(
+          expect.objectContaining({}),
+          { signal: controller.signal },
+        );
+      });
+
+      it('should apply callback to the returned stream', async () => {
+        // Arrange
+        const callback = vi.fn();
+
+        // Act
+        await instance.chat(
+          {
+            messages: [{ content: 'Hello', role: 'user' }],
+            model: 'claude-3-haiku-20240307',
+            temperature: 0,
+          },
+          {
+            callback: { onStart: callback },
+          },
+        );
+
+        // Assert
+        expect(callback).toHaveBeenCalled();
+      });
+
+      it('should set headers on the response', async () => {
+        // Arrange
+        const headers = { 'X-Test-Header': 'test' };
+
+        // Act
+        const result = await instance.chat(
+          {
+            messages: [{ content: 'Hello', role: 'user' }],
+            model: 'claude-3-haiku-20240307',
+            temperature: 1,
+          },
+          { headers },
+        );
+
+        // Assert
+        expect(result.headers.get('X-Test-Header')).toBe('test');
+      });
+    });
+
+    describe('Edge cases', () => {
+      it('should handle empty messages array', async () => {
+        // Act & Assert
+        await expect(
+          instance.chat({
+            messages: [],
+            model: 'claude-3-haiku-20240307',
+            temperature: 1,
+          }),
+        ).resolves.toBeInstanceOf(Response);
+      });
+    });
   });
 });

package/src/libs/agent-runtime/anthropic/index.ts

@@ -1,7 +1,6 @@
 // sort-imports-ignore
 import '@anthropic-ai/sdk/shims/web';
 import Anthropic from '@anthropic-ai/sdk';
-import { AnthropicStream, StreamingTextResponse } from 'ai';
 import { ClientOptions } from 'openai';
 
 import { LobeRuntimeAI } from '../BaseAI';
@@ -10,7 +9,9 @@ import { ChatCompetitionOptions, ChatStreamPayload, ModelProvider } from '../typ
 import { AgentRuntimeError } from '../utils/createError';
 import { debugStream } from '../utils/debugStream';
 import { desensitizeUrl } from '../utils/desensitizeUrl';
-import { buildAnthropicMessages } from '../utils/anthropicHelpers';
+import { buildAnthropicMessages, buildAnthropicTools } from '../utils/anthropicHelpers';
+import { StreamingResponse } from '../utils/response';
+import { AnthropicStream } from '../utils/streams';
 
 const DEFAULT_BASE_URL = 'https://api.anthropic.com';
 
@@ -30,18 +31,40 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
     try {
       const anthropicPayload = this.buildAnthropicPayload(payload);
 
-      const response = await this.client.messages.create(
-        { ...anthropicPayload, stream: true },
+      // if there is no tool, we can use the normal chat API
+      if (!anthropicPayload.tools || anthropicPayload.tools.length === 0) {
+        const response = await this.client.messages.create(
+          { ...anthropicPayload, stream: true },
+          {
+            signal: options?.signal,
+          },
+        );
+
+        const [prod, debug] = response.tee();
+
+        if (process.env.DEBUG_ANTHROPIC_CHAT_COMPLETION === '1') {
+          debugStream(debug.toReadableStream()).catch(console.error);
+        }
+
+        return StreamingResponse(AnthropicStream(prod, options?.callback), {
+          headers: options?.headers,
+        });
+      }
+
+      // or we should call the tool API
+      const response = await this.client.beta.tools.messages.create(
+        { ...anthropicPayload, stream: false },
         { signal: options?.signal },
       );
 
-      const [prod, debug] = response.tee();
-
       if (process.env.DEBUG_ANTHROPIC_CHAT_COMPLETION === '1') {
-        debugStream(debug.toReadableStream()).catch(console.error);
+        console.log('\n[no stream response]\n');
+        console.log(JSON.stringify(response) + '\n');
       }
 
-      return new StreamingTextResponse(AnthropicStream(prod, options?.callback), {
+      const stream = this.transformResponseToStream(response);
+
+      return StreamingResponse(AnthropicStream(stream, options?.callback), {
         headers: options?.headers,
       });
     } catch (error) {
@@ -85,20 +108,53 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
   }
 
   private buildAnthropicPayload(payload: ChatStreamPayload) {
-    const { messages, model, max_tokens, temperature, top_p } = payload;
+    const { messages, model, max_tokens = 4096, temperature, top_p, tools } = payload;
     const system_message = messages.find((m) => m.role === 'system');
     const user_messages = messages.filter((m) => m.role !== 'system');
 
     return {
-      max_tokens: max_tokens || 4096,
+      max_tokens,
       messages: buildAnthropicMessages(user_messages),
-      model: model,
-      stream: true,
+      model,
       system: system_message?.content as string,
-      temperature: temperature,
-      top_p: top_p,
-    };
+      temperature,
+      // TODO: Anthropic sdk don't have tools interface currently
+      // @ts-ignore
+      tools: buildAnthropicTools(tools),
+      top_p,
+    } satisfies Anthropic.MessageCreateParams;
   }
+
+  private transformResponseToStream = (response: Anthropic.Beta.Tools.ToolsBetaMessage) => {
+    return new ReadableStream<Anthropic.MessageStreamEvent>({
+      start(controller) {
+        response.content.forEach((content) => {
+          switch (content.type) {
+            case 'text': {
+              controller.enqueue({
+                delta: { text: content.text, type: 'text_delta' },
+                type: 'content_block_delta',
+              } as Anthropic.ContentBlockDeltaEvent);
+              break;
+            }
+            case 'tool_use': {
+              controller.enqueue({
+                delta: {
+                  tool_use: { id: content.id, input: content.input, name: content.name },
+                  type: 'tool_use',
+                },
+                type: 'content_block_delta',
+              } as any);
+            }
+          }
+        });
+
+        controller.enqueue({ type: 'message_stop' } as Anthropic.MessageStopEvent);
+
+        controller.close();
+      },
+    });
+  };
 }
 
 export default LobeAnthropicAI;

package/src/libs/agent-runtime/azureOpenai/index.ts

@@ -4,13 +4,14 @@ import {
   GetChatCompletionsOptions,
   OpenAIClient,
 } from '@azure/openai';
-import { OpenAIStream, StreamingTextResponse } from 'ai';
 
 import { LobeRuntimeAI } from '../BaseAI';
 import { AgentRuntimeErrorType } from '../error';
 import { ChatCompetitionOptions, ChatStreamPayload, ModelProvider } from '../types';
 import { AgentRuntimeError } from '../utils/createError';
 import { debugStream } from '../utils/debugStream';
+import { StreamingResponse } from '../utils/response';
+import { OpenAIStream } from '../utils/streams';
 
 export class LobeAzureOpenAI implements LobeRuntimeAI {
   client: OpenAIClient;
@@ -40,15 +41,15 @@ export class LobeAzureOpenAI implements LobeRuntimeAI {
         { ...params, abortSignal: options?.signal, maxTokens } as GetChatCompletionsOptions,
       );
 
-      const stream = OpenAIStream(response as any);
-
-      const [debug, prod] = stream.tee();
+      const [debug, prod] = response.tee();
 
       if (process.env.DEBUG_AZURE_CHAT_COMPLETION === '1') {
         debugStream(debug).catch(console.error);
       }
 
-      return new StreamingTextResponse(prod);
+      return StreamingResponse(OpenAIStream(prod, options?.callback), {
+        headers: options?.headers,
+      });
     } catch (e) {
       let error = e as { [key: string]: any; code: string; message: string };