kyd-shared-badge 0.3.4 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.4",
+  "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';
@@ -47,11 +47,44 @@ 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 listRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const prevScrollHeightRef = useRef<number>(0);
 
+  // Detect user scroll position to toggle auto-scroll
   useEffect(() => {
-    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
-  }, [messages, open]);
+    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]);
 
   // Optional hint (only shows if user hasn't dismissed before and when collapsed)
   useEffect(() => {
@@ -208,6 +241,7 @@ 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
@@ -222,7 +256,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>
+                    <MessageList typingIndicator={undefined} autoScrollToBottom={autoScroll}>
                     {messages.length === 0 && (
                       <Message model={{ message: 'Start a conversation. I can answer questions about this developer’s report.', sender: 'KYD', direction: 'incoming', position: 'single' }} />
                     )}
@@ -272,7 +306,7 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
                 </ChatContainer>
               </MainContainer>
               </div>
-              <form onSubmit={(e) => { e.preventDefault(); if (!sending && input.trim()) sendMessage(); }}>
+              <form onSubmit={(e) => { e.preventDefault(); if (!sending && input.trim()) { setAutoScroll(true); 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 } from 'react';
+import { useEffect, useRef, useState, useLayoutEffect } from 'react';
 import './chat-overrides.css';
 import { FiSend } from 'react-icons/fi';
 import { useChatStreaming } from './useChatStreaming';
@@ -8,14 +8,33 @@ 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);
 
-  useEffect(() => {
-    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
+  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;
   }, [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">
+      <div ref={listRef} className="p-4 space-y-3 h-72 overflow-auto" onScroll={handleScroll}>
         {messages.map(m => (
           <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
             <div
@@ -35,13 +54,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') sendMessage(); }}
+          onKeyDown={e=>{ if (e.key==='Enter') { autoScrollRef.current = true; 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={()=>sendMessage()}
+          onClick={()=>{ autoScrollRef.current = true; sendMessage(); }}
           disabled={sending}
           className="px-3 py-2 rounded disabled:opacity-60 kyd-chat-button"
           style={{ background: 'var(--gradient-start)', color: '#fff' }}

package/src/components/ReportHeader.tsx

@@ -58,8 +58,8 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
       <div className="flex flex-col md:flex-row items-center md:items-stretch gap-6">
         {/* Left Half: Badge Image with robust centered overlay */}
         <div className="w-full md:w-1/3 flex items-center justify-center self-stretch">
-          <div className="relative w-full max-w-xs select-none" style={{ maxWidth: 260 }}>
-            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={260} height={260} unoptimized className='w-full h-auto pointer-events-none p-6'/>
+          <div className="relative w-full max-w-xs select-none">
+            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={400} height={400} unoptimized className='w-full h-auto pointer-events-none p-10'/>
             {/* Centered overlay slightly lower on Y axis, responsive and readable */}
             <div className="pointer-events-none absolute left-1/2 top-[66%] -translate-x-1/2 -translate-y-1/2">
               <div className="font-extrabold text-black text-3xl " >

package/src/lib/auth-verify.ts

@@ -1,48 +0,0 @@
-// import { NextRequest } from 'next/server';
-// import { getServerSession } from 'next-auth';
-// import { authOptions } from '@/lib/auth';
-// import { jwtVerify, createRemoteJWKSet } from 'jose';
-
-// export type VerifiedUser = {
-//   userId: string;
-//   companyId?: string | null;
-//   idToken: string;
-// };
-
-// // Verifies Cognito ID Token from the server session or Authorization header.
-// // Returns userId (sub) and optional companyId claim if present.
-// export async function verifyCognito(req: NextRequest): Promise<VerifiedUser> {
-//   // Try to get id_token from NextAuth session first
-//   const session = await getServerSession(authOptions as any);
-//   let idToken: string | undefined;
-//   if (session.id_token) {
-//     idToken = session.id_token as string;
-//   }
-//   if (!idToken) {
-//     const authz = req.headers.get('authorization') || req.headers.get('Authorization');
-//     if (authz && authz.toLowerCase().startsWith('bearer ')) {
-//       idToken = authz.slice(7).trim();
-//     }
-//   }
-
-//   if (!idToken) {
-//     throw new Response(JSON.stringify({ error: 'Not authenticated' }), { status: 401 }) as unknown as Error;
-//   }
-
-//   const region = process.env.AWS_REGION!;
-//   const userPoolId = process.env.COGNITO_USER_POOL_ID!;
-//   const issuer = `https://cognito-idp.${region}.amazonaws.com/${userPoolId}`;
-//   const jwks = createRemoteJWKSet(new URL(`${issuer}/.well-known/jwks.json`));
-
-//   try {
-//     const { payload } = await jwtVerify(idToken, jwks, { issuer });
-//     const sub = String(payload.sub || '');
-//     if (!sub) throw new Error('Invalid token');
-//     const companyId = (payload as any)['custom:companyId'] || (payload as any).companyId || null;
-//     return { userId: sub, companyId, idToken };
-//   } catch (e) {
-//     throw new Response(JSON.stringify({ error: 'Invalid token' }), { status: 401 }) as unknown as Error;
-//   }
-// }
-
-