@hef2024/llmasaservice-ui 0.22.0 → 0.22.1

package/dist/index.js

@@ -4334,11 +4334,22 @@ var AIChatPanel = ({
       thumbsDownClick(callId);
     }
   }), [thumbsDownClick, interactionClicked]);
-  const scrollToBottom = (0, import_react12.useCallback)(() => {
+  const scrollToBottom = (0, import_react12.useCallback)((force = false) => {
     var _a2;
     if (scrollRAFRef.current) {
       cancelAnimationFrame(scrollRAFRef.current);
     }
+    if (!force && responseAreaRef.current) {
+      const scrollViewport = responseAreaRef.current.querySelector("[data-radix-scroll-area-viewport]");
+      const scrollElement = scrollViewport || responseAreaRef.current;
+      const scrollTop = scrollElement.scrollTop;
+      const scrollHeight = scrollElement.scrollHeight;
+      const clientHeight = scrollElement.clientHeight;
+      const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+      if (!isNearBottom) {
+        return;
+      }
+    }
     const now = Date.now();
     if (now - lastScrollTimeRef.current < 100) {
       scrollRAFRef.current = requestAnimationFrame(() => {
@@ -4382,7 +4393,7 @@ var AIChatPanel = ({
     setLastPrompt(promptToSend.trim());
     setLastKey(promptKey);
     setTimeout(() => {
-      scrollToBottom();
+      scrollToBottom(true);
     }, 0);
     console.log("AIChatPanel.continueChat - about to call ensureConversation");
     ensureConversation().then((convId) => {
@@ -4562,7 +4573,7 @@ var AIChatPanel = ({
   (0, import_react12.useEffect)(() => {
     const shouldAutoScroll = scrollToEnd || !userHasScrolled;
     if (!idle && shouldAutoScroll && response) {
-      scrollToBottom();
+      scrollToBottom(false);
     }
   }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);
   const idleRef = (0, import_react12.useRef)(idle);
@@ -4722,7 +4733,7 @@ var AIChatPanel = ({
   const AgentSuggestionCard = import_react12.default.memo(({ agentId, agentName, reason }) => {
     (0, import_react12.useEffect)(() => {
       const timer = setTimeout(() => {
-        scrollToBottom();
+        scrollToBottom(true);
       }, 100);
       return () => clearTimeout(timer);
     }, []);
@@ -4769,7 +4780,7 @@ var AIChatPanel = ({
         onClick: () => {
           onAgentChange(agentId);
           setTimeout(() => {
-            scrollToBottom();
+            scrollToBottom(true);
           }, 100);
         }
       },

package/dist/index.mjs

@@ -4301,11 +4301,22 @@ var AIChatPanel = ({
       thumbsDownClick(callId);
     }
   }), [thumbsDownClick, interactionClicked]);
-  const scrollToBottom = useCallback2(() => {
+  const scrollToBottom = useCallback2((force = false) => {
     var _a2;
     if (scrollRAFRef.current) {
       cancelAnimationFrame(scrollRAFRef.current);
     }
+    if (!force && responseAreaRef.current) {
+      const scrollViewport = responseAreaRef.current.querySelector("[data-radix-scroll-area-viewport]");
+      const scrollElement = scrollViewport || responseAreaRef.current;
+      const scrollTop = scrollElement.scrollTop;
+      const scrollHeight = scrollElement.scrollHeight;
+      const clientHeight = scrollElement.clientHeight;
+      const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+      if (!isNearBottom) {
+        return;
+      }
+    }
     const now = Date.now();
     if (now - lastScrollTimeRef.current < 100) {
       scrollRAFRef.current = requestAnimationFrame(() => {
@@ -4349,7 +4360,7 @@ var AIChatPanel = ({
     setLastPrompt(promptToSend.trim());
     setLastKey(promptKey);
     setTimeout(() => {
-      scrollToBottom();
+      scrollToBottom(true);
     }, 0);
     console.log("AIChatPanel.continueChat - about to call ensureConversation");
     ensureConversation().then((convId) => {
@@ -4529,7 +4540,7 @@ var AIChatPanel = ({
   useEffect7(() => {
     const shouldAutoScroll = scrollToEnd || !userHasScrolled;
     if (!idle && shouldAutoScroll && response) {
-      scrollToBottom();
+      scrollToBottom(false);
     }
   }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);
   const idleRef = useRef5(idle);
@@ -4689,7 +4700,7 @@ var AIChatPanel = ({
   const AgentSuggestionCard = React12.memo(({ agentId, agentName, reason }) => {
     useEffect7(() => {
       const timer = setTimeout(() => {
-        scrollToBottom();
+        scrollToBottom(true);
       }, 100);
       return () => clearTimeout(timer);
     }, []);
@@ -4736,7 +4747,7 @@ var AIChatPanel = ({
         onClick: () => {
           onAgentChange(agentId);
           setTimeout(() => {
-            scrollToBottom();
+            scrollToBottom(true);
           }, 100);
         }
       },

package/package.json

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

package/src/AIChatPanel.tsx

@@ -1470,12 +1470,28 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   }, [thumbsDownClick, interactionClicked]);
 
   // Scroll to bottom - throttled using RAF to prevent layout thrashing
-  const scrollToBottom = useCallback(() => {
+  const scrollToBottom = useCallback((force: boolean = false) => {
     // Cancel any pending scroll
     if (scrollRAFRef.current) {
       cancelAnimationFrame(scrollRAFRef.current);
     }
     
+    // Check if we should scroll - only if user is near bottom or force is true
+    if (!force && responseAreaRef.current) {
+      const scrollViewport = responseAreaRef.current.querySelector('[data-radix-scroll-area-viewport]') as HTMLElement;
+      const scrollElement = scrollViewport || responseAreaRef.current;
+      
+      const scrollTop = scrollElement.scrollTop;
+      const scrollHeight = scrollElement.scrollHeight;
+      const clientHeight = scrollElement.clientHeight;
+      const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+      
+      // If user is not near bottom, don't scroll (prevents scroll on layout changes like toast)
+      if (!isNearBottom) {
+        return;
+      }
+    }
+    
     // Throttle to max once per 100ms to prevent performance issues during streaming
     const now = Date.now();
     if (now - lastScrollTimeRef.current < 100) {
@@ -1551,8 +1567,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     // Scroll to bottom immediately to show the new prompt
     // Use setTimeout to ensure the DOM has updated
+    // Force scroll since this is a user-initiated action
     setTimeout(() => {
-      scrollToBottom();
+      scrollToBottom(true);
     }, 0);
     
     // Now proceed with API calls in the background (conversation creation + LLM call)
@@ -1808,7 +1825,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // 3. We have content to show (response exists)
     const shouldAutoScroll = scrollToEnd || !userHasScrolled;
     if (!idle && shouldAutoScroll && response) {
-      scrollToBottom();
+      // Use non-forced scroll - will only scroll if near bottom
+      scrollToBottom(false);
     }
   }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]); // Removed history dependency
 
@@ -2037,8 +2055,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     // 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();
+        scrollToBottom(true);
       }, 100);
       return () => clearTimeout(timer);
     }, []); // Empty deps - only run on mount
@@ -2158,8 +2177,9 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           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();
+              scrollToBottom(true);
             }, 100);
           }}
         >