@xcelsior/ui-chat 1.0.7 → 2.0.0

package/src/components/ChatWidget.tsx

@@ -3,32 +3,44 @@ import { useWebSocket } from '../hooks/useWebSocket';
 import { useMessages } from '../hooks/useMessages';
 import { useFileUpload } from '../hooks/useFileUpload';
 import { useTypingIndicator } from '../hooks/useTypingIndicator';
+import { useResizableWidget } from '../hooks/useResizableWidget';
 import { ChatHeader } from './ChatHeader';
 import { MessageList } from './MessageList';
 import { ChatInput } from './ChatInput';
-import type { IChatConfig, IMessage } from '../types';
+import type { IChatConfig, IMessage, IUser } from '../types';
 
 export interface ChatWidgetProps {
     config: IChatConfig;
     className?: string;
-    /**
-     * Variant of the chat widget:
-     * - 'popover': Fixed positioned floating widget (default)
-     * - 'fullPage': Full page layout that fills the container
-     */
     variant?: 'popover' | 'fullPage';
-    /**
-     * External WebSocket connection (for agents with global connection)
-     */
     externalWebSocket?: WebSocket | null;
-    /**
-     * Callback when user wants to minimize the widget
-     */
     onMinimize?: () => void;
-    /**
-     * Callback when user wants to close the widget
-     */
     onClose?: () => void;
+    /** Resolved position (left or right) from the parent Chat component */
+    resolvedPosition?: 'left' | 'right';
+}
+
+/** Generate an anonymous user for progressive identity mode */
+function getAnonymousUser(): IUser {
+    let anonId: string;
+    try {
+        const stored = localStorage.getItem('xcelsior-chat-anon-id');
+        if (stored) {
+            anonId = stored;
+        } else {
+            anonId = `anon-${crypto.randomUUID?.() || Math.random().toString(36).slice(2)}`;
+            localStorage.setItem('xcelsior-chat-anon-id', anonId);
+        }
+    } catch {
+        anonId = `anon-${Math.random().toString(36).slice(2)}`;
+    }
+
+    return {
+        name: 'Visitor',
+        email: `${anonId}@anonymous.xcelsior.co`,
+        type: 'customer',
+        status: 'online',
+    };
 }
 
 export function ChatWidget({
@@ -38,25 +50,32 @@ export function ChatWidget({
     externalWebSocket,
     onMinimize,
     onClose,
+    resolvedPosition = 'right',
 }: ChatWidgetProps) {
     const isFullPage = variant === 'fullPage';
 
-    // Initialize WebSocket connection (or use external one)
-    const websocket = useWebSocket(config, externalWebSocket);
+    // Resolve user — support anonymous mode for progressive identity
+    const effectiveUser = config.currentUser || getAnonymousUser();
+    const effectiveConfig = { ...config, currentUser: effectiveUser };
 
-    // Initialize messages
-    const { messages, addMessage, isLoading, loadMore, hasMore, isLoadingMore } = useMessages(
-        websocket,
-        config
-    );
+    const websocket = useWebSocket(effectiveConfig, externalWebSocket);
 
-    // Initialize file upload
-    const fileUpload = useFileUpload(config.apiKey, config.fileUpload);
+    const { messages, addMessage, isLoading, loadMore, hasMore, isLoadingMore, isBotThinking } =
+        useMessages(websocket, effectiveConfig);
 
-    // Initialize typing indicator
+    const fileUpload = useFileUpload(config.apiKey, config.fileUpload);
     const { isTyping, typingUsers } = useTypingIndicator(websocket);
 
-    // Handle sending messages
+    const { width, height, isResizing, isNearEdge, containerResizeProps } = useResizableWidget({
+        initialWidth: 380,
+        initialHeight: 580,
+        minWidth: 320,
+        minHeight: 400,
+        maxWidth: 800,
+        maxHeight: 900,
+        enabled: !isFullPage,
+    });
+
     const handleSendMessage = useCallback(
         (content: string) => {
             if (!websocket.isConnected) {
@@ -64,41 +83,33 @@ export function ChatWidget({
                 return;
             }
 
-            // Create optimistic message
             const optimisticMessage: IMessage = {
                 id: `temp-${Date.now()}`,
                 conversationId: config.conversationId || '',
-                senderId: config.currentUser.email,
-                senderType: config.currentUser.type,
+                senderId: effectiveUser.email,
+                senderType: effectiveUser.type,
                 content,
                 messageType: 'text',
                 createdAt: new Date().toISOString(),
                 status: 'sent',
             };
 
-            // Add to local state immediately (optimistic update)
             addMessage(optimisticMessage);
 
-            // Send via WebSocket
             websocket.sendMessage('sendMessage', {
                 conversationId: config.conversationId,
                 content,
                 messageType: 'text',
             });
 
-            // Call callback
             config.onMessageSent?.(optimisticMessage);
         },
-        [websocket, config, addMessage]
+        [websocket, config, addMessage, effectiveUser]
     );
 
-    // Handle typing indicator
     const handleTyping = useCallback(
         (isTyping: boolean) => {
-            if (!websocket.isConnected || config.enableTypingIndicator === false) {
-                return;
-            }
-
+            if (!websocket.isConnected || config.enableTypingIndicator === false) return;
             websocket.sendMessage('typing', {
                 conversationId: config.conversationId,
                 isTyping,
@@ -107,35 +118,100 @@ export function ChatWidget({
         [websocket, config]
     );
 
-    // Handle errors
     useEffect(() => {
         if (websocket.error) {
             config.toast?.error(websocket.error.message || 'An error occurred');
         }
     }, [websocket.error, config]);
 
-    // Container styles based on variant
-    const containerClasses = isFullPage
-        ? `flex flex-col bg-white dark:bg-gray-900 h-full ${className}`
-        : `fixed bottom-4 right-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-lg shadow-2xl overflow-hidden ${className}`;
+    // Theme tokens — aligned with Xcelsior website design system
+    const bgColor = config.theme?.background || '#00001a';
+    const bgAlt = config.theme?.backgroundAlt || '#02164a';
+    const textColor = config.theme?.text || '#f7f7f8';
+    const primaryColor = config.theme?.primary || '#337eff';
+    const textMuted = config.theme?.textMuted || 'rgba(247,247,248,0.45)';
 
-    const containerStyle = isFullPage
-        ? undefined
+    // Detect light vs dark theme based on background luminance
+    const isLightTheme = (() => {
+        if (!bgColor.startsWith('#')) return false;
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+    })();
+
+    // Position-aware container styles
+    const positionClass = resolvedPosition === 'left' ? 'left-4' : 'right-4';
+
+    const containerStyle: React.CSSProperties = isFullPage
+        ? { backgroundColor: bgColor, color: textColor }
+        : {
+              position: 'relative',
+              width,
+              height,
+              maxHeight: 'calc(100vh - 100px)',
+              backgroundColor: bgColor,
+              color: textColor,
+              borderRadius: 16,
+              /* Xcelsior card pattern: inset box-shadow borders instead of border-image */
+              boxShadow: isLightTheme
+                  ? [
+                        '0 25px 60px -12px rgba(0,0,0,0.15)',
+                        '0 0 0 1px rgba(0,0,0,0.08)',
+                    ].join(', ')
+                  : [
+                        'inset 0 0 0 0.5px rgba(255,255,255,0.06)',
+                        'inset 0 1px 0 0 rgba(255,255,255,0.12)',
+                        '0 25px 60px -12px rgba(0,0,0,0.6)',
+                        '0 0 40px -8px rgba(51,126,255,0.15)',
+                    ].join(', '),
+              userSelect: isResizing ? 'none' : undefined,
+          };
+
+    /* Dot grid texture matching the Xcelsior website background */
+    const dotGridBg: React.CSSProperties = !isFullPage
+        ? {
+              backgroundImage: isLightTheme
+                  ? `radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px)`
+                  : `radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px)`,
+              backgroundSize: '24px 24px',
+          }
+        : {};
+
+    // Subtle edge glow when user hovers near a resize edge
+    // Uses outline (not clipped by overflow:hidden) for visibility
+    const edgeHintStyle: React.CSSProperties = !isFullPage && isNearEdge
+        ? {
+              outline: isLightTheme
+                  ? '2px solid rgba(0,94,255,0.25)'
+                  : '2px solid rgba(51,126,255,0.35)',
+              outlineOffset: -1,
+              transition: 'outline 150ms ease',
+          }
         : {
-              width: '400px',
-              height: '600px',
-              maxHeight: 'calc(100vh - 2rem)',
+              outline: '2px solid transparent',
+              outlineOffset: -1,
+              transition: 'outline 150ms ease',
           };
 
     return (
-        <div className={containerClasses} style={containerStyle}>
+        <div
+            className={
+                isFullPage
+                    ? `flex flex-col h-full ${className}`
+                    : `fixed bottom-20 ${positionClass} z-50 flex flex-col overflow-hidden ${className}`
+            }
+            style={{ ...containerStyle, ...dotGridBg, ...edgeHintStyle }}
+            {...(!isFullPage ? containerResizeProps : {})}
+        >
             {!isFullPage && (
                 <ChatHeader
                     agent={
-                        config.currentUser.type === 'customer'
+                        effectiveUser.type === 'customer'
                             ? {
                                   email: 'contact@xcelsior.co',
-                                  name: 'Support Agent',
+                                  name: 'Xcelsior Software',
                                   type: 'agent',
                                   status: websocket.isConnected ? 'online' : 'offline',
                               }
@@ -143,21 +219,49 @@ export function ChatWidget({
                     }
                     onMinimize={onMinimize}
                     onClose={onClose}
+                    theme={config.theme}
                 />
             )}
 
             {/* Connection Status */}
             {!websocket.isConnected && (
-                <div className="bg-yellow-50 dark:bg-yellow-900/30 border-b border-yellow-200 dark:border-yellow-800 px-4 py-2">
+                <div
+                    className="px-4 py-2"
+                    style={{
+                        backgroundColor: isLightTheme ? 'rgba(255,169,56,0.08)' : 'rgba(255,169,56,0.06)',
+                        borderBottom: `1px solid rgba(255,169,56,${isLightTheme ? '0.15' : '0.12'})`,
+                    }}
+                >
                     <div className="flex items-center gap-2">
-                        <div className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" />
-                        <span className="text-sm text-yellow-800 dark:text-yellow-200">
+                        <div
+                            className="w-1.5 h-1.5 rounded-full animate-pulse"
+                            style={{ backgroundColor: config.theme?.statusCaution || '#ffa938' }}
+                        />
+                        <span
+                            style={{
+                                fontSize: '12px',
+                                letterSpacing: '0.015em',
+                                color: config.theme?.statusCaution || '#ffa938',
+                            }}
+                        >
                             Reconnecting...
                         </span>
                         <button
                             type="button"
                             onClick={websocket.reconnect}
-                            className="ml-auto text-xs text-yellow-700 dark:text-yellow-300 hover:underline"
+                            className="ml-auto transition-opacity"
+                            style={{
+                                fontSize: '12px',
+                                letterSpacing: '0.015em',
+                                color: config.theme?.statusCaution || '#ffa938',
+                                opacity: 0.7,
+                            }}
+                            onMouseEnter={(e) => {
+                                e.currentTarget.style.opacity = '1';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.opacity = '0.7';
+                            }}
                         >
                             Retry
                         </button>
@@ -169,8 +273,20 @@ export function ChatWidget({
             {isLoading ? (
                 <div className="flex-1 flex items-center justify-center">
                     <div className="text-center">
-                        <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-2" />
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
+                        <div
+                            className="w-7 h-7 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-3"
+                            style={{
+                                borderColor: primaryColor,
+                                borderTopColor: 'transparent',
+                            }}
+                        />
+                        <p
+                            style={{
+                                fontSize: '12px',
+                                letterSpacing: '0.015em',
+                                color: textMuted,
+                            }}
+                        >
                             Loading messages...
                         </p>
                     </div>
@@ -178,13 +294,16 @@ export function ChatWidget({
             ) : (
                 <MessageList
                     messages={messages}
-                    currentUser={config.currentUser}
+                    currentUser={effectiveUser}
                     isTyping={isTyping}
                     typingUser={typingUsers[0]}
                     autoScroll={true}
                     onLoadMore={loadMore}
                     hasMore={hasMore}
                     isLoadingMore={isLoadingMore}
+                    theme={config.theme}
+                    onQuickAction={handleSendMessage}
+                    isBotThinking={isBotThinking}
                 />
             )}
 
@@ -192,19 +311,46 @@ export function ChatWidget({
             <ChatInput
                 onSend={handleSendMessage}
                 onTyping={handleTyping}
-                config={config}
+                config={effectiveConfig}
                 fileUpload={fileUpload}
                 disabled={!websocket.isConnected}
             />
 
-            {/* Powered by footer - only for popover */}
+            {/* Powered by footer */}
             {!isFullPage && (
-                <div className="bg-gray-50 dark:bg-gray-950 px-4 py-2 text-center border-t border-gray-200 dark:border-gray-700">
-                    <p className="text-xs text-gray-500 dark:text-gray-400">
-                        Powered by <span className="font-semibold">Xcelsior Chat</span>
+                <div
+                    className="px-4 py-1.5 text-center"
+                    style={{
+                        borderTop: isLightTheme
+                            ? '1px solid rgba(0,0,0,0.06)'
+                            : '1px solid rgba(255,255,255,0.06)',
+                        backgroundColor: isLightTheme
+                            ? 'rgba(0,0,0,0.03)'
+                            : 'rgba(0,0,0,0.2)',
+                    }}
+                >
+                    <p
+                        style={{
+                            fontSize: '10px',
+                            letterSpacing: '0.025em',
+                            color: isLightTheme
+                                ? 'rgba(0,0,0,0.35)'
+                                : 'rgba(247,247,248,0.28)',
+                        }}
+                    >
+                        Powered by{' '}
+                        <span style={{
+                            fontWeight: 600,
+                            color: isLightTheme
+                                ? 'rgba(0,0,0,0.5)'
+                                : 'rgba(247,247,248,0.45)',
+                        }}>
+                            Xcelsior
+                        </span>
                     </p>
                 </div>
             )}
+
         </div>
     );
 }

package/src/components/ConversationRating.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConversationRating } from './ConversationRating';
+
+const meta: Meta<typeof ConversationRating> = {
+    title: 'Components/ConversationRating',
+    component: ConversationRating,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ConversationRating>;
+
+/** Default state — shows thumbs up/down buttons */
+export const Default: Story = {
+    args: {
+        onRate: (rating) => console.log('Rated:', rating),
+    },
+};
+
+/** In a dark container (matching chat widget) */
+export const InDarkContainer: Story = {
+    render: (args) => (
+        <div className="max-w-md p-4 bg-gray-900 rounded-lg">
+            <ConversationRating {...args} />
+        </div>
+    ),
+    args: {
+        onRate: (rating) => console.log('Rated:', rating),
+    },
+};

package/src/components/ConversationRating.tsx

@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import type { IChatTheme } from '../types';
+
+interface ConversationRatingProps {
+    onRate: (rating: 'positive' | 'negative') => void;
+    theme?: IChatTheme;
+}
+
+export function ConversationRating({ onRate, theme }: ConversationRatingProps) {
+    const [rated, setRated] = useState<'positive' | 'negative' | null>(null);
+    const [hovering, setHovering] = useState<'positive' | 'negative' | null>(null);
+
+    const textMuted = theme?.textMuted || 'rgba(247,247,248,0.45)';
+    const textColor = theme?.text || '#f7f7f8';
+    const positiveColor = theme?.statusPositive || '#1ed473';
+    const negativeColor = theme?.statusNegative || '#ff6363';
+
+    const handleRate = (rating: 'positive' | 'negative') => {
+        setRated(rating);
+        onRate(rating);
+    };
+
+    if (rated) {
+        return (
+            <div
+                className="flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl mx-4 my-2"
+                style={{
+                    backgroundColor: 'rgba(255,255,255,0.03)',
+                    boxShadow: 'inset 0 0 0 0.5px rgba(255,255,255,0.06)',
+                }}
+            >
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke={positiveColor}
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    aria-hidden="true"
+                >
+                    <title>Thanks</title>
+                    <polyline points="20 6 9 17 4 12" />
+                </svg>
+                <span
+                    style={{
+                        fontSize: '12px',
+                        letterSpacing: '0.015em',
+                        color: textMuted,
+                    }}
+                >
+                    Thanks for your feedback!
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className="flex flex-col items-center gap-2.5 py-3 px-4 rounded-xl mx-4 my-2"
+            style={{
+                backgroundColor: 'rgba(255,255,255,0.03)',
+                boxShadow: 'inset 0 0 0 0.5px rgba(255,255,255,0.06)',
+            }}
+        >
+            <p
+                style={{
+                    fontSize: '12px',
+                    letterSpacing: '0.015em',
+                    color: textMuted,
+                }}
+            >
+                How was your experience?
+            </p>
+            <div className="flex gap-2.5">
+                {/* Positive rating button — ghost pill matching website button style */}
+                <button
+                    type="button"
+                    onClick={() => handleRate('positive')}
+                    onMouseEnter={() => setHovering('positive')}
+                    onMouseLeave={() => setHovering(null)}
+                    className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-full font-medium transition-all duration-200"
+                    style={{
+                        fontSize: '12px',
+                        letterSpacing: '0.015em',
+                        boxShadow:
+                            hovering === 'positive'
+                                ? `inset 0 0 0 1px ${positiveColor}40, 0 0 12px -4px ${positiveColor}25`
+                                : 'inset 0 0 0 0.5px rgba(255,255,255,0.08)',
+                        backgroundColor:
+                            hovering === 'positive'
+                                ? `${positiveColor}10`
+                                : 'rgba(255,255,255,0.02)',
+                        color: hovering === 'positive' ? positiveColor : textColor,
+                    }}
+                    aria-label="Rate positive"
+                >
+                    <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                    >
+                        <title>Thumbs up</title>
+                        <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+                    </svg>
+                    Helpful
+                </button>
+                {/* Negative rating button */}
+                <button
+                    type="button"
+                    onClick={() => handleRate('negative')}
+                    onMouseEnter={() => setHovering('negative')}
+                    onMouseLeave={() => setHovering(null)}
+                    className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-full font-medium transition-all duration-200"
+                    style={{
+                        fontSize: '12px',
+                        letterSpacing: '0.015em',
+                        boxShadow:
+                            hovering === 'negative'
+                                ? `inset 0 0 0 1px ${negativeColor}40, 0 0 12px -4px ${negativeColor}25`
+                                : 'inset 0 0 0 0.5px rgba(255,255,255,0.08)',
+                        backgroundColor:
+                            hovering === 'negative'
+                                ? `${negativeColor}10`
+                                : 'rgba(255,255,255,0.02)',
+                        color: hovering === 'negative' ? negativeColor : textColor,
+                    }}
+                    aria-label="Rate negative"
+                >
+                    <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        aria-hidden="true"
+                    >
+                        <title>Thumbs down</title>
+                        <path d="M10 15V19a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
+                    </svg>
+                    Not helpful
+                </button>
+            </div>
+        </div>
+    );
+}