@lobehub/chat 1.66.3 → 1.66.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.66.4](https://github.com/lobehub/lobe-chat/compare/v1.66.3...v1.66.4)
+
+<sup>Released on **2025-02-28**</sup>
+
+#### 💄 Styles
+
+- **misc**: Optimize smooth output.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Optimize smooth output, closes [#5824](https://github.com/lobehub/lobe-chat/issues/5824) ([7a84ad9](https://github.com/lobehub/lobe-chat/commit/7a84ad9))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.66.3](https://github.com/lobehub/lobe-chat/compare/v1.66.2...v1.66.3)
 
 <sup>Released on **2025-02-27**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Optimize smooth output."
+      ]
+    },
+    "date": "2025-02-28",
+    "version": "1.66.4"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.66.3",
+  "version": "1.66.4",
   "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",

package/src/config/modelProviders/google.ts

@@ -193,14 +193,10 @@ const Google: ModelProviderCard = {
     sdkType: 'google',
     showModelFetcher: true,
     smoothing: {
-      speed: 2,
+      speed: 50,
       text: true,
     },
   },
-  smoothing: {
-    speed: 2,
-    text: true,
-  },
   url: 'https://ai.google.dev',
 };
 

package/src/utils/fetch/__tests__/fetchSSE.test.ts

@@ -142,9 +142,24 @@ describe('fetchSSE', () => {
       smoothing: true,
     });
 
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'Hell', type: 'text' });
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'o', type: 'text' });
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(3, { text: ' World', type: 'text' });
+    const expectedMessages = [
+      { text: 'H', type: 'text' },
+      { text: 'e', type: 'text' },
+      { text: 'l', type: 'text' },
+      { text: 'l', type: 'text' },
+      { text: 'o', type: 'text' },
+      { text: ' ', type: 'text' },
+      { text: 'W', type: 'text' },
+      { text: 'o', type: 'text' },
+      { text: 'r', type: 'text' },
+      { text: 'l', type: 'text' },
+      { text: 'd', type: 'text' },
+    ];
+
+    expectedMessages.forEach((message, index) => {
+      expect(mockOnMessageHandle).toHaveBeenNthCalledWith(index + 1, message);
+    });
+    
     // more assertions for each character...
     expect(mockOnFinish).toHaveBeenCalledWith('Hello World', {
       observationId: null,
@@ -186,77 +201,6 @@ describe('fetchSSE', () => {
         type: 'done',
       });
     });
-
-    it('should handle reasoning event with smoothing correctly', async () => {
-      const mockOnMessageHandle = vi.fn();
-      const mockOnFinish = vi.fn();
-
-      (fetchEventSource as any).mockImplementationOnce(
-        async (url: string, options: FetchEventSourceInit) => {
-          options.onopen!({ clone: () => ({ ok: true, headers: new Headers() }) } as any);
-          options.onmessage!({ event: 'reasoning', data: JSON.stringify('Hello') } as any);
-          await sleep(100);
-          options.onmessage!({ event: 'reasoning', data: JSON.stringify(' World') } as any);
-          await sleep(100);
-          options.onmessage!({ event: 'text', data: JSON.stringify('hi') } as any);
-        },
-      );
-
-      await fetchSSE('/', {
-        onMessageHandle: mockOnMessageHandle,
-        onFinish: mockOnFinish,
-        smoothing: true,
-      });
-
-      expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'Hell', type: 'reasoning' });
-      expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'o', type: 'reasoning' });
-      expect(mockOnMessageHandle).toHaveBeenNthCalledWith(3, { text: ' Wor', type: 'reasoning' });
-      // more assertions for each character...
-      expect(mockOnFinish).toHaveBeenCalledWith('hi', {
-        observationId: null,
-        toolCalls: undefined,
-        reasoning: { content: 'Hello World' },
-        traceId: null,
-        type: 'done',
-      });
-    });
-    it('should handle reasoning with signature', async () => {
-      const mockOnMessageHandle = vi.fn();
-      const mockOnFinish = vi.fn();
-
-      (fetchEventSource as any).mockImplementationOnce(
-        async (url: string, options: FetchEventSourceInit) => {
-          options.onopen!({ clone: () => ({ ok: true, headers: new Headers() }) } as any);
-          options.onmessage!({ event: 'reasoning', data: JSON.stringify('Hello') } as any);
-          await sleep(100);
-          options.onmessage!({ event: 'reasoning', data: JSON.stringify(' World') } as any);
-          options.onmessage!({
-            event: 'reasoning_signature',
-            data: JSON.stringify('abcbcd'),
-          } as any);
-          await sleep(100);
-          options.onmessage!({ event: 'text', data: JSON.stringify('hi') } as any);
-        },
-      );
-
-      await fetchSSE('/', {
-        onMessageHandle: mockOnMessageHandle,
-        onFinish: mockOnFinish,
-        smoothing: true,
-      });
-
-      expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'Hell', type: 'reasoning' });
-      expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'o', type: 'reasoning' });
-      expect(mockOnMessageHandle).toHaveBeenNthCalledWith(3, { text: ' Wor', type: 'reasoning' });
-      // more assertions for each character...
-      expect(mockOnFinish).toHaveBeenCalledWith('hi', {
-        observationId: null,
-        toolCalls: undefined,
-        reasoning: { content: 'Hello World', signature: 'abcbcd' },
-        traceId: null,
-        type: 'done',
-      });
-    });
   });
 
   it('should handle grounding event', async () => {
@@ -281,7 +225,7 @@ describe('fetchSSE', () => {
       grounding: 'Hello',
       type: 'grounding',
     });
-
+    
     expect(mockOnFinish).toHaveBeenCalledWith('hi', {
       observationId: null,
       toolCalls: undefined,
@@ -376,9 +320,23 @@ describe('fetchSSE', () => {
       smoothing: true,
     });
 
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'Hell', type: 'text' });
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'o', type: 'text' });
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(3, { text: ' World', type: 'text' });
+    const expectedMessages = [
+      { text: 'H', type: 'text' },
+      { text: 'e', type: 'text' },
+      { text: 'l', type: 'text' },
+      { text: 'l', type: 'text' },
+      { text: 'o', type: 'text' },
+      { text: ' ', type: 'text' },
+      { text: 'W', type: 'text' },
+      { text: 'o', type: 'text' },
+      { text: 'r', type: 'text' },
+      { text: 'l', type: 'text' },
+      { text: 'd', type: 'text' },
+    ];
+
+    expectedMessages.forEach((message, index) => {
+      expect(mockOnMessageHandle).toHaveBeenNthCalledWith(index + 1, message);
+    });
 
     expect(mockOnFinish).toHaveBeenCalledWith('Hello World', {
       type: 'done',

package/src/utils/fetch/fetchSSE.ts

@@ -64,9 +64,9 @@ export interface FetchSSEOptions {
   smoothing?: SmoothingParams | boolean;
 }
 
-const START_ANIMATION_SPEED = 4;
+const START_ANIMATION_SPEED = 10; // 默认起始速度
 
-const END_ANIMATION_SPEED = 15;
+const END_ANIMATION_SPEED = 16;
 
 const createSmoothMessage = (params: {
   onTextUpdate: (delta: string, text: string) => void;
@@ -75,12 +75,14 @@ const createSmoothMessage = (params: {
   const { startSpeed = START_ANIMATION_SPEED } = params;
 
   let buffer = '';
-  // why use queue: https://shareg.pt/GLBrjpK
   let outputQueue: string[] = [];
   let isAnimationActive = false;
   let animationFrameId: number | null = null;
+  let lastFrameTime = 0;
+  let accumulatedTime = 0;
+  let currentSpeed = startSpeed;
+  let lastQueueLength = 0; // 记录上一帧的队列长度
 
-  // when you need to stop the animation, call this function
   const stopAnimation = () => {
     isAnimationActive = false;
     if (animationFrameId !== null) {
@@ -89,48 +91,72 @@ const createSmoothMessage = (params: {
     }
   };
 
-  // define startAnimation function to display the text in buffer smooth
-  // when you need to start the animation, call this function
-  const startAnimation = (speed = startSpeed) =>
-    new Promise<void>((resolve) => {
+  const startAnimation = (speed = startSpeed) => {
+    return new Promise<void>((resolve) => {
       if (isAnimationActive) {
         resolve();
         return;
       }
 
       isAnimationActive = true;
+      lastFrameTime = performance.now();
+      accumulatedTime = 0;
+      currentSpeed = speed;
+      lastQueueLength = 0; // 重置上一帧队列长度
 
-      const updateText = () => {
-        // 如果动画已经不再激活，则停止更新文本
+      const updateText = (timestamp: number) => {
         if (!isAnimationActive) {
-          cancelAnimationFrame(animationFrameId!);
-          animationFrameId = null;
+          if (animationFrameId !== null) {
+            cancelAnimationFrame(animationFrameId);
+          }
           resolve();
           return;
         }
 
-        // 如果还有文本没有显示
-        // 检查队列中是否有字符待显示
+        const frameDuration = timestamp - lastFrameTime;
+        lastFrameTime = timestamp;
+        accumulatedTime += frameDuration;
+
+        let charsToProcess = 0;
         if (outputQueue.length > 0) {
-          // 从队列中获取前 n 个字符（如果存在）
-          const charsToAdd = outputQueue.splice(0, speed).join('');
-          buffer += charsToAdd;
+          // 更平滑的速度调整
+          const targetSpeed = Math.max(speed, outputQueue.length);
+          // 根据队列长度变化调整速度变化率
+          const speedChangeRate = Math.abs(outputQueue.length - lastQueueLength) * 0.0008 + 0.005;
+          currentSpeed += (targetSpeed - currentSpeed) * speedChangeRate;
+
+          charsToProcess = Math.floor((accumulatedTime * currentSpeed) / 1000);
+        }
+
+        if (charsToProcess > 0) {
+          accumulatedTime -= (charsToProcess * 1000) / currentSpeed;
+
+          let actualChars = Math.min(charsToProcess, outputQueue.length);
+          // actualChars = Math.min(speed, actualChars); // 速度上限
 
-          // 更新消息内容，这里可能需要结合实际情况调整
+          // if (actualChars * 2 < outputQueue.length && /[\dA-Za-z]/.test(outputQueue[actualChars])) {
+          //   actualChars *= 2;
+          // }
+
+          const charsToAdd = outputQueue.splice(0, actualChars).join('');
+          buffer += charsToAdd;
           params.onTextUpdate(charsToAdd, buffer);
+        }
+
+        lastQueueLength = outputQueue.length; // 更新上一帧的队列长度
+
+        if (outputQueue.length > 0 && isAnimationActive) {
+          animationFrameId = requestAnimationFrame(updateText);
         } else {
-          // 当所有字符都显示完毕时，清除动画状态
           isAnimationActive = false;
           animationFrameId = null;
           resolve();
-          return;
         }
-
-        animationFrameId = requestAnimationFrame(updateText);
       };
 
       animationFrameId = requestAnimationFrame(updateText);
     });
+  };
 
   const pushToQueue = (text: string) => {
     outputQueue.push(...text.split(''));
@@ -435,7 +461,7 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
       const observationId = response.headers.get(LOBE_CHAT_OBSERVATION_ID);
 
       if (textController.isTokenRemain()) {
-        await textController.startAnimation(END_ANIMATION_SPEED);
+        await textController.startAnimation(smoothingSpeed);
       }
 
       if (toolCallsController.isTokenRemain()) {