kyd-shared-badge 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/chat/ChatWidget.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { FiMessageSquare, FiX, FiChevronRight } from 'react-icons/fi';
 import { useChatStreaming } from './useChatStreaming';
 import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
@@ -49,6 +49,7 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
   const { messages, input, setInput, sending, sendMessage, cancel } = useChatStreaming({ api, badgeId });
   const containerRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState(true);
+  const prevScrollHeightRef = useRef<number>(0);
 
   // Detect user scroll position to toggle auto-scroll
   useEffect(() => {
@@ -65,14 +66,24 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
     return () => scrollEl.removeEventListener('scroll', onScroll);
   }, [open]);
 
-  // Keep scrolled to bottom only when autoScroll is enabled
-  useEffect(() => {
+  // Preserve viewport when new content streams. If autoScroll is off, compensate for height growth.
+  useLayoutEffect(() => {
     if (!open) return;
-    if (!autoScroll) return;
     const root = containerRef.current;
     if (!root) return;
     const scrollEl = root.querySelector('.cs-message-list') as HTMLElement | null;
-    if (scrollEl) scrollEl.scrollTop = scrollEl.scrollHeight;
+    if (!scrollEl) return;
+    const newHeight = scrollEl.scrollHeight;
+    const prevHeight = prevScrollHeightRef.current || newHeight;
+    if (autoScroll) {
+      scrollEl.scrollTop = newHeight;
+    } else {
+      const delta = newHeight - prevHeight;
+      if (delta !== 0) {
+        scrollEl.scrollTop = scrollEl.scrollTop + delta;
+      }
+    }
+    prevScrollHeightRef.current = newHeight;
   }, [messages, open, autoScroll]);
 
   // Optional hint (only shows if user hasn't dismissed before and when collapsed)

package/src/chat/ChatWindowStreaming.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useLayoutEffect } from 'react';
 import './chat-overrides.css';
 import { FiSend } from 'react-icons/fi';
 import { useChatStreaming } from './useChatStreaming';
@@ -9,6 +9,7 @@ export default function ChatWindowStreaming({ api = '/api/chat', badgeId }: { ap
   const { messages, input, setInput, sending, sendMessage } = useChatStreaming({ api, badgeId });
   const listRef = useRef<HTMLDivElement>(null);
   const autoScrollRef = useRef<boolean>(true);
+  const prevScrollHeightRef = useRef<number>(0);
 
   const handleScroll = () => {
     const el = listRef.current;
@@ -17,10 +18,18 @@ export default function ChatWindowStreaming({ api = '/api/chat', badgeId }: { ap
     autoScrollRef.current = nearBottom;
   };
 
-  useEffect(() => {
-    if (listRef.current && autoScrollRef.current) {
-      listRef.current.scrollTop = listRef.current.scrollHeight;
+  useLayoutEffect(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const newHeight = el.scrollHeight;
+    const prevHeight = prevScrollHeightRef.current || newHeight;
+    if (autoScrollRef.current) {
+      el.scrollTop = newHeight;
+    } else {
+      const delta = newHeight - prevHeight;
+      if (delta !== 0) el.scrollTop = el.scrollTop + delta;
     }
+    prevScrollHeightRef.current = newHeight;
   }, [messages]);
 
   return (