@lobehub/lobehub 2.0.0-next.44 → 2.0.0-next.46

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 2.0.0-next.46](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.45...v2.0.0-next.46)
+
+<sup>Released on **2025-11-11**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Fix thread display.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Fix thread display, closes [#10153](https://github.com/lobehub/lobe-chat/issues/10153) ([8fda83e](https://github.com/lobehub/lobe-chat/commit/8fda83e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 2.0.0-next.45](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.44...v2.0.0-next.45)
+
+<sup>Released on **2025-11-10**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Edge to node runtime.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Edge to node runtime, closes [#10149](https://github.com/lobehub/lobe-chat/issues/10149) ([2f4c25d](https://github.com/lobehub/lobe-chat/commit/2f4c25d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.44](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.43...v2.0.0-next.44)
 
 <sup>Released on **2025-11-10**</sup>

package/changelog/v1.json

@@ -1,4 +1,22 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Fix thread display."
+      ]
+    },
+    "date": "2025-11-11",
+    "version": "2.0.0-next.46"
+  },
+  {
+    "children": {
+      "improvements": [
+        "Edge to node runtime."
+      ]
+    },
+    "date": "2025-11-10",
+    "version": "2.0.0-next.45"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.44",
+  "version": "2.0.0-next.46",
   "description": "LobeHub - an open-source,comprehensive AI Agent 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/packages/model-runtime/src/providers/azureai/index.ts

@@ -1,6 +1,7 @@
 import createClient, { ModelClient } from '@azure-rest/ai-inference';
 import { AzureKeyCredential } from '@azure/core-auth';
 import { ModelProvider } from 'model-bank';
+import type { Readable as NodeReadable } from 'node:stream';
 import OpenAI from 'openai';
 
 import { systemToUserModels } from '../../const/models';
@@ -64,9 +65,40 @@ export class LobeAzureAI implements LobeRuntimeAI {
       });
 
       if (enableStreaming) {
-        const stream = await response.asBrowserStream();
+        const unifiedStream = await (async () => {
+          if (typeof window === 'undefined') {
+            /**
+             * In Node.js the SDK exposes a Node readable stream, so we convert it to a Web ReadableStream
+             * to reuse the same streaming pipeline used by Edge/browser runtimes.
+             */
+            const streamModule = await import('node:stream');
+            const Readable = streamModule.Readable ?? streamModule.default.Readable;
+
+            if (!Readable) throw new Error('node:stream module missing Readable export');
+            if (typeof Readable.toWeb !== 'function')
+              throw new Error('Readable.toWeb is not a function');
+
+            const nodeResponse = await response.asNodeStream();
+            const nodeStream = nodeResponse.body;
+
+            if (!nodeStream) {
+              throw new Error('Azure AI response body is empty');
+            }
+
+            return Readable.toWeb(nodeStream as unknown as NodeReadable) as ReadableStream;
+          }
+
+          const browserResponse = await response.asBrowserStream();
+          const browserStream = browserResponse.body;
+
+          if (!browserStream) {
+            throw new Error('Azure AI response body is empty');
+          }
+
+          return browserStream;
+        })();
 
-        const [prod, debug] = stream.body!.tee();
+        const [prod, debug] = unifiedStream.tee();
 
         if (process.env.DEBUG_AZURE_AI_CHAT_COMPLETION === '1') {
           debugStream(debug).catch(console.error);

package/packages/utils/src/server/__tests__/response.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+
+import { createNodeResponse } from '../response';
+
+describe('createNodeResponse', () => {
+  it('wraps successful Response with default headers', async () => {
+    const upstream = new Response('audio-chunk', {
+      headers: {
+        'x-source': 'sdk',
+      },
+      status: 201,
+      statusText: 'Created',
+    });
+    upstream.headers.delete('content-type');
+
+    const result = await createNodeResponse(() => Promise.resolve(upstream), {
+      success: {
+        cacheControl: 'no-store',
+        defaultContentType: 'audio/mpeg',
+      },
+    });
+
+    expect(await result.text()).toBe('audio-chunk');
+    expect(result.status).toBe(201);
+    expect(result.headers.get('x-source')).toBe('sdk');
+    expect(result.headers.get('content-type')).toBe('audio/mpeg');
+    expect(result.headers.get('cache-control')).toBe('no-store');
+  });
+
+  it('delegates to onInvalidResponse when payload is not Response-like', async () => {
+    const fallback = new Response('invalid', { status: 500 });
+
+    const result = await createNodeResponse(() => Promise.resolve({} as any), {
+      onInvalidResponse: () => fallback,
+    });
+
+    expect(result).toBe(fallback);
+  });
+
+  it('normalizes thrown Response-like errors via error options', async () => {
+    const upstreamError = new Response(JSON.stringify({ error: 'boom' }), {
+      status: 429,
+      statusText: 'Too Many Requests',
+    });
+    upstreamError.headers.delete('content-type');
+
+    const result = await createNodeResponse(
+      async () => {
+        throw upstreamError;
+      },
+      {
+        error: {
+          cacheControl: 'no-store',
+          defaultContentType: 'application/json',
+        },
+      },
+    );
+
+    expect(result.status).toBe(429);
+    expect(result.headers.get('content-type')).toBe('application/json');
+    expect(result.headers.get('cache-control')).toBe('no-store');
+    expect(await result.json()).toEqual({ error: 'boom' });
+  });
+
+  it('delegates to onNonResponseError for unexpected exceptions', async () => {
+    const fallback = new Response('fallback', { status: 500 });
+
+    const result = await createNodeResponse(
+      async () => {
+        throw new Error('unexpected');
+      },
+      {
+        onNonResponseError: () => fallback,
+      },
+    );
+
+    expect(result).toBe(fallback);
+  });
+});

package/packages/utils/src/server/index.ts

@@ -1,5 +1,6 @@
 export * from './auth';
 export * from './correctOIDCUrl';
 export * from './geo';
+export * from './response';
 export * from './responsive';
 export * from './xor';

package/packages/utils/src/server/response.ts

@@ -0,0 +1,110 @@
+/**
+ * Options for normalizing a Response so it can be consumed by the platform runtime.
+ */
+export interface EnsureNodeResponseOptions {
+  /**
+   * Force update the cache-control header, usually to disable caching for APIs.
+   */
+  cacheControl?: string;
+  /**
+   * Sets a default content-type header when the original Response omitted it.
+   */
+  defaultContentType?: string;
+  /**
+   * Force buffering even if a readable body stream exists.
+   */
+  forceBuffering?: boolean;
+}
+
+/**
+ * Checks whether a value structurally matches the minimal Response interface.
+ */
+export const isResponseLike = (value: unknown): value is Response => {
+  if (typeof value !== 'object' || value === null) return false;
+
+  const candidate = value as Partial<Response>;
+
+  return (
+    typeof candidate.arrayBuffer === 'function' &&
+    !!candidate.headers &&
+    typeof (candidate.headers as Headers).get === 'function' &&
+    typeof candidate.status === 'number' &&
+    typeof candidate.statusText === 'string'
+  );
+};
+
+/**
+ * Re-wraps an arbitrary Response-like object into the platform Response implementation.
+ *
+ * This is required because some SDKs (e.g., OpenAI) ship their own Response shim
+ * that is not recognized by Next.js when running in the Node.js runtime.
+ */
+export const ensureNodeResponse = async (
+  source: Response,
+  options: EnsureNodeResponseOptions = {},
+) => {
+  const headers = new Headers(source.headers);
+
+  if (options.defaultContentType && !headers.has('content-type')) {
+    headers.set('content-type', options.defaultContentType);
+  }
+
+  if (options.cacheControl) {
+    headers.set('cache-control', options.cacheControl);
+  }
+
+  const body = !options.forceBuffering && source.body ? source.body : await source.arrayBuffer();
+
+  return new Response(body, {
+    headers,
+    status: source.status,
+    statusText: source.statusText,
+  });
+};
+
+export interface CreateNodeResponseOptions {
+  /**
+   * Options applied when a Response-like error is thrown.
+   */
+  error?: EnsureNodeResponseOptions;
+  /**
+   * Callback when the resolved value is not Response-like.
+   */
+  onInvalidResponse?: (payload: unknown) => Response;
+  /**
+   * Callback when a non-Response error is thrown.
+   */
+  onNonResponseError?: (error: unknown) => Response;
+  /**
+   * Options applied when the resolved Response is normalized.
+   */
+  success?: EnsureNodeResponseOptions;
+}
+
+/**
+ * Runs a response factory and ensures every exit path returns a platform Response.
+ */
+export const createNodeResponse = async <T>(
+  responseCreator: () => Promise<T>,
+  options: CreateNodeResponseOptions = {},
+) => {
+  try {
+    const response = await responseCreator();
+
+    if (!isResponseLike(response)) {
+      if (options.onInvalidResponse) return options.onInvalidResponse(response);
+
+      throw new Error('Expected a Response-like object from responseCreator.');
+    }
+
+    return ensureNodeResponse(response, options.success);
+  } catch (error) {
+    if (isResponseLike(error)) {
+      return ensureNodeResponse(error, options.error);
+    }
+
+    if (options.onNonResponseError) return options.onNonResponseError(error);
+
+    throw error;
+  }
+};

package/src/app/(backend)/webapi/stt/openai/route.ts

@@ -3,8 +3,6 @@ import { createOpenaiAudioTranscriptions } from '@lobehub/tts/server';
 
 import { createBizOpenAI } from '@/app/(backend)/_deprecated/createBizOpenAI';
 
-export const runtime = 'edge';
-
 export const preferredRegion = [
   'arn1',
   'bom1',

package/src/app/(backend)/webapi/tts/edge/route.ts

@@ -1,9 +1,15 @@
 import { EdgeSpeechPayload, EdgeSpeechTTS } from '@lobehub/tts';
 
-export const runtime = 'edge';
+import { createSpeechResponse } from '@/server/utils/createSpeechResponse';
 
 export const POST = async (req: Request) => {
   const payload = (await req.json()) as EdgeSpeechPayload;
 
-  return await EdgeSpeechTTS.createRequest({ payload });
+  return createSpeechResponse(() => EdgeSpeechTTS.createRequest({ payload }), {
+    logTag: 'webapi/tts/edge',
+    messages: {
+      failure: 'Failed to synthesize speech',
+      invalid: 'Unexpected payload from Edge speech API',
+    },
+  });
 };

package/src/app/(backend)/webapi/tts/microsoft/route.ts

@@ -1,9 +1,15 @@
 import { MicrosoftSpeechPayload, MicrosoftSpeechTTS } from '@lobehub/tts';
 
-export const runtime = 'edge';
+import { createSpeechResponse } from '@/server/utils/createSpeechResponse';
 
 export const POST = async (req: Request) => {
   const payload = (await req.json()) as MicrosoftSpeechPayload;
 
-  return await MicrosoftSpeechTTS.createRequest({ payload });
+  return createSpeechResponse(() => MicrosoftSpeechTTS.createRequest({ payload }), {
+    logTag: 'webapi/tts/microsoft',
+    messages: {
+      failure: 'Failed to synthesize speech',
+      invalid: 'Unexpected payload from Microsoft speech API',
+    },
+  });
 };

package/src/app/(backend)/webapi/tts/openai/route.ts

@@ -2,8 +2,7 @@ import { OpenAITTSPayload } from '@lobehub/tts';
 import { createOpenaiAudioSpeech } from '@lobehub/tts/server';
 
 import { createBizOpenAI } from '@/app/(backend)/_deprecated/createBizOpenAI';
-
-export const runtime = 'edge';
+import { createSpeechResponse } from '@/server/utils/createSpeechResponse';
 
 export const preferredRegion = [
   'arn1',
@@ -34,5 +33,18 @@ export const POST = async (req: Request) => {
   // if resOrOpenAI is a Response, it means there is an error,just return it
   if (openaiOrErrResponse instanceof Response) return openaiOrErrResponse;
 
-  return await createOpenaiAudioSpeech({ openai: openaiOrErrResponse as any, payload });
+  return createSpeechResponse(
+    () =>
+      createOpenaiAudioSpeech({
+        openai: openaiOrErrResponse as any,
+        payload,
+      }),
+    {
+      logTag: 'webapi/tts/openai',
+      messages: {
+        failure: 'Failed to synthesize speech',
+        invalid: 'Unexpected payload from OpenAI TTS',
+      },
+    },
+  );
 };

package/src/app/[variants]/(main)/chat/components/conversation/features/ChatList/ChatItem/Thread.tsx

@@ -39,7 +39,7 @@ const Thread = memo<ThreadProps>(({ id, placement, style }) => {
       direction={placement === 'end' ? 'horizontal-reverse' : 'horizontal'}
       gap={12}
       paddingInline={16}
-      style={{ paddingBottom: 16, ...style }}
+      style={{ marginTop: -12, paddingBottom: 16, ...style }}
     >
       <div style={{ width: 40 }} />
       <Flexbox className={styles.container} gap={4} padding={4} style={{ width: 'fit-content' }}>

package/src/app/[variants]/(main)/chat/components/conversation/features/ChatList/ChatItem/index.tsx

@@ -1,13 +1,13 @@
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 
-import SupervisorThinkingTag from '@/app/[variants]/(main)/chat/components/conversation/features/ChatList/ChatItem/OrchestratorThinking';
 import { ChatItem } from '@/features/Conversation';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, threadSelectors } from '@/store/chat/selectors';
+import { displayMessageSelectors, threadSelectors } from '@/store/chat/selectors';
 
+import SupervisorThinkingTag from './OrchestratorThinking';
 import Thread from './Thread';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => {
@@ -26,15 +26,16 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => {
         content: '';
 
         position: absolute;
-        inset-block: 56px 50px;
+        inset-block-end: 60px;
 
-        width: 32px;
+        width: 38px;
+        height: 53px;
         border-block-end: 2px solid ${borderColor};
       }
     `,
     start: css`
       &::after {
-        inset-inline-start: 36px;
+        inset-inline-start: 30px;
         border-inline-start: 2px solid ${borderColor};
         border-end-start-radius: 8px;
       }
@@ -52,7 +53,7 @@ const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
 
   const [showThread, historyLength] = useChatStore((s) => [
     threadSelectors.hasThreadBySourceMsgId(id)(s),
-    chatSelectors.mainDisplayChatIDs(s).length,
+    displayMessageSelectors.mainDisplayChatIDs(s).length,
   ]);
 
   const [displayMode, enableHistoryDivider] = useAgentStore((s) => [
@@ -60,7 +61,7 @@ const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
     agentChatConfigSelectors.enableHistoryDivider(historyLength, index)(s),
   ]);
 
-  const userRole = useChatStore((s) => chatSelectors.getMessageById(id)(s)?.role);
+  const userRole = useChatStore((s) => displayMessageSelectors.getDisplayMessageById(id)(s)?.role);
 
   const placement = displayMode === 'chat' && userRole === 'user' ? 'end' : 'start';
 
@@ -71,15 +72,7 @@ const MainChatItem = memo<ThreadChatItemProps>(({ id, index }) => {
       <ChatItem
         className={showThread ? cx(styles.line, styles[placement]) : ''}
         enableHistoryDivider={enableHistoryDivider}
-        endRender={
-          showThread && (
-            <Thread
-              id={id}
-              placement={placement}
-              style={{ marginTop: displayMode === 'docs' ? 12 : undefined }}
-            />
-          )
-        }
+        endRender={showThread && <Thread id={id} placement={placement} />}
         id={id}
         index={index}
       />

package/src/features/Conversation/Messages/Assistant/Actions/index.tsx

@@ -53,11 +53,9 @@ export const AssistantActionsBar = memo<AssistantActionsProps>(({ id, data, inde
   const items = useMemo(() => {
     if (hasTools) return [delAndRegenerate, copy];
 
-    return [
-      edit,
-      copy,
-      // inThread || isGroupSession ? null : branching
-    ].filter(Boolean) as ActionIconGroupItemType[];
+    return [edit, copy, inThread || isGroupSession ? null : branching].filter(
+      Boolean,
+    ) as ActionIconGroupItemType[];
   }, [inThread, hasTools, isGroupSession, delAndRegenerate, copy, edit, branching]);
 
   const { t } = useTranslation('common');

package/src/features/Conversation/Messages/Assistant/Extra/index.test.tsx

@@ -24,7 +24,7 @@ vi.mock('@/store/chat', () => ({
   useChatStore: vi.fn(),
 }));
 
-const mockData: UIChatMessage = {
+const mockData = {
   content: 'test-content',
   createdAt: 0,
   id: 'abc',
@@ -53,8 +53,8 @@ describe('AssistantMessageExtra', () => {
     expect(screen.queryByText('Translate Component')).toBeNull();
   });
 
-  it('should render Usage component if extra.model exists', async () => {
-    render(<AssistantMessageExtra {...mockData} extra={{ model: 'gpt-4', provider: 'openai' }} />);
+  it('should render Usage component if model prop exists', async () => {
+    render(<AssistantMessageExtra {...mockData} model="gpt-4" provider="openai" />);
 
     expect(screen.getByText('Usage Component')).toBeInTheDocument();
   });

package/src/features/Conversation/Messages/Assistant/Extra/index.tsx

@@ -1,4 +1,4 @@
-import { type MessageMetadata } from '@lobechat/types';
+import { ModelPerformance, ModelUsage } from '@lobechat/types';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -14,18 +14,21 @@ interface AssistantMessageExtraProps {
   content: string;
   extra?: any;
   id: string;
-  metadata?: MessageMetadata | null;
+  model?: string;
+  performance?: ModelPerformance;
+  provider?: string;
   tools?: any[];
+  usage?: ModelUsage;
 }
 
 export const AssistantMessageExtra = memo<AssistantMessageExtraProps>(
-  ({ extra, id, content, metadata, tools }) => {
+  ({ extra, id, content, performance, usage, tools, provider, model }) => {
     const loading = useChatStore(messageStateSelectors.isMessageGenerating(id));
 
     return (
       <Flexbox gap={8} style={{ marginTop: !!tools?.length ? 8 : 4 }}>
-        {content !== LOADING_FLAT && extra?.model && (
-          <Usage metadata={metadata || {}} model={extra?.model} provider={extra.provider!} />
+        {content !== LOADING_FLAT && model && (
+          <Usage model={model} performance={performance} provider={provider!} usage={usage} />
         )}
         <>
           {!!extra?.tts && (

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

@@ -20,7 +20,7 @@ import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { messageStateSelectors } from '@/store/chat/slices/message/selectors';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 import { chatGroupSelectors, useChatGroupStore } from '@/store/chatGroup';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
@@ -48,28 +48,38 @@ const isHtmlCode = (content: string, language: string) => {
 };
 const MOBILE_AVATAR_SIZE = 32;
 
-interface AssistantMessageProps extends UIChatMessage {
+interface AssistantMessageProps {
   disableEditing?: boolean;
+  id: string;
   index: number;
-  showTitle?: boolean;
 }
-const AssistantMessage = memo<AssistantMessageProps>((props) => {
+
+const AssistantMessage = memo<AssistantMessageProps>(({ id, index, disableEditing }) => {
+  const item = useChatStore(
+    displayMessageSelectors.getDisplayMessageById(id),
+    isEqual,
+  ) as UIChatMessage;
+
   const {
     error,
-    showTitle,
-    id,
     role,
     search,
-    disableEditing,
-    index,
     content,
     createdAt,
     tools,
     extra,
-    metadata,
+    model,
+    provider,
     meta,
     targetId,
-  } = props;
+    groupId,
+    performance,
+    usage,
+    metadata,
+  } = item;
+
+  const showTitle = !!groupId;
+
   const avatar = meta;
   const { t } = useTranslation('chat');
   const { mobile } = useResponsive();
@@ -199,11 +209,12 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
 
   const renderMessage = useCallback(
     (editableContent: ReactNode) => (
-      <AssistantMessageContent {...props} editableContent={editableContent} />
+      <AssistantMessageContent {...item} editableContent={editableContent} />
     ),
-    [props],
+    [item],
   );
-  const errorMessage = <ErrorMessageExtra data={props} />;
+  const errorMessage = <ErrorMessageExtra data={item} />;
+
   return (
     <Flexbox className={styles.container} gap={mobile ? 6 : 12}>
       <Flexbox gap={4} horizontal>
@@ -254,8 +265,11 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
                     content={content}
                     extra={extra}
                     id={id}
-                    metadata={metadata}
+                    model={model!}
+                    performance={performance! || metadata}
+                    provider={provider!}
                     tools={tools}
+                    usage={usage! || metadata}
                   />
                 </>
               }
@@ -268,7 +282,7 @@ const AssistantMessage = memo<AssistantMessageProps>((props) => {
         </Flexbox>
         {!disableEditing && !editing && (
           <Flexbox align={'flex-start'} className={styles.actions} role="menubar">
-            <AssistantActionsBar data={props} id={id} index={index} />
+            <AssistantActionsBar data={item} id={id} index={index} />
           </Flexbox>
         )}
       </Flexbox>

package/src/features/Conversation/Messages/Group/Actions/WithContentId.tsx

@@ -46,11 +46,9 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
   const items = useMemo(() => {
     if (hasTools) return [delAndRegenerate, copy];
 
-    return [
-      edit,
-      copy,
-      // inThread || isGroupSession ? null : branching
-    ].filter(Boolean) as ActionIconGroupItemType[];
+    return [edit, copy, inThread || isGroupSession ? null : branching].filter(
+      Boolean,
+    ) as ActionIconGroupItemType[];
   }, [inThread, hasTools, isGroupSession, delAndRegenerate, copy, edit, branching]);
 
   const { t } = useTranslation('common');