@xcelsior/ui-chat 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.0.7
+
+### Patch Changes
+
+- updated version
+- 97bcd49: initial version
+
+## 1.0.6
+
+### Patch Changes
+
+- improve minimize
+
 ## 1.0.2
 
 ### Patch Changes

package/README.md

@@ -62,6 +62,88 @@ function App() {
 }
 ```
 
+### Chat Widget States (Bubble Mode)
+
+The chat widget supports three states in popover mode:
+
+- **`open`**: Fully open with chat interface visible
+- **`minimized`**: Show bubble button only (default)
+- **`closed`**: Fully hidden, no bubble visible
+
+#### Uncontrolled Mode (Default)
+
+By default, the widget starts in `minimized` state and manages its own state:
+
+```tsx
+import { ChatWidget } from '@xcelsior/ui-chat';
+
+function App() {
+    return (
+        <ChatWidget 
+            config={chatConfig}
+            // Starts minimized by default
+        />
+    );
+}
+```
+
+You can also set a different default state:
+
+```tsx
+<ChatWidget 
+    config={chatConfig}
+    defaultState="open" // or "minimized" or "closed"
+/>
+```
+
+#### Controlled Mode
+
+Control the widget state externally:
+
+```tsx
+import { ChatWidget, ChatWidgetState } from '@xcelsior/ui-chat';
+import { useState } from 'react';
+
+function App() {
+    const [chatState, setChatState] = useState<ChatWidgetState>('minimized');
+
+    return (
+        <>
+            <button onClick={() => setChatState('open')}>
+                Open Chat
+            </button>
+            <button onClick={() => setChatState('minimized')}>
+                Minimize Chat
+            </button>
+            <button onClick={() => setChatState('closed')}>
+                Close Chat
+            </button>
+            
+            <ChatWidget 
+                config={chatConfig}
+                state={chatState}
+                onStateChange={setChatState}
+            />
+        </>
+    );
+}
+```
+
+#### Listen to State Changes (Semi-controlled)
+
+You can listen to state changes while keeping the widget uncontrolled:
+
+```tsx
+<ChatWidget 
+    config={chatConfig}
+    defaultState="minimized"
+    onStateChange={(state) => {
+        console.log('Chat state changed to:', state);
+        // Save to localStorage, analytics, etc.
+    }}
+/>
+```
+
 ### With File Upload
 
 The file upload feature uses a presigned URL approach for secure, direct-to-S3 uploads:

package/dist/index.d.mts

@@ -125,8 +125,52 @@ 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;
 }
-declare function ChatWidget({ config, className, variant, externalWebSocket, }: ChatWidgetProps): react_jsx_runtime.JSX.Element | null;
+declare function ChatWidget({ config, className, variant, externalWebSocket, onMinimize, onClose, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+
+type ChatWidgetState = 'open' | 'minimized' | 'closed' | 'undefined';
+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;
+}
+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
+ */
+declare function useChatWidgetState({ state: controlledState, defaultState, onStateChange, }: UseChatWidgetStateOptions): UseChatWidgetStateReturn;
 
 interface ChatWidgetWrapperProps {
     /**
@@ -149,6 +193,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;
 }
 /**
  * Chat component that handles:
@@ -156,7 +216,7 @@ interface ChatWidgetWrapperProps {
  * - Pre-chat form for collecting user information
  * - Session persistence in localStorage
  */
-declare function Chat({ config, className, storageKeyPrefix, onPreChatSubmit, }: ChatWidgetWrapperProps): react_jsx_runtime.JSX.Element | null;
+declare function Chat({ config, className, storageKeyPrefix, onPreChatSubmit, state, defaultState, onStateChange, }: ChatWidgetWrapperProps): react_jsx_runtime.JSX.Element | null;
 
 interface ChatHeaderProps {
     agent?: IUser;
@@ -215,11 +275,19 @@ 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;
 }
 /**
  * PreChatForm component for collecting user information before starting chat
  */
-declare function PreChatForm({ onSubmit, className, initialName, initialEmail, }: PreChatFormProps): react_jsx_runtime.JSX.Element;
+declare function PreChatForm({ onSubmit, className, initialName, initialEmail, onMinimize, onClose, }: PreChatFormProps): react_jsx_runtime.JSX.Element;
 
 interface UseWebSocketReturn {
     isConnected: boolean;
@@ -266,4 +334,4 @@ declare function fetchMessages(baseUrl: string, params: FetchMessagesParams, hea
     nextPageToken: string | undefined;
 }>;
 
-export { Chat, ChatHeader, ChatInput, ChatWidget, type ChatWidgetProps, type ConversationChannel, type ConversationPriority, type ConversationStatus, type IApiResponse, type IChatConfig, type IConversation, type IFileUploadConfig, type IMessage, type IReadMessageData, type ISendMessageData, type ITypingData, type IUploadedFile, type IUser, type IWebSocketMessage, MessageItem, MessageList, type MessageStatus, type MessageType, PreChatForm, TypingIndicator, fetchMessages, useFileUpload, useMessages, useTypingIndicator, useWebSocket };
+export { Chat, ChatHeader, ChatInput, ChatWidget, type ChatWidgetProps, type ChatWidgetState, type ConversationChannel, type ConversationPriority, type ConversationStatus, type IApiResponse, type IChatConfig, type IConversation, type IFileUploadConfig, type IMessage, type IReadMessageData, type ISendMessageData, type ITypingData, type IUploadedFile, type IUser, type IWebSocketMessage, MessageItem, MessageList, type MessageStatus, type MessageType, PreChatForm, TypingIndicator, type UseChatWidgetStateOptions, type UseChatWidgetStateReturn, fetchMessages, useChatWidgetState, useFileUpload, useMessages, useTypingIndicator, useWebSocket };

package/dist/index.d.ts

@@ -125,8 +125,52 @@ 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;
 }
-declare function ChatWidget({ config, className, variant, externalWebSocket, }: ChatWidgetProps): react_jsx_runtime.JSX.Element | null;
+declare function ChatWidget({ config, className, variant, externalWebSocket, onMinimize, onClose, }: ChatWidgetProps): react_jsx_runtime.JSX.Element;
+
+type ChatWidgetState = 'open' | 'minimized' | 'closed' | 'undefined';
+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;
+}
+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
+ */
+declare function useChatWidgetState({ state: controlledState, defaultState, onStateChange, }: UseChatWidgetStateOptions): UseChatWidgetStateReturn;
 
 interface ChatWidgetWrapperProps {
     /**
@@ -149,6 +193,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;
 }
 /**
  * Chat component that handles:
@@ -156,7 +216,7 @@ interface ChatWidgetWrapperProps {
  * - Pre-chat form for collecting user information
  * - Session persistence in localStorage
  */
-declare function Chat({ config, className, storageKeyPrefix, onPreChatSubmit, }: ChatWidgetWrapperProps): react_jsx_runtime.JSX.Element | null;
+declare function Chat({ config, className, storageKeyPrefix, onPreChatSubmit, state, defaultState, onStateChange, }: ChatWidgetWrapperProps): react_jsx_runtime.JSX.Element | null;
 
 interface ChatHeaderProps {
     agent?: IUser;
@@ -215,11 +275,19 @@ 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;
 }
 /**
  * PreChatForm component for collecting user information before starting chat
  */
-declare function PreChatForm({ onSubmit, className, initialName, initialEmail, }: PreChatFormProps): react_jsx_runtime.JSX.Element;
+declare function PreChatForm({ onSubmit, className, initialName, initialEmail, onMinimize, onClose, }: PreChatFormProps): react_jsx_runtime.JSX.Element;
 
 interface UseWebSocketReturn {
     isConnected: boolean;
@@ -266,4 +334,4 @@ declare function fetchMessages(baseUrl: string, params: FetchMessagesParams, hea
     nextPageToken: string | undefined;
 }>;
 
-export { Chat, ChatHeader, ChatInput, ChatWidget, type ChatWidgetProps, type ConversationChannel, type ConversationPriority, type ConversationStatus, type IApiResponse, type IChatConfig, type IConversation, type IFileUploadConfig, type IMessage, type IReadMessageData, type ISendMessageData, type ITypingData, type IUploadedFile, type IUser, type IWebSocketMessage, MessageItem, MessageList, type MessageStatus, type MessageType, PreChatForm, TypingIndicator, fetchMessages, useFileUpload, useMessages, useTypingIndicator, useWebSocket };
+export { Chat, ChatHeader, ChatInput, ChatWidget, type ChatWidgetProps, type ChatWidgetState, type ConversationChannel, type ConversationPriority, type ConversationStatus, type IApiResponse, type IChatConfig, type IConversation, type IFileUploadConfig, type IMessage, type IReadMessageData, type ISendMessageData, type ITypingData, type IUploadedFile, type IUser, type IWebSocketMessage, MessageItem, MessageList, type MessageStatus, type MessageType, PreChatForm, TypingIndicator, type UseChatWidgetStateOptions, type UseChatWidgetStateReturn, fetchMessages, useChatWidgetState, useFileUpload, useMessages, useTypingIndicator, useWebSocket };

package/dist/index.js

@@ -39,6 +39,7 @@ __export(index_exports, {
   PreChatForm: () => PreChatForm,
   TypingIndicator: () => TypingIndicator,
   fetchMessages: () => fetchMessages,
+  useChatWidgetState: () => useChatWidgetState,
   useFileUpload: () => useFileUpload,
   useMessages: () => useMessages,
   useTypingIndicator: () => useTypingIndicator,
@@ -619,7 +620,7 @@ function MessageItem({
             {
               className: `rounded-2xl px-4 py-2 ${isOwnMessage ? "bg-blue-600 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100"}`,
               children: [
-                message.messageType === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                message.messageType === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   import_react_markdown.default,
                   {
                     components: {
@@ -648,7 +649,7 @@ function MessageItem({
                     },
                     children: message.content
                   }
-                ) }),
+                ),
                 message.messageType === "image" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "img",
                   {
@@ -1136,10 +1137,10 @@ function ChatWidget({
   config,
   className = "",
   variant = "popover",
-  externalWebSocket
+  externalWebSocket,
+  onMinimize,
+  onClose
 }) {
-  const [isMinimized, setIsMinimized] = (0, import_react8.useState)(false);
-  const [isClosed, setIsClosed] = (0, import_react8.useState)(false);
   const isFullPage = variant === "fullPage";
   const websocket = useWebSocket(config, externalWebSocket);
   const { messages, addMessage, isLoading, loadMore, hasMore, isLoadingMore } = useMessages(
@@ -1191,28 +1192,6 @@ function ChatWidget({
       config.toast?.error(websocket.error.message || "An error occurred");
     }
   }, [websocket.error, config]);
-  if (!isFullPage) {
-    if (isClosed) {
-      return null;
-    }
-    if (isMinimized) {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `fixed bottom-4 right-4 z-50 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-        "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",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-2xl", children: "\u{1F4AC}" }),
-            messages.some(
-              (msg) => msg.senderId !== config.currentUser.email && msg.status !== "read"
-            ) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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", children: "!" })
-          ]
-        }
-      ) });
-    }
-  }
   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}`;
   const containerStyle = isFullPage ? void 0 : {
     width: "400px",
@@ -1229,8 +1208,8 @@ function ChatWidget({
           type: "agent",
           status: websocket.isConnected ? "online" : "offline"
         } : void 0,
-        onMinimize: () => setIsMinimized(true),
-        onClose: () => setIsClosed(true)
+        onMinimize,
+        onClose
       }
     ),
     !websocket.isConnected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bg-yellow-50 dark:bg-yellow-900/30 border-b border-yellow-200 dark:border-yellow-800 px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -1280,7 +1259,7 @@ function ChatWidget({
 }
 
 // src/components/Chat.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/PreChatForm.tsx
 var import_react9 = require("react");
@@ -1289,7 +1268,9 @@ function PreChatForm({
   onSubmit,
   className = "",
   initialName = "",
-  initialEmail = ""
+  initialEmail = "",
+  onMinimize,
+  onClose
 }) {
   const [name, setName] = (0, import_react9.useState)(initialName);
   const [email, setEmail] = (0, import_react9.useState)(initialEmail);
@@ -1336,10 +1317,74 @@ function PreChatForm({
         maxHeight: "calc(100vh - 2rem)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "text-lg font-semibold", children: "Start a Conversation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-blue-100 mt-1", children: "Please provide your details to continue" })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "text-lg font-semibold", children: "Start a Conversation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-blue-100 mt-1", children: "Please provide your details to continue" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-2 ml-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onMinimize,
+                className: "text-white hover:bg-white/20 rounded p-1 transition-colors",
+                "aria-label": "Minimize chat",
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  "svg",
+                  {
+                    className: "w-5 h-5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("title", { children: "Minimize" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M20 12H4"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "text-white hover:bg-white/20 rounded p-1 transition-colors",
+                "aria-label": "Close chat",
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  "svg",
+                  {
+                    className: "w-5 h-5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("title", { children: "Close" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M6 18L18 6M6 6l12 12"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ] })
+        ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className: "p-6 space-y-5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -1459,6 +1504,32 @@ function PreChatForm({
   );
 }
 
+// src/hooks/useChatWidgetState.ts
+var import_react10 = require("react");
+function useChatWidgetState({
+  state: controlledState,
+  defaultState = "minimized",
+  onStateChange
+}) {
+  const [uncontrolledState, setUncontrolledState] = (0, import_react10.useState)(defaultState);
+  const isControlled = controlledState !== void 0 && controlledState !== "undefined";
+  const currentState = isControlled ? controlledState : uncontrolledState;
+  const setState = (0, import_react10.useCallback)(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledState(newValue);
+      }
+      onStateChange?.(newValue);
+    },
+    [isControlled, onStateChange]
+  );
+  return {
+    currentState,
+    setState,
+    isControlled
+  };
+}
+
 // src/components/Chat.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function generateSessionId() {
@@ -1471,12 +1542,20 @@ function Chat({
   config,
   className = "",
   storageKeyPrefix = "xcelsior_chat",
-  onPreChatSubmit
+  onPreChatSubmit,
+  state,
+  defaultState = "minimized",
+  onStateChange
 }) {
-  const [userInfo, setUserInfo] = (0, import_react10.useState)(null);
-  const [conversationId, setConversationId] = (0, import_react10.useState)("");
-  const [isLoading, setIsLoading] = (0, import_react10.useState)(true);
-  (0, import_react10.useEffect)(() => {
+  const [userInfo, setUserInfo] = (0, import_react11.useState)(null);
+  const [conversationId, setConversationId] = (0, import_react11.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
+  const { currentState, setState } = useChatWidgetState({
+    state,
+    defaultState,
+    onStateChange
+  });
+  (0, import_react11.useEffect)(() => {
     const initializeSession = () => {
       try {
         if (config.currentUser?.email && config.currentUser?.name) {
@@ -1531,7 +1610,7 @@ function Chat({
     };
     initializeSession();
   }, [config, storageKeyPrefix]);
-  const handlePreChatSubmit = (0, import_react10.useCallback)(
+  const handlePreChatSubmit = (0, import_react11.useCallback)(
     (name, email) => {
       const convId = conversationId || generateSessionId();
       const user = {
@@ -1560,6 +1639,21 @@ function Chat({
   if (isLoading) {
     return null;
   }
+  if (currentState === "closed") {
+    return null;
+  }
+  if (currentState === "minimized") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `fixed bottom-4 right-4 z-50 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "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",
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-2xl", children: "\u{1F4AC}" })
+      }
+    ) });
+  }
   if (!userInfo || !userInfo.email || !userInfo.name) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       PreChatForm,
@@ -1567,7 +1661,9 @@ function Chat({
         onSubmit: handlePreChatSubmit,
         className,
         initialName: config.currentUser?.name,
-        initialEmail: config.currentUser?.email
+        initialEmail: config.currentUser?.email,
+        onClose: () => setState("closed"),
+        onMinimize: () => setState("minimized")
       }
     );
   }
@@ -1576,7 +1672,15 @@ function Chat({
     conversationId,
     currentUser: userInfo
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatWidget, { config: fullConfig, className });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ChatWidget,
+    {
+      config: fullConfig,
+      className,
+      onClose: () => setState("closed"),
+      onMinimize: () => setState("minimized")
+    }
+  );
 }
 
 // src/components/TypingIndicator.tsx
@@ -1617,6 +1721,7 @@ function TypingIndicator({ isTyping, userName }) {
   PreChatForm,
   TypingIndicator,
   fetchMessages,
+  useChatWidgetState,
   useFileUpload,
   useMessages,
   useTypingIndicator,