@lobehub/chat 1.85.8 → 1.85.9

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+### [Version 1.85.9](https://github.com/lobehub/lobe-chat/compare/v1.85.8...v1.85.9)
+
+<sup>Released on **2025-05-14**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Redirect unauthorized next-auth user to signin page.
+
+#### 💄 Styles
+
+- **misc**: Improve smoothing on completion.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Redirect unauthorized next-auth user to signin page, closes [#7813](https://github.com/lobehub/lobe-chat/issues/7813) ([6160784](https://github.com/lobehub/lobe-chat/commit/6160784))
+
+#### Styles
+
+- **misc**: Improve smoothing on completion, closes [#7833](https://github.com/lobehub/lobe-chat/issues/7833) ([6434686](https://github.com/lobehub/lobe-chat/commit/6434686))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.85.8](https://github.com/lobehub/lobe-chat/compare/v1.85.7...v1.85.8)
 
 <sup>Released on **2025-05-11**</sup>

package/changelog/v1.json

@@ -1,4 +1,16 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Redirect unauthorized next-auth user to signin page."
+      ],
+      "improvements": [
+        "Improve smoothing on completion."
+      ]
+    },
+    "date": "2025-05-14",
+    "version": "1.85.9"
+  },
   {
     "children": {
       "fixes": [

package/docker-compose/local/init_data.json

@@ -42,7 +42,7 @@
       "cert": "cert-built-in",
       "headerHtml": "",
       "enablePassword": true,
-      "enableSignUp": true,
+      "enableSignUp": false,
       "enableSigninSession": false,
       "enableAutoSignin": false,
       "enableCodeSignin": false,
@@ -1235,4 +1235,4 @@
     }
   ],
   "webhooks": []
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.85.8",
+  "version": "1.85.9",
   "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",
@@ -150,7 +150,7 @@
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^2.0.0",
     "@lobehub/tts": "^2.0.0",
-    "@lobehub/ui": "^2.0.10",
+    "@lobehub/ui": "^2.0.13",
     "@modelcontextprotocol/sdk": "^1.11.0",
     "@neondatabase/serverless": "^1.0.0",
     "@next/third-parties": "^15.3.0",

package/src/components/Thinking/index.tsx

@@ -1,4 +1,4 @@
-import { CopyButton, Icon, Markdown } from '@lobehub/ui';
+import { ActionIcon, CopyButton, Icon, Markdown } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { AnimatePresence, motion } from 'framer-motion';
 import { AtomIcon, ChevronDown, ChevronRight } from 'lucide-react';
@@ -9,21 +9,32 @@ import { Flexbox } from 'react-layout-kit';
 
 import { CitationItem } from '@/types/message';
 
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+const useStyles = createStyles(({ css, token }) => ({
   container: css`
-    width: fit-content;
-    padding-block: 4px;
-    padding-inline: 8px;
-    border-radius: 6px;
-
+    overflow: hidden;
+    border-radius: ${token.borderRadius}px;
     color: ${token.colorTextTertiary};
+    transition: all 0.2s ${token.motionEaseOut};
+  `,
+  expand: css`
+    color: ${token.colorTextSecondary};
+    background: ${token.colorFillTertiary};
+  `,
+
+  header: css`
+    padding-block: 4px;
+    padding-inline: 8px 4px;
+    transition: background 0.2s ${token.motionEaseOut};
+    transition: all 0.2s ${token.motionEaseOut};
 
     &:hover {
-      background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary};
+      background: ${token.colorFillQuaternary};
     }
   `,
-  expand: css`
-    background: ${isDarkMode ? token.colorFillQuaternary : token.colorFillTertiary} !important;
+
+  headerExpand: css`
+    color: ${token.colorTextSecondary};
+    background: ${token.colorFillQuaternary};
   `,
   shinyText: css`
     color: ${rgba(token.colorText, 0.45)};
@@ -70,7 +81,7 @@ interface ThinkingProps {
 
 const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style, citations }) => {
   const { t } = useTranslation(['components', 'common']);
-  const { styles, cx } = useStyles();
+  const { styles, cx, theme } = useStyles();
 
   const [showDetail, setShowDetail] = useState(false);
 
@@ -79,8 +90,13 @@ const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style, cita
   }, [thinking]);
 
   return (
-    <Flexbox className={cx(styles.container, showDetail && styles.expand)} gap={16} style={style}>
+    <Flexbox
+      className={cx(styles.container, showDetail && styles.expand)}
+      style={style}
+      width={'100%'}
+    >
       <Flexbox
+        className={cx(styles.header, showDetail && styles.headerExpand)}
         distribution={'space-between'}
         flex={1}
         gap={8}
@@ -89,17 +105,18 @@ const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style, cita
           setShowDetail(!showDetail);
         }}
         style={{ cursor: 'pointer' }}
+        width={'100%'}
       >
         {thinking ? (
-          <Flexbox align={'center'} gap={8} horizontal>
-            <Icon icon={AtomIcon} />
+          <Flexbox align={'center'} gap={8} horizontal width={'100%'}>
+            <Icon color={theme.purple} icon={AtomIcon} />
             <Flexbox className={styles.shinyText} horizontal>
               {t('Thinking.thinking')}
             </Flexbox>
           </Flexbox>
         ) : (
-          <Flexbox align={'center'} gap={8} horizontal>
-            <Icon icon={AtomIcon} />
+          <Flexbox align={'center'} gap={8} horizontal width={'100%'}>
+            <Icon color={showDetail ? theme.purple : undefined} icon={AtomIcon} />
             <Flexbox>
               {!duration
                 ? t('Thinking.thoughtWithDuration')
@@ -117,28 +134,27 @@ const Thinking = memo<ThinkingProps>(({ content, duration, thinking, style, cita
               <CopyButton content={content} size={'small'} title={t('copy', { ns: 'common' })} />
             </div>
           )}
-          <Icon icon={showDetail ? ChevronDown : ChevronRight} />
+          <ActionIcon icon={showDetail ? ChevronDown : ChevronRight} size={'small'} />
         </Flexbox>
       </Flexbox>
-
       <AnimatePresence initial={false}>
         {showDetail && (
           <motion.div
             animate="open"
             exit="collapsed"
             initial="collapsed"
-            style={{ overflow: 'hidden' }}
+            style={{ overflow: 'hidden', padding: 12 }}
             transition={{
               duration: 0.2,
               ease: [0.4, 0, 0.2, 1], // 使用 ease-out 缓动函数
             }}
             variants={{
-              collapsed: { height: 0, opacity: 0, width: 'auto' },
-              open: { height: 'auto', opacity: 1, width: 'auto' },
+              collapsed: { opacity: 0, width: 'auto' },
+              open: { opacity: 1, width: 'auto' },
             }}
           >
             {typeof content === 'string' ? (
-              <Markdown citations={citations} variant={'chat'}>
+              <Markdown animated={thinking} citations={citations} variant={'chat'}>
                 {content}
               </Markdown>
             ) : (

package/src/features/ChatInput/ActionBar/Knowledge/index.tsx

@@ -41,7 +41,8 @@ const Knowledge = memo(() => {
   const content = (
     <Action
       dropdown={{
-        maxWidth: 320,
+        maxHeight: 500,
+        maxWidth: 480,
         menu: { items },
         minWidth: 240,
       }}

package/src/features/ChatInput/ActionBar/Tools/index.tsx

@@ -31,9 +31,10 @@ const Tools = memo(() => {
     <Suspense fallback={<Action disabled icon={Blocks} title={t('tools.title')} />}>
       <Action
         dropdown={{
-          maxWidth: 320,
+          maxHeight: 500,
+          maxWidth: 480,
           menu: { items },
-          minWidth: 240,
+          minWidth: 320,
         }}
         icon={Blocks}
         loading={updating}

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -171,6 +171,7 @@ const Item = memo<ChatListItemProps>(
 
     const markdownProps = useMemo(
       () => ({
+        animated: generating,
         citations: item?.role === 'user' ? undefined : item?.search?.citations,
         components,
         customRender: markdownCustomRender,
@@ -186,7 +187,7 @@ const Item = memo<ChatListItemProps>(
               // if the citations's url and title are all the same, we should not show the citations
               item?.search?.citations.every((item) => item.title !== item.url),
       }),
-      [components, markdownCustomRender, item?.role, item?.search],
+      [generating, components, markdownCustomRender, item?.role, item?.search],
     );
 
     const onChange = useCallback((value: string) => updateMessageContent(id, value), [id]);

package/src/features/Portal/Artifacts/Body/index.tsx

@@ -79,7 +79,10 @@ const ArtifactsUI = memo(() => {
       style={{ overflow: 'hidden' }}
     >
       {showCode ? (
-        <Highlighter language={language || 'txt'} style={{ maxHeight: '100%', overflow: 'hidden' }}>
+        <Highlighter
+          language={language || 'txt'}
+          style={{ fontSize: 12, height: '100%', overflow: 'auto' }}
+        >
           {artifactContent}
         </Highlighter>
       ) : (

package/src/features/Portal/Artifacts/Header.tsx

@@ -33,12 +33,8 @@ const Header = () => {
   return (
     <Flexbox align={'center'} flex={1} gap={12} horizontal justify={'space-between'} width={'100%'}>
       <Flexbox align={'center'} gap={4} horizontal>
-        <ActionIcon icon={ArrowLeft} onClick={() => closeArtifact()} />
-        <Typography.Text
-          className={cx(oneLineEllipsis)}
-          style={{ fontSize: 16 }}
-          type={'secondary'}
-        >
+        <ActionIcon icon={ArrowLeft} onClick={() => closeArtifact()} size={'small'} />
+        <Typography.Text className={cx(oneLineEllipsis)} type={'secondary'}>
           {artifactTitle}
         </Typography.Text>
       </Flexbox>

package/src/features/Portal/FilePreview/Header.tsx

@@ -20,7 +20,7 @@ const Header = () => {
 
   return (
     <Flexbox align={'center'} gap={4} horizontal>
-      <ActionIcon icon={ArrowLeft} onClick={() => closeFilePreview()} />
+      <ActionIcon icon={ArrowLeft} onClick={() => closeFilePreview()} size={'small'} />
 
       {isLoading ? (
         <Skeleton.Button active style={{ height: 28 }} />

package/src/features/Portal/Plugins/Header.tsx

@@ -25,7 +25,7 @@ const Header = () => {
   if (toolUIIdentifier === WebBrowsingManifest.identifier) {
     return (
       <Flexbox align={'center'} gap={8} horizontal>
-        <ActionIcon icon={ArrowLeft} onClick={() => closeToolUI()} />
+        <ActionIcon icon={ArrowLeft} onClick={() => closeToolUI()} size={'small'} />
         <Icon icon={Globe} size={16} />
         <Typography.Text style={{ fontSize: 16 }} type={'secondary'}>
           {t('search.title')}
@@ -35,7 +35,7 @@ const Header = () => {
   }
   return (
     <Flexbox align={'center'} gap={4} horizontal>
-      <ActionIcon icon={ArrowLeft} onClick={() => closeToolUI()} />
+      <ActionIcon icon={ArrowLeft} onClick={() => closeToolUI()} size={'small'} />
       <PluginAvatar identifier={toolUIIdentifier} size={28} />
       <Typography.Text style={{ fontSize: 16 }} type={'secondary'}>
         {pluginTitle}

package/src/features/Portal/components/Header.tsx

@@ -18,6 +18,7 @@ const Header = memo<{ title: ReactNode }>(({ title }) => {
           onClick={() => {
             toggleInspector(false);
           }}
+          size={'small'}
         />
       }
       style={{ paddingBlock: 8, paddingInline: 8 }}

package/src/features/User/UserPanel/LangButton.tsx

@@ -1,6 +1,5 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Popover, type PopoverProps } from 'antd';
-import { useTheme } from 'antd-style';
 import { Languages } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,8 +11,6 @@ import { globalGeneralSelectors } from '@/store/global/selectors';
 import { LocaleMode } from '@/types/locale';
 
 const LangButton = memo<{ placement?: PopoverProps['placement'] }>(({ placement = 'right' }) => {
-  const theme = useTheme();
-
   const [language, switchLocale] = useGlobalStore((s) => [
     globalGeneralSelectors.language(s),
     s.switchLocale,
@@ -48,16 +45,14 @@ const LangButton = memo<{ placement?: PopoverProps['placement'] }>(({ placement
       placement={placement}
       styles={{
         body: {
+          maxHeight: 360,
+          overflow: 'auto',
           padding: 0,
         },
       }}
       trigger={['click', 'hover']}
     >
-      <ActionIcon
-        icon={Languages}
-        size={{ blockSize: 32, size: 16 }}
-        style={{ border: `1px solid ${theme.colorFillSecondary}` }}
-      />
+      <ActionIcon icon={Languages} size={{ blockSize: 32, size: 16 }} />
     </Popover>
   );
 });

package/src/features/User/UserPanel/PanelContent.tsx

@@ -63,7 +63,7 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
         ) : (
           <BrandWatermark />
         )}
-        <Flexbox align={'center'} flex={'none'} gap={6} horizontal>
+        <Flexbox align={'center'} flex={'none'} gap={2} horizontal>
           <LangButton />
           <ThemeButton />
         </Flexbox>

package/src/features/User/UserPanel/ThemeButton.tsx

@@ -1,6 +1,5 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { Popover, type PopoverProps } from 'antd';
-import { useTheme } from 'antd-style';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +15,6 @@ const themeIcons = {
 };
 
 const ThemeButton = memo<{ placement?: PopoverProps['placement'] }>(({ placement = 'right' }) => {
-  const theme = useTheme();
   const [themeMode, switchThemeMode] = useGlobalStore((s) => [
     systemStatusSelectors.themeMode(s),
     s.switchThemeMode,
@@ -60,11 +58,7 @@ const ThemeButton = memo<{ placement?: PopoverProps['placement'] }>(({ placement
       }}
       trigger={['click', 'hover']}
     >
-      <ActionIcon
-        icon={themeIcons[themeMode]}
-        size={{ blockSize: 32, size: 16 }}
-        style={{ border: `1px solid ${theme.colorFillSecondary}` }}
-      />
+      <ActionIcon icon={themeIcons[themeMode]} size={{ blockSize: 32, size: 16 }} />
     </Popover>
   );
 });

package/src/middleware.ts

@@ -134,12 +134,23 @@ const defaultMiddleware = (request: NextRequest) => {
   return NextResponse.rewrite(url, { status: 200 });
 };
 
+const isProtectedRoute = createRouteMatcher([
+  '/settings(.*)',
+  '/files(.*)',
+  '/onboard(.*)',
+  '/oauth(.*)',
+  // ↓ cloud ↓
+]);
+
 // Initialize an Edge compatible NextAuth middleware
 const nextAuthMiddleware = NextAuthEdge.auth((req) => {
   logNextAuth('NextAuth middleware processing request: %s %s', req.method, req.url);
 
   const response = defaultMiddleware(req);
 
+  const isProtected = isProtectedRoute(req);
+  logNextAuth('Route protection status: %s, %s', req.url, isProtected ? 'protected' : 'public');
+
   // Just check if session exists
   const session = req.auth;
 
@@ -165,20 +176,20 @@ const nextAuthMiddleware = NextAuthEdge.auth((req) => {
       response.headers.set(OIDC_SESSION_HEADER, session.user.id);
     }
   } else {
-    logNextAuth('Not logged in, no auth header set');
+    // If request a protected route, redirect to sign-in page
+    // ref: https://authjs.dev/getting-started/session-management/protecting
+    if (isProtected) {
+      logNextAuth('Request a protected route, redirecting to sign-in page');
+      const nextLoginUrl = new URL('/next-auth/signin', req.nextUrl.origin);
+      nextLoginUrl.searchParams.set('callbackUrl', req.nextUrl.pathname);
+      return Response.redirect(nextLoginUrl);
+    }
+    logNextAuth('Request a free route but not login, allow visit without auth header');
   }
 
   return response;
 });
 
-const isProtectedRoute = createRouteMatcher([
-  '/settings(.*)',
-  '/files(.*)',
-  '/onboard(.*)',
-  '/oauth(.*)',
-  // ↓ cloud ↓
-]);
-
 const clerkAuthMiddleware = clerkMiddleware(
   async (auth, req) => {
     logClerk('Clerk middleware processing request: %s %s', req.method, req.url);

package/src/store/chat/slices/aiChat/actions/generateAIChat.ts

@@ -677,7 +677,15 @@ export const generateAIChat: StateCreator<
             // if there is no duration, it means the end of reasoning
             if (!duration) {
               duration = Date.now() - thinkingStartAt;
-              internal_toggleChatReasoning(false, messageId, n('generateMessage(end)') as string);
+
+              const isInChatReasoning = chatSelectors.isMessageInChatReasoning(messageId)(get());
+              if (isInChatReasoning) {
+                internal_toggleChatReasoning(
+                  false,
+                  messageId,
+                  n('toggleChatReasoning/false') as string,
+                );
+              }
             }
 
             internal_dispatchMessage({
@@ -695,7 +703,11 @@ export const generateAIChat: StateCreator<
             // if there is no thinkingStartAt, it means the start of reasoning
             if (!thinkingStartAt) {
               thinkingStartAt = Date.now();
-              internal_toggleChatReasoning(true, messageId, n('generateMessage(end)') as string);
+              internal_toggleChatReasoning(
+                true,
+                messageId,
+                n('toggleChatReasoning/true') as string,
+              );
             }
 
             thinking += chunk.text;

package/src/store/chat/slices/message/selectors.ts

@@ -157,6 +157,9 @@ const isMessageLoading = (id: string) => (s: ChatStoreState) => s.messageLoading
 const isMessageGenerating = (id: string) => (s: ChatStoreState) => s.chatLoadingIds.includes(id);
 const isMessageInRAGFlow = (id: string) => (s: ChatStoreState) =>
   s.messageRAGLoadingIds.includes(id);
+const isMessageInChatReasoning = (id: string) => (s: ChatStoreState) =>
+  s.reasoningLoadingIds.includes(id);
+
 const isPluginApiInvoking = (id: string) => (s: ChatStoreState) =>
   s.pluginApiLoadingIds.includes(id);
 
@@ -170,6 +173,7 @@ const isToolCallStreaming = (id: string, index: number) => (s: ChatStoreState) =
 
 const isAIGenerating = (s: ChatStoreState) =>
   s.chatLoadingIds.some((id) => mainDisplayChatIDs(s).includes(id));
+
 const isInRAGFlow = (s: ChatStoreState) =>
   s.messageRAGLoadingIds.some((id) => mainDisplayChatIDs(s).includes(id));
 
@@ -208,6 +212,7 @@ export const chatSelectors = {
   isHasMessageLoading,
   isMessageEditing,
   isMessageGenerating,
+  isMessageInChatReasoning,
   isMessageInRAGFlow,
   isMessageLoading,
   isPluginApiInvoking,

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

@@ -41,8 +41,7 @@ describe('fetchSSE', () => {
       smoothing: false,
     });
 
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'Hello', type: 'text' });
-    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(2, { text: ' World', type: 'text' });
+    expect(mockOnMessageHandle).toHaveBeenNthCalledWith(1, { text: 'Hello World', type: 'text' });
     expect(mockOnFinish).toHaveBeenCalledWith('Hello World', {
       observationId: null,
       toolCalls: undefined,
@@ -123,7 +122,7 @@ describe('fetchSSE', () => {
     });
   });
 
-  it('should handle text event with smoothing correctly', async () => {
+  it.skip('should handle text event with smoothing correctly', async () => {
     const mockOnMessageHandle = vi.fn();
     const mockOnFinish = vi.fn();
 
@@ -178,9 +177,9 @@ describe('fetchSSE', () => {
         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);
+          await sleep(400);
           options.onmessage!({ event: 'reasoning', data: JSON.stringify(' World') } as any);
-          await sleep(100);
+          await sleep(400);
           options.onmessage!({ event: 'text', data: JSON.stringify('hi') } as any);
         },
       );
@@ -321,19 +320,7 @@ describe('fetchSSE', () => {
       smoothing: true,
     });
 
-    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' },
-    ];
+    const expectedMessages = [{ text: 'Hello World', type: 'text' }];
 
     expectedMessages.forEach((message, index) => {
       expect(mockOnMessageHandle).toHaveBeenNthCalledWith(index + 1, message);

package/src/utils/fetch/fetchSSE.ts

@@ -315,11 +315,27 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
 
   const { smoothing } = options;
 
-  const textSmoothing = typeof smoothing === 'boolean' ? smoothing : (smoothing?.text ?? true);
+  const textSmoothing = false;
+  // TODO: 看下后面就是完全移除 smoothing 还是怎么说
+  // const textSmoothing = typeof smoothing === 'boolean' ? smoothing : (smoothing?.text ?? true);
   const toolsCallingSmoothing =
     typeof smoothing === 'boolean' ? smoothing : (smoothing?.toolsCalling ?? true);
+
   const smoothingSpeed = isObject(smoothing) ? smoothing.speed : undefined;
 
+  // 添加文本buffer和计时器相关变量
+  let textBuffer = '';
+  // eslint-disable-next-line no-undef
+  let bufferTimer: NodeJS.Timeout | null = null;
+  const BUFFER_INTERVAL = 300; // 300ms
+
+  const flushTextBuffer = () => {
+    if (textBuffer) {
+      options.onMessageHandle?.({ text: textBuffer, type: 'text' });
+      textBuffer = '';
+    }
+  };
+
   let output = '';
   const textController = createSmoothMessage({
     onTextUpdate: (delta, text) => {
@@ -340,6 +356,18 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
     startSpeed: smoothingSpeed,
   });
 
+  let thinkingBuffer = '';
+  // eslint-disable-next-line no-undef
+  let thinkingBufferTimer: NodeJS.Timeout | null = null;
+
+  // 创建一个函数来处理buffer的刷新
+  const flushThinkingBuffer = () => {
+    if (thinkingBuffer) {
+      options.onMessageHandle?.({ text: thinkingBuffer, type: 'reasoning' });
+      thinkingBuffer = '';
+    }
+  };
+
   const toolCallsController = createSmoothToolCalls({
     onToolCallsUpdate: (toolCalls, isAnimationActives) => {
       options.onMessageHandle?.({ isAnimationActives, tool_calls: toolCalls, type: 'tool_calls' });
@@ -430,7 +458,17 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
             if (!textController.isAnimationActive) textController.startAnimation();
           } else {
             output += data;
-            options.onMessageHandle?.({ text: data, type: 'text' });
+
+            // 使用buffer机制
+            textBuffer += data;
+
+            // 如果还没有设置计时器，创建一个
+            if (!bufferTimer) {
+              bufferTimer = setTimeout(() => {
+                flushTextBuffer();
+                bufferTimer = null;
+              }, BUFFER_INTERVAL);
+            }
           }
 
           break;
@@ -466,7 +504,17 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
             if (!thinkingController.isAnimationActive) thinkingController.startAnimation();
           } else {
             thinking += data;
-            options.onMessageHandle?.({ text: data, type: 'reasoning' });
+
+            // 使用buffer机制
+            thinkingBuffer += data;
+
+            // 如果还没有设置计时器，创建一个
+            if (!thinkingBufferTimer) {
+              thinkingBufferTimer = setTimeout(() => {
+                flushThinkingBuffer();
+                thinkingBufferTimer = null;
+              }, BUFFER_INTERVAL);
+            }
           }
 
           break;
@@ -509,6 +557,17 @@ export const fetchSSE = async (url: string, options: RequestInit & FetchSSEOptio
     textController.stopAnimation();
     toolCallsController.stopAnimations();
 
+    // 确保所有缓冲区数据都被处理
+    if (bufferTimer) {
+      clearTimeout(bufferTimer);
+      flushTextBuffer();
+    }
+
+    if (thinkingBufferTimer) {
+      clearTimeout(thinkingBufferTimer);
+      flushThinkingBuffer();
+    }
+
     if (response.ok) {
       // if there is no onMessageHandler, we should call onHandleMessage first
       if (!triggerOnMessageHandler) {