@xcelsior/ui-chat 1.0.5 → 1.0.7

package/src/components/Chat.tsx

@@ -2,6 +2,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { ChatWidget } from './ChatWidget';
 import { PreChatForm } from './PreChatForm';
 import type { IChatConfig, IUser } from '../types';
+import { useChatWidgetState } from '../hooks/useChatWidgetState';
+import type { ChatWidgetState } from '../hooks/useChatWidgetState';
 
 interface ChatWidgetWrapperProps {
     /**
@@ -24,6 +26,22 @@ interface ChatWidgetWrapperProps {
      * Callback when user submits the pre-chat form
      */
     onPreChatSubmit?: (user: IUser) => void;
+    /**
+     * Controlled state. When provided, the component is controlled.
+     * - 'open': Fully open with chat interface
+     * - 'minimized': Show bubble button only
+     * - 'closed': Fully hidden
+     */
+    state?: ChatWidgetState;
+    /**
+     * Default state for uncontrolled mode
+     * @default 'minimized'
+     */
+    defaultState?: ChatWidgetState;
+    /**
+     * Callback when state changes
+     */
+    onStateChange?: (state: ChatWidgetState) => void;
 }
 
 interface StoredUserData {
@@ -55,11 +73,21 @@ export function Chat({
     className = '',
     storageKeyPrefix = 'xcelsior_chat',
     onPreChatSubmit,
+    state,
+    defaultState = 'minimized',
+    onStateChange,
 }: ChatWidgetWrapperProps) {
     const [userInfo, setUserInfo] = useState<IUser | null>(null);
     const [conversationId, setConversationId] = useState<string>('');
     const [isLoading, setIsLoading] = useState(true);
 
+    // Centralized state management using the custom hook
+    const { currentState, setState } = useChatWidgetState({
+        state,
+        defaultState,
+        onStateChange,
+    });
+
     // Initialize user data from localStorage or generate new session
     useEffect(() => {
         const initializeSession = () => {
@@ -171,6 +199,28 @@ export function Chat({
         return null; // Or you could show a loading spinner
     }
 
+    // Handle closed state - fully hidden
+    if (currentState === 'closed') {
+        return null;
+    }
+
+    // Handle minimized state - show bubble button only
+    if (currentState === 'minimized') {
+        return (
+            <div className={`fixed bottom-4 right-4 z-50 ${className}`}>
+                <button
+                    type="button"
+                    onClick={() => setState('open')}
+                    className="h-14 w-14 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg hover:shadow-xl transition-all flex items-center justify-center relative"
+                    aria-label="Open chat"
+                >
+                    <span className="text-2xl">💬</span>
+                </button>
+            </div>
+        );
+    }
+
+    // Open state - show either pre-chat form or chat widget
     // Show pre-chat form if user info is not available
     if (!userInfo || !userInfo.email || !userInfo.name) {
         return (
@@ -179,6 +229,8 @@ export function Chat({
                 className={className}
                 initialName={config.currentUser?.name}
                 initialEmail={config.currentUser?.email}
+                onClose={() => setState('closed')}
+                onMinimize={() => setState('minimized')}
             />
         );
     }
@@ -190,5 +242,12 @@ export function Chat({
         currentUser: userInfo,
     };
 
-    return <ChatWidget config={fullConfig} className={className} />;
+    return (
+        <ChatWidget
+            config={fullConfig}
+            className={className}
+            onClose={() => setState('closed')}
+            onMinimize={() => setState('minimized')}
+        />
+    );
 }

package/src/components/ChatWidget.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useWebSocket } from '../hooks/useWebSocket';
 import { useMessages } from '../hooks/useMessages';
 import { useFileUpload } from '../hooks/useFileUpload';
@@ -21,6 +21,14 @@ export interface ChatWidgetProps {
      * 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;
 }
 
 export function ChatWidget({
@@ -28,10 +36,9 @@ export function ChatWidget({
     className = '',
     variant = 'popover',
     externalWebSocket,
+    onMinimize,
+    onClose,
 }: ChatWidgetProps) {
-    const [isMinimized, setIsMinimized] = useState(false);
-    const [isClosed, setIsClosed] = useState(false);
-
     const isFullPage = variant === 'fullPage';
 
     // Initialize WebSocket connection (or use external one)
@@ -107,37 +114,6 @@ export function ChatWidget({
         }
     }, [websocket.error, config]);
 
-    // For fullPage variant, ignore minimize/close state
-    if (!isFullPage) {
-        if (isClosed) {
-            return null;
-        }
-
-        // Minimized view (floating button) - only for popover
-        if (isMinimized) {
-            return (
-                <div className={`fixed bottom-4 right-4 z-50 ${className}`}>
-                    <button
-                        type="button"
-                        onClick={() => setIsMinimized(false)}
-                        className="h-14 w-14 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg hover:shadow-xl transition-all flex items-center justify-center relative"
-                        aria-label="Open chat"
-                    >
-                        <span className="text-2xl">💬</span>
-                        {messages.some(
-                            (msg) =>
-                                msg.senderId !== config.currentUser.email && msg.status !== 'read'
-                        ) && (
-                            <span className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center">
-                                !
-                            </span>
-                        )}
-                    </button>
-                </div>
-            );
-        }
-    }
-
     // Container styles based on variant
     const containerClasses = isFullPage
         ? `flex flex-col bg-white dark:bg-gray-900 h-full ${className}`
@@ -165,8 +141,8 @@ export function ChatWidget({
                               }
                             : undefined
                     }
-                    onMinimize={() => setIsMinimized(true)}
-                    onClose={() => setIsClosed(true)}
+                    onMinimize={onMinimize}
+                    onClose={onClose}
                 />
             )}
 

package/src/components/MessageItem.tsx

@@ -62,7 +62,6 @@ export function MessageItem({
                     }`}
                 >
                     {message.messageType === 'text' && (
-                        <div className="prose prose-sm dark:prose-invert max-w-none">
                             <ReactMarkdown
                                 components={{
                                     p: ({ children }) => <p className="mb-0">{children}</p>,
@@ -90,7 +89,6 @@ export function MessageItem({
                             >
                                 {message.content}
                             </ReactMarkdown>
-                        </div>
                     )}
                     {message.messageType === 'image' && (
                         <div>

package/src/components/PreChatForm.tsx

@@ -5,6 +5,14 @@ interface PreChatFormProps {
     className?: string;
     initialName?: string;
     initialEmail?: string;
+    /**
+     * Callback when user wants to minimize the form
+     */
+    onMinimize: () => void;
+    /**
+     * Callback when user wants to close the form
+     */
+    onClose: () => void;
 }
 
 /**
@@ -15,6 +23,8 @@ export function PreChatForm({
     className = '',
     initialName = '',
     initialEmail = '',
+    onMinimize,
+    onClose,
 }: PreChatFormProps) {
     const [name, setName] = useState(initialName);
     const [email, setEmail] = useState(initialEmail);
@@ -62,6 +72,7 @@ export function PreChatForm({
         }
     };
 
+    // Show full form
     return (
         <div
             className={`fixed bottom-4 right-4 z-50 flex flex-col bg-white dark:bg-gray-900 rounded-lg shadow-2xl overflow-hidden ${className}`}
@@ -72,10 +83,60 @@ export function PreChatForm({
         >
             {/* Header */}
             <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4">
-                <h2 className="text-lg font-semibold">Start a Conversation</h2>
-                <p className="text-sm text-blue-100 mt-1">
-                    Please provide your details to continue
-                </p>
+                <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                        <h2 className="text-lg font-semibold">Start a Conversation</h2>
+                        <p className="text-sm text-blue-100 mt-1">
+                            Please provide your details to continue
+                        </p>
+                    </div>
+                    <div className="flex gap-2 ml-2">
+                        {/* Minimize Button */}
+                        <button
+                            type="button"
+                            onClick={onMinimize}
+                            className="text-white hover:bg-white/20 rounded p-1 transition-colors"
+                            aria-label="Minimize chat"
+                        >
+                            <svg
+                                className="w-5 h-5"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <title>Minimize</title>
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M20 12H4"
+                                />
+                            </svg>
+                        </button>
+                        {/* Close Button */}
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="text-white hover:bg-white/20 rounded p-1 transition-colors"
+                            aria-label="Close chat"
+                        >
+                            <svg
+                                className="w-5 h-5"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <title>Close</title>
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
             </div>
 
             {/* Form */}

package/src/hooks/useChatWidgetState.ts

@@ -0,0 +1,68 @@
+import { useCallback, useState } from 'react';
+
+export type ChatWidgetState = 'open' | 'minimized' | 'closed' | 'undefined';
+
+export interface UseChatWidgetStateOptions {
+    /**
+     * Controlled state. When provided, the component is controlled.
+     */
+    state?: ChatWidgetState;
+    /**
+     * Default state for uncontrolled mode
+     * @default 'minimized'
+     */
+    defaultState?: ChatWidgetState;
+    /**
+     * Callback when state changes
+     */
+    onStateChange?: (state: ChatWidgetState) => void;
+}
+
+export interface UseChatWidgetStateReturn {
+    /**
+     * Current state of the widget
+     */
+    currentState: ChatWidgetState;
+    /**
+     * Function to update the state
+     */
+    setState: (newState: ChatWidgetState) => void;
+    /**
+     * Whether the state is controlled
+     */
+    isControlled: boolean;
+}
+
+/**
+ * Hook to manage chat widget state (controlled vs uncontrolled)
+ * Encapsulates the logic for handling both controlled and uncontrolled state patterns
+ */
+export function useChatWidgetState({
+    state: controlledState,
+    defaultState = 'minimized',
+    onStateChange,
+}: UseChatWidgetStateOptions): UseChatWidgetStateReturn {
+    // Handle controlled vs uncontrolled state
+    const [uncontrolledState, setUncontrolledState] = useState<ChatWidgetState>(defaultState);
+    const isControlled = controlledState !== undefined && controlledState !== 'undefined';
+    const currentState = isControlled ? controlledState : uncontrolledState;
+
+    // State setter that works for both controlled and uncontrolled modes
+    const setState = useCallback(
+        (newValue: ChatWidgetState) => {
+            // Update internal state if uncontrolled
+            if (!isControlled) {
+                setUncontrolledState(newValue);
+            }
+            // Always call the change handler if provided
+            onStateChange?.(newValue);
+        },
+        [isControlled, onStateChange]
+    );
+
+    return {
+        currentState,
+        setState,
+        isControlled,
+    };
+}

package/src/index.tsx

@@ -1,6 +1,6 @@
 // Main components
 export { ChatWidget } from './components/ChatWidget';
-import type { ChatWidgetProps } from './components/ChatWidget';
+export type { ChatWidgetProps } from './components/ChatWidget';
 export { Chat } from './components/Chat';
 
 // Individual components (for custom implementations)
@@ -16,6 +16,12 @@ export { useWebSocket } from './hooks/useWebSocket';
 export { useMessages } from './hooks/useMessages';
 export { useFileUpload } from './hooks/useFileUpload';
 export { useTypingIndicator } from './hooks/useTypingIndicator';
+export { useChatWidgetState } from './hooks/useChatWidgetState';
+export type {
+    ChatWidgetState,
+    UseChatWidgetStateOptions,
+    UseChatWidgetStateReturn,
+} from './hooks/useChatWidgetState';
 
 // Utilities
 export { fetchMessages } from './utils/api';
@@ -40,7 +46,7 @@ import type {
     ConversationChannel,
 } from './types';
 
-export {
+export type {
     IUser,
     IMessage,
     IConversation,
@@ -57,5 +63,4 @@ export {
     ConversationStatus,
     ConversationPriority,
     ConversationChannel,
-    ChatWidgetProps,
 };