@lobehub/chat 0.157.0 → 0.157.1

package/src/utils/fetch.test.ts

@@ -1,6 +1,7 @@
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { FetchEventSourceInit } from '@microsoft/fetch-event-source';
 import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ZodError } from 'zod';
 
 import { ErrorResponse } from '@/types/fetch';
 
@@ -82,6 +83,16 @@ describe('getMessageError', () => {
     });
     expect(mockResponse.json).toHaveBeenCalled();
   });
+
+  it('should handle timeout error correctly', async () => {
+    const mockResponse = createMockResponse(undefined, false, 504);
+    const error = await getMessageError(mockResponse as any);
+
+    expect(error).toEqual({
+      message: 'translated_response.504',
+      type: 504,
+    });
+  });
 });
 
 describe('parseToolCalls', () => {
@@ -173,6 +184,34 @@ describe('parseToolCalls', () => {
       },
     ]);
   });
+
+  it('should throw error if incomplete tool calls data', () => {
+    const origin = [
+      {
+        id: '1',
+        type: 'function',
+        function: { name: 'func', arguments: '{"location\\": \\"Hangzhou\\"}' },
+      },
+    ];
+
+    const chunk = [{ index: 1, id: '2', type: 'function' }];
+
+    try {
+      parseToolCalls(origin, chunk as any);
+    } catch (e) {
+      expect(e).toEqual(
+        new ZodError([
+          {
+            code: 'invalid_type',
+            expected: 'object',
+            received: 'undefined',
+            path: ['function'],
+            message: 'Required',
+          },
+        ]),
+      );
+    }
+  });
 });
 
 describe('fetchSSE', () => {
@@ -188,7 +227,11 @@ describe('fetchSSE', () => {
       },
     );
 
-    await fetchSSE('/', { onMessageHandle: mockOnMessageHandle, onFinish: mockOnFinish });
+    await fetchSSE('/', {
+      onMessageHandle: mockOnMessageHandle,
+      onFinish: mockOnFinish,
+      smoothing: false,
+    });
 
     expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'Hello', type: 'text' });
     expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: ' World', type: 'text' });
@@ -222,7 +265,11 @@ describe('fetchSSE', () => {
       },
     );
 
-    await fetchSSE('/', { onMessageHandle: mockOnMessageHandle, onFinish: mockOnFinish });
+    await fetchSSE('/', {
+      onMessageHandle: mockOnMessageHandle,
+      onFinish: mockOnFinish,
+      smoothing: false,
+    });
 
     expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, {
       tool_calls: [{ id: '1', type: 'function', function: { name: 'func1', arguments: 'arg1' } }],
@@ -256,7 +303,7 @@ describe('fetchSSE', () => {
       },
     );
 
-    await fetchSSE('/', { onAbort: mockOnAbort });
+    await fetchSSE('/', { onAbort: mockOnAbort, smoothing: false });
 
     expect(mockOnAbort).toHaveBeenCalledWith('Hello');
   });
@@ -320,4 +367,162 @@ describe('fetchSSE', () => {
       type: 'done',
     });
   });
+
+  it('should handle text event with smoothing correctly', async () => {
+    const mockOnMessageHandle = vi.fn();
+    const mockOnFinish = vi.fn();
+
+    (fetchEventSource as any).mockImplementationOnce(
+      (url: string, options: FetchEventSourceInit) => {
+        options.onopen!({ clone: () => ({ ok: true, headers: new Headers() }) } as any);
+        options.onmessage!({ event: 'text', data: JSON.stringify('Hello') } as any);
+        options.onmessage!({ event: 'text', data: JSON.stringify(' World') } as any);
+      },
+    );
+
+    await fetchSSE('/', {
+      onMessageHandle: mockOnMessageHandle,
+      onFinish: mockOnFinish,
+    });
+
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'He', type: 'text' });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'llo World', type: 'text' });
+    // more assertions for each character...
+    expect(mockOnFinish).toHaveBeenCalledWith('Hello World', {
+      observationId: null,
+      toolCalls: undefined,
+      traceId: null,
+      type: 'done',
+    });
+  });
+
+  it('should handle tool_calls event with smoothing correctly', async () => {
+    const mockOnMessageHandle = vi.fn();
+    const mockOnFinish = vi.fn();
+
+    (fetchEventSource as any).mockImplementationOnce(
+      (url: string, options: FetchEventSourceInit) => {
+        options.onopen!({ clone: () => ({ ok: true, headers: new Headers() }) } as any);
+        options.onmessage!({
+          event: 'tool_calls',
+          data: JSON.stringify([
+            { index: 0, id: '1', type: 'function', function: { name: 'func1', arguments: 'a' } },
+          ]),
+        } as any);
+        options.onmessage!({
+          event: 'tool_calls',
+          data: JSON.stringify([
+            { index: 0, function: { arguments: 'rg1' } },
+            { index: 1, id: '2', type: 'function', function: { name: 'func2', arguments: 'a' } },
+          ]),
+        } as any);
+        options.onmessage!({
+          event: 'tool_calls',
+          data: JSON.stringify([{ index: 1, function: { arguments: 'rg2' } }]),
+        } as any);
+      },
+    );
+
+    await fetchSSE('/', {
+      onMessageHandle: mockOnMessageHandle,
+      onFinish: mockOnFinish,
+    });
+
+    // TODO: need to check whether the `aarg1` is correct
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, {
+      isAnimationActives: [true],
+      tool_calls: [
+        { id: '1', type: 'function', function: { name: 'func1', arguments: 'aarg1' } },
+        { function: { arguments: 'aarg2', name: 'func2' }, id: '2', type: 'function' },
+      ],
+      type: 'tool_calls',
+    });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, {
+      isAnimationActives: [true, true],
+      tool_calls: [
+        { id: '1', type: 'function', function: { name: 'func1', arguments: 'aarg1' } },
+        { id: '2', type: 'function', function: { name: 'func2', arguments: 'aarg2' } },
+      ],
+      type: 'tool_calls',
+    });
+
+    // more assertions for each character...
+    expect(mockOnFinish).toHaveBeenCalledWith('', {
+      observationId: null,
+      toolCalls: [
+        { id: '1', type: 'function', function: { name: 'func1', arguments: 'arg1' } },
+        { id: '2', type: 'function', function: { name: 'func2', arguments: 'arg2' } },
+      ],
+      traceId: null,
+      type: 'done',
+    });
+  });
+
+  it('should handle request interruption and resumption correctly', async () => {
+    const mockOnMessageHandle = vi.fn();
+    const mockOnFinish = vi.fn();
+    const abortController = new AbortController();
+
+    (fetchEventSource as any).mockImplementationOnce(
+      (url: string, options: FetchEventSourceInit) => {
+        options.onopen!({ clone: () => ({ ok: true, headers: new Headers() }) } as any);
+        options.onmessage!({ event: 'text', data: JSON.stringify('Hello') } as any);
+        abortController.abort();
+        options.onmessage!({ event: 'text', data: JSON.stringify(' World') } as any);
+      },
+    );
+
+    await fetchSSE('/', {
+      onMessageHandle: mockOnMessageHandle,
+      onFinish: mockOnFinish,
+      signal: abortController.signal,
+    });
+
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'He', type: 'text' });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'llo World', type: 'text' });
+
+    expect(mockOnFinish).toHaveBeenCalledWith('Hello World', {
+      type: 'done',
+      observationId: null,
+      traceId: null,
+    });
+  });
+
+  it('should call onFinish with correct parameters for different finish types', async () => {
+    const mockOnFinish = vi.fn();
+
+    (fetchEventSource as any).mockImplementationOnce(
+      (url: string, options: FetchEventSourceInit) => {
+        options.onopen!({ clone: () => ({ ok: true, headers: new Headers() }) } as any);
+        options.onmessage!({ event: 'text', data: JSON.stringify('Hello') } as any);
+        options.onerror!({ name: 'AbortError' });
+      },
+    );
+
+    await fetchSSE('/', { onFinish: mockOnFinish, smoothing: false });
+
+    expect(mockOnFinish).toHaveBeenCalledWith('Hello', {
+      observationId: null,
+      toolCalls: undefined,
+      traceId: null,
+      type: 'abort',
+    });
+
+    (fetchEventSource as any).mockImplementationOnce(
+      (url: string, options: FetchEventSourceInit) => {
+        options.onopen!({ clone: () => ({ ok: true, headers: new Headers() }) } as any);
+        options.onmessage!({ event: 'text', data: JSON.stringify('Hello') } as any);
+        options.onerror!(new Error('Unknown error'));
+      },
+    );
+
+    await fetchSSE('/', { onFinish: mockOnFinish, smoothing: false });
+
+    expect(mockOnFinish).toHaveBeenCalledWith('Hello', {
+      observationId: null,
+      toolCalls: undefined,
+      traceId: null,
+      type: 'error',
+    });
+  });
 });

package/src/utils/fetch.ts

@@ -51,6 +51,7 @@ export interface MessageTextChunk {
 }
 
 interface MessageToolCallsChunk {
+  isAnimationActives?: boolean[];
   tool_calls: MessageToolCall[];
   type: 'tool_calls';
 }
@@ -61,24 +62,201 @@ export interface FetchSSEOptions {
   onErrorHandle?: (error: ChatMessageError) => void;
   onFinish?: OnFinishHandler;
   onMessageHandle?: (chunk: MessageTextChunk | MessageToolCallsChunk) => void;
+  smoothing?: boolean;
 }
 
 export const parseToolCalls = (origin: MessageToolCall[], value: MessageToolCallChunk[]) =>
   produce(origin, (draft) => {
+    // if there is no origin, we should parse all the value and set it to draft
     if (draft.length === 0) {
       draft.push(...value.map((item) => MessageToolCallSchema.parse(item)));
-    } else {
-      value.forEach(({ index, ...item }) => {
-        if (!draft?.[index]) {
-          draft?.splice(index, 0, MessageToolCallSchema.parse(item));
+      return;
+    }
+
+    // if there is origin, we should merge the value to the origin
+    value.forEach(({ index, ...item }) => {
+      if (!draft?.[index]) {
+        // if not, we should insert it to the draft
+        draft?.splice(index, 0, MessageToolCallSchema.parse(item));
+      } else {
+        // if it is already in the draft, we should merge the arguments to the draft
+        if (item.function?.arguments) {
+          draft[index].function.arguments += item.function.arguments;
+        }
+      }
+    });
+  });
+
+const createSmoothMessage = (params: { onTextUpdate: (delta: string, text: string) => void }) => {
+  let buffer = '';
+  // why use queue: https://shareg.pt/GLBrjpK
+  let outputQueue: string[] = [];
+
+  // eslint-disable-next-line no-undef
+  let animationTimeoutId: NodeJS.Timeout | null = null;
+  let isAnimationActive = false;
+
+  // when you need to stop the animation, call this function
+  const stopAnimation = () => {
+    isAnimationActive = false;
+    if (animationTimeoutId !== null) {
+      clearTimeout(animationTimeoutId);
+      animationTimeoutId = null;
+    }
+  };
+
+  // define startAnimation function to display the text in buffer smooth
+  // when you need to start the animation, call this function
+  const startAnimation = (speed = 2) =>
+    new Promise<void>((resolve) => {
+      if (isAnimationActive) {
+        resolve();
+        return;
+      }
+
+      isAnimationActive = true;
+
+      const updateText = () => {
+        // 如果动画已经不再激活，则停止更新文本
+        if (!isAnimationActive) {
+          clearTimeout(animationTimeoutId!);
+          animationTimeoutId = null;
+          resolve();
+        }
+
+        // 如果还有文本没有显示
+        // 检查队列中是否有字符待显示
+        if (outputQueue.length > 0) {
+          // 从队列中获取前两个字符（如果存在）
+          const charsToAdd = outputQueue.splice(0, speed).join('');
+          buffer += charsToAdd;
+
+          // 更新消息内容，这里可能需要结合实际情况调整
+          params.onTextUpdate(charsToAdd, buffer);
+
+          // 设置下一个字符的延迟
+          animationTimeoutId = setTimeout(updateText, 16); // 16 毫秒的延迟模拟打字机效果
         } else {
-          if (item.function?.arguments) {
-            draft[index].function.arguments += item.function.arguments;
-          }
+          // 当所有字符都显示完毕时，清除动画状态
+          isAnimationActive = false;
+          animationTimeoutId = null;
+          resolve();
         }
-      });
+      };
+
+      updateText();
+    });
+
+  const pushToQueue = (text: string) => {
+    outputQueue.push(...text.split(''));
+  };
+
+  return {
+    isAnimationActive,
+    isTokenRemain: () => outputQueue.length > 0,
+    pushToQueue,
+    startAnimation,
+    stopAnimation,
+  };
+};
+
+const createSmoothToolCalls = (params: {
+  onToolCallsUpdate: (toolCalls: MessageToolCall[], isAnimationActives: boolean[]) => void;
+}) => {
+  let toolCallsBuffer: MessageToolCall[] = [];
+
+  // 为每个 tool_call 维护一个输出队列和动画控制器
+
+  // eslint-disable-next-line no-undef
+  const animationTimeoutIds: (NodeJS.Timeout | null)[] = [];
+  const outputQueues: string[][] = [];
+  const isAnimationActives: boolean[] = [];
+
+  const stopAnimation = (index: number) => {
+    isAnimationActives[index] = false;
+    if (animationTimeoutIds[index] !== null) {
+      clearTimeout(animationTimeoutIds[index]!);
+      animationTimeoutIds[index] = null;
     }
-  });
+  };
+
+  const startAnimation = (index: number, speed = 2) =>
+    new Promise<void>((resolve) => {
+      if (isAnimationActives[index]) {
+        resolve();
+        return;
+      }
+
+      isAnimationActives[index] = true;
+
+      const updateToolCall = () => {
+        if (!isAnimationActives[index]) {
+          resolve();
+        }
+
+        if (outputQueues[index].length > 0) {
+          const charsToAdd = outputQueues[index].splice(0, speed).join('');
+
+          const toolCallToUpdate = toolCallsBuffer[index];
+
+          if (toolCallToUpdate) {
+            toolCallToUpdate.function.arguments += charsToAdd;
+
+            // 触发 ui 更新
+            params.onToolCallsUpdate(toolCallsBuffer, [...isAnimationActives]);
+          }
+
+          animationTimeoutIds[index] = setTimeout(updateToolCall, 16);
+        } else {
+          isAnimationActives[index] = false;
+          animationTimeoutIds[index] = null;
+          resolve();
+        }
+      };
+
+      updateToolCall();
+    });
+
+  const pushToQueue = (toolCallChunks: MessageToolCallChunk[]) => {
+    toolCallChunks.forEach((chunk) => {
+      // init the tool call buffer and output queue
+      if (!toolCallsBuffer[chunk.index]) {
+        toolCallsBuffer[chunk.index] = MessageToolCallSchema.parse(chunk);
+      }
+
+      if (!outputQueues[chunk.index]) {
+        outputQueues[chunk.index] = [];
+        isAnimationActives[chunk.index] = false;
+        animationTimeoutIds[chunk.index] = null;
+      }
+
+      outputQueues[chunk.index].push(...(chunk.function?.arguments || '').split(''));
+    });
+  };
+
+  const startAnimations = async (speed = 2) => {
+    const pools = toolCallsBuffer.map(async (_, index) => {
+      if (outputQueues[index].length > 0 && !isAnimationActives[index]) {
+        await startAnimation(index, speed);
+      }
+    });
+
+    await Promise.all(pools);
+  };
+  const stopAnimations = () => {
+    toolCallsBuffer.forEach((_, index) => {
+      stopAnimation(index);
+    });
+  };
+
+  return {
+    isAnimationActives,
+    isTokenRemain: () => outputQueues.some((token) => token.length > 0),
+    pushToQueue,
+    startAnimations,
+    stopAnimations,
+  };
+};
 
 /**
  * Fetch data using stream method
@@ -92,6 +270,21 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
   let finishedType: SSEFinishType = 'done';
   let response!: Response;
 
+  const { smoothing = true } = options;
+
+  const textController = createSmoothMessage({
+    onTextUpdate: (delta, text) => {
+      output = text;
+      options.onMessageHandle?.({ text: delta, type: 'text' });
+    },
+  });
+
+  const toolCallsController = createSmoothToolCalls({
+    onToolCallsUpdate: (toolCalls, isAnimationActives) => {
+      options.onMessageHandle?.({ isAnimationActives, tool_calls: toolCalls, type: 'tool_calls' });
+    },
+  });
+
   try {
     await fetchEventSource(url, {
       body: options.body,
@@ -102,6 +295,7 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
         if ((error as TypeError).name === 'AbortError') {
           finishedType = 'abort';
           options?.onAbort?.(output);
+          textController.stopAnimation();
         } else {
           finishedType = 'error';
           console.error(error);
@@ -122,22 +316,39 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
 
         switch (ev.event) {
           case 'text': {
-            output += data;
-            options.onMessageHandle?.({ text: data, type: 'text' });
+            if (smoothing) {
+              textController.pushToQueue(data);
+
+              if (!textController.isAnimationActive) textController.startAnimation();
+            } else {
+              output += data;
+              options.onMessageHandle?.({ text: data, type: 'text' });
+            }
+
             break;
           }
 
           case 'tool_calls': {
-            if (!toolCalls) {
-              toolCalls = [];
-            }
-
+            // get finial
+            // if there is no tool calls, we should initialize the tool calls
+            if (!toolCalls) toolCalls = [];
             toolCalls = parseToolCalls(toolCalls, data);
 
-            options.onMessageHandle?.({
-              tool_calls: toolCalls,
-              type: 'tool_calls',
-            });
+            if (smoothing) {
+              // make the tool calls smooth
+
+              // push the tool calls to the smooth queue
+              toolCallsController.pushToQueue(data);
+              // if there is no animation active, we should start the animation
+              if (toolCallsController.isAnimationActives.some((value) => !value)) {
+                toolCallsController.startAnimations();
+              }
+            } else {
+              options.onMessageHandle?.({
+                tool_calls: toolCalls,
+                type: 'tool_calls',
+              });
+            }
           }
         }
       },
@@ -160,6 +371,9 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
   // only call onFinish when response is available
   // so like abort, we don't need to call onFinish
   if (response) {
+    textController.stopAnimation();
+    toolCallsController.stopAnimations();
+
     // if there is no onMessageHandler, we should call onHandleMessage first
     if (!triggerOnMessageHandler) {
       output = await response.clone().text();
@@ -168,6 +382,15 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
 
     const traceId = response.headers.get(LOBE_CHAT_TRACE_ID);
     const observationId = response.headers.get(LOBE_CHAT_OBSERVATION_ID);
+
+    if (textController.isTokenRemain()) {
+      await textController.startAnimation(15);
+    }
+
+    if (toolCallsController.isTokenRemain()) {
+      await toolCallsController.startAnimations(15);
+    }
+
     await options?.onFinish?.(output, { observationId, toolCalls, traceId, type: finishedType });
   }
 

package/src/app/api/openai/images/createImageGeneration.ts

@@ -1,26 +0,0 @@
-import OpenAI from 'openai';
-
-import { OpenAIImagePayload } from '@/types/openai/image';
-
-export const createImageGeneration = async ({
-  openai,
-  payload,
-}: {
-  openai: OpenAI;
-  payload: OpenAIImagePayload;
-}) => {
-  const res = await openai.images.generate({ ...payload, response_format: 'url' });
-
-  const urls = res.data.map((o) => o.url) as string[];
-
-  return new Response(JSON.stringify(urls));
-};
-
-// const mockImages = [
-//   'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/292159272-032d5c8b-20be-48d9-8dbb-f2491f231bac.png',
-//   'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/292159798-cad89421-20c5-44b0-a337-fcbb857f1f70.png',
-//   'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/292160015-2263156f-d41f-48ae-9c2c-d96799b9d2b8.png',
-//   'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/292160229-592d112f-5dfd-47d7-98d3-44bc09dc91f7.png',
-// ];
-// export const createImageGeneration = async () =>
-//   new Response(JSON.stringify([mockImages[Math.round(Math.random() * 3)]]));

package/src/app/api/openai/images/route.ts

@@ -1,16 +0,0 @@
-import { OpenAIImagePayload } from '@/types/openai/image';
-
-import { createBizOpenAI } from '../createBizOpenAI';
-import { createImageGeneration } from './createImageGeneration';
-
-export const runtime = 'edge';
-
-export const POST = async (req: Request) => {
-  const payload = (await req.json()) as OpenAIImagePayload;
-
-  const openaiOrErrResponse = createBizOpenAI(req);
-  // if resOrOpenAI is a Response, it means there is an error,just return it
-  if (openaiOrErrResponse instanceof Response) return openaiOrErrResponse;
-
-  return createImageGeneration({ openai: openaiOrErrResponse, payload });
-};

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

@@ -1,17 +0,0 @@
-import { ActionIconGroup } from '@lobehub/ui';
-import { memo } from 'react';
-
-import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
-import { RenderAction } from '../types';
-
-export const FunctionActionsBar: RenderAction = memo(({ onActionClick }) => {
-  const { regenerate, delAndRegenerate, del } = useChatListActionsBar();
-  return (
-    <ActionIconGroup
-      dropdownMenu={[regenerate, delAndRegenerate, del]}
-      items={[regenerate]}
-      onActionClick={onActionClick}
-      type="ghost"
-    />
-  );
-});