From 7e4544886067150c4ee5f1f0e049e0314fa2cade Mon Sep 17 00:00:00 2001
From: 7418 <7418@openclaw.ai>
Date: Sun, 1 Mar 2026 22:49:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=BB=9A=E5=8A=A8=E6=9D=A1=E4=B8=8D?=
 =?UTF-8?q?=E5=9C=A8=E5=BA=95=E9=83=A8=E6=97=B6=E5=8F=91=E9=80=81=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E7=9C=8B=E4=B8=8D=E5=88=B0=20AI=20=E8=BE=93=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

use-stick-to-bottom 库仅在 isAtBottom=true 时跟随新内容自动滚动。
用户滚动上去后发送消息，流式内容渲染在视口下方不可见。

新增 ScrollOnStream 组件，监听 isStreaming 从 false→true 的变化，
强制调用 scrollToBottom()，确保流式输出开始时自动跳到底部。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/chat/MessageList.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/chat/MessageList.tsx b/src/components/chat/MessageList.tsx
index 7dc444a..3aa2717 100644
--- a/src/components/chat/MessageList.tsx
+++ b/src/components/chat/MessageList.tsx
@@ -2,6 +2,7 @@
 
 import { useRef, useEffect } from 'react';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useStickToBottomContext } from 'use-stick-to-bottom';
 import type { Message, PermissionRequestEvent } from '@/types';
 import {
   Conversation,
@@ -13,6 +14,24 @@ import { MessageItem } from './MessageItem';
 import { StreamingMessage } from './StreamingMessage';
 import { CodePilotLogo } from './CodePilotLogo';
 
+/**
+ * Scrolls to bottom when streaming starts.
+ * Must be rendered inside <Conversation> (StickToBottom provider).
+ */
+function ScrollOnStream({ isStreaming }: { isStreaming: boolean }) {
+  const { scrollToBottom } = useStickToBottomContext();
+  const wasStreaming = useRef(false);
+
+  useEffect(() => {
+    if (isStreaming && !wasStreaming.current) {
+      scrollToBottom();
+    }
+    wasStreaming.current = isStreaming;
+  }, [isStreaming, scrollToBottom]);
+
+  return null;
+}
+
 interface ToolUseInfo {
   id: string;
   name: string;
@@ -97,6 +116,7 @@ export function MessageList({
 
   return (
     <Conversation>
+      <ScrollOnStream isStreaming={isStreaming} />
       <ConversationContent className="mx-auto max-w-3xl px-4 py-6 gap-6">
         {hasMore && (
           <div className="flex justify-center">