kyd-shared-badge 0.3.6 → 0.3.7

package/package.json

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

package/src/chat/ChatWidget.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, 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';
@@ -47,44 +47,11 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
   const [headerTop, setHeaderTop] = useState(0);
   const [showHint, setShowHint] = useState(false);
   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);
+  const listRef = useRef<HTMLDivElement>(null);
 
-  // Detect user scroll position to toggle auto-scroll
   useEffect(() => {
-    if (!open) return;
-    const root = containerRef.current;
-    if (!root) return;
-    const scrollEl = root.querySelector('.cs-message-list') as HTMLElement | null;
-    if (!scrollEl) return;
-    const onScroll = () => {
-      const nearBottom = scrollEl.scrollTop + scrollEl.clientHeight >= scrollEl.scrollHeight - 8;
-      setAutoScroll(nearBottom);
-    };
-    scrollEl.addEventListener('scroll', onScroll, { passive: true } as AddEventListenerOptions);
-    return () => scrollEl.removeEventListener('scroll', onScroll);
-  }, [open]);
-
-  // Preserve viewport when new content streams. If autoScroll is off, compensate for height growth.
-  useLayoutEffect(() => {
-    if (!open) return;
-    const root = containerRef.current;
-    if (!root) return;
-    const scrollEl = root.querySelector('.cs-message-list') as HTMLElement | null;
-    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]);
+    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
+  }, [messages, open]);
 
   // Optional hint (only shows if user hasn't dismissed before and when collapsed)
   useEffect(() => {
@@ -241,7 +208,6 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
           aria-label={'Chat sidebar'}
           style={{ position: 'fixed', top: headerTop, right: 0, bottom: 0, width, maxWidth: '92vw' }}
           className={'shadow-xl border flex flex-col overflow-hidden'}
-          ref={containerRef}
         >
           {/* Left-edge resizer */}
           <div
@@ -256,7 +222,7 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
               <div className={'flex-1'} style={{ minHeight: 0 }}>
                 <MainContainer style={{ height: '100%', position: 'relative', background: 'var(--content-card-background)', border: 'none'}}>
                   <ChatContainer style={{ height: '100%' }}>
-                    <MessageList typingIndicator={undefined} autoScrollToBottom={autoScroll}>
+                    <MessageList typingIndicator={undefined} autoScrollToBottom>
                     {messages.length === 0 && (
                       <Message model={{ message: 'Start a conversation. I can answer questions about this developer’s report.', sender: 'KYD', direction: 'incoming', position: 'single' }} />
                     )}
@@ -306,7 +272,7 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
                 </ChatContainer>
               </MainContainer>
               </div>
-              <form onSubmit={(e) => { e.preventDefault(); if (!sending && input.trim()) { setAutoScroll(true); sendMessage(); } }}>
+              <form onSubmit={(e) => { e.preventDefault(); if (!sending && input.trim()) sendMessage(); }}>
                 <div className={'flex items-end gap-2 p-2 border-t'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
                   <input
                     aria-label={'Type your message'}

package/src/chat/ChatWindowStreaming.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState, useLayoutEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import './chat-overrides.css';
 import { FiSend } from 'react-icons/fi';
 import { useChatStreaming } from './useChatStreaming';
@@ -8,33 +8,14 @@ import { useChatStreaming } from './useChatStreaming';
 export default function ChatWindowStreaming({ api = '/api/chat', badgeId }: { api?: string, badgeId: string }) {
   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;
-    if (!el) return;
-    const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 8;
-    autoScrollRef.current = nearBottom;
-  };
-
-  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;
+  useEffect(() => {
+    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
   }, [messages]);
 
   return (
     <div className="flex flex-col border rounded-lg overflow-hidden" style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}>
-      <div ref={listRef} className="p-4 space-y-3 h-72 overflow-auto" onScroll={handleScroll}>
+      <div ref={listRef} className="p-4 space-y-3 h-72 overflow-auto">
         {messages.map(m => (
           <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
             <div
@@ -54,13 +35,13 @@ export default function ChatWindowStreaming({ api = '/api/chat', badgeId }: { ap
         <input
           value={input}
           onChange={e=>setInput(e.target.value)}
-          onKeyDown={e=>{ if (e.key==='Enter') { autoScrollRef.current = true; sendMessage(); } }}
+          onKeyDown={e=>{ if (e.key==='Enter') sendMessage(); }}
           className="flex-1 px-3 py-2 rounded border kyd-chat-input"
           style={{ background: 'var(--input-background)', color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)' }}
           placeholder="Ask KYD…"
         />
         <button
-          onClick={()=>{ autoScrollRef.current = true; sendMessage(); }}
+          onClick={()=>sendMessage()}
           disabled={sending}
           className="px-3 py-2 rounded disabled:opacity-60 kyd-chat-button"
           style={{ background: 'var(--gradient-start)', color: '#fff' }}