feat(web): improve chat auto-scroll to latest message; dynamic thresholds; initial scroll to bottom

Hedlen · Hedlen · commit 8b7302530016 · 2025-11-12T21:13:36.000+08:00
diff --git a/src/api/app.py b/src/api/app.py
@@ -149,16 +149,23 @@ async def event_generator():
                     "data": json.dumps({"task_id": task_id}, ensure_ascii=False),
                 }
                 
-                async for event in run_agent_workflow(
-                    messages,
-                    request.debug,
-                    request.deep_thinking_mode,
-                    request.search_before_planning,
-                    request.team_members,
-                    abort_event=abort_event,
-                    user_id=user_id,
-                    request_headers=dict(req.headers),
-                ):
+                use_simple = not request.deep_thinking_mode and not request.search_before_planning
+                from src.service.workflow_service import run_simple_chat
+                generator = (
+                    run_simple_chat(messages, user_id=user_id)
+                    if use_simple
+                    else run_agent_workflow(
+                        messages,
+                        request.debug,
+                        request.deep_thinking_mode,
+                        request.search_before_planning,
+                        request.team_members,
+                        abort_event=abort_event,
+                        user_id=user_id,
+                        request_headers=dict(req.headers),
+                    )
+                )
+                async for event in generator:
                     # Check if client is still connected or abort requested
                     if await req.is_disconnected():
                         logger.info("Client disconnected, stopping workflow")
diff --git a/src/service/workflow_service.py b/src/service/workflow_service.py
@@ -6,6 +6,7 @@
 from src.graph import build_graph
 from src.tools.browser import browser_tool
 from src.tools.smart_browser import smart_browser_tool
+from src.llms.llm import get_llm_by_type
 from langchain_community.adapters.openai import convert_message_to_dict
 import uuid
 
@@ -89,6 +90,8 @@ async def run_agent_workflow(
     workflow_id = str(uuid.uuid4())
 
     team_members = team_members if team_members else TEAM_MEMBERS
+    if not search_before_planning:
+        team_members = [m for m in team_members if m != "researcher"]
 
     streaming_llm_agents = [*team_members, "planner", "coordinator"]
 
@@ -348,3 +351,37 @@ def safe_convert_message(msg):
             ],
         },
     }
+
+
+async def run_simple_chat(
+    user_input_messages: list,
+    user_id: Optional[int] = None,
+):
+    if not user_input_messages:
+        raise ValueError("Input could not be empty")
+    import uuid
+    workflow_id = str(uuid.uuid4())
+    agent_id = f"{workflow_id}_assistant_0"
+    llm = get_llm_by_type("basic", str(user_id) if user_id else None)
+    yield {
+        "event": "start_of_agent",
+        "data": {"agent_name": "assistant", "agent_id": agent_id},
+    }
+    last = user_input_messages[-1]
+    content = last.get("content") if isinstance(last, dict) else str(last)
+    full = ""
+    try:
+        for chunk in llm.stream(content):
+            piece = getattr(chunk, "content", "") or getattr(chunk, "additional_kwargs", {}).get("reasoning_content", "")
+            if not piece:
+                continue
+            full += piece
+            yield {
+                "event": "message",
+                "data": {"message_id": agent_id, "delta": {"content": piece}},
+            }
+    finally:
+        yield {
+            "event": "end_of_agent",
+            "data": {"agent_name": "assistant", "agent_id": agent_id},
+        }
diff --git a/web/src/app/_components/InputBox.tsx b/web/src/app/_components/InputBox.tsx
@@ -96,37 +96,37 @@ export function InputBox({
 
           <button
             className={cn(
-              "flex h-6 sm:h-8 lg:h-9 xl:h-10 items-center gap-1 sm:gap-2 rounded-xl sm:rounded-2xl border px-2 sm:px-4 lg:px-5 xl:px-6 text-xs sm:text-sm lg:text-base transition-all duration-300 hover:shadow-lg",
+              "h-7 w-7 sm:h-8 sm:w-8 flex items-center justify-center rounded-md border transition-all duration-200",
               deepThinkingMode
-                ? "border-blue-400 bg-blue-100 text-blue-700 shadow-lg shadow-blue-500/20"
+                ? "border-blue-400 bg-blue-50 text-blue-700 shadow-blue-500/20"
                 : "border-gray-300 bg-white text-gray-600 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700",
             )}
             onClick={() => {
               toggleDeepThinking();
             }}
             disabled={configLoading}
+            title="深度思考"
+            aria-label="深度思考"
           >
             <Atom className={cn("h-4 w-4", deepThinkingMode ? "text-blue-600" : "text-gray-600")} />
-            <span>Deep Think</span>
-            {/* {syncing && <span className="text-xs text-blue-500 ml-1">(同步中...)</span>} */}
           </button>
           <button
             className={cn(
-              "flex h-6 sm:h-8 lg:h-9 xl:h-10 items-center gap-1 rounded-lg border px-2 sm:px-3 lg:px-4 xl:px-5 text-xs sm:text-sm lg:text-base transition-all duration-200",
+              "h-7 w-7 sm:h-8 sm:w-8 flex items-center justify-center rounded-md border transition-all duration-200",
               searchBeforePlanning
-                ? "border-blue-400 bg-blue-100 text-blue-700 shadow-lg shadow-blue-500/20"
-                : "border-gray-300 bg-white text-gray-700 hover:bg-blue-100 hover:border-blue-400",
+                ? "border-blue-400 bg-blue-50 text-blue-700 shadow-blue-500/20"
+                : "border-gray-300 bg-white text-gray-700 hover:bg-blue-50 hover:border-blue-400",
             )}
             onClick={() => {
                 toggleSearchPlanning();
               }}
               disabled={configLoading}
+              title="优先搜索"
+              aria-label="优先搜索"
           >
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
             </svg>
-            <span>Search First</span>
-            {/* {syncing && <span className="text-xs text-blue-500 ml-1">(同步中...)</span>} */}
           </button>
         </div>
         <div className="flex flex-shrink-0 items-center gap-1 sm:gap-2 lg:gap-3">
diff --git a/web/src/app/_components/MessageHistoryView.tsx b/web/src/app/_components/MessageHistoryView.tsx
@@ -62,11 +62,36 @@ export function MessageHistoryView({ messages, responding, abortController, clas
   const SCROLL_MEMORY_KEY = 'chat_scrollTop';
   const lastScrollHeightRef = useRef(0);
   const lastScrollSetTsRef = useRef(0);
+  const lastMessageIdRef = useRef<string | null>(null);
+  const getDynamicThreshold = useCallback((el: HTMLDivElement | null, base: number) => {
+    const h = el?.clientHeight ?? 0;
+    const d = Math.floor(h * 0.15);
+    const t = Math.max(50, d);
+    return Math.max(50, Math.min(base, t));
+  }, []);
   const hasAssistantContent = useMemo(() => {
     return messages.some(
       (m) => m.role === "assistant" && m.type === "text" && typeof m.content === "string" && m.content.trim().length > 0,
     );
   }, [messages]);
+
+  // 当开始生成助手回复时，主动滚动到底部，避免需要手动拖动
+  useEffect(() => {
+    if (!responding) return;
+    setIsLockedByUser(false);
+    const container = scrollElRef.current ?? containerRef.current;
+    if (container) {
+      requestAnimationFrame(() => {
+        container.scrollTop = container.scrollHeight;
+        lastScrollHeightRef.current = container.scrollHeight;
+        lastScrollSetTsRef.current = (typeof performance !== 'undefined' ? performance.now() : Date.now());
+      });
+    } else if (endRef.current) {
+      requestAnimationFrame(() => {
+        endRef.current?.scrollIntoView({ behavior: 'smooth' });
+      });
+    }
+  }, [responding]);
   const showInlineSpinner = responding && !hasAssistantContent;
 
   // 防抖处理滚动事件
@@ -115,8 +140,9 @@ export function MessageHistoryView({ messages, responding, abortController, clas
       
       const { scrollTop, scrollHeight, clientHeight } = container;
       const distanceToBottom = scrollHeight - scrollTop - clientHeight;
-      const isAtBottom = distanceToBottom < 50;
-      setIsNearBottom(distanceToBottom < 100);
+      const t = getDynamicThreshold(container, 100);
+      const isAtBottom = distanceToBottom < Math.floor(t * 0.5);
+      setIsNearBottom(distanceToBottom < t);
       
       if (!isAtBottom) {
         setIsUserScrolling(true);
@@ -156,8 +182,9 @@ export function MessageHistoryView({ messages, responding, abortController, clas
         container.scrollTop += e.deltaY;
         const { scrollTop, scrollHeight, clientHeight } = container;
         const distanceToBottom = scrollHeight - scrollTop - clientHeight;
-        setIsNearBottom(distanceToBottom < 100);
-        if (distanceToBottom >= 100) {
+        const t = getDynamicThreshold(container, 100);
+        setIsNearBottom(distanceToBottom < t);
+        if (distanceToBottom >= t) {
           setIsLockedByUser(true);
         }
       };
@@ -236,30 +263,34 @@ export function MessageHistoryView({ messages, responding, abortController, clas
             setIsLockedByUser(true);
           });
         }
+      } else {
+        requestAnimationFrame(() => {
+          container.scrollTop = container.scrollHeight;
+          setIsLockedByUser(false);
+          lastScrollHeightRef.current = container.scrollHeight;
+          lastScrollSetTsRef.current = (typeof performance !== 'undefined' ? performance.now() : Date.now());
+        });
       }
     } catch {}
   }, []);
 
   // 优化的自动滚动逻辑
   useEffect(() => {
-    if (!isUserScrolling && isWindowVisible && !isResizing) {
+    if (!isUserScrolling && isWindowVisible && !isResizing && !isLockedByUser) {
       const scrollToBottom = () => {
         if (rafScrollPendingRef.current) return;
         rafScrollPendingRef.current = true;
         requestAnimationFrame(() => {
           const container = scrollElRef.current ?? containerRef.current;
           if (container) {
             const { scrollTop, scrollHeight, clientHeight } = container;
-            const nearBottom = scrollHeight - scrollTop - clientHeight < 100;
-            if (nearBottom && !isLockedByUser) {
-              const now = (typeof performance !== 'undefined' ? performance.now() : Date.now());
-              const changed = scrollHeight > (lastScrollHeightRef.current + 8);
-              const enoughTime = now - lastScrollSetTsRef.current > 50;
-              if (changed && enoughTime) {
-                container.scrollTop = scrollHeight;
-                lastScrollHeightRef.current = scrollHeight;
-                lastScrollSetTsRef.current = now;
-              }
+            const now = (typeof performance !== 'undefined' ? performance.now() : Date.now());
+            const changed = scrollHeight > (lastScrollHeightRef.current + 4);
+            const enoughTime = now - lastScrollSetTsRef.current > 32;
+            if (changed && enoughTime) {
+              container.scrollTop = scrollHeight;
+              lastScrollHeightRef.current = scrollHeight;
+              lastScrollSetTsRef.current = now;
             }
           }
           rafScrollPendingRef.current = false;
@@ -273,6 +304,44 @@ export function MessageHistoryView({ messages, responding, abortController, clas
     }
   }, [messages, responding, isUserScrolling, isWindowVisible, isResizing, isLockedByUser]);
 
+  // 当用户发送新消息时，强制滚动到底部以显示最新内容
+  useEffect(() => {
+    const last = messages[messages.length - 1];
+    if (!last) return;
+    const lastId = String(last.id ?? "");
+    const isNewLast = lastMessageIdRef.current !== lastId;
+    lastMessageIdRef.current = lastId;
+    if (isNewLast && last.role === "user") {
+      setIsLockedByUser(false);
+      const container = scrollElRef.current ?? containerRef.current;
+      if (container) {
+        requestAnimationFrame(() => {
+          container.scrollTop = container.scrollHeight;
+          lastScrollHeightRef.current = container.scrollHeight;
+          lastScrollSetTsRef.current = (typeof performance !== 'undefined' ? performance.now() : Date.now());
+        });
+      } else if (endRef.current) {
+        requestAnimationFrame(() => {
+          endRef.current?.scrollIntoView({ behavior: 'smooth' });
+        });
+      }
+    }
+    if (isNewLast && last.role === "assistant" && !isLockedByUser) {
+      const container = scrollElRef.current ?? containerRef.current;
+      if (container) {
+        requestAnimationFrame(() => {
+          container.scrollTop = container.scrollHeight;
+          lastScrollHeightRef.current = container.scrollHeight;
+          lastScrollSetTsRef.current = (typeof performance !== 'undefined' ? performance.now() : Date.now());
+        });
+      } else if (endRef.current) {
+        requestAnimationFrame(() => {
+          endRef.current?.scrollIntoView({ behavior: 'smooth' });
+        });
+      }
+    }
+  }, [messages]);
+
   return (
     <div 
       ref={containerRef}
diff --git a/web/src/app/_components/WorkflowProgressView.tsx b/web/src/app/_components/WorkflowProgressView.tsx
@@ -22,6 +22,14 @@ function unwrapMarkdownFence(text: string): string {
   return text;
 }
 
+function stripReportHeadingAndSummary(text: string): string {
+  if (!text) return "";
+  let t = text.trim();
+  t = t.replace(/^#\s+[^\n]+\s*\n?/, "");
+  t = t.replace(/(^|\n)#{1,6}\s*执行摘要\s*\n[\s\S]*?(?=(\n#{1,6}\s)|$)/, "\n");
+  return t.trim();
+}
+
 export function WorkflowProgressView({
   className,
   workflow,
@@ -30,7 +38,12 @@ export function WorkflowProgressView({
   workflow: Workflow;
 }) {
   const steps = useMemo(() => {
-    return workflow.steps.filter((step) => step.agentName !== "reporter");
+    const { searchBeforePlanning } = getInputConfigSync();
+    return workflow.steps.filter((step) => {
+      if (step.agentName === "reporter") return false;
+      if (step.agentName === "researcher" && !searchBeforePlanning) return false;
+      return true;
+    });
   }, [workflow]);
   const reportStep = useMemo(() => {
     return workflow.steps.find((step) => step.agentName === "reporter");
@@ -46,6 +59,7 @@ export function WorkflowProgressView({
 
   // 移除最外层 markdown 代码围栏，避免整个内容被当作代码块显示
   const sanitizedReportContent = useMemo(() => unwrapMarkdownFence(reportContent), [reportContent]);
+  const cleanedReportContent = useMemo(() => stripReportHeadingAndSummary(sanitizedReportContent), [sanitizedReportContent]);
 
   // 调试日志，确认内容是否为 markdown 以及基本统计
   useEffect(() => {
@@ -82,11 +96,11 @@ export function WorkflowProgressView({
         <div className="agent-reply-card">
           <div className="agent-reply-content">
             <Markdown className="agent-prose break-words text-sm">
-              {sanitizedReportContent}
+              {cleanedReportContent}
             </Markdown>
           </div>
           <div className="agent-reply-toolbar justify-start">
-            <ReportActions reportContent={sanitizedReportContent} />
+            <ReportActions reportContent={cleanedReportContent} />
           </div>
         </div>
       )}
diff --git a/web/src/app/chat/page.tsx b/web/src/app/chat/page.tsx
@@ -18,8 +18,10 @@ import { ResultSidePanel } from "../_components/ResultSidePanel";
 import { SessionHistoryModal } from "../_components/SessionHistoryModal";
 import { SlidingLayout } from "../_components/SlidingLayout";
 import { sidePanelEventManager } from "../_components/ToolCallView";
+import { useInputConfigValue } from "~/core/hooks/useInputConfig";
 
 export default function HomePage() {
+  const inputConfig = useInputConfigValue();
   const abortControllerRef = useRef<AbortController | null>(null);
   const messages = useStore((state) => state.messages);
   const responding = useStore((state) => state.responding);
@@ -278,23 +280,24 @@ export default function HomePage() {
                         </p>
                       </div>
                     
-                      {/* Quick Start Examples */}
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
-                        <div className="p-4 bg-white rounded-xl border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all duration-300 cursor-pointer">
-                          <div className="text-sm font-medium text-gray-800 mb-1">💡 Get Ideas</div>
-                          <div className="text-xs text-gray-600">Brainstorm creative solutions</div>
-                        </div>
-                        <div className="p-4 bg-white rounded-xl border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all duration-300 cursor-pointer">
-                          <div className="text-sm font-medium text-gray-800 mb-1">📝 Write Content</div>
-                          <div className="text-xs text-gray-600">Create articles, emails, and more</div>
-                        </div>
-                        <div className="p-4 bg-white rounded-xl border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all duration-300 cursor-pointer">
-                          <div className="text-sm font-medium text-gray-800 mb-1">🔍 Research</div>
-                          <div className="text-xs text-gray-600">Find information and insights</div>
-                        </div>
-                        <div className="p-4 bg-white rounded-xl border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all duration-300 cursor-pointer">
-                          <div className="text-sm font-medium text-gray-800 mb-1">💻 Code Help</div>
-                          <div className="text-xs text-gray-600">Debug and write code</div>
+                      {/* Common Questions */}
+                      <div className="mt-6">
+                        <div className="text-sm font-medium text-gray-700 mb-2">常用问题</div>
+                        <div className="flex flex-col gap-2">
+                          {[
+                            "帮我总结这段文本",
+                            "生成一个三天的上海旅行计划",
+                            "搜索并整理近期关于AI的行业新闻",
+                            "帮我优化这段React代码性能",
+                          ].map((q) => (
+                            <button
+                              key={q}
+                              className="text-left px-3 py-1.5 rounded-md border border-gray-200 bg-white text-gray-700 hover:bg-blue-50 hover:border-blue-300 transition-colors"
+                              onClick={() => handleSendMessage(q, inputConfig)}
+                            >
+                              {q}
+                            </button>
+                          ))}
                         </div>
                       </div>
                     </div>
