@hef2024/llmasaservice-ui 0.22.4 → 0.22.6

package/dist/index.js

@@ -4338,7 +4338,13 @@ var AIChatPanel = ({
     }
   }), [thumbsDownClick, interactionClicked]);
   const scrollToBottom = (0, import_react12.useCallback)((force = false) => {
-    var _a2;
+    var _a2, _b;
+    console.log("\u{1F535} scrollToBottom called", {
+      force,
+      idle: idleRef.current,
+      calledAt: (/* @__PURE__ */ new Date()).toISOString(),
+      stackTrace: (_a2 = new Error().stack) == null ? void 0 : _a2.split("\n").slice(2, 4).join("\n")
+    });
     if (scrollRAFRef.current) {
       cancelAnimationFrame(scrollRAFRef.current);
     }
@@ -4349,10 +4355,19 @@ var AIChatPanel = ({
       const scrollHeight = scrollElement.scrollHeight;
       const clientHeight = scrollElement.clientHeight;
       const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+      console.log("\u{1F535} scrollToBottom: checking position", {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        distanceFromBottom: scrollHeight - scrollTop - clientHeight,
+        isNearBottom
+      });
       if (!isNearBottom) {
+        console.log("\u{1F535} scrollToBottom: CANCELLED (not near bottom)");
         return;
       }
     }
+    console.log("\u{1F535} scrollToBottom: EXECUTING SCROLL", { force });
     const now = Date.now();
     if (now - lastScrollTimeRef.current < 100) {
       scrollRAFRef.current = requestAnimationFrame(() => {
@@ -4362,7 +4377,7 @@ var AIChatPanel = ({
       });
       return;
     }
-    (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto" });
+    (_b = bottomRef.current) == null ? void 0 : _b.scrollIntoView({ behavior: "auto" });
     lastScrollTimeRef.current = now;
   }, []);
   const continueChat = (0, import_react12.useCallback)((promptText) => {
@@ -4582,14 +4597,18 @@ var AIChatPanel = ({
     userHasScrolledRef.current = userHasScrolled;
   }, [userHasScrolled]);
   (0, import_react12.useEffect)(() => {
+    console.log("AIChatPanel - Auto-scroll effect triggered", {
+      idle,
+      responseLength: response.length,
+      effectRanAt: (/* @__PURE__ */ new Date()).toISOString()
+    });
     if (idle) {
-      console.log("AIChatPanel - Auto-scroll effect: SKIPPED (idle)");
+      console.log("AIChatPanel - Auto-scroll effect: SKIPPED (idle=true)");
       return;
     }
     const currentResponseLength = response.length;
     const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
-    console.log("AIChatPanel - Auto-scroll effect:", {
-      idle,
+    console.log("AIChatPanel - Auto-scroll checks:", {
       currentResponseLength,
       prevLength: prevResponseLengthRef.current,
       responseGotLonger,
@@ -4599,8 +4618,10 @@ var AIChatPanel = ({
     prevResponseLengthRef.current = currentResponseLength;
     const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
     if (shouldAutoScroll && response && responseGotLonger) {
-      console.log("AIChatPanel - Calling scrollToBottom");
+      console.log("AIChatPanel - \u2705 SCROLLING TO BOTTOM");
       scrollToBottom(false);
+    } else {
+      console.log("AIChatPanel - \u274C NOT scrolling (conditions not met)");
     }
   }, [response, idle]);
   const idleRef = (0, import_react12.useRef)(idle);
@@ -4756,12 +4777,6 @@ var AIChatPanel = ({
     ) : /* @__PURE__ */ import_react12.default.createElement("code", __spreadValues({ className }, props), children);
   }, [effectivePrismStyle]);
   const AgentSuggestionCard = import_react12.default.memo(({ agentId, agentName, reason }) => {
-    (0, import_react12.useEffect)(() => {
-      const timer = setTimeout(() => {
-        scrollToBottom(true);
-      }, 100);
-      return () => clearTimeout(timer);
-    }, []);
     if (!agentId || !onAgentChange) return null;
     const isValidUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(agentId);
     const agentOption = agentOptions.find((opt) => opt.value === agentId);
@@ -4804,9 +4819,6 @@ var AIChatPanel = ({
         className: "ai-chat-agent-suggestion__button",
         onClick: () => {
           onAgentChange(agentId);
-          setTimeout(() => {
-            scrollToBottom(true);
-          }, 100);
         }
       },
       "Switch"

package/dist/index.mjs

@@ -4305,7 +4305,13 @@ var AIChatPanel = ({
     }
   }), [thumbsDownClick, interactionClicked]);
   const scrollToBottom = useCallback2((force = false) => {
-    var _a2;
+    var _a2, _b;
+    console.log("\u{1F535} scrollToBottom called", {
+      force,
+      idle: idleRef.current,
+      calledAt: (/* @__PURE__ */ new Date()).toISOString(),
+      stackTrace: (_a2 = new Error().stack) == null ? void 0 : _a2.split("\n").slice(2, 4).join("\n")
+    });
     if (scrollRAFRef.current) {
       cancelAnimationFrame(scrollRAFRef.current);
     }
@@ -4316,10 +4322,19 @@ var AIChatPanel = ({
       const scrollHeight = scrollElement.scrollHeight;
       const clientHeight = scrollElement.clientHeight;
       const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+      console.log("\u{1F535} scrollToBottom: checking position", {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        distanceFromBottom: scrollHeight - scrollTop - clientHeight,
+        isNearBottom
+      });
       if (!isNearBottom) {
+        console.log("\u{1F535} scrollToBottom: CANCELLED (not near bottom)");
         return;
       }
     }
+    console.log("\u{1F535} scrollToBottom: EXECUTING SCROLL", { force });
     const now = Date.now();
     if (now - lastScrollTimeRef.current < 100) {
       scrollRAFRef.current = requestAnimationFrame(() => {
@@ -4329,7 +4344,7 @@ var AIChatPanel = ({
       });
       return;
     }
-    (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto" });
+    (_b = bottomRef.current) == null ? void 0 : _b.scrollIntoView({ behavior: "auto" });
     lastScrollTimeRef.current = now;
   }, []);
   const continueChat = useCallback2((promptText) => {
@@ -4549,14 +4564,18 @@ var AIChatPanel = ({
     userHasScrolledRef.current = userHasScrolled;
   }, [userHasScrolled]);
   useEffect7(() => {
+    console.log("AIChatPanel - Auto-scroll effect triggered", {
+      idle,
+      responseLength: response.length,
+      effectRanAt: (/* @__PURE__ */ new Date()).toISOString()
+    });
     if (idle) {
-      console.log("AIChatPanel - Auto-scroll effect: SKIPPED (idle)");
+      console.log("AIChatPanel - Auto-scroll effect: SKIPPED (idle=true)");
       return;
     }
     const currentResponseLength = response.length;
     const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
-    console.log("AIChatPanel - Auto-scroll effect:", {
-      idle,
+    console.log("AIChatPanel - Auto-scroll checks:", {
       currentResponseLength,
       prevLength: prevResponseLengthRef.current,
       responseGotLonger,
@@ -4566,8 +4585,10 @@ var AIChatPanel = ({
     prevResponseLengthRef.current = currentResponseLength;
     const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
     if (shouldAutoScroll && response && responseGotLonger) {
-      console.log("AIChatPanel - Calling scrollToBottom");
+      console.log("AIChatPanel - \u2705 SCROLLING TO BOTTOM");
       scrollToBottom(false);
+    } else {
+      console.log("AIChatPanel - \u274C NOT scrolling (conditions not met)");
     }
   }, [response, idle]);
   const idleRef = useRef5(idle);
@@ -4723,12 +4744,6 @@ var AIChatPanel = ({
     ) : /* @__PURE__ */ React12.createElement("code", __spreadValues({ className }, props), children);
   }, [effectivePrismStyle]);
   const AgentSuggestionCard = React12.memo(({ agentId, agentName, reason }) => {
-    useEffect7(() => {
-      const timer = setTimeout(() => {
-        scrollToBottom(true);
-      }, 100);
-      return () => clearTimeout(timer);
-    }, []);
     if (!agentId || !onAgentChange) return null;
     const isValidUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(agentId);
     const agentOption = agentOptions.find((opt) => opt.value === agentId);
@@ -4771,9 +4786,6 @@ var AIChatPanel = ({
         className: "ai-chat-agent-suggestion__button",
         onClick: () => {
           onAgentChange(agentId);
-          setTimeout(() => {
-            scrollToBottom(true);
-          }, 100);
         }
       },
       "Switch"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.22.4",
+  "version": "0.22.6",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AIChatPanel.tsx

@@ -1474,6 +1474,13 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
 
   // Scroll to bottom - throttled using RAF to prevent layout thrashing
   const scrollToBottom = useCallback((force: boolean = false) => {
+    console.log('🔵 scrollToBottom called', { 
+      force, 
+      idle: idleRef.current,
+      calledAt: new Date().toISOString(),
+      stackTrace: new Error().stack?.split('\n').slice(2, 4).join('\n')
+    });
+    
     // Cancel any pending scroll
     if (scrollRAFRef.current) {
       cancelAnimationFrame(scrollRAFRef.current);
@@ -1489,12 +1496,23 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
       const clientHeight = scrollElement.clientHeight;
       const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
       
+      console.log('🔵 scrollToBottom: checking position', { 
+        scrollTop, 
+        scrollHeight, 
+        clientHeight, 
+        distanceFromBottom: scrollHeight - scrollTop - clientHeight,
+        isNearBottom 
+      });
+      
       // If user is not near bottom, don't scroll (prevents scroll on layout changes like toast)
       if (!isNearBottom) {
+        console.log('🔵 scrollToBottom: CANCELLED (not near bottom)');
         return;
       }
     }
     
+    console.log('🔵 scrollToBottom: EXECUTING SCROLL', { force });
+    
     // Throttle to max once per 100ms to prevent performance issues during streaming
     const now = Date.now();
     if (now - lastScrollTimeRef.current < 100) {
@@ -1835,9 +1853,15 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   // Auto-scroll to bottom - only while streaming and user hasn't manually scrolled
   // CRITICAL: Only depends on response and idle to avoid re-running on layout changes
   useEffect(() => {
+    console.log('AIChatPanel - Auto-scroll effect triggered', {
+      idle,
+      responseLength: response.length,
+      effectRanAt: new Date().toISOString(),
+    });
+    
     // CRITICAL: Skip entirely if idle - no scrolling when not streaming
     if (idle) {
-      console.log('AIChatPanel - Auto-scroll effect: SKIPPED (idle)');
+      console.log('AIChatPanel - Auto-scroll effect: SKIPPED (idle=true)');
       return;
     }
     
@@ -1849,8 +1873,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     const currentResponseLength = response.length;
     const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
     
-    console.log('AIChatPanel - Auto-scroll effect:', {
-      idle,
+    console.log('AIChatPanel - Auto-scroll checks:', {
       currentResponseLength,
       prevLength: prevResponseLengthRef.current,
       responseGotLonger,
@@ -1863,9 +1886,11 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // Only scroll if response actually grew - use refs to avoid unnecessary effect runs
     const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
     if (shouldAutoScroll && response && responseGotLonger) {
-      console.log('AIChatPanel - Calling scrollToBottom');
+      console.log('AIChatPanel - ✅ SCROLLING TO BOTTOM');
       // Use non-forced scroll - will only scroll if near bottom
       scrollToBottom(false);
+    } else {
+      console.log('AIChatPanel - ❌ NOT scrolling (conditions not met)');
     }
   }, [response, idle]); // ONLY response and idle - no other dependencies!
 
@@ -2087,15 +2112,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     agentName: string; 
     reason: string;
   }) => {
-    // Auto-scroll when the agent suggestion card appears
-    useEffect(() => {
-      // Small delay to ensure the card is fully rendered in the DOM
-      // Force scroll since this is new content being added
-      const timer = setTimeout(() => {
-        scrollToBottom(true);
-      }, 100);
-      return () => clearTimeout(timer);
-    }, []); // Empty deps - only run on mount
+    // Note: Removed auto-scroll on card appearance - it was causing unwanted scrolling
+    // The card appears as part of streaming response, which handles its own scrolling
     
     if (!agentId || !onAgentChange) return null;
     
@@ -2211,11 +2229,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           className="ai-chat-agent-suggestion__button"
           onClick={() => {
             onAgentChange(agentId);
-            // Scroll to bottom after a brief delay to let React re-render
-            // Force scroll since this is a user-initiated action
-            setTimeout(() => {
-              scrollToBottom(true);
-            }, 100);
+            // Note: Removed forced scroll - switching agents shouldn't scroll the chat
           }}
         >
           Switch