kyd-shared-badge 0.3.8 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.8",
+  "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,7 +49,7 @@ 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(() => {
@@ -117,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();
@@ -133,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/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);
@@ -32,7 +34,8 @@ export function useChatStreaming(cfg: UseChatStreamingConfig) {
       // 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)}`;
+      const base = loginPath || '/auth/login';
+      const loginUrl = `${base}?callbackUrl=${encodeURIComponent(currentPath)}&chatPrompt=${encodeURIComponent(promptText)}`;
       setTimeout(() => {
         if (typeof window !== 'undefined') window.location.href = loginUrl;
       }, 700);