@xcelsior/ui-chat 1.0.7 → 2.0.0

package/src/hooks/useResizableWidget.ts

@@ -0,0 +1,324 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export type ResizeEdge = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+
+interface UseResizableWidgetOptions {
+    initialWidth?: number;
+    initialHeight?: number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    storageKey?: string;
+    enabled?: boolean;
+}
+
+export interface UseResizableWidgetReturn {
+    width: number;
+    height: number;
+    isResizing: boolean;
+    /** Attach to the widget container for edge/corner resize zones */
+    containerResizeProps: {
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseDown: (e: React.MouseEvent) => void;
+        onMouseLeave: (e: React.MouseEvent) => void;
+        onTouchStart: (e: React.TouchEvent) => void;
+    };
+    /** True when user hovers near a resize edge — use for visual hint */
+    isNearEdge: boolean;
+    /** Which edge/corner the user is near or dragging */
+    activeEdge: ResizeEdge | null;
+}
+
+const STORAGE_KEY = 'xcelsior-chat-size';
+const EDGE_ZONE = 8; // px from edge to trigger resize cursor
+
+const CURSOR_MAP: Record<ResizeEdge, string> = {
+    n: 'ns-resize',
+    s: 'ns-resize',
+    e: 'ew-resize',
+    w: 'ew-resize',
+    ne: 'nesw-resize',
+    nw: 'nwse-resize',
+    se: 'nwse-resize',
+    sw: 'nesw-resize',
+};
+
+function readStoredSize(
+    key: string,
+    fallbackWidth: number,
+    fallbackHeight: number,
+): { width: number; height: number } {
+    try {
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            if (typeof parsed.width === 'number' && typeof parsed.height === 'number') {
+                return { width: parsed.width, height: parsed.height };
+            }
+        }
+    } catch {
+        // localStorage unavailable
+    }
+    return { width: fallbackWidth, height: fallbackHeight };
+}
+
+function persistSize(key: string, width: number, height: number) {
+    try {
+        localStorage.setItem(key, JSON.stringify({ width, height }));
+    } catch {
+        // Storage unavailable
+    }
+}
+
+function isMobile(): boolean {
+    return typeof window !== 'undefined' && window.innerWidth < 768;
+}
+
+/** Detect which edge/corner the mouse is near */
+function detectEdge(
+    e: { clientX: number; clientY: number },
+    rect: DOMRect,
+): ResizeEdge | null {
+    const { clientX: x, clientY: y } = e;
+    const nearTop = y - rect.top < EDGE_ZONE;
+    const nearBottom = rect.bottom - y < EDGE_ZONE;
+    const nearLeft = x - rect.left < EDGE_ZONE;
+    const nearRight = rect.right - x < EDGE_ZONE;
+
+    if (nearTop && nearLeft) return 'nw';
+    if (nearTop && nearRight) return 'ne';
+    if (nearBottom && nearLeft) return 'sw';
+    if (nearBottom && nearRight) return 'se';
+    if (nearTop) return 'n';
+    if (nearBottom) return 's';
+    if (nearLeft) return 'w';
+    if (nearRight) return 'e';
+    return null;
+}
+
+export function useResizableWidget({
+    initialWidth = 380,
+    initialHeight = 580,
+    minWidth = 320,
+    minHeight = 400,
+    maxWidth = 800,
+    maxHeight = 900,
+    storageKey = STORAGE_KEY,
+    enabled = true,
+}: UseResizableWidgetOptions = {}): UseResizableWidgetReturn {
+    const [size, setSize] = useState<{ width: number; height: number }>(() => {
+        if (typeof window === 'undefined') return { width: initialWidth, height: initialHeight };
+        return readStoredSize(storageKey, initialWidth, initialHeight);
+    });
+    const [isResizing, setIsResizing] = useState(false);
+    const [isNearEdge, setIsNearEdge] = useState(false);
+    const [activeEdge, setActiveEdge] = useState<ResizeEdge | null>(null);
+
+    const sizeRef = useRef(size);
+    sizeRef.current = size;
+
+    const dragRef = useRef<{
+        edge: ResizeEdge;
+        startX: number;
+        startY: number;
+        startWidth: number;
+        startHeight: number;
+    } | null>(null);
+
+    const containerRef = useRef<HTMLElement | null>(null);
+
+    const clamp = useCallback(
+        (w: number, h: number) => {
+            const mxW = Math.min(maxWidth, window.innerWidth - 24);
+            const mxH = Math.min(maxHeight, window.innerHeight - 100);
+            return {
+                width: Math.round(Math.max(minWidth, Math.min(mxW, w))),
+                height: Math.round(Math.max(minHeight, Math.min(mxH, h))),
+            };
+        },
+        [minWidth, minHeight, maxWidth, maxHeight],
+    );
+
+    /** Calculate new size from drag delta based on which edge is being dragged */
+    const calcSize = useCallback(
+        (dx: number, dy: number) => {
+            if (!dragRef.current) return sizeRef.current;
+            const { edge, startWidth, startHeight } = dragRef.current;
+
+            let w = startWidth;
+            let h = startHeight;
+
+            // Horizontal: east edges expand right, west edges expand left (invert delta)
+            if (edge.includes('e')) w = startWidth + dx;
+            if (edge.includes('w')) w = startWidth - dx;
+
+            // Vertical: south edges expand down, north edges expand up (invert delta)
+            if (edge.includes('s')) h = startHeight + dy;
+            if (edge.includes('n')) h = startHeight - dy;
+
+            return clamp(w, h);
+        },
+        [clamp],
+    );
+
+    // ─── Mouse handlers ──────────────────────────────────────────────────
+
+    const handleDocMouseMove = useCallback(
+        (e: MouseEvent) => {
+            if (!dragRef.current) return;
+            const dx = e.clientX - dragRef.current.startX;
+            const dy = e.clientY - dragRef.current.startY;
+            setSize(calcSize(dx, dy));
+        },
+        [calcSize],
+    );
+
+    const handleDocMouseUp = useCallback(
+        (e: MouseEvent) => {
+            if (!dragRef.current) return;
+            const dx = e.clientX - dragRef.current.startX;
+            const dy = e.clientY - dragRef.current.startY;
+            const final = calcSize(dx, dy);
+            persistSize(storageKey, final.width, final.height);
+            dragRef.current = null;
+            setIsResizing(false);
+            setActiveEdge(null);
+            document.body.style.cursor = '';
+            document.removeEventListener('mousemove', handleDocMouseMove);
+            document.removeEventListener('mouseup', handleDocMouseUp);
+        },
+        [calcSize, storageKey, handleDocMouseMove],
+    );
+
+    // ─── Touch handlers ──────────────────────────────────────────────────
+
+    const handleDocTouchMove = useCallback(
+        (e: TouchEvent) => {
+            if (!dragRef.current || e.touches.length === 0) return;
+            e.preventDefault();
+            const t = e.touches[0];
+            const dx = t.clientX - dragRef.current.startX;
+            const dy = t.clientY - dragRef.current.startY;
+            setSize(calcSize(dx, dy));
+        },
+        [calcSize],
+    );
+
+    const handleDocTouchEnd = useCallback(
+        (e: TouchEvent) => {
+            if (!dragRef.current) return;
+            const t = e.changedTouches[0];
+            if (t) {
+                const dx = t.clientX - dragRef.current.startX;
+                const dy = t.clientY - dragRef.current.startY;
+                const final = calcSize(dx, dy);
+                persistSize(storageKey, final.width, final.height);
+            }
+            dragRef.current = null;
+            setIsResizing(false);
+            setActiveEdge(null);
+            document.removeEventListener('touchmove', handleDocTouchMove);
+            document.removeEventListener('touchend', handleDocTouchEnd);
+        },
+        [calcSize, storageKey, handleDocTouchMove],
+    );
+
+    // ─── Cleanup ─────────────────────────────────────────────────────────
+
+    useEffect(() => {
+        return () => {
+            document.removeEventListener('mousemove', handleDocMouseMove);
+            document.removeEventListener('mouseup', handleDocMouseUp);
+            document.removeEventListener('touchmove', handleDocTouchMove);
+            document.removeEventListener('touchend', handleDocTouchEnd);
+            document.body.style.cursor = '';
+        };
+    }, [handleDocMouseMove, handleDocMouseUp, handleDocTouchMove, handleDocTouchEnd]);
+
+    // ─── Container event props ───────────────────────────────────────────
+
+    const onContainerMouseMove = useCallback(
+        (e: React.MouseEvent) => {
+            if (!enabled || isMobile() || isResizing) return;
+            const el = e.currentTarget as HTMLElement;
+            containerRef.current = el;
+            const rect = el.getBoundingClientRect();
+            const edge = detectEdge(e, rect);
+            setIsNearEdge(!!edge);
+            setActiveEdge(edge);
+            el.style.cursor = edge ? CURSOR_MAP[edge] : '';
+        },
+        [enabled, isResizing],
+    );
+
+    const onContainerMouseDown = useCallback(
+        (e: React.MouseEvent) => {
+            if (!enabled || isMobile() || !activeEdge) return;
+            // Only start resize if near an edge
+            e.preventDefault();
+            e.stopPropagation();
+            dragRef.current = {
+                edge: activeEdge,
+                startX: e.clientX,
+                startY: e.clientY,
+                startWidth: sizeRef.current.width,
+                startHeight: sizeRef.current.height,
+            };
+            setIsResizing(true);
+            document.body.style.cursor = CURSOR_MAP[activeEdge];
+            document.addEventListener('mousemove', handleDocMouseMove);
+            document.addEventListener('mouseup', handleDocMouseUp);
+        },
+        [enabled, activeEdge, handleDocMouseMove, handleDocMouseUp],
+    );
+
+    const onContainerMouseLeave = useCallback(
+        (_e: React.MouseEvent) => {
+            if (!isResizing) {
+                setIsNearEdge(false);
+                setActiveEdge(null);
+                if (containerRef.current) containerRef.current.style.cursor = '';
+            }
+        },
+        [isResizing],
+    );
+
+    const onContainerTouchStart = useCallback(
+        (e: React.TouchEvent) => {
+            if (!enabled || isMobile() || e.touches.length === 0) return;
+            const el = e.currentTarget as HTMLElement;
+            const rect = el.getBoundingClientRect();
+            const t = e.touches[0];
+            const edge = detectEdge(t, rect);
+            if (!edge) return;
+
+            dragRef.current = {
+                edge,
+                startX: t.clientX,
+                startY: t.clientY,
+                startWidth: sizeRef.current.width,
+                startHeight: sizeRef.current.height,
+            };
+            setIsResizing(true);
+            setActiveEdge(edge);
+            document.addEventListener('touchmove', handleDocTouchMove, { passive: false });
+            document.addEventListener('touchend', handleDocTouchEnd);
+        },
+        [enabled, handleDocTouchMove, handleDocTouchEnd],
+    );
+
+    return {
+        width: size.width,
+        height: size.height,
+        isResizing,
+        isNearEdge,
+        activeEdge,
+        containerResizeProps: {
+            onMouseMove: onContainerMouseMove,
+            onMouseDown: onContainerMouseDown,
+            onMouseLeave: onContainerMouseLeave,
+            onTouchStart: onContainerTouchStart,
+        },
+    };
+}

package/src/index.tsx

@@ -6,7 +6,10 @@ export { Chat } from './components/Chat';
 // Individual components (for custom implementations)
 export { ChatHeader } from './components/ChatHeader';
 export { ChatInput } from './components/ChatInput';
+export { MarkdownMessage } from './components/MarkdownMessage';
 export { MessageItem } from './components/MessageItem';
+export { ThinkingIndicator } from './components/ThinkingIndicator';
+export type { ThinkingIndicatorProps } from './components/ThinkingIndicator';
 export { MessageList } from './components/MessageList';
 export { TypingIndicator } from './components/TypingIndicator';
 export { PreChatForm } from './components/PreChatForm';
@@ -44,6 +47,7 @@ import type {
     ConversationStatus,
     ConversationPriority,
     ConversationChannel,
+    UseMessagesReturn,
 } from './types';
 
 export type {
@@ -63,4 +67,5 @@ export type {
     ConversationStatus,
     ConversationPriority,
     ConversationChannel,
+    UseMessagesReturn,
 };

package/src/types.ts

@@ -15,16 +15,18 @@ export interface IMessage {
     id: string;
     conversationId: string;
     senderId: string;
-    senderType: 'customer' | 'agent' | 'system';
+    senderType: 'customer' | 'agent' | 'bot' | 'system';
     content: string;
     messageType: MessageType;
     createdAt: string;
     status: MessageStatus;
+    feedback?: 'good' | 'wrong' | 'corrected' | null;
+    confidence?: number | null;
     metadata?: Record<string, unknown>;
 }
 
 // Conversation types
-export type ConversationStatus = 'open' | 'pending' | 'closed' | 'archived';
+export type ConversationStatus = 'open' | 'pending' | 'closed' | 'archived' | 'bot_handling' | 'pending_agent' | 'agent_active';
 export type ConversationPriority = 'low' | 'medium' | 'high' | 'urgent';
 export type ConversationChannel = 'web' | 'mobile' | 'email';
 
@@ -49,7 +51,7 @@ export interface IConversation {
 
 // WebSocket message types
 export interface IWebSocketMessage {
-    type: 'message' | 'typing' | 'read' | 'connected' | 'error' | 'system';
+    type: 'message' | 'typing' | 'read' | 'connected' | 'error' | 'system' | 'escalation_requested' | 'bot_response' | 'conversation_updated';
     data: any;
 }
 
@@ -85,6 +87,26 @@ export interface IUploadedFile {
     markdown?: string;
 }
 
+// Theme configuration
+export interface IChatTheme {
+    primary?: string;
+    primaryStrong?: string;
+    background?: string;
+    backgroundAlt?: string;
+    text?: string;
+    textMuted?: string;
+    statusPositive?: string;
+    statusCaution?: string;
+    statusNegative?: string;
+    borderColor?: string;
+}
+
+// Widget position
+export type WidgetPosition = 'left' | 'right' | 'auto';
+
+// Identity collection mode
+export type IdentityCollectionMode = 'progressive' | 'form' | 'none';
+
 // Chat widget configuration
 export interface IChatConfig {
     // WebSocket connection
@@ -92,8 +114,8 @@ export interface IChatConfig {
     conversationId?: string;
     apiKey: string;
 
-    // User information
-    currentUser: IUser;
+    // User information (optional for anonymous mode)
+    currentUser?: IUser;
 
     // File upload
     fileUpload?: IFileUploadConfig;
@@ -116,12 +138,22 @@ export interface IChatConfig {
      */
     disableWebSocket?: boolean;
 
+    // Theme
+    theme?: IChatTheme;
+
+    // Widget position (default: 'auto' — reads localStorage, falls back to 'right')
+    position?: WidgetPosition;
+
+    // Identity collection (default: 'progressive' — no pre-chat form)
+    identityCollection?: IdentityCollectionMode;
+
     // Callbacks
     onMessageSent?: (message: IMessage) => void;
     onMessageReceived?: (message: IMessage) => void;
     onConversationChange?: (conversation: IConversation) => void;
     onConnectionChange?: (connected: boolean) => void;
     onError?: (error: Error) => void;
+    onConversationRated?: (rating: 'positive' | 'negative') => void;
 
     // Toast notifications
     toast?: {
@@ -131,6 +163,20 @@ export interface IChatConfig {
     };
 }
 
+// UseMessages return type
+export interface UseMessagesReturn {
+    messages: IMessage[];
+    addMessage: (message: IMessage) => void;
+    updateMessageStatus: (messageId: string, status: IMessage['status']) => void;
+    clearMessages: () => void;
+    isLoading: boolean;
+    error: Error | null;
+    loadMore: () => Promise<void>;
+    hasMore: boolean;
+    isLoadingMore: boolean;
+    isBotThinking: boolean;
+}
+
 // API Response types
 export interface IApiResponse<T> {
     success: boolean;

package/src/utils/markdown-styles.ts

@@ -0,0 +1,140 @@
+import type { CSSProperties } from 'react';
+import type { IChatTheme } from '../types';
+
+export interface MarkdownStyles {
+    paragraph: CSSProperties;
+    strong: CSSProperties;
+    emphasis: CSSProperties;
+    link: CSSProperties;
+    list: CSSProperties;
+    listItem: CSSProperties;
+    code: CSSProperties;
+    codeBlock: CSSProperties;
+    heading: CSSProperties;
+    blockquote: CSSProperties;
+    hr: CSSProperties;
+}
+
+export function getMarkdownStyles(
+    theme?: IChatTheme,
+    isLightTheme?: boolean,
+): MarkdownStyles {
+    const primaryColor = theme?.primary || '#337eff';
+    const textColor = theme?.text || (isLightTheme ? '#1a1a2e' : '#f7f7f8');
+
+    // Slightly brightened text for strong elements
+    const strongColor = isLightTheme
+        ? 'rgba(0,0,0,0.9)'
+        : 'rgba(255,255,255,0.95)';
+
+    // Subtle background for inline code
+    const inlineCodeBg = isLightTheme
+        ? 'rgba(0,0,0,0.06)'
+        : 'rgba(255,255,255,0.08)';
+
+    // Darker background for code blocks
+    const codeBlockBg = isLightTheme
+        ? 'rgba(0,0,0,0.04)'
+        : 'rgba(0,0,0,0.25)';
+
+    const codeBlockBorder = isLightTheme
+        ? '1px solid rgba(0,0,0,0.08)'
+        : '1px solid rgba(255,255,255,0.06)';
+
+    const blockquoteBorder = isLightTheme
+        ? `3px solid ${primaryColor}60`
+        : `3px solid ${primaryColor}80`;
+
+    const blockquoteBg = isLightTheme
+        ? 'rgba(0,0,0,0.02)'
+        : 'rgba(255,255,255,0.02)';
+
+    return {
+        paragraph: {
+            margin: '0 0 8px 0',
+            lineHeight: '1.6',
+            color: textColor,
+        },
+
+        strong: {
+            fontWeight: 600,
+            color: strongColor,
+        },
+
+        emphasis: {
+            fontStyle: 'italic',
+            color: textColor,
+        },
+
+        link: {
+            color: primaryColor,
+            textDecoration: 'underline',
+            textUnderlineOffset: '2px',
+            cursor: 'pointer',
+        },
+
+        list: {
+            paddingLeft: '20px',
+            margin: '8px 0',
+            color: textColor,
+        },
+
+        listItem: {
+            margin: '4px 0',
+            lineHeight: '1.5',
+            color: textColor,
+        },
+
+        code: {
+            fontFamily:
+                'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+            fontSize: '0.875em',
+            backgroundColor: inlineCodeBg,
+            padding: '2px 6px',
+            borderRadius: '4px',
+            color: textColor,
+        },
+
+        codeBlock: {
+            fontFamily:
+                'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+            fontSize: '0.8125em',
+            backgroundColor: codeBlockBg,
+            border: codeBlockBorder,
+            padding: '12px',
+            borderRadius: '8px',
+            overflowX: 'auto',
+            margin: '8px 0',
+            color: textColor,
+            lineHeight: '1.5',
+            display: 'block',
+            whiteSpace: 'pre',
+        },
+
+        heading: {
+            fontWeight: 600,
+            marginTop: '12px',
+            marginBottom: '6px',
+            color: strongColor,
+            lineHeight: '1.3',
+        },
+
+        blockquote: {
+            borderLeft: blockquoteBorder,
+            backgroundColor: blockquoteBg,
+            margin: '8px 0',
+            padding: '6px 12px',
+            borderRadius: '0 4px 4px 0',
+            color: textColor,
+            fontStyle: 'italic',
+        },
+
+        hr: {
+            border: 'none',
+            borderTop: isLightTheme
+                ? '1px solid rgba(0,0,0,0.1)'
+                : '1px solid rgba(255,255,255,0.08)',
+            margin: '12px 0',
+        },
+    };
+}

package/storybook-static/assets/BrandIcons-Cjy5INAp.js

@@ -0,0 +1,4 @@
+import{j as a}from"./jsx-runtime-Cf8x2fCZ.js";function i({size:e=24,color:r="white",className:t="",style:n}){return a.jsxs("svg",{width:e,height:e,viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t,style:n,"aria-hidden":"true",children:[a.jsx("path",{d:"M20.582 15.027L31.849 0.036H24.808L17.039 10.303L20.582 15.027ZM24.808 31.837H31.849L20.582 16.846L17.039 21.57L24.808 31.837Z",fill:r}),a.jsx("path",{d:"M14.313 15.027H18.402L7.135 0.036H0.185L9.406 12.392C10.587 13.983 12.359 15.027 14.313 15.027Z",fill:r}),a.jsx("path",{d:"M0.185 31.837H7.135L18.402 16.846H14.313C12.359 16.846 10.588 17.891 9.406 19.481L0.185 31.837Z",fill:r})]})}function s({size:e=28,color:r="white",className:t="",style:n}){return a.jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:r,strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",className:t,style:n,"aria-hidden":"true",children:a.jsx("path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"})})}function l({size:e=40,className:r=""}){const t=Math.round(e*.55);return a.jsx("div",{className:`flex items-center justify-center rounded-full ${r}`,style:{width:e,height:e,background:"linear-gradient(135deg, #337eff, #005eff)"},children:a.jsx(i,{size:t,color:"white"})})}try{i.displayName="XcelsiorSymbol",i.__docgenInfo={description:`Xcelsior "X" symbol mark (from favicon-brand.svg)
+Reusable across the chat widget — FAB button, avatar, header, etc.`,displayName:"XcelsiorSymbol",props:{size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"number | undefined"}},color:{defaultValue:{value:"white"},description:"",name:"color",required:!1,type:{name:"string | undefined"}},className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"string | undefined"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties | undefined"}}}}}catch{}try{s.displayName="ChatBubbleIcon",s.__docgenInfo={description:`Chat bubble icon for the FAB launcher button.
+Instantly recognizable as a chat trigger.`,displayName:"ChatBubbleIcon",props:{size:{defaultValue:{value:"28"},description:"",name:"size",required:!1,type:{name:"number | undefined"}},color:{defaultValue:{value:"white"},description:"",name:"color",required:!1,type:{name:"string | undefined"}},className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"string | undefined"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties | undefined"}}}}}catch{}try{l.displayName="XcelsiorAvatar",l.__docgenInfo={description:`Xcelsior "X" avatar — symbol inside a gradient circle
+Used as bot avatar in messages and chat header`,displayName:"XcelsiorAvatar",props:{size:{defaultValue:{value:"40"},description:"",name:"size",required:!1,type:{name:"number | undefined"}},className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"string | undefined"}}}}}catch{}export{s as C,i as X,l as a};

package/storybook-static/assets/BrandIcons.stories-BeVC6svr.js

@@ -0,0 +1,64 @@
+import{j as e}from"./jsx-runtime-Cf8x2fCZ.js";import{X as s,a as i}from"./BrandIcons-Cjy5INAp.js";import"./index-yBjzXJbu.js";const H={title:"Brand/Icons",parameters:{layout:"padded"},tags:["autodocs"]},a={render:()=>e.jsxs("div",{className:"flex items-center gap-6 p-4",children:[e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(s,{size:16,color:"#337eff"}),e.jsx("span",{className:"text-xs text-gray-500",children:"16px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(s,{size:24,color:"#337eff"}),e.jsx("span",{className:"text-xs text-gray-500",children:"24px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(s,{size:32,color:"#337eff"}),e.jsx("span",{className:"text-xs text-gray-500",children:"32px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(s,{size:48,color:"#337eff"}),e.jsx("span",{className:"text-xs text-gray-500",children:"48px"})]})]})},t={render:()=>e.jsxs("div",{className:"flex items-center gap-6 p-6 bg-gray-900 rounded-lg",children:[e.jsx(s,{size:24,color:"white"}),e.jsx(s,{size:32,color:"white"}),e.jsx(s,{size:48,color:"white"})]})},r={render:()=>e.jsxs("div",{className:"flex items-center gap-6 p-4",children:[e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(i,{size:24}),e.jsx("span",{className:"text-xs text-gray-500",children:"24px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(i,{size:32}),e.jsx("span",{className:"text-xs text-gray-500",children:"32px"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(i,{size:40}),e.jsx("span",{className:"text-xs text-gray-500",children:"40px (default)"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx(i,{size:56}),e.jsx("span",{className:"text-xs text-gray-500",children:"56px (FAB)"})]})]})},l={render:()=>e.jsxs("div",{className:"flex flex-col gap-3 max-w-md p-4 bg-gray-900 rounded-lg",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(i,{size:32}),e.jsxs("div",{className:"bg-gray-800 rounded-lg px-3 py-2 text-sm text-white",children:[e.jsx("p",{className:"text-xs text-blue-400 mb-1",children:"AI Assistant"}),"Hello! How can I help you today?"]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white text-sm font-medium",children:"S"}),e.jsxs("div",{className:"bg-gray-800 rounded-lg px-3 py-2 text-sm text-white",children:[e.jsx("p",{className:"text-xs text-green-400 mb-1",children:"Sarah (Agent)"}),"I'm here to help with your inquiry!"]})]})]})};var c,n,x,o,d;a.parameters={...a.parameters,docs:{...(c=a.parameters)==null?void 0:c.docs,source:{originalSource:`{
+  render: () => <div className="flex items-center gap-6 p-4">
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={16} color="#337eff" />
+                <span className="text-xs text-gray-500">16px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={24} color="#337eff" />
+                <span className="text-xs text-gray-500">24px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={32} color="#337eff" />
+                <span className="text-xs text-gray-500">32px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorSymbol size={48} color="#337eff" />
+                <span className="text-xs text-gray-500">48px</span>
+            </div>
+        </div>
+}`,...(x=(n=a.parameters)==null?void 0:n.docs)==null?void 0:x.source},description:{story:"Xcelsior X symbol at various sizes",...(d=(o=a.parameters)==null?void 0:o.docs)==null?void 0:d.description}}};var m,p,g,f,v;t.parameters={...t.parameters,docs:{...(m=t.parameters)==null?void 0:m.docs,source:{originalSource:`{
+  render: () => <div className="flex items-center gap-6 p-6 bg-gray-900 rounded-lg">
+            <XcelsiorSymbol size={24} color="white" />
+            <XcelsiorSymbol size={32} color="white" />
+            <XcelsiorSymbol size={48} color="white" />
+        </div>
+}`,...(g=(p=t.parameters)==null?void 0:p.docs)==null?void 0:g.source},description:{story:"Symbol on dark backgrounds",...(v=(f=t.parameters)==null?void 0:f.docs)==null?void 0:v.description}}};var y,N,h,u,j;r.parameters={...r.parameters,docs:{...(y=r.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  render: () => <div className="flex items-center gap-6 p-4">
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={24} />
+                <span className="text-xs text-gray-500">24px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={32} />
+                <span className="text-xs text-gray-500">32px</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={40} />
+                <span className="text-xs text-gray-500">40px (default)</span>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+                <XcelsiorAvatar size={56} />
+                <span className="text-xs text-gray-500">56px (FAB)</span>
+            </div>
+        </div>
+}`,...(h=(N=r.parameters)==null?void 0:N.docs)==null?void 0:h.source},description:{story:"Xcelsior avatar (gradient circle with symbol) at various sizes",...(j=(u=r.parameters)==null?void 0:u.docs)==null?void 0:j.description}}};var b,z,S,w,A;l.parameters={...l.parameters,docs:{...(b=l.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  render: () => <div className="flex flex-col gap-3 max-w-md p-4 bg-gray-900 rounded-lg">
+            <div className="flex items-start gap-3">
+                <XcelsiorAvatar size={32} />
+                <div className="bg-gray-800 rounded-lg px-3 py-2 text-sm text-white">
+                    <p className="text-xs text-blue-400 mb-1">AI Assistant</p>
+                    Hello! How can I help you today?
+                </div>
+            </div>
+            <div className="flex items-start gap-3">
+                <div className="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white text-sm font-medium">
+                    S
+                </div>
+                <div className="bg-gray-800 rounded-lg px-3 py-2 text-sm text-white">
+                    <p className="text-xs text-green-400 mb-1">Sarah (Agent)</p>
+                    I&apos;m here to help with your inquiry!
+                </div>
+            </div>
+        </div>
+}`,...(S=(z=l.parameters)==null?void 0:z.docs)==null?void 0:S.source},description:{story:"Avatar in context — message list style",...(A=(w=l.parameters)==null?void 0:w.docs)==null?void 0:A.description}}};const B=["SymbolSizes","SymbolOnDark","AvatarSizes","AvatarInContext"];export{l as AvatarInContext,r as AvatarSizes,t as SymbolOnDark,a as SymbolSizes,B as __namedExportsOrder,H as default};