kyd-shared-badge 0.3.10 → 0.3.12

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -29,6 +29,7 @@ type ChatWidgetProps = Partial<{
   hintText: string;
   loginPath: string;
   headerOffset: 'auto' | 'none' | number;
+  developerName: string;
 }>;
 
 // const hexToRgba = (hex: string, alpha: number) => {
@@ -258,8 +259,8 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
                   />
                 </Reveal>
 
-                {/* Right: Contributing Factors */}
-                <Reveal className="lg:col-span-4 w-full ml-20 flex flex-col items-start justify-start" delayMs={80}>
+                {/* Right: Contributing Factors (hidden on small screens) */}
+                <Reveal className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
                   <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
                   <div className="space-y-4">
                     {(genreMapping?.['Technical'] || []).map((cat: string) => {
@@ -331,8 +332,8 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
                   barHeight={16}
                 />
               </Reveal>
-              {/* Right: Contributing Factors */}
-              <Reveal className="lg:col-span-4 w-full ml-20 flex flex-col items-start justify-start" delayMs={80}>
+              {/* Right: Contributing Factors (hidden on small screens) */}
+              <Reveal className="lg:col-span-4 w-full ml-0 lg:ml-20 hidden lg:flex flex-col items-start justify-start" delayMs={80}>
                 <div className={'text-sm font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Top Contributing Factors</div>
                 <div className="space-y-4">
                   {genreMapping?.['Risk']?.map((cat: string) => {
@@ -544,7 +545,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
         </footer>
       </Reveal>
       {/* Floating chat widget */}
-      <ChatWidget api={chatProps?.api || '/api/chat'} badgeId={badgeId} title={chatProps?.title} hintText={chatProps?.hintText} loginPath={chatProps?.loginPath} headerOffset={chatProps?.headerOffset} />
+      <ChatWidget api={chatProps?.api || '/api/chat'} badgeId={badgeId} title={chatProps?.title} hintText={chatProps?.hintText} loginPath={chatProps?.loginPath} headerOffset={chatProps?.headerOffset} developerName={developerName} />
     </div>
     </BusinessRulesProvider>
   );

package/src/chat/ChatWidget.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { FiMessageSquare, FiX, FiChevronRight } from 'react-icons/fi';
 import { useChatStreaming } from './useChatStreaming';
 import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
@@ -23,13 +24,33 @@ type Props = {
   // Optional: customize login path and header offset behavior for different host apps
   loginPath?: string; // e.g., '/login' in enterprise; defaults to '/auth/login'
   headerOffset?: 'auto' | 'none' | number; // default 'auto' (measure <header>), use 'none' when no header
+  developerName?: string; // used for starter questions
 };
 
-export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintText = 'Ask anything about the developer', badgeId, loginPath = '/auth/login', headerOffset = 'auto' }: Props) {
-  // Sidebar open state (default expanded)
-  const [open, setOpen] = useState<boolean>(() => {
-    try { const s = localStorage.getItem('kydChatSidebarOpen'); return s ? s === '1' : true; } catch { return true; }
-  });
+export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintText = 'Ask anything about the developer', badgeId, loginPath = '/auth/login', headerOffset = 'auto', developerName }: Props) {
+  // Responsive breakpoint detection (mobile if < 768px)
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const check = () => setIsMobile(typeof window !== 'undefined' && window.innerWidth < 768);
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+  // Sidebar open state (default expanded on desktop, collapsed on mobile)
+  const [open, setOpen] = useState<boolean>(true);
+  // Avoid hydration mismatches by rendering only after mount
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => { setHasMounted(true); }, []);
+  // On first mount, default collapsed on mobile (unless URL prefilled opens it)
+  useEffect(() => {
+    if (!hasMounted) return;
+    try {
+      const url = typeof window !== 'undefined' ? new URL(window.location.href) : null;
+      const prompt = url ? url.searchParams.get('chatPrompt') : null;
+      if (!prompt && isMobile) setOpen(false);
+    } catch {}
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasMounted, isMobile]);
   // Sidebar width with bounds and persistence
   const [width, setWidth] = useState<number>(() => {
     try { const w = Number(localStorage.getItem('kydChatSidebarWidth')); return Number.isFinite(w) && w >= 320 ? Math.min(w, Math.floor(window.innerWidth * 0.9)) : 420; } catch { return 420; }
@@ -100,6 +121,14 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
     </div>
   ), [title]);
 
+  // Prevent background scroll on mobile when open fullscreen
+  useEffect(() => {
+    if (!isMobile) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = open ? 'hidden' : original;
+    return () => { document.body.style.overflow = original; };
+  }, [isMobile, open]);
+
   // Persist sidebar UI state
   useEffect(() => {
     try { localStorage.setItem('kydChatSidebarOpen', open ? '1' : '0'); } catch {}
@@ -199,58 +228,114 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
     };
   }, [draggingTab]);
 
-  return (
-    <div className={'fixed z-50'} aria-live={'polite'}>
-      {/* Collapsed vertical tab (draggable) */}
+  const nameForCopy = (developerName && developerName.trim().length > 0) ? developerName : 'this developer';
+  const starterQuestions: string[] = [
+    `Tell me about ${nameForCopy}'s experience with Python.`,
+    `What are ${nameForCopy}'s strongest technical areas?`,
+    `Are there any risk or sanctions flags for ${nameForCopy}?`
+  ];
+
+  const onStarterClick = (q: string) => {
+    if (!open) setOpen(true);
+    if (!sending) {
+      // Populate input for UI and send using explicit text to avoid async state issues
+      setInput(q);
+      sendMessage(q);
+    }
+  };
+
+  if (!hasMounted) return null;
+
+  const ui = (
+    <div className={'fixed z-50'} aria-live={'polite'} style={{ zIndex: 9999 }}>
+      {/* Collapsed trigger */}
       {!open && (
-        <div style={{ position: 'fixed', right: 0, top: Math.max(headerTop + 16, tabTop), height: 160, width: 44 }}>
-          <button
-            aria-label={'Open chat sidebar'}
-            aria-expanded={open}
-            onMouseDown={(e) => { setDraggingTab(true); dragStartYRef.current = e.clientY; startTopRef.current = tabTop; tabDraggedRef.current = false; }}
-            onMouseUp={(e) => { e.preventDefault(); const dragged = tabDraggedRef.current; tabDraggedRef.current = false; setDraggingTab(false); if (!dragged) setOpen(true); }}
-            className={'h-full w-full shadow-lg border rounded-l-lg flex flex-col items-center justify-between transition hover:opacity-90'}
-            style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', cursor: draggingTab ? 'grabbing' : 'grab' }}
-          >
-            <FiMessageSquare size={18} style={{ color: 'var(--text-main)', marginTop: 8 }} />
-            <span style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', color: 'var(--text-secondary)', fontSize: 12, letterSpacing: 1 }}>Chat</span>
-            <FiChevronRight size={16} style={{ color: 'var(--text-secondary)', marginBottom: 8 }} />
-          </button>
-          {showHint && (
-            <button onClick={() => { setOpen(true); onDismissHint(); }} className={'absolute -left-2 -top-8 group max-w-xs text-left'}>
-              <div className={'px-2 py-1 rounded shadow border'}
-                   style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
-                <span className={'text-[10px]'} style={{ color: 'var(--text-main)' }}>{hintText}</span>
-              </div>
+        isMobile ? (
+          <div style={{ position: 'fixed', right: 16, bottom: 16, zIndex: 9999 }}>
+            <button
+              aria-label={'Open chat'}
+              aria-expanded={open}
+              onClick={() => setOpen(true)}
+              className={'shadow-lg border rounded-full flex items-center justify-center transition hover:opacity-90'}
+              style={{ width: 56, height: 56, background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
+            >
+              <FiMessageSquare size={22} style={{ color: 'var(--text-main)' }} />
             </button>
-          )}
-        </div>
+            {showHint && (
+              <button onClick={() => { setOpen(true); onDismissHint(); }} className={'absolute right-full mr-2 bottom-1/2 translate-y-1/2'}>
+                <div className={'px-2 py-1 rounded shadow border'}
+                     style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+                  <span className={'text-[10px]'} style={{ color: 'var(--text-main)' }}>{hintText}</span>
+                </div>
+              </button>
+            )}
+          </div>
+        ) : (
+          <div style={{ position: 'fixed', right: 0, top: Math.max(headerTop + 16, tabTop), height: 160, width: 44 }}>
+            <button
+              aria-label={'Open chat sidebar'}
+              aria-expanded={open}
+              onMouseDown={(e) => { setDraggingTab(true); dragStartYRef.current = e.clientY; startTopRef.current = tabTop; tabDraggedRef.current = false; }}
+              onMouseUp={(e) => { e.preventDefault(); const dragged = tabDraggedRef.current; tabDraggedRef.current = false; setDraggingTab(false); if (!dragged) setOpen(true); }}
+              className={'h-full w-full shadow-lg border rounded-l-lg flex flex-col items-center justify-between transition hover:opacity-90'}
+              style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', cursor: draggingTab ? 'grabbing' : 'grab' }}
+            >
+              <FiMessageSquare size={18} style={{ color: 'var(--text-main)', marginTop: 8 }} />
+              <span style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', color: 'var(--text-secondary)', fontSize: 12, letterSpacing: 1 }}>Chat</span>
+              <FiChevronRight size={16} style={{ color: 'var(--text-secondary)', marginBottom: 8 }} />
+            </button>
+            {showHint && (
+              <button onClick={() => { setOpen(true); onDismissHint(); }} className={'absolute -left-2 -top-8 group max-w-xs text-left'}>
+                <div className={'px-2 py-1 rounded shadow border'}
+                     style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+                  <span className={'text-[10px]'} style={{ color: 'var(--text-main)' }}>{hintText}</span>
+                </div>
+              </button>
+            )}
+          </div>
+        )
       )}
 
-      {/* Expanded right sidebar */}
+      {/* Expanded panel */}
       {open && (
         <aside
           role={'complementary'}
           aria-label={'Chat sidebar'}
-          style={{ position: 'fixed', top: headerTop, right: 0, bottom: 0, width, maxWidth: '92vw' }}
+          style={isMobile ? { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, width: '100vw', zIndex: 10000 } : { position: 'fixed', top: headerTop, right: 0, bottom: 0, width, maxWidth: '92vw', zIndex: 9999 }}
           className={'shadow-xl border flex flex-col overflow-hidden'}
         >
-          {/* Left-edge resizer */}
-          <div
-            onMouseDown={(e) => { setDraggingResize(true); dragStartXRef.current = e.clientX; startWidthRef.current = width; }}
-            aria-hidden={'true'}
-            style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 6, cursor: 'col-resize', zIndex: 1 }}
-          />
+          {/* Left-edge resizer (desktop only) */}
+          {!isMobile && (
+            <div
+              onMouseDown={(e) => { setDraggingResize(true); dragStartXRef.current = e.clientX; startWidthRef.current = width; }}
+              aria-hidden={'true'}
+              style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 6, cursor: 'col-resize', zIndex: 1 }}
+            />
+          )}
           {/* Panel chrome */}
           <div style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', height: '100%', display: 'flex', flexDirection: 'column' }} className={'bg-[var(--content-card-background)] border-l'}>
             {header}
             <div className={'flex-1 flex flex-col'} style={{ minHeight: 0 }}>
               <div className={'flex-1'} style={{ minHeight: 0 }}>
                 <MainContainer style={{ height: '100%', position: 'relative', background: 'var(--content-card-background)', border: 'none'}}>
-                  <ChatContainer style={{ height: '100%' }}>
+                  <ChatContainer style={{ height: '100%', border: 'none'}}>
                     <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' }} />
+                      <div className={'px-3 py-2'}>
+                        <div className={'text-xs mb-2'} style={{ color: 'var(--text-secondary)' }}>Try asking:</div>
+                        <div className={'flex flex-wrap gap-2'}>
+                          {starterQuestions.map((q, i) => (
+                            <button
+                              key={i}
+                              type={'button'}
+                              onClick={() => onStarterClick(q)}
+                              className={'px-2 py-2 text-start rounded-lg border text-xs hover:text-[var(--icon-accent)] transition bg-[var(--bubble-background)] text-[var(--bubble-foreground)] border-[var(--icon-button-secondary)]'}
+                            >
+                              {q}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
                     )}
                     {messages
                       .filter(m => !(m.role === 'assistant' && (m.content || '').trim().length === 0))
@@ -299,7 +384,7 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
               </MainContainer>
               </div>
               <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)' }}>
+                <div className={'flex items-end gap-2 p-2 border-t'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)', paddingBottom: isMobile ? 'max(8px, env(safe-area-inset-bottom))' : undefined }}>
                   <input
                     aria-label={'Type your message'}
                     className={'flex-1 px-3 py-2 rounded kyd-chat-input'}
@@ -336,6 +421,8 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
       )}
     </div>
   );
+
+  return typeof document !== 'undefined' ? createPortal(ui, document.body) : ui;
 }
 
 

package/src/components/GaugeCard.tsx

@@ -40,6 +40,7 @@ export default function GaugeCard({
 }) {
   const pct = Math.max(0, Math.min(100, Math.round(Number(percent ?? 0))));
   const displayLabel = label || '';
+  // Use a fixed internal coordinate system and scale the SVG to container for responsiveness
   const size = 280;
   const strokeWidth = 32;
   const radius = (size - strokeWidth) / 2;
@@ -83,9 +84,9 @@ export default function GaugeCard({
           </span>
         )}
       </div>
-      <div className="flex-grow flex flex-col items-center justify-center" style={{ minHeight: 250 }}>
-        <div className="relative group" style={{ width: size, height: size / 2 }}>
-          <svg width={size} height={size / 2} viewBox={`0 0 ${size} ${size/2}`}>
+      <div className="flex-grow flex flex-col items-center justify-center" style={{ minHeight: 200 }}>
+        <div className="relative group" style={{ width: '100%', aspectRatio: '2 / 1', maxWidth: 360 }}>
+          <svg width={'100%'} height={'100%'} viewBox={`0 0 ${size} ${size/2}`} preserveAspectRatio={'xMidYMid meet'}>
             <path d={`M ${strokeWidth/2} ${size/2} A ${radius} ${radius} 0 0 1 ${size-strokeWidth/2} ${size/2}`} stroke={'var(--icon-button-secondary)'} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" />
             <path d={`M ${strokeWidth/2} ${size/2} A ${radius} ${radius} 0 0 1 ${size-strokeWidth/2} ${size/2}`} stroke={progressColor} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" strokeDasharray={`${dash},${circumference}`} />
             <line x1={size/2} y1={size/2} x2={size/2 + radius * Math.cos(Math.PI * progress - Math.PI)} y2={size/2 + radius * Math.sin(Math.PI * progress - Math.PI)} stroke={'var(--text-main)'} strokeWidth="2" />

package/src/components/GraphInsights.tsx

@@ -151,9 +151,7 @@ const GraphInsights = ({
       percentList = Object.entries(scoringSummary.category_scores).map(([cat, entry]) => ({
         category: cat,
         // Prefer business, else combined, else atomic percent_progress
-        percent: Number(
-          (entry?.business?.percent_progress ?? entry?.combined?.percent_progress ?? entry?.atomic?.percent_progress ?? 0)
-        ),
+        percent: Number(entry?.business?.percent_progress),
       }));
     }
 

package/src/components/RiskCard.tsx

@@ -41,19 +41,27 @@ export default function RiskCard({
     return red;
   };
 
+  // color bands by bar position (tallest -> lowest)
+  // indices 4 and 3 (highest bars) => red, index 2 => yellow, indices 1 and 0 => green
+  const colorForIndex = (index: number) => {
+    if (index >= 3) return red;
+    if (index === 2) return yellow;
+    return green;
+  };
+
   const headerTint = hexToRgba(pickTint(pctGood), 0.06);
 
   // bar heights ascending representation
   const bars = [40, 60, 85, 110, 140];
-  let activeIndex = 0; // Default to the shortest bar (highest risk)
+  let activeIndex = 4; // Default to the highest bar (0% score)
   if (pctGood >= 80) {
-    activeIndex = 4;
+    activeIndex = 0;
   } else if (pctGood >= 60) {
-    activeIndex = 3;
+    activeIndex = 1;
   } else if (pctGood >= 40) {
     activeIndex = 2;
   } else if (pctGood >= 20) {
-    activeIndex = 1;
+    activeIndex = 3;
   }
 
   return (
@@ -88,7 +96,15 @@ export default function RiskCard({
       <div className="flex flex-col items-center justify-center gap-1" style={{ minHeight: 250 }}>
         <div className="relative group flex items-end justify-center gap-3">
           {bars.map((h, i) => (
-            <div key={i} style={{ width: 36, height: h, backgroundColor: i === activeIndex ? 'var(--text-main)' : 'var(--icon-button-secondary)', borderRadius: 4 }} />
+            <div
+              key={i}
+              style={{
+                width: 36,
+                height: h,
+                backgroundColor: i === activeIndex ? colorForIndex(i) : 'var(--icon-button-secondary)',
+                borderRadius: 4,
+              }}
+            />
           ))}
           {(tooltipText || description) && (
             <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">

package/src/lib/context.ts

@@ -93,7 +93,7 @@ export function buildAllContextPrompt(cleanedData: any, reportGraphData: GraphIn
     'Prefer concise, direct answers.',
     'Use ONLY the JSON provided to answer the user.',
     'Never invent or fetch external data.',
-    'If data is missing, say so briefly.',
+    'If data is missing, say so briefly. Assume the question is about the report, and assume the user is asking about the report, do not assume the user is asking you to perform a task other than looking at the report information.',
     'Return natural language for the main reply.',
     'When referring to the input JSON, use the term "Report Information" or "Report"',
     'You are speaking to a non-technical user, ensure you do not use variable-esk language like "based on linkedin_provider", instead use "based the LinkedIn profile"',