@lobehub/lobehub 2.0.0-next.343 → 2.0.0-next.345

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

@@ -0,0 +1,166 @@
+'use client';
+
+import { memo } from 'react';
+import { createPortal } from 'react-dom';
+
+import { messageStateSelectors, useConversationStore, virtuaListSelectors } from '../../../store';
+
+/**
+ * 判断是否在底部的阈值（单位：px）
+ * 当距离底部小于等于此值时，认为在底部
+ */
+export const AT_BOTTOM_THRESHOLD = 300;
+
+/**
+ * 是否开启调试面板
+ * 设为 true 可以显示滚动位置调试信息
+ */
+export const OPEN_DEV_INSPECTOR = false;
+
+const DebugInspector = memo(() => {
+  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
+  const isScrolling = useConversationStore(virtuaListSelectors.isScrolling);
+  const isGenerating = useConversationStore(messageStateSelectors.isAIGenerating);
+  const virtuaScrollMethods = useConversationStore((s) => s.virtuaScrollMethods);
+
+  const shouldAutoScroll = atBottom && isGenerating && !isScrolling;
+  const scrollOffset = virtuaScrollMethods?.getScrollOffset?.() ?? 0;
+  const scrollSize = virtuaScrollMethods?.getScrollSize?.() ?? 0;
+  const viewportSize = virtuaScrollMethods?.getViewportSize?.() ?? 0;
+  const distanceToBottom = scrollSize - scrollOffset - viewportSize;
+  // 可视化计算
+  const visualHeight = 120;
+  const scale = scrollSize > 0 ? visualHeight / scrollSize : 0;
+  const viewportVisualHeight = Math.max(viewportSize * scale, 10);
+  const scrollVisualOffset = scrollOffset * scale;
+  const thresholdVisualHeight = Math.min(AT_BOTTOM_THRESHOLD * scale, visualHeight * 0.3);
+
+  const panel = (
+    <div
+      style={{
+        background: 'rgba(0,0,0,0.9)',
+        borderRadius: 8,
+        bottom: 80,
+        display: 'flex',
+        fontFamily: 'monospace',
+        fontSize: 11,
+        gap: 16,
+        left: 12,
+        padding: '10px 14px',
+        position: 'fixed',
+        zIndex: 9999,
+      }}
+    >
+      {/* 滚动条可视化 */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>Scroll Position</div>
+        <div
+          style={{
+            background: '#374151',
+            borderRadius: 3,
+            height: visualHeight,
+            position: 'relative',
+            width: 24,
+          }}
+        >
+          {/* threshold 区域 (底部 200px) */}
+          <div
+            style={{
+              background: atBottom ? 'rgba(34, 197, 94, 0.3)' : 'rgba(239, 68, 68, 0.3)',
+              borderRadius: '0 0 3px 3px',
+              bottom: 0,
+              height: thresholdVisualHeight,
+              left: 0,
+              position: 'absolute',
+              right: 0,
+            }}
+          />
+          {/* 当前视口位置 */}
+          <div
+            style={{
+              background: atBottom ? '#22c55e' : '#3b82f6',
+              borderRadius: 2,
+              height: viewportVisualHeight,
+              left: 2,
+              position: 'absolute',
+              right: 2,
+              top: scrollVisualOffset,
+              transition: 'top 0.1s',
+            }}
+          />
+          {/* threshold 线 */}
+          <div
+            style={{
+              background: '#f59e0b',
+              bottom: thresholdVisualHeight,
+              height: 1,
+              left: 0,
+              position: 'absolute',
+              right: 0,
+            }}
+          />
+        </div>
+        <div style={{ color: '#f59e0b', fontSize: 9, textAlign: 'center' }}>
+          {AT_BOTTOM_THRESHOLD}px
+        </div>
+      </div>
+
+      {/* 数值信息 */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>
+          scrollSize: <span style={{ color: 'white' }}>{Math.round(scrollSize)}px</span>
+        </div>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>
+          viewport: <span style={{ color: 'white' }}>{Math.round(viewportSize)}px</span>
+        </div>
+        <div style={{ color: '#9ca3af', fontSize: 10 }}>
+          offset: <span style={{ color: 'white' }}>{Math.round(scrollOffset)}px</span>
+        </div>
+        <div
+          style={{
+            color: atBottom ? '#22c55e' : '#ef4444',
+            fontSize: 10,
+            fontWeight: 'bold',
+          }}
+        >
+          toBottom: {Math.round(distanceToBottom)}px
+          {distanceToBottom <= AT_BOTTOM_THRESHOLD ? ' ≤' : ' >'} {AT_BOTTOM_THRESHOLD}
+        </div>
+
+        <div style={{ borderTop: '1px solid #374151', marginTop: 4, paddingTop: 4 }}>
+          <div style={{ color: atBottom ? '#22c55e' : '#ef4444', fontSize: 10 }}>
+            atBottom: {atBottom ? 'YES' : 'NO'}
+          </div>
+          <div style={{ color: isGenerating ? '#3b82f6' : '#6b7280', fontSize: 10 }}>
+            generating: {isGenerating ? 'YES' : 'NO'}
+          </div>
+          <div style={{ color: isScrolling ? '#f59e0b' : '#6b7280', fontSize: 10 }}>
+            scrolling: {isScrolling ? 'YES' : 'NO'}
+          </div>
+        </div>
+
+        <div
+          style={{
+            background: shouldAutoScroll ? '#22c55e' : '#ef4444',
+            borderRadius: 3,
+            color: 'white',
+            fontSize: 10,
+            marginTop: 4,
+            padding: '2px 6px',
+            textAlign: 'center',
+          }}
+        >
+          autoScroll: {shouldAutoScroll ? 'YES' : 'NO'}
+        </div>
+      </div>
+    </div>
+  );
+
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(panel, document.body);
+});
+
+DebugInspector.displayName = 'DebugInspector';
+
+export default DebugInspector;

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

@@ -0,0 +1,86 @@
+'use client';
+
+import { memo, useEffect } from 'react';
+
+import {
+  dataSelectors,
+  messageStateSelectors,
+  useConversationStore,
+  virtuaListSelectors,
+} from '../../../store';
+import BackBottom from '../BackBottom';
+import { AT_BOTTOM_THRESHOLD, OPEN_DEV_INSPECTOR } from './DebugInspector';
+
+const AutoScroll = memo(() => {
+  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
+  const isScrolling = useConversationStore(virtuaListSelectors.isScrolling);
+  const isGenerating = useConversationStore(messageStateSelectors.isAIGenerating);
+  const scrollToBottom = useConversationStore((s) => s.scrollToBottom);
+  const dbMessages = useConversationStore(dataSelectors.dbMessages);
+
+  const shouldAutoScroll = atBottom && isGenerating && !isScrolling;
+
+  // 获取最后一条消息的 content 长度，用于监听流式输出
+  const lastMessage = dbMessages.at(-1);
+  const lastMessageContentLength =
+    typeof lastMessage?.content === 'string' ? lastMessage.content.length : 0;
+
+  useEffect(() => {
+    if (shouldAutoScroll) {
+      scrollToBottom(false);
+    }
+  }, [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>
+  );
+});
+
+AutoScroll.displayName = 'ConversationAutoScroll';
+
+export default AutoScroll;

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

@@ -7,6 +7,10 @@ import { VList, type VListHandle } from 'virtua';
 import WideScreenContainer from '../../../WideScreenContainer';
 import { useConversationStore, virtuaListSelectors } from '../../store';
 import AutoScroll from './AutoScroll';
+import DebugInspector, {
+  AT_BOTTOM_THRESHOLD,
+  OPEN_DEV_INSPECTOR,
+} from './AutoScroll/DebugInspector';
 
 interface VirtualizedListProps {
   dataSource: string[];
@@ -23,15 +27,11 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
   const prevDataLengthRef = useRef(dataSource.length);
   const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const atBottomThreshold = 200;
-
   // Store actions
   const registerVirtuaScrollMethods = useConversationStore((s) => s.registerVirtuaScrollMethods);
   const setScrollState = useConversationStore((s) => s.setScrollState);
   const resetVisibleItems = useConversationStore((s) => s.resetVisibleItems);
-  const scrollToBottom = useConversationStore((s) => s.scrollToBottom);
   const setActiveIndex = useConversationStore((s) => s.setActiveIndex);
-  const atBottom = useConversationStore(virtuaListSelectors.atBottom);
   const activeIndex = useConversationStore(virtuaListSelectors.activeIndex);
 
   // Check if at bottom based on scroll position
@@ -43,8 +43,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
     const scrollSize = ref.scrollSize;
     const viewportSize = ref.viewportSize;
 
-    return scrollSize - scrollOffset - viewportSize <= atBottomThreshold;
-  }, [atBottomThreshold]);
+    return scrollSize - scrollOffset - viewportSize <= AT_BOTTOM_THRESHOLD;
+  }, [AT_BOTTOM_THRESHOLD]);
 
   // Handle scroll events
   const handleScroll = useCallback(() => {
@@ -131,6 +131,8 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
 
   return (
     <>
+      {/* Debug Inspector - 放在 VList 外面，不会被虚拟列表回收 */}
+      {OPEN_DEV_INSPECTOR && <DebugInspector />}
       <VList
         bufferSize={typeof window !== 'undefined' ? window.innerHeight : 0}
         data={dataSource}
@@ -142,12 +144,14 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
         {(messageId, index): ReactElement => {
           const isAgentCouncil = messageId.includes('agentCouncil');
           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 />}
               </div>
             );
           }
@@ -155,21 +159,11 @@ const VirtualizedList = memo<VirtualizedListProps>(({ dataSource, itemContent })
           return (
             <WideScreenContainer key={messageId} style={{ position: 'relative' }}>
               {content}
+              {isLast && <AutoScroll />}
             </WideScreenContainer>
           );
         }}
       </VList>
-      <WideScreenContainer
-        onChange={() => {
-          if (!atBottom) return;
-          setTimeout(() => scrollToBottom(true), 100);
-        }}
-        style={{
-          position: 'relative',
-        }}
-      >
-        <AutoScroll />
-      </WideScreenContainer>
     </>
   );
 }, isEqual);

package/src/features/Conversation/Messages/AgentCouncil/components/AutoScrollShadow.tsx

@@ -1,27 +1,38 @@
 import { ScrollShadow } from '@lobehub/ui';
-import { type PropsWithChildren, type RefObject, memo, useEffect, useRef } from 'react';
+import { type PropsWithChildren, type RefObject, memo, useEffect } from 'react';
 
-const AutoScrollShadow = memo<PropsWithChildren>(({ children }) => {
-  const contentRef = useRef<HTMLDivElement | null>(null);
+import { useAutoScroll } from '@/hooks/useAutoScroll';
 
-  useEffect(() => {
-    const container = contentRef.current;
-    if (!container) return;
-    const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-    const isNearBottom = distanceToBottom < 120;
+interface AutoScrollShadowProps extends PropsWithChildren {
+  /**
+   * Content string to track for auto-scrolling
+   */
+  content?: string;
+  /**
+   * Whether the content is currently streaming/generating
+   */
+  streaming?: boolean;
+}
+
+const AutoScrollShadow = memo<AutoScrollShadowProps>(({ children, content, streaming }) => {
+  const { ref, handleScroll, resetScrollLock } = useAutoScroll<HTMLDivElement>({
+    deps: [content],
+    enabled: streaming,
+  });
 
-    if (isNearBottom) {
-      requestAnimationFrame(() => {
-        container.scrollTop = container.scrollHeight;
-      });
+  // Reset scroll lock when content is cleared (new stream starts)
+  useEffect(() => {
+    if (!content) {
+      resetScrollLock();
     }
-  }, []);
+  }, [content, resetScrollLock]);
 
   return (
     <ScrollShadow
       height={'max(33vh, 480px)'}
       hideScrollBar
-      ref={contentRef as unknown as RefObject<HTMLDivElement>}
+      onScroll={handleScroll}
+      ref={ref as RefObject<HTMLDivElement>}
       size={16}
     >
       {children}

package/src/features/Conversation/Messages/AgentCouncil/components/CouncilMember.tsx

@@ -92,7 +92,7 @@ const CouncilMember = memo<CouncilMemberProps>(({ item, index }) => {
       showTitle
       time={createdAt}
     >
-      <AutoScrollShadow>
+      <AutoScrollShadow content={content} streaming={generating}>
         <MessageContent {...item} />
       </AutoScrollShadow>
     </ChatItem>