@hef2024/llmasaservice-ui 0.22.2 → 0.22.4

package/dist/index.js

@@ -3895,6 +3895,8 @@ var AIChatPanel = ({
   const scrollRAFRef = (0, import_react12.useRef)(null);
   const lastScrollTimeRef = (0, import_react12.useRef)(0);
   const prevResponseLengthRef = (0, import_react12.useRef)(0);
+  const scrollToEndRef = (0, import_react12.useRef)(scrollToEnd || false);
+  const userHasScrolledRef = (0, import_react12.useRef)(userHasScrolled);
   const prevIdleRef = (0, import_react12.useRef)(true);
   const hasNotifiedCompletionRef = (0, import_react12.useRef)(true);
   const latestHistoryRef = (0, import_react12.useRef)(initialHistory);
@@ -4574,18 +4576,35 @@ var AIChatPanel = ({
     }
   }, [idle]);
   (0, import_react12.useEffect)(() => {
+    scrollToEndRef.current = scrollToEnd || false;
+  }, [scrollToEnd]);
+  (0, import_react12.useEffect)(() => {
+    userHasScrolledRef.current = userHasScrolled;
+  }, [userHasScrolled]);
+  (0, import_react12.useEffect)(() => {
+    if (idle) {
+      console.log("AIChatPanel - Auto-scroll effect: SKIPPED (idle)");
+      return;
+    }
     const currentResponseLength = response.length;
     const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    console.log("AIChatPanel - Auto-scroll effect:", {
+      idle,
+      currentResponseLength,
+      prevLength: prevResponseLengthRef.current,
+      responseGotLonger,
+      userHasScrolled: userHasScrolledRef.current,
+      scrollToEnd: scrollToEndRef.current
+    });
     prevResponseLengthRef.current = currentResponseLength;
-    const shouldAutoScroll = scrollToEnd || !userHasScrolled;
-    if (!idle && shouldAutoScroll && response && responseGotLonger) {
+    const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
+    if (shouldAutoScroll && response && responseGotLonger) {
+      console.log("AIChatPanel - Calling scrollToBottom");
       scrollToBottom(false);
     }
-  }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);
+  }, [response, idle]);
   const idleRef = (0, import_react12.useRef)(idle);
   idleRef.current = idle;
-  const userHasScrolledRef = (0, import_react12.useRef)(userHasScrolled);
-  userHasScrolledRef.current = userHasScrolled;
   (0, import_react12.useEffect)(() => {
     const scrollArea = responseAreaRef.current;
     if (!scrollArea) return;
@@ -6273,12 +6292,16 @@ var AIAgentPanel = import_react14.default.forwardRef(({
   }, [context, sharedContextSections, pageContextSections, contextDataSources]);
   (0, import_react14.useEffect)(() => {
     const contextString = JSON.stringify(mergedContext.sections.map((s) => ({ id: s.id, data: s.data })));
+    console.log("AIAgentPanel - Context effect running, sections:", mergedContext.sections.length);
     if (prevContextRef.current === null) {
+      console.log("AIAgentPanel - First render, initializing context ref");
       prevContextRef.current = contextString;
       return;
     }
     if (prevContextRef.current !== contextString) {
       console.log("AIAgentPanel - Context changed, showing notification");
+      console.log("AIAgentPanel - Old context:", prevContextRef.current.substring(0, 100));
+      console.log("AIAgentPanel - New context:", contextString.substring(0, 100));
       prevContextRef.current = contextString;
       if (contextNotificationTimeoutRef.current) {
         clearTimeout(contextNotificationTimeoutRef.current);
@@ -6289,8 +6312,10 @@ var AIAgentPanel = import_react14.default.forwardRef(({
         setShowContextNotification(false);
         contextNotificationTimeoutRef.current = null;
       }, 3e3);
+    } else {
+      console.log("AIAgentPanel - Context unchanged");
     }
-  }, [mergedContext.sections]);
+  }, [mergedContext]);
   (0, import_react14.useEffect)(() => {
     return () => {
       if (contextNotificationTimeoutRef.current) {

package/dist/index.mjs

@@ -3862,6 +3862,8 @@ var AIChatPanel = ({
   const scrollRAFRef = useRef5(null);
   const lastScrollTimeRef = useRef5(0);
   const prevResponseLengthRef = useRef5(0);
+  const scrollToEndRef = useRef5(scrollToEnd || false);
+  const userHasScrolledRef = useRef5(userHasScrolled);
   const prevIdleRef = useRef5(true);
   const hasNotifiedCompletionRef = useRef5(true);
   const latestHistoryRef = useRef5(initialHistory);
@@ -4541,18 +4543,35 @@ var AIChatPanel = ({
     }
   }, [idle]);
   useEffect7(() => {
+    scrollToEndRef.current = scrollToEnd || false;
+  }, [scrollToEnd]);
+  useEffect7(() => {
+    userHasScrolledRef.current = userHasScrolled;
+  }, [userHasScrolled]);
+  useEffect7(() => {
+    if (idle) {
+      console.log("AIChatPanel - Auto-scroll effect: SKIPPED (idle)");
+      return;
+    }
     const currentResponseLength = response.length;
     const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    console.log("AIChatPanel - Auto-scroll effect:", {
+      idle,
+      currentResponseLength,
+      prevLength: prevResponseLengthRef.current,
+      responseGotLonger,
+      userHasScrolled: userHasScrolledRef.current,
+      scrollToEnd: scrollToEndRef.current
+    });
     prevResponseLengthRef.current = currentResponseLength;
-    const shouldAutoScroll = scrollToEnd || !userHasScrolled;
-    if (!idle && shouldAutoScroll && response && responseGotLonger) {
+    const shouldAutoScroll = scrollToEndRef.current || !userHasScrolledRef.current;
+    if (shouldAutoScroll && response && responseGotLonger) {
+      console.log("AIChatPanel - Calling scrollToBottom");
       scrollToBottom(false);
     }
-  }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);
+  }, [response, idle]);
   const idleRef = useRef5(idle);
   idleRef.current = idle;
-  const userHasScrolledRef = useRef5(userHasScrolled);
-  userHasScrolledRef.current = userHasScrolled;
   useEffect7(() => {
     const scrollArea = responseAreaRef.current;
     if (!scrollArea) return;
@@ -6240,12 +6259,16 @@ var AIAgentPanel = React13.forwardRef(({
   }, [context, sharedContextSections, pageContextSections, contextDataSources]);
   useEffect9(() => {
     const contextString = JSON.stringify(mergedContext.sections.map((s) => ({ id: s.id, data: s.data })));
+    console.log("AIAgentPanel - Context effect running, sections:", mergedContext.sections.length);
     if (prevContextRef.current === null) {
+      console.log("AIAgentPanel - First render, initializing context ref");
       prevContextRef.current = contextString;
       return;
     }
     if (prevContextRef.current !== contextString) {
       console.log("AIAgentPanel - Context changed, showing notification");
+      console.log("AIAgentPanel - Old context:", prevContextRef.current.substring(0, 100));
+      console.log("AIAgentPanel - New context:", contextString.substring(0, 100));
       prevContextRef.current = contextString;
       if (contextNotificationTimeoutRef.current) {
         clearTimeout(contextNotificationTimeoutRef.current);
@@ -6256,8 +6279,10 @@ var AIAgentPanel = React13.forwardRef(({
         setShowContextNotification(false);
         contextNotificationTimeoutRef.current = null;
       }, 3e3);
+    } else {
+      console.log("AIAgentPanel - Context unchanged");
     }
-  }, [mergedContext.sections]);
+  }, [mergedContext]);
   useEffect9(() => {
     return () => {
       if (contextNotificationTimeoutRef.current) {

package/package.json

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

package/src/AIAgentPanel.tsx

@@ -1534,8 +1534,11 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     // Create a stable string representation of the context for comparison
     const contextString = JSON.stringify(mergedContext.sections.map(s => ({ id: s.id, data: s.data })));
     
+    console.log('AIAgentPanel - Context effect running, sections:', mergedContext.sections.length);
+    
     // Skip on first render
     if (prevContextRef.current === null) {
+      console.log('AIAgentPanel - First render, initializing context ref');
       prevContextRef.current = contextString;
       return;
     }
@@ -1543,6 +1546,8 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     // Check if context actually changed
     if (prevContextRef.current !== contextString) {
       console.log('AIAgentPanel - Context changed, showing notification');
+      console.log('AIAgentPanel - Old context:', prevContextRef.current.substring(0, 100));
+      console.log('AIAgentPanel - New context:', contextString.substring(0, 100));
       prevContextRef.current = contextString;
       
       // Clear any existing timeout before setting a new one
@@ -1559,11 +1564,13 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
         setShowContextNotification(false);
         contextNotificationTimeoutRef.current = null;
       }, 3000);
+    } else {
+      console.log('AIAgentPanel - Context unchanged');
     }
     
     // Note: No cleanup on every re-render - only clear timeout when context changes
     // This prevents race conditions when switching rapidly
-  }, [mergedContext.sections]);
+  }, [mergedContext]);
 
   // Separate cleanup effect for unmount only
   useEffect(() => {

package/src/AIChatPanel.tsx

@@ -847,6 +847,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const scrollRAFRef = useRef<number | null>(null);
   const lastScrollTimeRef = useRef<number>(0);
   const prevResponseLengthRef = useRef<number>(0);
+  const scrollToEndRef = useRef<boolean>(scrollToEnd || false);
+  const userHasScrolledRef = useRef<boolean>(userHasScrolled);
   
   // === NEW: Clean history management refs ===
   // Track previous idle state to detect transitions (false→true = completion)
@@ -1821,32 +1823,56 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     }
   }, [idle]); // ONLY depends on idle - no history, no callbacks in deps
   
+  // Keep refs in sync
+  useEffect(() => {
+    scrollToEndRef.current = scrollToEnd || false;
+  }, [scrollToEnd]);
+  
+  useEffect(() => {
+    userHasScrolledRef.current = userHasScrolled;
+  }, [userHasScrolled]);
+  
   // 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(() => {
+    // CRITICAL: Skip entirely if idle - no scrolling when not streaming
+    if (idle) {
+      console.log('AIChatPanel - Auto-scroll effect: SKIPPED (idle)');
+      return;
+    }
+    
     // Only auto-scroll if:
-    // 1. We're actively streaming (!idle)
+    // 1. We're actively streaming (!idle) - checked above
     // 2. User hasn't manually scrolled up during this response (or scrollToEnd prop is true)
     // 3. We have content to show (response exists)
     // 4. The response actually got longer (not just a re-render from layout change)
     const currentResponseLength = response.length;
     const responseGotLonger = currentResponseLength > prevResponseLengthRef.current;
+    
+    console.log('AIChatPanel - Auto-scroll effect:', {
+      idle,
+      currentResponseLength,
+      prevLength: prevResponseLengthRef.current,
+      responseGotLonger,
+      userHasScrolled: userHasScrolledRef.current,
+      scrollToEnd: scrollToEndRef.current,
+    });
+    
     prevResponseLengthRef.current = currentResponseLength;
     
-    const shouldAutoScroll = scrollToEnd || !userHasScrolled;
-    if (!idle && shouldAutoScroll && response && responseGotLonger) {
+    // 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');
       // Use non-forced scroll - will only scroll if near bottom
       scrollToBottom(false);
     }
-  }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]); // Removed history dependency
+  }, [response, idle]); // ONLY response and idle - no other dependencies!
 
   // Ref to track idle state for scroll handler (avoids stale closure)
   const idleRef = useRef(idle);
   idleRef.current = idle;
   
-  // Ref to track userHasScrolled to avoid redundant state updates  
-  const userHasScrolledRef = useRef(userHasScrolled);
-  userHasScrolledRef.current = userHasScrolled;
-
   // Detect user scroll to disable auto-scroll
   useEffect(() => {
     const scrollArea = responseAreaRef.current;