@lobehub/lobehub 2.0.0-next.350 → 2.0.0-next.352

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+## [Version 2.0.0-next.352](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.351...v2.0.0-next.352)
+
+<sup>Released on **2026-01-23**</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 2.0.0-next.351](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.350...v2.0.0-next.351)
+
+<sup>Released on **2026-01-23**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix auto scroll.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix auto scroll, closes [#11734](https://github.com/lobehub/lobe-chat/issues/11734) ([892fa9f](https://github.com/lobehub/lobe-chat/commit/892fa9f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.350](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.349...v2.0.0-next.350)
 
 <sup>Released on **2026-01-23**</sup>

package/changelog/v1.json

@@ -1,4 +1,18 @@
 [
+  {
+    "children": {},
+    "date": "2026-01-23",
+    "version": "2.0.0-next.352"
+  },
+  {
+    "children": {
+      "fixes": [
+        "Fix auto scroll."
+      ]
+    },
+    "date": "2026-01-23",
+    "version": "2.0.0-next.351"
+  },
   {
     "children": {},
     "date": "2026-01-23",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.350",
+  "version": "2.0.0-next.352",
   "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",
@@ -205,7 +205,7 @@
     "@lobehub/icons": "^4.0.2",
     "@lobehub/market-sdk": "0.29.1",
     "@lobehub/tts": "^4.0.2",
-    "@lobehub/ui": "^4.27.5",
+    "@lobehub/ui": "^4.28.0",
     "@modelcontextprotocol/sdk": "^1.25.1",
     "@napi-rs/canvas": "^0.1.88",
     "@neondatabase/serverless": "^1.0.2",

package/packages/memory-user-memory/benchmarks/locomo/README.md

@@ -0,0 +1,119 @@
+# LoCoMo Benchmark Ingest Guide
+
+This folder contains the LoCoMo benchmark ingestor (`run.ts`). It loads `locomo10.json` and posts each sample to `/api/webhooks/memory-extraction/benchmark-locomo`, creating one user per sample with the ID pattern `locomo-user-${sampleId}`.
+
+## 1. Seed benchmark users
+
+Run this SQL before ingesting so the webhook has user records to attach memories to:
+
+```sql
+INSERT INTO users (id, email, normalized_email, username) VALUES
+  ('locomo-user-conv-26', 'locomo1-conv-26@example.com', 'LOCOMO1_CONV26@EXAMPLE.COM', 'locomo1-conv-26'),
+  ('locomo-user-conv-30', 'locomo1-conv-30@example.com', 'LOCOMO1_CONV30@EXAMPLE.COM', 'locomo1-conv-30'),
+  ('locomo-user-conv-41', 'locomo1-conv-41@example.com', 'LOCOMO1_CONV41@EXAMPLE.COM', 'locomo1-conv-41'),
+  ('locomo-user-conv-42', 'locomo1-conv-42@example.com', 'LOCOMO1_CONV42@EXAMPLE.COM', 'locomo1-conv-42'),
+  ('locomo-user-conv-43', 'locomo1-conv-43@example.com', 'LOCOMO1_CONV43@EXAMPLE.COM', 'locomo1-conv-43'),
+  ('locomo-user-conv-44', 'locomo1-conv-44@example.com', 'LOCOMO1_CONV44@EXAMPLE.COM', 'locomo1-conv-44'),
+  ('locomo-user-conv-47', 'locomo1-conv-47@example.com', 'LOCOMO1_CONV47@EXAMPLE.COM', 'locomo1-conv-47'),
+  ('locomo-user-conv-48', 'locomo1-conv-48@example.com', 'LOCOMO1_CONV48@EXAMPLE.COM', 'locomo1-conv-48'),
+  ('locomo-user-conv-49', 'locomo1-conv-49@example.com', 'LOCOMO1_CONV49@EXAMPLE.COM', 'locomo1-conv-49'),
+  ('locomo-user-conv-50', 'locomo1-conv-50@example.com', 'LOCOMO1_CONV50@EXAMPLE.COM', 'locomo1-conv-50')
+ON CONFLICT (id) DO UPDATE
+  SET email = EXCLUDED.email,
+      normalized_email = EXCLUDED.normalized_email,
+      username = EXCLUDED.username;
+
+-- optional: ensure settings rows exist
+INSERT INTO user_settings (id) VALUES
+  ('locomo-user-conv-26'), ('locomo-user-conv-30'), ('locomo-user-conv-41'), ('locomo-user-conv-42'),
+  ('locomo-user-conv-43'), ('locomo-user-conv-44'), ('locomo-user-conv-47'), ('locomo-user-conv-48'),
+  ('locomo-user-conv-49'), ('locomo-user-conv-50')
+ON CONFLICT DO NOTHING;
+```
+
+## 2. Clear benchmark memories (reset)
+
+Use this to strip extraction metadata from topics and delete all benchmark memory rows for the same users. Each statement includes its own CTE so it works in a multi-statement script:
+
+```sql
+WITH target_users AS (
+  SELECT UNNEST(ARRAY[
+    'locomo-user-conv-26','locomo-user-conv-30','locomo-user-conv-41',
+    'locomo-user-conv-42','locomo-user-conv-43','locomo-user-conv-44',
+    'locomo-user-conv-47','locomo-user-conv-48','locomo-user-conv-49','locomo-user-conv-50'
+  ]) AS user_id
+)
+UPDATE topics t
+SET metadata = metadata #- '{userMemoryExtractRunState}'
+FROM target_users u
+WHERE t.user_id = u.user_id;
+
+WITH target_users AS (
+  SELECT UNNEST(ARRAY[
+    'locomo-user-conv-26','locomo-user-conv-30','locomo-user-conv-41',
+    'locomo-user-conv-42','locomo-user-conv-43','locomo-user-conv-44',
+    'locomo-user-conv-47','locomo-user-conv-48','locomo-user-conv-49','locomo-user-conv-50'
+  ]) AS user_id
+)
+UPDATE topics t
+SET metadata = metadata #- '{userMemoryExtractStatus}'
+FROM target_users u
+WHERE t.user_id = u.user_id;
+
+WITH target_users AS (
+  SELECT UNNEST(ARRAY[
+    'locomo-user-conv-26','locomo-user-conv-30','locomo-user-conv-41',
+    'locomo-user-conv-42','locomo-user-conv-43','locomo-user-conv-44',
+    'locomo-user-conv-47','locomo-user-conv-48','locomo-user-conv-49','locomo-user-conv-50'
+  ]) AS user_id
+)
+DELETE FROM user_memories_experiences USING target_users u WHERE user_memories_experiences.user_id = u.user_id;
+
+WITH target_users AS (
+  SELECT UNNEST(ARRAY[
+    'locomo-user-conv-26','locomo-user-conv-30','locomo-user-conv-41',
+    'locomo-user-conv-42','locomo-user-conv-43','locomo-user-conv-44',
+    'locomo-user-conv-47','locomo-user-conv-48','locomo-user-conv-49','locomo-user-conv-50'
+  ]) AS user_id
+)
+DELETE FROM user_memories_contexts USING target_users u WHERE user_memories_contexts.user_id = u.user_id;
+
+WITH target_users AS (
+  SELECT UNNEST(ARRAY[
+    'locomo-user-conv-26','locomo-user-conv-30','locomo-user-conv-41',
+    'locomo-user-conv-42','locomo-user-conv-43','locomo-user-conv-44',
+    'locomo-user-conv-47','locomo-user-conv-48','locomo-user-conv-49','locomo-user-conv-50'
+  ]) AS user_id
+)
+DELETE FROM user_memories_preferences USING target_users u WHERE user_memories_preferences.user_id = u.user_id;
+
+WITH target_users AS (
+  SELECT UNNEST(ARRAY[
+    'locomo-user-conv-26','locomo-user-conv-30','locomo-user-conv-41',
+    'locomo-user-conv-42','locomo-user-conv-43','locomo-user-conv-44',
+    'locomo-user-conv-47','locomo-user-conv-48','locomo-user-conv-49','locomo-user-conv-50'
+  ]) AS user_id
+)
+DELETE FROM user_memories_identities USING target_users u WHERE user_memories_identities.user_id = u.user_id;
+
+WITH target_users AS (
+  SELECT UNNEST(ARRAY[
+    'locomo-user-conv-26','locomo-user-conv-30','locomo-user-conv-41',
+    'locomo-user-conv-42','locomo-user-conv-43','locomo-user-conv-44',
+    'locomo-user-conv-47','locomo-user-conv-48','locomo-user-conv-49','locomo-user-conv-50'
+  ]) AS user_id
+)
+DELETE FROM user_memories USING target_users u WHERE user_memories.user_id = u.user_id;
+```
+
+## 3. Run the ingest
+
+Set the required envs and execute:
+
+```bash
+MEMORY_USER_MEMORY_LOBEHUB_BASE_URL="http://localhost:3000" \
+MEMORY_USER_MEMORY_BENCHMARKS_LOCOMO_DATASETS="path/to/locomo/dataset/data/locomo10.json" \
+bun run tsx lobehub/packages/memory-user-memory/benchmarks/locomo/run.ts
+```
+
+Only samples whose IDs pass the filter in `run.ts` (currently `conv-26`) will ingest; adjust the filter if you need more samples.

package/packages/memory-user-memory/benchmarks/locomo/run.ts

@@ -4,11 +4,25 @@ import { exit } from 'node:process';
 
 const baseUrl = process.env.MEMORY_USER_MEMORY_LOBEHUB_BASE_URL;
 const benchmarkLoCoMoFile = process.env.MEMORY_USER_MEMORY_BENCHMARKS_LOCOMO_DATASETS;
+const webhookExtraHeaders = process.env.MEMORY_USER_MEMORY_WEBHOOK_HEADERS;
 
 const post = async (path: string, body: unknown) => {
+  const webhookHeaders = webhookExtraHeaders?.split(',')
+    .filter(Boolean)
+    .reduce<Record<string, string>>((acc, pair) => {
+      const [key, value] = pair.split('=').map((s) => s.trim());
+      if (key && value) {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+
   const res = await fetch(new URL(path, baseUrl).toString(), {
     body: JSON.stringify(body),
-    headers: { 'Content-Type': 'application/json' },
+    headers: {
+      'Content-Type': 'application/json',
+      ...webhookHeaders,
+    },
     method: 'POST',
   });
 
@@ -55,6 +69,8 @@ async function main() {
       userId,
     };
     try {
+      console.log(`[@lobechat/memory-user-memory/benchmarks/locomo] ingesting sample ${payload.sampleId} (${payload.sessions.length} sessions) for user ${userId}`);
+
       const res = await post('/api/webhooks/memory-extraction/benchmark-locomo', body);
       console.log(`[@lobechat/memory-user-memory/benchmarks/locomo] ingested sample ${payload.sampleId} -> insertedParts=${res.insertedParts ?? 'n/a'} memories=${res.extraction?.memoryIds?.length ?? 0} traceId=${res.extraction?.traceId ?? 'n/a'}`);
     } catch (err) {

package/src/app/(backend)/api/webhooks/memory-extraction/benchmark-locomo/route.ts

@@ -49,6 +49,13 @@ const normalizeLayers = (layers?: string[]) => {
   return Array.from(set);
 };
 
+interface SessionExtractionResult {
+  extraction?: Awaited<ReturnType<MemoryExtractionExecutor['extractBenchmarkSource']>>;
+  insertedParts: number;
+  sessionId: string;
+  sourceId: string;
+}
+
 export const POST = async (req: Request) => {
   try {
     const { webhookHeaders } = parseMemoryExtractionConfig();
@@ -69,18 +76,38 @@ export const POST = async (req: Request) => {
     const parsed = ingestSchema.parse(json);
 
     const sourceModel = new UserMemorySourceBenchmarkLoCoMoModel(parsed.userId);
+    const baseSourceId = parsed.sourceId || `sample_${parsed.sampleId}`;
+    const executor = await MemoryExtractionExecutor.create();
+    const layers = normalizeLayers(parsed.layers);
+
+    const results: SessionExtractionResult[] = [];
+    let totalInsertedParts = 0;
+
+    await Promise.all(parsed.sessions.map(async (session) => {
+      const sessionSourceId = `${baseSourceId}_${session.sessionId}`;
+
+      try {
+        await sourceModel.upsertSource({
+          id: sessionSourceId,
+          metadata: {
+            ingestAt: new Date().toISOString(),
+            sessionId: session.sessionId,
+            sessionTimestamp: session.timestamp,
+          },
+          sampleId: parsed.sampleId,
+          sourceType: (parsed.source ?? MemorySourceType.BenchmarkLocomo) as string,
+        });
+      } catch (error) {
+        console.error(`[locomo-ingest-webhook] upsertSource failed for sourceId=${sessionSourceId}`, error);
+        return {
+          extraction: undefined,
+          insertedParts: 0,
+          sessionId: session.sessionId,
+          sourceId: sessionSourceId,
+        }
+      }
 
-    const sourceId = parsed.sourceId || `sample_${parsed.sampleId}`;
-    await sourceModel.upsertSource({
-      id: sourceId,
-      metadata: { ingestAt: new Date().toISOString() },
-      sampleId: parsed.sampleId,
-      sourceType: (parsed.source ?? MemorySourceType.BenchmarkLocomo) as string,
-    });
-
-    let partCounter = 0;
-    const parts = parsed.sessions.flatMap((session) => {
-      return session.turns.map((turn) => {
+      const parts = session.turns.map((turn, index) => {
         const createdAt = new Date(turn.createdAt);
         const metadata: Record<string, unknown> = {
           diaId: turn.diaId,
@@ -89,45 +116,59 @@ export const POST = async (req: Request) => {
           sessionId: session.sessionId,
         };
 
-        const part = {
+        return {
           content: turn.text,
           createdAt,
           metadata,
-          partIndex: partCounter,
+          partIndex: index,
           sessionId: session.sessionId,
           speaker: turn.speaker,
         };
-        partCounter += 1;
-        return part;
       });
-    });
 
-    await sourceModel.replaceParts(sourceId, parts);
+      sourceModel.replaceParts(sessionSourceId, parts);
 
-    const contextProvider = new BenchmarkLocomoContextProvider({
-      parts,
-      sampleId: parsed.sampleId,
-      sourceId,
-      userId: parsed.userId,
-    });
+      const contextProvider = new BenchmarkLocomoContextProvider({
+        parts,
+        sampleId: parsed.sampleId,
+        sourceId: sessionSourceId,
+        userId: parsed.userId,
+      });
 
-    const executor = await MemoryExtractionExecutor.create();
-    const layers = normalizeLayers(parsed.layers);
-    const extraction = await executor.extractBenchmarkSource({
-      contextProvider,
-      forceAll: parsed.force ?? true,
-      layers,
-      parts,
-      source: parsed.source ?? MemorySourceType.BenchmarkLocomo,
-      sourceId,
-      userId: parsed.userId,
-    });
+      try {
+        const extraction = await executor.extractBenchmarkSource({
+          contextProvider,
+          forceAll: parsed.force ?? true,
+          layers,
+          parts,
+          source: parsed.source ?? MemorySourceType.BenchmarkLocomo,
+          sourceId: sessionSourceId,
+          userId: parsed.userId,
+        });
+
+        return {
+          extraction,
+          insertedParts: parts.length,
+          sessionId: session.sessionId,
+          sourceId: sessionSourceId,
+        }
+      } catch (error) {
+        console.error(`[locomo-ingest-webhook] extractBenchmarkSource failed for sourceId=${sessionSourceId}`, error);
+        return {
+          extraction: undefined,
+          insertedParts: parts.length,
+          sessionId: session.sessionId,
+          sourceId: sessionSourceId,
+        }
+      }
+    }))
 
     return NextResponse.json(
       {
-        extraction,
-        insertedParts: parts.length,
-        sourceId,
+        baseSourceId,
+        insertedParts: totalInsertedParts,
+        results,
+        sourceIds: results.map((item) => item.sourceId),
         userId: parsed.userId,
       },
       { status: 200 },

package/src/components/ModelSelect/index.tsx

@@ -288,6 +288,7 @@ export const ModelItemRender = memo<ModelItemRenderProps>(
           <Text
             ellipsis={{
               tooltip: displayNameOrId,
+              tooltipWhenOverflow: true,
             }}
             style={mobile ? { maxWidth: '60vw' } : { minWidth: 0, overflow: 'hidden' }}
           >

package/src/features/Conversation/ChatList/components/AutoScroll/DebugInspector.tsx

@@ -40,7 +40,7 @@ const DebugInspector = memo(() => {
       style={{
         background: 'rgba(0,0,0,0.9)',
         borderRadius: 8,
-        bottom: 80,
+        bottom: 135,
         display: 'flex',
         fontFamily: 'monospace',
         fontSize: 11,

package/src/features/Conversation/ChatList/components/AutoScroll/index.tsx

@@ -8,9 +8,14 @@ import {
   useConversationStore,
   virtuaListSelectors,
 } from '../../../store';
-import BackBottom from '../BackBottom';
-import { AT_BOTTOM_THRESHOLD, OPEN_DEV_INSPECTOR } from './DebugInspector';
 
+/**
+ * AutoScroll component - handles auto-scrolling logic during AI generation.
+ * Should be placed inside the last item of VList so it only triggers when visible.
+ *
+ * This component has no visual output - it only contains the auto-scroll logic.
+ * Debug UI and BackBottom button are rendered separately outside VList.
+ */
 const AutoScroll = memo(() => {
   const atBottom = useConversationStore(virtuaListSelectors.atBottom);
   const isScrolling = useConversationStore(virtuaListSelectors.isScrolling);
@@ -31,54 +36,8 @@ const AutoScroll = memo(() => {
     }
   }, [shouldAutoScroll, scrollToBottom, dbMessages.length, lastMessageContentLength]);
 
-  return (
-    <div style={{ position: 'relative', width: '100%' }}>
-      {OPEN_DEV_INSPECTOR && (
-        <>
-          {/* Threshold 区域顶部边界线 */}
-          <div
-            style={{
-              background: atBottom ? '#22c55e' : '#ef4444',
-              height: 2,
-              left: 0,
-              opacity: 0.5,
-              pointerEvents: 'none',
-              position: 'absolute',
-              right: 0,
-              top: -AT_BOTTOM_THRESHOLD,
-            }}
-          />
-
-          {/* Threshold 区域 mask - 显示在指示线上方 */}
-          <div
-            style={{
-              background: atBottom
-                ? 'linear-gradient(to top, rgba(34, 197, 94, 0.15), transparent)'
-                : 'linear-gradient(to top, rgba(239, 68, 68, 0.1), transparent)',
-              height: AT_BOTTOM_THRESHOLD,
-              left: 0,
-              pointerEvents: 'none',
-              position: 'absolute',
-              right: 0,
-              top: -AT_BOTTOM_THRESHOLD,
-            }}
-          />
-
-          {/* AutoScroll 位置指示线（底部） */}
-          <div
-            style={{
-              background: atBottom ? '#22c55e' : '#ef4444',
-              height: 2,
-              position: 'relative',
-              width: '100%',
-            }}
-          />
-        </>
-      )}
-
-      <BackBottom onScrollToBottom={() => scrollToBottom(true)} visible={!atBottom} />
-    </div>
-  );
+  // No visual output - this component only handles auto-scroll logic
+  return null;
 });
 
 AutoScroll.displayName = 'ConversationAutoScroll';

package/src/features/Conversation/ChatList/components/BackBottom/index.tsx

@@ -4,30 +4,83 @@ import { ArrowDownIcon } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { AT_BOTTOM_THRESHOLD, OPEN_DEV_INSPECTOR } from '../AutoScroll/DebugInspector';
 import { styles } from './style';
 
 export interface BackBottomProps {
+  atBottom: boolean;
   onScrollToBottom: () => void;
   visible: boolean;
 }
 
-const BackBottom = memo<BackBottomProps>(({ visible, onScrollToBottom }) => {
+const BackBottom = memo<BackBottomProps>(({ visible, atBottom, onScrollToBottom }) => {
   const { t } = useTranslation('chat');
 
   return (
-    <ActionIcon
-      className={cx(styles.container, visible && styles.visible)}
-      glass
-      icon={ArrowDownIcon}
-      onClick={onScrollToBottom}
-      size={{
-        blockSize: 36,
-        borderRadius: 36,
-        size: 18,
-      }}
-      title={t('backToBottom')}
-      variant={'outlined'}
-    />
+    <>
+      {/* Debug: 底部指示线 */}
+      {OPEN_DEV_INSPECTOR && (
+        <div
+          style={{
+            bottom: 0,
+            left: 0,
+            pointerEvents: 'none',
+            position: 'absolute',
+            right: 0,
+          }}
+        >
+          {/* Threshold 区域顶部边界线 */}
+          <div
+            style={{
+              background: atBottom ? '#22c55e' : '#ef4444',
+              height: 2,
+              left: 0,
+              opacity: 0.5,
+              position: 'absolute',
+              right: 0,
+              top: -AT_BOTTOM_THRESHOLD,
+            }}
+          />
+
+          {/* Threshold 区域 mask - 显示在指示线上方 */}
+          <div
+            style={{
+              background: atBottom
+                ? 'linear-gradient(to top, rgba(34, 197, 94, 0.15), transparent)'
+                : 'linear-gradient(to top, rgba(239, 68, 68, 0.1), transparent)',
+              height: AT_BOTTOM_THRESHOLD,
+              left: 0,
+              position: 'absolute',
+              right: 0,
+              top: -AT_BOTTOM_THRESHOLD,
+            }}
+          />
+
+          {/* AutoScroll 位置指示线（底部） */}
+          <div
+            style={{
+              background: atBottom ? '#22c55e' : '#ef4444',
+              height: 2,
+              width: '100%',
+            }}
+          />
+        </div>
+      )}
+
+      <ActionIcon
+        className={cx(styles.container, visible && styles.visible)}
+        glass
+        icon={ArrowDownIcon}
+        onClick={onScrollToBottom}
+        size={{
+          blockSize: 36,
+          borderRadius: 36,
+          size: 18,
+        }}
+        title={t('backToBottom')}
+        variant={'outlined'}
+      />
+    </>
   );
 });
 

package/src/features/Conversation/ChatList/components/VirtualizedList.tsx

@@ -5,12 +5,14 @@ import { type ReactElement, type ReactNode, memo, useCallback, useEffect, useRef
 import { VList, type VListHandle } from 'virtua';
 
 import WideScreenContainer from '../../../WideScreenContainer';
-import { useConversationStore, virtuaListSelectors } from '../../store';
+import { dataSelectors, useConversationStore, virtuaListSelectors } from '../../store';
+import { useScrollToUserMessage } from '../hooks/useScrollToUserMessage';
 import AutoScroll from './AutoScroll';
 import DebugInspector, {
   AT_BOTTOM_THRESHOLD,
   OPEN_DEV_INSPECTOR,
 } from './AutoScroll/DebugInspector';
+import BackBottom from './BackBottom';
 
 interface VirtualizedListProps {
   dataSource: string[];
@@ -24,7 +26,6 @@ interface VirtualizedListProps {
  */
 const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent }) => {
   const virtuaRef = useRef<VListHandle>(null);
-  const prevDataLengthRef = useRef(dataSource.length);
   const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Store actions
@@ -112,15 +113,18 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
     };
   }, [resetVisibleItems]);
 
-  // Auto scroll to bottom when new messages arrive
-  useEffect(() => {
-    const shouldScroll = dataSource.length > prevDataLengthRef.current;
-    prevDataLengthRef.current = dataSource.length;
+  // Get the last message to check if it's a user message
+  const displayMessages = useConversationStore(dataSelectors.displayMessages);
+  const lastMessage = displayMessages.at(-1);
+  const isLastMessageFromUser = lastMessage?.role === 'user';
 
-    if (shouldScroll && virtuaRef.current) {
-      virtuaRef.current.scrollToIndex(dataSource.length - 2, { align: 'start', smooth: true });
-    }
-  }, [dataSource.length]);
+  // Auto scroll to user message when user sends a new message
+  // Only scroll when the new message is from the user, not when AI/agent responds
+  useScrollToUserMessage({
+    dataSourceLength: dataSource.length,
+    isLastMessageFromUser,
+    scrollToIndex: virtuaRef.current?.scrollToIndex ?? null,
+  });
 
   // Scroll to bottom on initial render
   useEffect(() => {
@@ -129,8 +133,11 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
     }
   }, []);
 
+  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
+  const scrollToBottom = useConversationStore((s) => s.scrollToBottom);
+
   return (
-    <>
+    <div style={{ height: '100%', position: 'relative' }}>
       {/* Debug Inspector - 放在 VList 外面，不会被虚拟列表回收 */}
       {OPEN_DEV_INSPECTOR && <DebugInspector />}
       <VList
@@ -143,15 +150,16 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
       >
         {(messageId, index): ReactElement => {
           const isAgentCouncil = messageId.includes('agentCouncil');
+          const isLastItem = index === dataSource.length - 1;
           const content = itemContent(index, messageId);
-          const isLast = index === dataSource.length - 1;
 
           if (isAgentCouncil) {
             // AgentCouncil needs full width for horizontal scroll
             return (
               <div key={messageId} style={{ position: 'relative', width: '100%' }}>
                 {content}
-                {isLast && <AutoScroll />}
+                {/* AutoScroll 放在最后一个 Item 里面，这样只有当最后一个 Item 可见时才会触发自动滚动 */}
+                {isLastItem && <AutoScroll />}
               </div>
             );
           }
@@ -159,12 +167,15 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
           return (
             <WideScreenContainer key={messageId} style={{ position: 'relative' }}>
               {content}
-              {isLast && <AutoScroll />}
+              {/* AutoScroll 放在最后一个 Item 里面，这样只有当最后一个 Item 可见时才会触发自动滚动 */}
+              {isLastItem && <AutoScroll />}
             </WideScreenContainer>
           );
         }}
       </VList>
-    </>
+      {/* BackBottom 放在 VList 外面，这样无论滚动到哪里都能看到 */}
+      <BackBottom atBottom={atBottom} onScrollToBottom={() => scrollToBottom(true)} visible={!atBottom} />
+    </div>
   );
 }, isEqual);
 

package/src/features/Conversation/ChatList/hooks/useScrollToUserMessage.test.ts

@@ -0,0 +1,224 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useScrollToUserMessage } from './useScrollToUserMessage';
+
+describe('useScrollToUserMessage', () => {
+  describe('when user sends a new message', () => {
+    it('should scroll to user message when new message is from user', () => {
+      const scrollToIndex = vi.fn();
+
+      const { rerender } = renderHook(
+        ({ dataSourceLength, isLastMessageFromUser }) =>
+          useScrollToUserMessage({
+            dataSourceLength,
+            isLastMessageFromUser,
+            scrollToIndex,
+          }),
+        {
+          initialProps: {
+            dataSourceLength: 2,
+            isLastMessageFromUser: false,
+          },
+        },
+      );
+
+      // User sends a new message (length increases, last message is from user)
+      rerender({
+        dataSourceLength: 3,
+        isLastMessageFromUser: true,
+      });
+
+      expect(scrollToIndex).toHaveBeenCalledTimes(1);
+      expect(scrollToIndex).toHaveBeenCalledWith(1, { align: 'start', smooth: true });
+    });
+
+    it('should scroll to correct index when multiple user messages are sent', () => {
+      const scrollToIndex = vi.fn();
+
+      const { rerender } = renderHook(
+        ({ dataSourceLength, isLastMessageFromUser }) =>
+          useScrollToUserMessage({
+            dataSourceLength,
+            isLastMessageFromUser,
+            scrollToIndex,
+          }),
+        {
+          initialProps: {
+            dataSourceLength: 5,
+            isLastMessageFromUser: false,
+          },
+        },
+      );
+
+      // User sends a new message
+      rerender({
+        dataSourceLength: 6,
+        isLastMessageFromUser: true,
+      });
+
+      // Should scroll to index 4 (dataSourceLength - 2 = 6 - 2 = 4)
+      expect(scrollToIndex).toHaveBeenCalledWith(4, { align: 'start', smooth: true });
+    });
+  });
+
+  describe('when AI/agent responds', () => {
+    it('should NOT scroll when new message is from AI', () => {
+      const scrollToIndex = vi.fn();
+
+      const { rerender } = renderHook(
+        ({ dataSourceLength, isLastMessageFromUser }) =>
+          useScrollToUserMessage({
+            dataSourceLength,
+            isLastMessageFromUser,
+            scrollToIndex,
+          }),
+        {
+          initialProps: {
+            dataSourceLength: 2,
+            isLastMessageFromUser: true,
+          },
+        },
+      );
+
+      // AI responds (length increases, but last message is NOT from user)
+      rerender({
+        dataSourceLength: 3,
+        isLastMessageFromUser: false,
+      });
+
+      expect(scrollToIndex).not.toHaveBeenCalled();
+    });
+
+    it('should NOT scroll when multiple agents respond in group chat', () => {
+      const scrollToIndex = vi.fn();
+
+      const { rerender } = renderHook(
+        ({ dataSourceLength, isLastMessageFromUser }) =>
+          useScrollToUserMessage({
+            dataSourceLength,
+            isLastMessageFromUser,
+            scrollToIndex,
+          }),
+        {
+          initialProps: {
+            dataSourceLength: 3,
+            isLastMessageFromUser: false,
+          },
+        },
+      );
+
+      // First agent responds
+      rerender({
+        dataSourceLength: 4,
+        isLastMessageFromUser: false,
+      });
+
+      expect(scrollToIndex).not.toHaveBeenCalled();
+
+      // Second agent responds
+      rerender({
+        dataSourceLength: 5,
+        isLastMessageFromUser: false,
+      });
+
+      expect(scrollToIndex).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should NOT scroll when length decreases (message deleted)', () => {
+      const scrollToIndex = vi.fn();
+
+      const { rerender } = renderHook(
+        ({ dataSourceLength, isLastMessageFromUser }) =>
+          useScrollToUserMessage({
+            dataSourceLength,
+            isLastMessageFromUser,
+            scrollToIndex,
+          }),
+        {
+          initialProps: {
+            dataSourceLength: 5,
+            isLastMessageFromUser: true,
+          },
+        },
+      );
+
+      // Message deleted (length decreases)
+      rerender({
+        dataSourceLength: 4,
+        isLastMessageFromUser: true,
+      });
+
+      expect(scrollToIndex).not.toHaveBeenCalled();
+    });
+
+    it('should NOT scroll when length stays the same', () => {
+      const scrollToIndex = vi.fn();
+
+      const { rerender } = renderHook(
+        ({ dataSourceLength, isLastMessageFromUser }) =>
+          useScrollToUserMessage({
+            dataSourceLength,
+            isLastMessageFromUser,
+            scrollToIndex,
+          }),
+        {
+          initialProps: {
+            dataSourceLength: 3,
+            isLastMessageFromUser: true,
+          },
+        },
+      );
+
+      // Length stays the same (content update, not new message)
+      rerender({
+        dataSourceLength: 3,
+        isLastMessageFromUser: true,
+      });
+
+      expect(scrollToIndex).not.toHaveBeenCalled();
+    });
+
+    it('should handle null scrollToIndex gracefully', () => {
+      const { rerender } = renderHook(
+        ({ dataSourceLength, isLastMessageFromUser }) =>
+          useScrollToUserMessage({
+            dataSourceLength,
+            isLastMessageFromUser,
+            scrollToIndex: null,
+          }),
+        {
+          initialProps: {
+            dataSourceLength: 2,
+            isLastMessageFromUser: false,
+          },
+        },
+      );
+
+      // Should not throw when scrollToIndex is null
+      expect(() => {
+        rerender({
+          dataSourceLength: 3,
+          isLastMessageFromUser: true,
+        });
+      }).not.toThrow();
+    });
+
+    it('should NOT scroll on initial render', () => {
+      const scrollToIndex = vi.fn();
+
+      renderHook(() =>
+        useScrollToUserMessage({
+          dataSourceLength: 5,
+          isLastMessageFromUser: true,
+          scrollToIndex,
+        }),
+      );
+
+      // Should not scroll on initial render even if last message is from user
+      expect(scrollToIndex).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/features/Conversation/ChatList/hooks/useScrollToUserMessage.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+
+interface UseScrollToUserMessageOptions {
+  /**
+   * Current data source length (number of messages)
+   */
+  dataSourceLength: number;
+  /**
+   * Whether the last message is from the user
+   */
+  isLastMessageFromUser: boolean;
+  /**
+   * Function to scroll to a specific index
+   */
+  scrollToIndex:
+    | ((index: number, options?: { align?: 'start' | 'center' | 'end'; smooth?: boolean }) => void)
+    | null;
+}
+
+/**
+ * Hook to handle scrolling to user message when user sends a new message.
+ * Only triggers scroll when the new message is from the user, not when AI/agent responds.
+ *
+ * This ensures that in group chat scenarios, when multiple agents are responding,
+ * the view doesn't jump around as each agent starts speaking.
+ */
+export function useScrollToUserMessage({
+  dataSourceLength,
+  isLastMessageFromUser,
+  scrollToIndex,
+}: UseScrollToUserMessageOptions): void {
+  const prevLengthRef = useRef(dataSourceLength);
+
+  useEffect(() => {
+    const hasNewMessage = dataSourceLength > prevLengthRef.current;
+    prevLengthRef.current = dataSourceLength;
+
+    // Only scroll when user sends a new message
+    if (hasNewMessage && isLastMessageFromUser && scrollToIndex) {
+      // Scroll to the second-to-last message (user's message) with the start aligned
+      scrollToIndex(dataSourceLength - 2, { align: 'start', smooth: true });
+    }
+  }, [dataSourceLength, isLastMessageFromUser, scrollToIndex]);
+}

package/src/hooks/useAutoScroll.test.ts

@@ -0,0 +1,289 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useAutoScroll } from './useAutoScroll';
+
+describe('useAutoScroll', () => {
+  let rafCallbacks: FrameRequestCallback[] = [];
+
+  beforeEach(() => {
+    rafCallbacks = [];
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      rafCallbacks.push(cb);
+      return rafCallbacks.length;
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  const flushRAF = () => {
+    const callbacks = [...rafCallbacks];
+    rafCallbacks = [];
+    callbacks.forEach((cb) => cb(performance.now()));
+  };
+
+  const createMockContainer = (scrollTop = 0, scrollHeight = 1000, clientHeight = 400) => {
+    return {
+      clientHeight,
+      scrollHeight,
+      scrollTop,
+    } as HTMLDivElement;
+  };
+
+  describe('when enabled changes from true to false (streaming ends)', () => {
+    it('should maintain scroll position when streaming ends', () => {
+      const { result, rerender } = renderHook(
+        ({ content, enabled }) => useAutoScroll<HTMLDivElement>({ deps: [content], enabled }),
+        { initialProps: { content: 'initial', enabled: true } },
+      );
+
+      // Simulate container scrolled to bottom (scrollTop = scrollHeight - clientHeight = 600)
+      const mockContainer = createMockContainer(600, 1000, 400);
+      (result.current.ref as { current: HTMLDivElement | null }).current = mockContainer;
+
+      // Trigger auto-scroll with content change while streaming
+      rerender({ content: 'updated content', enabled: true });
+
+      act(() => {
+        flushRAF();
+        flushRAF();
+      });
+
+      // Should scroll to bottom (scrollTop = scrollHeight = 1000)
+      expect(mockContainer.scrollTop).toBe(mockContainer.scrollHeight);
+
+      // Record scroll position before disabling
+      const scrollPositionBeforeDisable = mockContainer.scrollTop;
+
+      // Now simulate streaming end: enabled becomes false
+      // This is where the bug occurs - the hook stops maintaining scroll position
+      rerender({ content: 'final content', enabled: false });
+
+      act(() => {
+        flushRAF();
+        flushRAF();
+      });
+
+      // BUG TEST: After enabled becomes false, scroll position should be maintained
+      // Currently, the hook doesn't actively preserve position when disabled,
+      // which can cause scroll to reset when DOM changes occur
+      expect(mockContainer.scrollTop).toBe(scrollPositionBeforeDisable);
+    });
+
+    it('should actively restore scroll position when DOM resets it after enabled becomes false', () => {
+      const { result, rerender } = renderHook(
+        ({ content, enabled }) => useAutoScroll<HTMLDivElement>({ deps: [content], enabled }),
+        { initialProps: { content: 'initial', enabled: true } },
+      );
+
+      const mockContainer = createMockContainer(600, 1000, 400);
+      (result.current.ref as { current: HTMLDivElement | null }).current = mockContainer;
+
+      // Auto-scroll to bottom while streaming
+      rerender({ content: 'streaming content...', enabled: true });
+
+      act(() => {
+        flushRAF();
+        flushRAF();
+      });
+
+      expect(mockContainer.scrollTop).toBe(1000);
+
+      // Record the scroll position at bottom
+      const scrollPositionAtBottom = mockContainer.scrollTop;
+
+      // Streaming ends - enabled becomes false
+      rerender({ content: 'final content', enabled: false });
+
+      // Simulate DOM change that resets scroll position to top
+      // This happens in real browsers when content re-renders
+      mockContainer.scrollTop = 0;
+
+      act(() => {
+        flushRAF();
+        flushRAF();
+      });
+
+      // BUG: The hook should restore scroll position when enabled transitions from true to false
+      // Currently it does nothing when enabled=false, so scroll position stays at 0
+      // Expected behavior: hook should detect enabled transition and restore position
+      expect(mockContainer.scrollTop).toBe(scrollPositionAtBottom);
+    });
+
+    it('should preserve scroll position when user has scrolled and streaming ends', () => {
+      const { result, rerender } = renderHook(
+        ({ content, enabled }) => useAutoScroll<HTMLDivElement>({ deps: [content], enabled }),
+        { initialProps: { content: 'initial', enabled: true } },
+      );
+
+      // Container at middle position (user scrolled up)
+      const mockContainer = createMockContainer(300, 1000, 400);
+      (result.current.ref as { current: HTMLDivElement | null }).current = mockContainer;
+
+      // Simulate user scroll (triggers userHasScrolled = true)
+      act(() => {
+        result.current.handleScroll();
+      });
+
+      expect(result.current.userHasScrolled).toBe(true);
+
+      const scrollPositionBeforeDisable = mockContainer.scrollTop;
+
+      // Streaming ends
+      rerender({ content: 'final content', enabled: false });
+
+      act(() => {
+        flushRAF();
+        flushRAF();
+      });
+
+      // Position should remain unchanged
+      expect(mockContainer.scrollTop).toBe(scrollPositionBeforeDisable);
+    });
+  });
+
+  describe('basic auto-scroll functionality', () => {
+    it('should auto-scroll to bottom when deps change and enabled is true', () => {
+      const { result, rerender } = renderHook(
+        ({ content }) => useAutoScroll<HTMLDivElement>({ deps: [content], enabled: true }),
+        { initialProps: { content: 'initial' } },
+      );
+
+      const mockContainer = createMockContainer(0, 1000, 400);
+      (result.current.ref as { current: HTMLDivElement | null }).current = mockContainer;
+
+      rerender({ content: 'new content' });
+
+      act(() => {
+        flushRAF();
+        flushRAF();
+      });
+
+      expect(mockContainer.scrollTop).toBe(mockContainer.scrollHeight);
+    });
+
+    it('should not auto-scroll when enabled is false', () => {
+      const { result, rerender } = renderHook(
+        ({ content }) => useAutoScroll<HTMLDivElement>({ deps: [content], enabled: false }),
+        { initialProps: { content: 'initial' } },
+      );
+
+      const mockContainer = createMockContainer(100, 1000, 400);
+      (result.current.ref as { current: HTMLDivElement | null }).current = mockContainer;
+      const initialScrollTop = mockContainer.scrollTop;
+
+      rerender({ content: 'new content' });
+
+      act(() => {
+        flushRAF();
+        flushRAF();
+      });
+
+      expect(mockContainer.scrollTop).toBe(initialScrollTop);
+    });
+
+    it('should stop auto-scroll when user scrolls away from bottom', () => {
+      const { result, rerender } = renderHook(
+        ({ content }) =>
+          useAutoScroll<HTMLDivElement>({ deps: [content], enabled: true, threshold: 20 }),
+        { initialProps: { content: 'initial' } },
+      );
+
+      // Container NOT at bottom (distance to bottom > threshold)
+      const mockContainer = createMockContainer(100, 1000, 400);
+      (result.current.ref as { current: HTMLDivElement | null }).current = mockContainer;
+
+      // Simulate user scroll event
+      act(() => {
+        result.current.handleScroll();
+      });
+
+      expect(result.current.userHasScrolled).toBe(true);
+
+      // Content changes but should not auto-scroll due to user scroll lock
+      const scrollTopBeforeUpdate = mockContainer.scrollTop;
+      rerender({ content: 'new content' });
+
+      act(() => {
+        flushRAF();
+        flushRAF();
+      });
+
+      expect(mockContainer.scrollTop).toBe(scrollTopBeforeUpdate);
+    });
+
+    it('should reset scroll lock when resetScrollLock is called', () => {
+      const { result, rerender } = renderHook(
+        ({ content }) => useAutoScroll<HTMLDivElement>({ deps: [content], enabled: true }),
+        { initialProps: { content: 'initial' } },
+      );
+
+      const mockContainer = createMockContainer(100, 1000, 400);
+      (result.current.ref as { current: HTMLDivElement | null }).current = mockContainer;
+
+      // User scrolls away
+      act(() => {
+        result.current.handleScroll();
+      });
+
+      expect(result.current.userHasScrolled).toBe(true);
+
+      // Reset scroll lock
+      act(() => {
+        result.current.resetScrollLock();
+      });
+
+      expect(result.current.userHasScrolled).toBe(false);
+
+      // Now auto-scroll should work again
+      rerender({ content: 'new content' });
+
+      act(() => {
+        flushRAF();
+        flushRAF();
+      });
+
+      expect(mockContainer.scrollTop).toBe(mockContainer.scrollHeight);
+    });
+  });
+
+  describe('threshold behavior', () => {
+    it('should not set userHasScrolled when at bottom within threshold', () => {
+      const { result } = renderHook(() =>
+        useAutoScroll<HTMLDivElement>({ deps: [], enabled: true, threshold: 20 }),
+      );
+
+      // Container at bottom (distance = scrollHeight - scrollTop - clientHeight = 1000 - 590 - 400 = 10 < 20)
+      const mockContainer = createMockContainer(590, 1000, 400);
+      (result.current.ref as { current: HTMLDivElement | null }).current = mockContainer;
+
+      act(() => {
+        result.current.handleScroll();
+      });
+
+      // Should NOT set userHasScrolled because we're within threshold
+      expect(result.current.userHasScrolled).toBe(false);
+    });
+
+    it('should set userHasScrolled when scrolled beyond threshold', () => {
+      const { result } = renderHook(() =>
+        useAutoScroll<HTMLDivElement>({ deps: [], enabled: true, threshold: 20 }),
+      );
+
+      // Container NOT at bottom (distance = 1000 - 500 - 400 = 100 > 20)
+      const mockContainer = createMockContainer(500, 1000, 400);
+      (result.current.ref as { current: HTMLDivElement | null }).current = mockContainer;
+
+      act(() => {
+        result.current.handleScroll();
+      });
+
+      expect(result.current.userHasScrolled).toBe(true);
+    });
+  });
+});

package/src/hooks/useAutoScroll.ts

@@ -67,6 +67,7 @@ export function useAutoScroll<T extends HTMLElement = HTMLDivElement>(
   const ref = useRef<T | null>(null);
   const [userHasScrolled, setUserHasScrolled] = useState(false);
   const isAutoScrollingRef = useRef(false);
+  const prevEnabledRef = useRef(enabled);
 
   // Handle user scroll detection
   const handleScroll = useCallback(() => {
@@ -91,6 +92,28 @@ export function useAutoScroll<T extends HTMLElement = HTMLDivElement>(
     setUserHasScrolled(false);
   }, []);
 
+  // Preserve scroll position when enabled transitions from true to false (streaming ends)
+  // This prevents scroll position from being lost when DOM re-renders after streaming
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) return;
+
+    // Detect enabled transition from true to false
+    if (prevEnabledRef.current && !enabled) {
+      const currentScrollTop = container.scrollTop;
+      isAutoScrollingRef.current = true;
+      requestAnimationFrame(() => {
+        // Restore scroll position in case DOM changes reset it
+        container.scrollTop = currentScrollTop;
+        requestAnimationFrame(() => {
+          isAutoScrollingRef.current = false;
+        });
+      });
+    }
+
+    prevEnabledRef.current = enabled;
+  }, [enabled]);
+
   // Auto scroll to bottom when deps change (unless user has scrolled or disabled)
   useEffect(() => {
     if (!enabled || userHasScrolled) return;