@hef2024/llmasaservice-ui 0.23.2 → 0.24.1

package/src/ChatPanel.tsx

@@ -315,6 +315,13 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
   const [iframeUrl, setIframeUrl] = useState<string | null>(null);
   const responseAreaRef = useRef(null);
 
+  // Auto-scroll state - tracks if user has manually scrolled during streaming
+  const [userHasScrolled, setUserHasScrolled] = useState(false);
+  const lastScrollTopRef = useRef<number>(0);
+  const prevResponseLengthRef = useRef<number>(0);
+  const userHasScrolledRef = useRef<boolean>(false);
+  const idleRef = useRef<boolean>(true);
+
   // Memoized regex patterns to avoid recreation on every render
   const THINKING_PATTERNS = useMemo(
     () => ({
@@ -2134,34 +2141,91 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     }
   }, [initialPrompt]);
 
+  // Keep refs in sync with state
+  useEffect(() => {
+    userHasScrolledRef.current = userHasScrolled;
+  }, [userHasScrolled]);
+
+  useEffect(() => {
+    idleRef.current = idle;
+  }, [idle]);
+
+  // Auto-scroll to bottom during streaming (when user hasn't scrolled up)
   useEffect(() => {
-    if (scrollToEnd) {
+    // Skip if idle (not streaming)
+    if (idle) return;
+
+    const currentResponseLength = response.length;
+    const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    prevResponseLengthRef.current = currentResponseLength;
+
+    // Only auto-scroll if user hasn't manually scrolled up (or scrollToEnd prop forces it)
+    const shouldAutoScroll = scrollToEnd || !userHasScrolledRef.current;
+    if (shouldAutoScroll && response && responseGotLonger) {
       if (window.top !== window.self) {
         const responseArea = responseAreaRef.current as any;
-        responseArea.scrollTo({
-          top: responseArea.scrollHeight,
-          behavior: "smooth",
-        });
+        if (responseArea) {
+          responseArea.scrollTo({
+            top: responseArea.scrollHeight,
+            behavior: "auto",
+          });
+        }
       } else {
-        // If the ChatPanel is not within an iframe
-        bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+        bottomRef.current?.scrollIntoView({ behavior: "auto", block: "end" });
       }
-    } else {
-      const responseArea = responseAreaRef.current as any;
-      if (responseArea) {
-        setHasScroll(hasVerticalScrollbar(responseArea));
-        const handleScroll = () => {
-          const isScrolledToBottom =
-            responseArea.scrollHeight - responseArea.scrollTop ===
-            responseArea.clientHeight;
-          setIsAtBottom(isScrolledToBottom);
-        };
-        handleScroll();
-        responseArea.addEventListener("scroll", handleScroll);
-        return () => responseArea.removeEventListener("scroll", handleScroll);
+    }
+  }, [response, idle, scrollToEnd]);
+
+  // Detect user scroll intent via wheel event (fires before scroll position changes)
+  useEffect(() => {
+    const responseArea = responseAreaRef.current as any;
+    if (!responseArea) return;
+
+    // Wheel event detects user intent immediately (before scroll position changes)
+    const handleWheel = (e: WheelEvent) => {
+      // Skip if not streaming
+      if (idleRef.current) return;
+
+      // deltaY < 0 means scrolling UP (toward top of document)
+      if (e.deltaY < 0 && !userHasScrolledRef.current) {
+        setUserHasScrolled(true);
+      }
+    };
+
+    // Scroll event for hasScroll/isAtBottom UI and detecting return to bottom
+    const handleScroll = () => {
+      // Update hasScroll and isAtBottom states
+      setHasScroll(hasVerticalScrollbar(responseArea));
+      const isScrolledToBottom =
+        responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 5;
+      setIsAtBottom(isScrolledToBottom);
+
+      // Re-enable auto-scroll when user scrolls back near bottom (during streaming)
+      if (!idleRef.current && userHasScrolledRef.current) {
+        const isNearBottom =
+          responseArea.scrollHeight - responseArea.scrollTop - responseArea.clientHeight < 50;
+        if (isNearBottom) {
+          setUserHasScrolled(false);
+        }
       }
+    };
+
+    handleScroll(); // Initial check
+    responseArea.addEventListener("wheel", handleWheel, { passive: true });
+    responseArea.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      responseArea.removeEventListener("wheel", handleWheel);
+      responseArea.removeEventListener("scroll", handleScroll);
+    };
+  }, []); // Empty deps - uses refs
+
+  // Update hasScroll when history changes
+  useEffect(() => {
+    const responseArea = responseAreaRef.current as any;
+    if (responseArea) {
+      setHasScroll(hasVerticalScrollbar(responseArea));
     }
-  }, [response, history]);
+  }, [history]);
 
   // Use ref to avoid infinite loops from unstable callback references
   useEffect(() => {
@@ -2337,6 +2401,10 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
     // Clear any previous errors
     setError(null);
 
+    // Reset scroll tracking for new message - enable auto-scroll
+    setUserHasScrolled(false);
+    prevResponseLengthRef.current = 0;
+
     // IMPORTANT: Clear the response BEFORE setting new lastKey
     // This prevents the old response from being written to the new history entry
     // when the history update effect runs

package/src/components/ui/ThinkingBlock.tsx

@@ -102,6 +102,11 @@ const getDefaultTitle = (type: ThinkingBlockType): string => {
 /**
  * ThinkingBlock - A collapsible block for displaying thinking/reasoning/searching content
  * with streaming support. Content streams in naturally as it arrives.
+ * 
+ * Features Cursor-style effects:
+ * - Spinning icon when streaming
+ * - Shimmer highlight effect on title text
+ * - Compact collapsed state with content preview
  */
 export const ThinkingBlock: React.FC<ThinkingBlockProps> = ({
   type,
@@ -113,10 +118,17 @@ export const ThinkingBlock: React.FC<ThinkingBlockProps> = ({
 }) => {
   const displayTitle = title || getDefaultTitle(type);
   const icon = getIcon(type);
+  
+  // Create a truncated preview for collapsed state
+  const getPreview = (text: string, maxLength: number = 60): string => {
+    const cleaned = text.replace(/\s+/g, ' ').trim();
+    if (cleaned.length <= maxLength) return cleaned;
+    return cleaned.substring(0, maxLength).trim() + '...';
+  };
 
   return (
     <div 
-      className={`thinking-block thinking-block--${type} ${isCollapsed ? 'thinking-block--collapsed' : ''}`}
+      className={`thinking-block thinking-block--${type} ${isCollapsed ? 'thinking-block--collapsed' : ''} ${isStreaming ? 'thinking-block--streaming' : ''}`}
     >
       <button 
         className="thinking-block__header"
@@ -125,13 +137,15 @@ export const ThinkingBlock: React.FC<ThinkingBlockProps> = ({
         aria-expanded={!isCollapsed}
       >
         <div className="thinking-block__header-left">
-          {icon}
-          <span className="thinking-block__title">{displayTitle}</span>
-          {isStreaming && (
-            <span className="thinking-block__streaming-indicator">
-              <span className="thinking-block__streaming-dot" />
-              <span className="thinking-block__streaming-dot" />
-              <span className="thinking-block__streaming-dot" />
+          <span className={`thinking-block__icon-wrapper ${isStreaming ? 'thinking-block__icon-wrapper--spinning' : ''}`}>
+            {icon}
+          </span>
+          <span className={`thinking-block__title ${isStreaming ? 'thinking-block__title--shimmer' : ''}`}>
+            {displayTitle}
+          </span>
+          {isCollapsed && content && (
+            <span className="thinking-block__preview">
+              {getPreview(content)}
             </span>
           )}
         </div>