kyd-shared-badge 0.3.7 → 0.3.9

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -23,6 +23,13 @@ import { BusinessRulesProvider } from './components/BusinessRulesContext';
 import Reveal from './components/Reveal';
 import { formatLocalDateTime } from './utils/date';
 import ChatWidget from './chat/ChatWidget';
+type ChatWidgetProps = Partial<{
+  api: string;
+  title: string;
+  hintText: string;
+  loginPath: string;
+  headerOffset: 'auto' | 'none' | number;
+}>;
 
 // const hexToRgba = (hex: string, alpha: number) => {
 //   const clean = hex.replace('#', '');
@@ -32,7 +39,7 @@ import ChatWidget from './chat/ChatWidget';
 //   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 // };
 
-const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
+const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps }) => {
   const { 
     badgeId, 
     developerName, 
@@ -534,7 +541,7 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
         </footer>
       </Reveal>
       {/* Floating chat widget */}
-      <ChatWidget api={'/api/chat'} badgeId={badgeId} />
+      <ChatWidget api={chatProps?.api || '/api/chat'} badgeId={badgeId} title={chatProps?.title} hintText={chatProps?.hintText} loginPath={chatProps?.loginPath} headerOffset={chatProps?.headerOffset} />
     </div>
     </BusinessRulesProvider>
   );

package/src/chat/ChatWidget.tsx

@@ -20,9 +20,12 @@ type Props = {
   title?: string;
   hintText?: string;
   badgeId: string;
+  // 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
 };
 
-export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintText = 'Ask anything about the developer', badgeId }: Props) {
+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; }
@@ -46,13 +49,26 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
   const tabDraggedRef = useRef(false);
   const [headerTop, setHeaderTop] = useState(0);
   const [showHint, setShowHint] = useState(false);
-  const { messages, input, setInput, sending, sendMessage, cancel } = useChatStreaming({ api, badgeId });
+  const { messages, input, setInput, sending, sendMessage, cancel } = useChatStreaming({ api, badgeId, loginPath });
   const listRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
   }, [messages, open]);
 
+  // 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);
+      }
+    } catch {}
+  }, [setInput]);
+
   // Optional hint (only shows if user hasn't dismissed before and when collapsed)
   useEffect(() => {
     try {
@@ -104,13 +120,23 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
     return () => window.removeEventListener('keydown', onKey);
   }, [open]);
 
-  // Measure sticky header height so the sidebar does not overlap it
+  // Header offset handling to keep chat below any sticky header in host app
   useEffect(() => {
+    if (headerOffset === 'none') {
+      setHeaderTop(0);
+      setTabTop(t => Math.max(16, t));
+      return;
+    }
+    if (typeof headerOffset === 'number' && Number.isFinite(headerOffset)) {
+      const h = Math.max(0, Math.floor(headerOffset));
+      setHeaderTop(h);
+      setTabTop(t => Math.max(h + 16, t));
+      return;
+    }
     const measure = () => {
       const el = document.querySelector('header');
       const h = el ? Math.floor(el.getBoundingClientRect().height) : 0;
       setHeaderTop(h);
-      // Keep collapsed tab within bounds beneath header
       setTabTop(t => Math.max(h + 16, t));
     };
     measure();
@@ -120,7 +146,7 @@ export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintT
       window.removeEventListener('resize', measure);
       window.removeEventListener('scroll', measure);
     };
-  }, []);
+  }, [headerOffset]);
 
   // Drag to resize (left edge of sidebar)
   useEffect(() => {

package/src/chat/ChatWindowStreaming.tsx

@@ -13,6 +13,18 @@ export default function ChatWindowStreaming({ api = '/api/chat', badgeId }: { ap
     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">

package/src/chat/useChatStreaming.ts

@@ -8,10 +8,12 @@ export type ChatMessage = { id: string; role: Role; content: string };
 export type UseChatStreamingConfig = {
   api: string; // e.g. /api/chat
   badgeId: string;
+  // Optional login path for redirect when 401 occurs. Defaults to '/auth/login' for portability across apps.
+  loginPath?: string;
 };
 
 export function useChatStreaming(cfg: UseChatStreamingConfig) {
-  const { api, badgeId } = cfg;
+  const { api, badgeId, loginPath = '/auth/login' } = cfg;
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [input, setInput] = useState('');
   const [sending, setSending] = useState(false);
@@ -28,6 +30,17 @@ 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 base = loginPath || '/auth/login';
+      const loginUrl = `${base}?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 +48,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 +60,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,