@lobehub/chat 1.15.9 → 1.15.11

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 # Changelog
 
+### [Version 1.15.11](https://github.com/lobehub/lobe-chat/compare/v1.15.10...v1.15.11)
+
+<sup>Released on **2024-09-04**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.15.10](https://github.com/lobehub/lobe-chat/compare/v1.15.9...v1.15.10)
+
+<sup>Released on **2024-09-03**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.15.9](https://github.com/lobehub/lobe-chat/compare/v1.15.8...v1.15.9)
 
 <sup>Released on **2024-09-03**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.15.9",
+  "version": "1.15.11",
   "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/app/(main)/profile/[[...slugs]]/Client.tsx

@@ -56,6 +56,7 @@ export const useStyles = createStyles(
         border-radius: unset;
       `,
     }) as Partial<{
+      // eslint-disable-next-line unused-imports/no-unused-vars
       [k in keyof ElementsConfig]: any;
     }>,
 );

package/src/app/webapi/tokenizer/index.test.ts

@@ -0,0 +1,32 @@
+// @vitest-environment edge-runtime
+import { describe, expect, it } from 'vitest';
+
+import { POST } from './route';
+
+describe('tokenizer Route', () => {
+  it('count hello world', async () => {
+    const txt = 'Hello, world!';
+    const request = new Request('https://test.com', {
+      method: 'POST',
+      body: txt,
+    });
+
+    const response = await POST(request);
+
+    const data = await response.json();
+    expect(data.count).toEqual(4);
+  });
+
+  it('count Chinese', async () => {
+    const txt = '今天天气真好';
+    const request = new Request('https://test.com', {
+      method: 'POST',
+      body: txt,
+    });
+
+    const response = await POST(request);
+
+    const data = await response.json();
+    expect(data.count).toEqual(5);
+  });
+});

package/src/app/webapi/tokenizer/route.ts

@@ -0,0 +1,8 @@
+import { encode } from 'gpt-tokenizer/encoding/o200k_base';
+import { NextResponse } from 'next/server';
+
+export const POST = async (req: Request) => {
+  const str = await req.text();
+
+  return NextResponse.json({ count: encode(str).length });
+};

package/src/database/server/models/session.ts

@@ -170,7 +170,7 @@ export class SessionModel {
 
     if (!result) return;
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,unused-imports/no-unused-vars
     const { agent, clientId, ...session } = result;
     const sessionId = this.genId();
 

package/src/hooks/useTokenCount.ts

@@ -1,20 +1,32 @@
-import { startTransition, useEffect, useState } from 'react';
+import { debounce } from 'lodash-es';
+import { startTransition, useCallback, useEffect, useState } from 'react';
 
 import { encodeAsync } from '@/utils/tokenizer';
 
 export const useTokenCount = (input: string = '') => {
   const [value, setNum] = useState(0);
 
-  useEffect(() => {
-    startTransition(() => {
-      encodeAsync(input || '')
+  const debouncedEncode = useCallback(
+    debounce((text: string) => {
+      encodeAsync(text)
         .then(setNum)
         .catch(() => {
-          // 兜底采用字符数
-          setNum(input.length);
+          setNum(text.length);
         });
+    }, 300),
+    [],
+  );
+
+  useEffect(() => {
+    startTransition(() => {
+      debouncedEncode(input || '');
     });
-  }, [input]);
+
+    // 清理函数
+    return () => {
+      debouncedEncode.cancel();
+    };
+  }, [input, debouncedEncode]);
 
   return value;
 };

package/src/layout/AuthProvider/Clerk/useAppearance.ts

@@ -89,6 +89,7 @@ export const useStyles = createStyles(
         order: -1;
       `,
     }) as Partial<{
+      // eslint-disable-next-line unused-imports/no-unused-vars
       [k in keyof ElementsConfig]: any;
     }>,
 );

package/src/server/context.ts

@@ -62,7 +62,9 @@ export const createContext = async (request: NextRequest): Promise<Context> => {
         userId = session.user.id;
       }
       return createContextInner({ authorizationHeader: authorization, nextAuth: auth, userId });
-    } catch {}
+    } catch (e) {
+      console.error('next auth err', e);
+    }
   }
 
   return createContextInner({ authorizationHeader: authorization, userId });

package/src/server/routers/edge/index.ts

@@ -1,5 +1,5 @@
 /**
- * This file contains the root router of Lobe Chat tRPC-backend
+ * This file contains the edge router of Lobe Chat tRPC-backend
  */
 import { publicProcedure, router } from '@/libs/trpc';
 

package/src/services/user/client.ts

@@ -50,7 +50,7 @@ export class ClientService implements IUserService {
     await this.preferenceStorage.saveToLocalStorage(preference);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,unused-imports/no-unused-vars
   async updateGuide(guide: Partial<UserGuide>) {
     throw new Error('Method not implemented.');
   }

package/src/types/worker.d.ts

@@ -0,0 +1,7 @@
+declare module '*.worker.ts' {
+  class WebpackWorker extends Worker {
+    constructor();
+  }
+
+  export default WebpackWorker;
+}

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

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { MESSAGE_CANCEL_FLAT } from '@/const/message';
 import { ChatMessageError } from '@/types/message';
+import { sleep } from '@/utils/sleep';
 
 import { FetchEventSourceInit } from '../fetchEventSource';
 import { fetchEventSource } from '../fetchEventSource';
@@ -127,9 +128,10 @@ describe('fetchSSE', () => {
     const mockOnFinish = vi.fn();
 
     (fetchEventSource as any).mockImplementationOnce(
-      (url: string, options: FetchEventSourceInit) => {
+      async (url: string, options: FetchEventSourceInit) => {
         options.onopen!({ clone: () => ({ ok: true, headers: new Headers() }) } as any);
         options.onmessage!({ event: 'text', data: JSON.stringify('Hello') } as any);
+        await sleep(100);
         options.onmessage!({ event: 'text', data: JSON.stringify(' World') } as any);
       },
     );
@@ -139,8 +141,9 @@ describe('fetchSSE', () => {
       onFinish: mockOnFinish,
     });
 
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'He', type: 'text' });
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'llo World', type: 'text' });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'Hell', type: 'text' });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'o', type: 'text' });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(3, { text: ' World', type: 'text' });
     // more assertions for each character...
     expect(mockOnFinish).toHaveBeenCalledWith('Hello World', {
       observationId: null,
@@ -184,7 +187,7 @@ describe('fetchSSE', () => {
 
     // TODO: need to check whether the `aarg1` is correct
     expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, {
-      isAnimationActives: [true],
+      isAnimationActives: [true, true],
       tool_calls: [
         { id: '1', type: 'function', function: { name: 'func1', arguments: 'aarg1' } },
         { function: { arguments: 'aarg2', name: 'func2' }, id: '2', type: 'function' },
@@ -218,9 +221,10 @@ describe('fetchSSE', () => {
     const abortController = new AbortController();
 
     (fetchEventSource as any).mockImplementationOnce(
-      (url: string, options: FetchEventSourceInit) => {
+      async (url: string, options: FetchEventSourceInit) => {
         options.onopen!({ clone: () => ({ ok: true, headers: new Headers() }) } as any);
         options.onmessage!({ event: 'text', data: JSON.stringify('Hello') } as any);
+        await sleep(100);
         abortController.abort();
         options.onmessage!({ event: 'text', data: JSON.stringify(' World') } as any);
       },
@@ -232,8 +236,9 @@ describe('fetchSSE', () => {
       signal: abortController.signal,
     });
 
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'He', type: 'text' });
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'llo World', type: 'text' });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'Hell', type: 'text' });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: 'o', type: 'text' });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(3, { text: ' World', type: 'text' });
 
     expect(mockOnFinish).toHaveBeenCalledWith('Hello World', {
       type: 'done',

package/src/utils/fetch/fetchSSE.ts

@@ -44,27 +44,29 @@ export interface FetchSSEOptions {
   smoothing?: boolean;
 }
 
+const START_ANIMATION_SPEED = 4;
+
+const END_ANIMATION_SPEED = 15;
+
 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;
+  let animationFrameId: number | null = null;
 
   // when you need to stop the animation, call this function
   const stopAnimation = () => {
     isAnimationActive = false;
-    if (animationTimeoutId !== null) {
-      clearTimeout(animationTimeoutId);
-      animationTimeoutId = null;
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = 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) =>
+  const startAnimation = (speed = START_ANIMATION_SPEED) =>
     new Promise<void>((resolve) => {
       if (isAnimationActive) {
         resolve();
@@ -76,32 +78,33 @@ const createSmoothMessage = (params: { onTextUpdate: (delta: string, text: strin
       const updateText = () => {
         // 如果动画已经不再激活，则停止更新文本
         if (!isAnimationActive) {
-          clearTimeout(animationTimeoutId!);
-          animationTimeoutId = null;
+          cancelAnimationFrame(animationFrameId!);
+          animationFrameId = null;
           resolve();
+          return;
         }
 
         // 如果还有文本没有显示
         // 检查队列中是否有字符待显示
         if (outputQueue.length > 0) {
-          // 从队列中获取前两个字符（如果存在）
+          // 从队列中获取前 n 个字符（如果存在）
           const charsToAdd = outputQueue.splice(0, speed).join('');
           buffer += charsToAdd;
 
           // 更新消息内容，这里可能需要结合实际情况调整
           params.onTextUpdate(charsToAdd, buffer);
-
-          // 设置下一个字符的延迟
-          animationTimeoutId = setTimeout(updateText, 16); // 16 毫秒的延迟模拟打字机效果
         } else {
           // 当所有字符都显示完毕时，清除动画状态
           isAnimationActive = false;
-          animationTimeoutId = null;
+          animationFrameId = null;
           resolve();
+          return;
         }
+
+        animationFrameId = requestAnimationFrame(updateText);
       };
 
-      updateText();
+      animationFrameId = requestAnimationFrame(updateText);
     });
 
   const pushToQueue = (text: string) => {
@@ -124,20 +127,19 @@ const createSmoothToolCalls = (params: {
 
   // 为每个 tool_call 维护一个输出队列和动画控制器
 
-  // eslint-disable-next-line no-undef
-  const animationTimeoutIds: (NodeJS.Timeout | null)[] = [];
   const outputQueues: string[][] = [];
   const isAnimationActives: boolean[] = [];
+  const animationFrameIds: (number | null)[] = [];
 
   const stopAnimation = (index: number) => {
     isAnimationActives[index] = false;
-    if (animationTimeoutIds[index] !== null) {
-      clearTimeout(animationTimeoutIds[index]!);
-      animationTimeoutIds[index] = null;
+    if (animationFrameIds[index] !== null) {
+      cancelAnimationFrame(animationFrameIds[index]!);
+      animationFrameIds[index] = null;
     }
   };
 
-  const startAnimation = (index: number, speed = 2) =>
+  const startAnimation = (index: number, speed = START_ANIMATION_SPEED) =>
     new Promise<void>((resolve) => {
       if (isAnimationActives[index]) {
         resolve();
@@ -149,6 +151,7 @@ const createSmoothToolCalls = (params: {
       const updateToolCall = () => {
         if (!isAnimationActives[index]) {
           resolve();
+          return;
         }
 
         if (outputQueues[index].length > 0) {
@@ -163,15 +166,15 @@ const createSmoothToolCalls = (params: {
             params.onToolCallsUpdate(toolCallsBuffer, [...isAnimationActives]);
           }
 
-          animationTimeoutIds[index] = setTimeout(updateToolCall, 16);
+          animationFrameIds[index] = requestAnimationFrame(() => updateToolCall());
         } else {
           isAnimationActives[index] = false;
-          animationTimeoutIds[index] = null;
+          animationFrameIds[index] = null;
           resolve();
         }
       };
 
-      updateToolCall();
+      animationFrameIds[index] = requestAnimationFrame(() => updateToolCall());
     });
 
   const pushToQueue = (toolCallChunks: MessageToolCallChunk[]) => {
@@ -184,14 +187,14 @@ const createSmoothToolCalls = (params: {
       if (!outputQueues[chunk.index]) {
         outputQueues[chunk.index] = [];
         isAnimationActives[chunk.index] = false;
-        animationTimeoutIds[chunk.index] = null;
+        animationFrameIds[chunk.index] = null;
       }
 
       outputQueues[chunk.index].push(...(chunk.function?.arguments || '').split(''));
     });
   };
 
-  const startAnimations = async (speed = 2) => {
+  const startAnimations = async (speed = START_ANIMATION_SPEED) => {
     const pools = toolCallsBuffer.map(async (_, index) => {
       if (outputQueues[index].length > 0 && !isAnimationActives[index]) {
         await startAnimation(index, speed);
@@ -365,11 +368,11 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
       const observationId = response.headers.get(LOBE_CHAT_OBSERVATION_ID);
 
       if (textController.isTokenRemain()) {
-        await textController.startAnimation(15);
+        await textController.startAnimation(END_ANIMATION_SPEED);
       }
 
       if (toolCallsController.isTokenRemain()) {
-        await toolCallsController.startAnimations(15);
+        await toolCallsController.startAnimations(END_ANIMATION_SPEED);
       }
 
       await options?.onFinish?.(output, { observationId, toolCalls, traceId, type: finishedType });

package/src/utils/tokenizer/client.ts

@@ -0,0 +1,35 @@
+let worker: Worker | null = null;
+
+const getWorker = () => {
+  if (!worker && typeof Worker !== 'undefined') {
+    worker = new Worker(new URL('tokenizer.worker.ts', import.meta.url));
+  }
+  return worker;
+};
+
+export const clientEncodeAsync = (str: string): Promise<number> =>
+  new Promise((resolve, reject) => {
+    const worker = getWorker();
+
+    if (!worker) {
+      // 如果 WebWorker 不可用，回退到字符串计算
+      resolve(str.length);
+      return;
+    }
+
+    const id = Date.now().toString();
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data.id === id) {
+        worker.removeEventListener('message', handleMessage);
+        if (event.data.error) {
+          reject(new Error(event.data.error));
+        } else {
+          resolve(event.data.result);
+        }
+      }
+    };
+
+    worker.addEventListener('message', handleMessage);
+    worker.postMessage({ id, str });
+  });

package/src/utils/tokenizer/index.ts

@@ -0,0 +1,15 @@
+export const encodeAsync = async (str: string): Promise<number> => {
+  if (str.length === 0) return 0;
+
+  // 50_000 is the limit of the client
+  // if the string is longer than 100_000, we will use the server
+  if (str.length <= 50_000) {
+    const { clientEncodeAsync } = await import('./client');
+
+    return await clientEncodeAsync(str);
+  } else {
+    const { serverEncodeAsync } = await import('./server');
+
+    return await serverEncodeAsync(str);
+  }
+};

package/src/utils/tokenizer/server.ts

@@ -0,0 +1,11 @@
+export const serverEncodeAsync = async (str: string): Promise<number> => {
+  try {
+    const res = await fetch('/webapi/tokenizer', { body: str, method: 'POST' });
+    const data = await res.json();
+
+    return data.count;
+  } catch (e) {
+    console.error('serverEncodeAsync:', e);
+    return str.length;
+  }
+};

package/src/utils/tokenizer/tokenizer.worker.ts

@@ -0,0 +1,14 @@
+addEventListener('message', async (event) => {
+  const { id, str } = event.data;
+  try {
+    const { encode } = await import('gpt-tokenizer');
+
+    console.time('client tokenizer');
+    const tokenCount = encode(str).length;
+    console.timeEnd('client tokenizer');
+
+    postMessage({ id, result: tokenCount });
+  } catch (error) {
+    postMessage({ error: (error as Error).message, id });
+  }
+});

package/src/utils/tokenizer.ts

@@ -1,5 +0,0 @@
-export const encodeAsync = async (str: string) => {
-  const { encode } = await import('gpt-tokenizer');
-
-  return encode(str).length;
-};