@xcelsior/ui-chat 1.0.5 → 1.0.7

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/ChatWidget.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6 } from "react";
 
 // src/hooks/useWebSocket.ts
 import { useEffect, useRef, useState, useCallback } from "react";
@@ -571,7 +571,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__ */ jsx2("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx2(
+                message.messageType === "text" && /* @__PURE__ */ jsx2(
                   ReactMarkdown,
                   {
                     components: {
@@ -600,7 +600,7 @@ function MessageItem({
                     },
                     children: message.content
                   }
-                ) }),
+                ),
                 message.messageType === "image" && /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2(
                   "img",
                   {
@@ -1088,10 +1088,10 @@ function ChatWidget({
   config,
   className = "",
   variant = "popover",
-  externalWebSocket
+  externalWebSocket,
+  onMinimize,
+  onClose
 }) {
-  const [isMinimized, setIsMinimized] = useState6(false);
-  const [isClosed, setIsClosed] = useState6(false);
   const isFullPage = variant === "fullPage";
   const websocket = useWebSocket(config, externalWebSocket);
   const { messages, addMessage, isLoading, loadMore, hasMore, isLoadingMore } = useMessages(
@@ -1143,28 +1143,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__ */ jsx5("div", { className: `fixed bottom-4 right-4 z-50 ${className}`, children: /* @__PURE__ */ jsxs5(
-        "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__ */ jsx5("span", { className: "text-2xl", children: "\u{1F4AC}" }),
-            messages.some(
-              (msg) => msg.senderId !== config.currentUser.email && msg.status !== "read"
-            ) && /* @__PURE__ */ jsx5("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",
@@ -1181,8 +1159,8 @@ function ChatWidget({
           type: "agent",
           status: websocket.isConnected ? "online" : "offline"
         } : void 0,
-        onMinimize: () => setIsMinimized(true),
-        onClose: () => setIsClosed(true)
+        onMinimize,
+        onClose
       }
     ),
     !websocket.isConnected && /* @__PURE__ */ jsx5("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__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
@@ -1232,21 +1210,23 @@ function ChatWidget({
 }
 
 // src/components/Chat.tsx
-import { useCallback as useCallback5, useEffect as useEffect7, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/components/PreChatForm.tsx
-import { useState as useState7 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function PreChatForm({
   onSubmit,
   className = "",
   initialName = "",
-  initialEmail = ""
+  initialEmail = "",
+  onMinimize,
+  onClose
 }) {
-  const [name, setName] = useState7(initialName);
-  const [email, setEmail] = useState7(initialEmail);
-  const [errors, setErrors] = useState7({});
-  const [isSubmitting, setIsSubmitting] = useState7(false);
+  const [name, setName] = useState6(initialName);
+  const [email, setEmail] = useState6(initialEmail);
+  const [errors, setErrors] = useState6({});
+  const [isSubmitting, setIsSubmitting] = useState6(false);
   const validateForm = () => {
     const newErrors = {};
     if (!name.trim()) {
@@ -1288,10 +1268,74 @@ function PreChatForm({
         maxHeight: "calc(100vh - 2rem)"
       },
       children: [
-        /* @__PURE__ */ jsxs6("div", { className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4", children: [
-          /* @__PURE__ */ jsx6("h2", { className: "text-lg font-semibold", children: "Start a Conversation" }),
-          /* @__PURE__ */ jsx6("p", { className: "text-sm text-blue-100 mt-1", children: "Please provide your details to continue" })
-        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx6("h2", { className: "text-lg font-semibold", children: "Start a Conversation" }),
+            /* @__PURE__ */ jsx6("p", { className: "text-sm text-blue-100 mt-1", children: "Please provide your details to continue" })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex gap-2 ml-2", children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                onClick: onMinimize,
+                className: "text-white hover:bg-white/20 rounded p-1 transition-colors",
+                "aria-label": "Minimize chat",
+                children: /* @__PURE__ */ jsxs6(
+                  "svg",
+                  {
+                    className: "w-5 h-5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ jsx6("title", { children: "Minimize" }),
+                      /* @__PURE__ */ jsx6(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M20 12H4"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "text-white hover:bg-white/20 rounded p-1 transition-colors",
+                "aria-label": "Close chat",
+                children: /* @__PURE__ */ jsxs6(
+                  "svg",
+                  {
+                    className: "w-5 h-5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: [
+                      /* @__PURE__ */ jsx6("title", { children: "Close" }),
+                      /* @__PURE__ */ jsx6(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M6 18L18 6M6 6l12 12"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ] })
+        ] }) }),
         /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "p-6 space-y-5", children: [
           /* @__PURE__ */ jsxs6("div", { children: [
             /* @__PURE__ */ jsxs6(
@@ -1411,6 +1455,32 @@ function PreChatForm({
   );
 }
 
+// src/hooks/useChatWidgetState.ts
+import { useCallback as useCallback5, useState as useState7 } from "react";
+function useChatWidgetState({
+  state: controlledState,
+  defaultState = "minimized",
+  onStateChange
+}) {
+  const [uncontrolledState, setUncontrolledState] = useState7(defaultState);
+  const isControlled = controlledState !== void 0 && controlledState !== "undefined";
+  const currentState = isControlled ? controlledState : uncontrolledState;
+  const setState = useCallback5(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledState(newValue);
+      }
+      onStateChange?.(newValue);
+    },
+    [isControlled, onStateChange]
+  );
+  return {
+    currentState,
+    setState,
+    isControlled
+  };
+}
+
 // src/components/Chat.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 function generateSessionId() {
@@ -1423,11 +1493,19 @@ function Chat({
   config,
   className = "",
   storageKeyPrefix = "xcelsior_chat",
-  onPreChatSubmit
+  onPreChatSubmit,
+  state,
+  defaultState = "minimized",
+  onStateChange
 }) {
   const [userInfo, setUserInfo] = useState8(null);
   const [conversationId, setConversationId] = useState8("");
   const [isLoading, setIsLoading] = useState8(true);
+  const { currentState, setState } = useChatWidgetState({
+    state,
+    defaultState,
+    onStateChange
+  });
   useEffect7(() => {
     const initializeSession = () => {
       try {
@@ -1483,7 +1561,7 @@ function Chat({
     };
     initializeSession();
   }, [config, storageKeyPrefix]);
-  const handlePreChatSubmit = useCallback5(
+  const handlePreChatSubmit = useCallback6(
     (name, email) => {
       const convId = conversationId || generateSessionId();
       const user = {
@@ -1512,6 +1590,21 @@ function Chat({
   if (isLoading) {
     return null;
   }
+  if (currentState === "closed") {
+    return null;
+  }
+  if (currentState === "minimized") {
+    return /* @__PURE__ */ jsx7("div", { className: `fixed bottom-4 right-4 z-50 ${className}`, children: /* @__PURE__ */ jsx7(
+      "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__ */ jsx7("span", { className: "text-2xl", children: "\u{1F4AC}" })
+      }
+    ) });
+  }
   if (!userInfo || !userInfo.email || !userInfo.name) {
     return /* @__PURE__ */ jsx7(
       PreChatForm,
@@ -1519,7 +1612,9 @@ function Chat({
         onSubmit: handlePreChatSubmit,
         className,
         initialName: config.currentUser?.name,
-        initialEmail: config.currentUser?.email
+        initialEmail: config.currentUser?.email,
+        onClose: () => setState("closed"),
+        onMinimize: () => setState("minimized")
       }
     );
   }
@@ -1528,7 +1623,15 @@ function Chat({
     conversationId,
     currentUser: userInfo
   };
-  return /* @__PURE__ */ jsx7(ChatWidget, { config: fullConfig, className });
+  return /* @__PURE__ */ jsx7(
+    ChatWidget,
+    {
+      config: fullConfig,
+      className,
+      onClose: () => setState("closed"),
+      onMinimize: () => setState("minimized")
+    }
+  );
 }
 
 // src/components/TypingIndicator.tsx
@@ -1568,6 +1671,7 @@ export {
   PreChatForm,
   TypingIndicator,
   fetchMessages,
+  useChatWidgetState,
   useFileUpload,
   useMessages,
   useTypingIndicator,