kyd-shared-badge 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "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,24 @@ 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]);
+    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
+  }, [messages, 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;
+  // Prefill input from URL chatPrompt and open the sidebar when present
+  useEffect(() => {
+    try {
+      if (typeof window === 'undefined') return;
+      const url = new URL(window.location.href);
+      const prompt = url.searchParams.get('chatPrompt');
+      if (prompt && prompt.trim()) {
+        setInput(prompt);
+        setOpen(true);
       }
-    }
-    prevScrollHeightRef.current = newHeight;
-  }, [messages, open, autoScroll]);
+    } catch {}
+  }, [setInput]);
 
   // Optional hint (only shows if user hasn't dismissed before and when collapsed)
   useEffect(() => {
@@ -241,7 +221,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 +235,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 +285,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,26 @@ 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]);
 
+  // Prefill input from URL chatPrompt if present
+  useEffect(() => {
+    try {
+      if (typeof window === 'undefined') return;
+      const url = new URL(window.location.href);
+      const prompt = url.searchParams.get('chatPrompt');
+      if (prompt && prompt.trim()) {
+        setInput(prompt);
+      }
+    } catch {}
+  }, [setInput]);
+
   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 +47,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' }}

package/src/chat/useChatStreaming.ts

@@ -28,6 +28,16 @@ export function useChatStreaming(cfg: UseChatStreamingConfig) {
     const assistantId = crypto.randomUUID();
     setMessages(m => [...m, userMsg, { id: assistantId, role: 'assistant', content: '' }]);
 
+    const redirectToLogin = (promptText: string) => {
+      // Inform the user then redirect to login carrying callbackUrl and prompt
+      setMessages(m => m.map(msg => msg.id === assistantId ? { ...msg, content: 'You need to log in to use chat. Redirecting to login…' } : msg));
+      const currentPath = typeof window !== 'undefined' ? (window.location.pathname + window.location.search + window.location.hash) : '/';
+      const loginUrl = `/auth/login?callbackUrl=${encodeURIComponent(currentPath)}&chatPrompt=${encodeURIComponent(promptText)}`;
+      setTimeout(() => {
+        if (typeof window !== 'undefined') window.location.href = loginUrl;
+      }, 700);
+    };
+
     try {
       abortRef.current?.abort();
       abortRef.current = new AbortController();
@@ -35,6 +45,7 @@ export function useChatStreaming(cfg: UseChatStreamingConfig) {
       let sid = sessionId;
       if (!sid) {
         const sres = await fetch(`${api}/session`, { method: 'POST' });
+        if (sres.status === 401) { redirectToLogin(content); return; }
         if (!sres.ok) throw new Error('session');
         const sj = await sres.json();
         sid = sj.sessionId as string;
@@ -46,6 +57,7 @@ export function useChatStreaming(cfg: UseChatStreamingConfig) {
         body: JSON.stringify({ content, sessionId: sid, badgeId }),
         signal: abortRef.current.signal,
       });
+      if (res.status === 401) { redirectToLogin(content); return; }
       if (!res.ok || !res.body) throw new Error(`send: ${res.status}`);
 
       const reader = res.body.getReader();

package/src/lib/routes.ts

@@ -5,7 +5,6 @@ import { NextRequest } from 'next/server';
 import { streamText } from 'ai';
 import { bedrock } from '@ai-sdk/amazon-bedrock';
 
-// import { verifyCognito } from './auth-verify';
 import { getHistory, putMessage } from './chat-store';
 import { aggregateUserData, cleanDeveloperProfile, buildAllContextPrompt, getReportGraphData } from './context';
 import { checkAndConsumeToken } from './rate-limit';
@@ -17,7 +16,6 @@ export const runtime = 'nodejs';
 
 export async function chatStreamRoute(req: NextRequest, userId: string, companyId?: string) {
   try {
-    // const user = await verifyCognito(req);
 
     const { sessionId, content, badgeId } = await req.json();
     if (!content || !sessionId) {
@@ -70,7 +68,6 @@ export async function chatStreamRoute(req: NextRequest, userId: string, companyI
 
 export async function createSessionRoute(req: NextRequest, userId: string, companyId?: string) {
   try {
-    // const user = await verifyCognito(req);
     const body = await req.json().catch(() => ({}));
     const sessionId = await createSession({
       userId: userId,