@channlize/react 0.1.0-alpha.2 → 0.1.1

package/dist/index.js

@@ -25,6 +25,7 @@ __export(index_exports, {
   ContactForm: () => ContactForm,
   SupportChat: () => SupportChat,
   useChannlize: () => useChannlize,
+  useChannlizeAnalytics: () => useChannlizeAnalytics,
   useChatSession: () => useChatSession,
   useContactForm: () => useContactForm
 });
@@ -35,7 +36,10 @@ var import_react = require("react");
 var import_core = require("@channlize/core");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ChannlizeContext = (0, import_react.createContext)(null);
-function ChannlizeProvider({ config, children }) {
+function ChannlizeProvider({
+  config,
+  children
+}) {
   const client = new import_core.ChannlizeClient(config);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannlizeContext.Provider, { value: { client, config }, children });
 }
@@ -105,15 +109,18 @@ function useChatSession(options = {}) {
   (0, import_react3.useEffect)(() => {
     sessionRef.current = session;
   }, [session]);
-  const saveSessionToStorage = (0, import_react3.useCallback)((sessionId) => {
-    if (persistSession && typeof window !== "undefined") {
-      try {
-        localStorage.setItem(storageKey, sessionId);
-      } catch (err) {
-        console.warn("Failed to save session to localStorage:", err);
+  const saveSessionToStorage = (0, import_react3.useCallback)(
+    (sessionId) => {
+      if (persistSession && typeof window !== "undefined") {
+        try {
+          localStorage.setItem(storageKey, sessionId);
+        } catch (err) {
+          console.warn("Failed to save session to localStorage:", err);
+        }
       }
-    }
-  }, [persistSession, storageKey]);
+    },
+    [persistSession, storageKey]
+  );
   const getSessionFromStorage = (0, import_react3.useCallback)(() => {
     if (persistSession && typeof window !== "undefined") {
       try {
@@ -133,73 +140,80 @@ function useChatSession(options = {}) {
       }
     }
   }, [persistSession, storageKey]);
-  const connectToSSE = (0, import_react3.useCallback)((sseEndpoint) => {
-    if (eventSourceRef.current) {
-      eventSourceRef.current.close();
-    }
-    const fullUrl = sseEndpoint.startsWith("http") ? sseEndpoint : `${baseUrl}${sseEndpoint}`;
-    console.log("[Channlize SSE] Connecting to:", fullUrl);
-    const eventSource = new EventSource(fullUrl);
-    eventSourceRef.current = eventSource;
-    eventSource.onopen = () => {
-      console.log("[Channlize SSE] Connection opened");
-      setIsConnected(true);
-      setError(null);
-    };
-    eventSource.addEventListener("connected", (event) => {
-      console.log("SSE connected:", event.data);
-    });
-    eventSource.addEventListener("message", (event) => {
-      try {
-        console.log("SSE message:", event.data);
-        const message = JSON.parse(event.data);
-        const chatMessage = {
-          ...message,
-          timestamp: message.timestamp ? new Date(message.timestamp) : /* @__PURE__ */ new Date()
-        };
-        setMessages((prev) => {
-          const exists = prev.some((m) => m.id === chatMessage.id);
-          return exists ? prev : [...prev, chatMessage];
-        });
-        options.onMessage?.(chatMessage);
-      } catch (err) {
-        console.warn("Failed to parse SSE message:", err, event.data);
+  const connectToSSE = (0, import_react3.useCallback)(
+    (sseEndpoint) => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
       }
-    });
-    eventSource.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === "message" && data.message) {
-          const message = {
-            ...data.message,
-            timestamp: data.message.timestamp ? new Date(data.message.timestamp) : /* @__PURE__ */ new Date()
+      const fullUrl = sseEndpoint.startsWith("http") ? sseEndpoint : `${baseUrl}${sseEndpoint}`;
+      console.log("[Channlize SSE] Connecting to:", fullUrl);
+      const eventSource = new EventSource(fullUrl);
+      eventSourceRef.current = eventSource;
+      eventSource.onopen = () => {
+        console.log("[Channlize SSE] Connection opened");
+        setIsConnected(true);
+        setError(null);
+      };
+      eventSource.addEventListener("connected", (event) => {
+        console.log("SSE connected:", event.data);
+      });
+      eventSource.addEventListener("message", (event) => {
+        try {
+          console.log("SSE message:", event.data);
+          const message = JSON.parse(event.data);
+          const chatMessage = {
+            ...message,
+            timestamp: message.timestamp ? new Date(message.timestamp) : /* @__PURE__ */ new Date()
           };
           setMessages((prev) => {
-            const exists = prev.some((m) => m.id === message.id);
-            return exists ? prev : [...prev, message];
+            const exists = prev.some((m) => m.id === chatMessage.id);
+            return exists ? prev : [...prev, chatMessage];
           });
-          options.onMessage?.(message);
+          options.onMessage?.(chatMessage);
+        } catch (err) {
+          console.warn("Failed to parse SSE message:", err, event.data);
         }
-      } catch (err) {
-        console.warn("Failed to parse default SSE message:", err);
-      }
-    };
-    eventSource.onerror = (event) => {
-      console.error("[Channlize SSE] Connection error", {
-        readyState: eventSource.readyState,
-        url: fullUrl,
-        event
       });
-      const stateMessage = eventSource.readyState === 0 ? "Failed to connect (CONNECTING)" : eventSource.readyState === 1 ? "Connection error while OPEN" : "Connection closed";
-      setIsConnected(false);
-      eventSource.close();
-      eventSourceRef.current = null;
-      const error2 = new Error(`SSE ${stateMessage}`);
-      error2.code = "SSE_ERROR";
-      setError(error2);
-      options.onError?.(error2);
-    };
-  }, [baseUrl, options.onError, options.onMessage]);
+      eventSource.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === "message" && data.message) {
+            const message = {
+              ...data.message,
+              timestamp: data.message.timestamp ? new Date(data.message.timestamp) : /* @__PURE__ */ new Date()
+            };
+            setMessages((prev) => {
+              const exists = prev.some((m) => m.id === message.id);
+              return exists ? prev : [...prev, message];
+            });
+            options.onMessage?.(message);
+          }
+        } catch (err) {
+          console.warn("Failed to parse default SSE message:", err);
+        }
+      };
+      eventSource.onerror = (event) => {
+        if (eventSource.readyState === EventSource.CONNECTING) {
+          setIsConnected(false);
+          return;
+        }
+        console.error("[Channlize SSE] Connection error", {
+          readyState: eventSource.readyState,
+          url: fullUrl,
+          event
+        });
+        const stateMessage = eventSource.readyState === 0 ? "Failed to connect (CONNECTING)" : eventSource.readyState === 1 ? "Connection error while OPEN" : "Connection closed";
+        setIsConnected(false);
+        eventSource.close();
+        eventSourceRef.current = null;
+        const error2 = new Error(`SSE ${stateMessage}`);
+        error2.code = "SSE_ERROR";
+        setError(error2);
+        options.onError?.(error2);
+      };
+    },
+    [baseUrl, options.onError, options.onMessage]
+  );
   const startSession = (0, import_react3.useCallback)(async () => {
     if (isConnecting || session) return;
     setIsConnecting(true);
@@ -212,10 +226,12 @@ function useChatSession(options = {}) {
           const existingSession = await client.getChatSession(existingSessionId);
           const existingMessages = await client.getChatMessages(existingSessionId);
           setSession(existingSession);
-          const normalizedMessages2 = existingMessages.map((msg) => ({
-            ...msg,
-            timestamp: msg.timestamp ? new Date(msg.timestamp) : /* @__PURE__ */ new Date()
-          }));
+          const normalizedMessages2 = existingMessages.map(
+            (msg) => ({
+              ...msg,
+              timestamp: msg.timestamp ? new Date(msg.timestamp) : /* @__PURE__ */ new Date()
+            })
+          );
           setMessages(normalizedMessages2);
           const sseEndpoint = `/v1/chat/sessions/${existingSessionId}/events`;
           connectToSSE(sseEndpoint);
@@ -230,10 +246,12 @@ function useChatSession(options = {}) {
       const response = await client.createChatSession(options.metadata);
       setSession(response.session);
       saveSessionToStorage(response.session.id);
-      const normalizedMessages = (response.session.messages || []).map((msg) => ({
-        ...msg,
-        timestamp: msg.timestamp ? new Date(msg.timestamp) : /* @__PURE__ */ new Date()
-      }));
+      const normalizedMessages = (response.session.messages || []).map(
+        (msg) => ({
+          ...msg,
+          timestamp: msg.timestamp ? new Date(msg.timestamp) : /* @__PURE__ */ new Date()
+        })
+      );
       setMessages(normalizedMessages);
       if (response.sseEndpoint) {
         connectToSSE(response.sseEndpoint);
@@ -246,7 +264,18 @@ function useChatSession(options = {}) {
     } finally {
       setIsConnecting(false);
     }
-  }, [client, connectToSSE, options.metadata, options.onError, options.sessionId, getSessionFromStorage, saveSessionToStorage, clearSessionFromStorage, isConnecting, session]);
+  }, [
+    client,
+    connectToSSE,
+    options.metadata,
+    options.onError,
+    options.sessionId,
+    getSessionFromStorage,
+    saveSessionToStorage,
+    clearSessionFromStorage,
+    isConnecting,
+    session
+  ]);
   const sendMessage = (0, import_react3.useCallback)(
     async (content, attachments) => {
       if (!sessionRef.current) {
@@ -300,12 +329,15 @@ function useChatSession(options = {}) {
       isInitializedRef.current = true;
       startSession();
     }
+  }, [options.autoConnect, session, isConnecting, startSession]);
+  (0, import_react3.useEffect)(() => {
     return () => {
       if (eventSourceRef.current) {
         eventSourceRef.current.close();
+        eventSourceRef.current = null;
       }
     };
-  }, [options.autoConnect, session, isConnecting, startSession]);
+  }, []);
   return {
     session,
     messages,
@@ -318,8 +350,19 @@ function useChatSession(options = {}) {
   };
 }
 
-// src/components/Form.tsx
+// src/hooks/useChannlizeAnalytics.ts
 var import_react4 = require("react");
+function useChannlizeAnalytics() {
+  const { client } = useChannlize();
+  const track = (0, import_react4.useCallback)(
+    (name, options) => client.trackEvent(name, options),
+    [client]
+  );
+  return { track };
+}
+
+// src/components/Form.tsx
+var import_react5 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Form({
   customFields = [],
@@ -330,7 +373,7 @@ function Form({
   submitText = "Send Message",
   successMessage = "Thank you! Your message has been sent."
 }) {
-  const [formData, setFormData] = (0, import_react4.useState)({
+  const [formData, setFormData] = (0, import_react5.useState)({
     name: "",
     email: "",
     subject: "",
@@ -358,7 +401,10 @@ function Form({
     await submit(formData);
   };
   const handleInputChange = (field, value) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value
+    }));
   };
   const handleCustomFieldChange = (fieldName, value) => {
     setFormData((prev) => ({
@@ -370,18 +416,17 @@ function Form({
     }));
   };
   if (isSuccess) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `channlize-form-success ${className}`, style: styles.success, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: successMessage }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: reset,
-          style: styles.button,
-          children: "Send Another Message"
-        }
-      )
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: `channlize-form-success ${className}`,
+        style: styles.success,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: successMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", onClick: reset, style: styles.button, children: "Send Another Message" })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "form",
@@ -486,15 +531,7 @@ function Form({
           )
         ] }),
         error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "channlize-error", style: styles.error, children: error.message }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "button",
-          {
-            type: "submit",
-            disabled: isSubmitting,
-            style: styles.button,
-            children: isSubmitting ? "Sending..." : submitText
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "submit", disabled: isSubmitting, style: styles.button, children: isSubmitting ? "Sending..." : submitText })
       ]
     }
   );
@@ -507,7 +544,7 @@ function ContactForm(props) {
 }
 
 // src/components/SupportChat.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function SupportChat({
   autoConnect = true,
@@ -525,9 +562,9 @@ function SupportChat({
   showTimestamps = true,
   allowAttachments = false
 }) {
-  const [messageInput, setMessageInput] = (0, import_react5.useState)("");
-  const [attachments, setAttachments] = (0, import_react5.useState)([]);
-  const messagesEndRef = (0, import_react5.useRef)(null);
+  const [messageInput, setMessageInput] = (0, import_react6.useState)("");
+  const [attachments, setAttachments] = (0, import_react6.useState)([]);
+  const messagesEndRef = (0, import_react6.useRef)(null);
   const {
     session,
     messages,
@@ -546,14 +583,17 @@ function SupportChat({
     persistSession,
     storageKey
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!messageInput.trim() && attachments.length === 0) return;
     try {
-      await sendMessage(messageInput, attachments.length > 0 ? attachments : void 0);
+      await sendMessage(
+        messageInput,
+        attachments.length > 0 ? attachments : void 0
+      );
       setMessageInput("");
       setAttachments([]);
     } catch (err) {
@@ -581,130 +621,183 @@ function SupportChat({
     }
   };
   if (!session && !isConnecting) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `channlize-chat-container ${className}`, style: styles.container, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-chat-header", style: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { children: title }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-chat-start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: startSession, style: styles.button, children: "Start Chat" }) }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-error", style: styles.error, children: error.message })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `channlize-chat-container ${className}`, style: styles.container, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "channlize-chat-header", style: styles.header, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "channlize-chat-status", style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-        isConnecting && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
-            display: "inline-block",
-            width: "8px",
-            height: "8px",
-            borderRadius: "50%",
-            backgroundColor: "#f59e0b"
-          } }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Connecting..." })
-        ] }),
-        isConnected && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
-            display: "inline-block",
-            width: "8px",
-            height: "8px",
-            borderRadius: "50%",
-            backgroundColor: "#10b981"
-          } }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Connected" })
-        ] }),
-        !isConnected && !isConnecting && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
-            display: "inline-block",
-            width: "8px",
-            height: "8px",
-            borderRadius: "50%",
-            backgroundColor: "#ef4444"
-          } }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Disconnected" })
-        ] })
-      ] }),
-      session && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
-        {
-          onClick: endSession,
-          style: { ...styles.button, fontSize: "0.875rem" },
-          type: "button",
-          children: "End Chat"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "channlize-messages", style: styles.messagesContainer, children: [
-      messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "center", padding: "2rem", color: "#666" }, children: "No messages yet. Start the conversation!" }),
-      messages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-        "div",
-        {
-          className: `channlize-message ${message.author === "user" ? "channlize-message-user" : "channlize-message-agent"}`,
-          style: {
-            ...styles.message,
-            ...message.author === "user" ? styles.userMessage : styles.agentMessage
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-message-content", children: message.content }),
-            showTimestamps && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-message-timestamp", style: styles.timestamp, children: formatTimestamp(message.timestamp) })
-          ]
-        },
-        message.id || index
-      )),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: messagesEndRef })
-    ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-error", style: styles.error, children: error.message }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      "form",
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
       {
-        className: "channlize-chat-input-container",
-        style: styles.inputContainer,
-        onSubmit: handleSubmit,
+        className: `channlize-chat-container ${className}`,
+        style: styles.container,
         children: [
-          allowAttachments && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "input",
-              {
-                type: "file",
-                multiple: true,
-                onChange: handleFileChange,
-                style: { fontSize: "0.875rem" }
-              }
-            ),
-            attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: "0.75rem", marginTop: "0.25rem" }, children: [
-              attachments.length,
-              " file(s) selected"
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "0.5rem" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "input",
-              {
-                type: "text",
-                value: messageInput,
-                onChange: (e) => setMessageInput(e.target.value),
-                placeholder,
-                disabled: !session || isConnecting,
-                style: { ...styles.input, flex: 1 }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "button",
-              {
-                type: "submit",
-                disabled: !session || isConnecting || !messageInput.trim() && attachments.length === 0,
-                style: styles.button,
-                children: sendButtonText
-              }
-            )
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-chat-header", style: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-chat-start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: startSession, style: styles.button, children: "Start Chat" }) }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-error", style: styles.error, children: error.message })
         ]
       }
-    )
-  ] });
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `channlize-chat-container ${className}`,
+      style: styles.container,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "channlize-chat-header", style: styles.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              className: "channlize-chat-status",
+              style: { display: "flex", alignItems: "center", gap: "0.5rem" },
+              children: [
+                isConnecting && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        width: "8px",
+                        height: "8px",
+                        borderRadius: "50%",
+                        backgroundColor: "#f59e0b"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Connecting..." })
+                ] }),
+                isConnected && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        width: "8px",
+                        height: "8px",
+                        borderRadius: "50%",
+                        backgroundColor: "#10b981"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Connected" })
+                ] }),
+                !isConnected && !isConnecting && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        width: "8px",
+                        height: "8px",
+                        borderRadius: "50%",
+                        backgroundColor: "#ef4444"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Disconnected" })
+                ] })
+              ]
+            }
+          ),
+          session && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: endSession,
+              style: { ...styles.button, fontSize: "0.875rem" },
+              type: "button",
+              children: "End Chat"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "channlize-messages", style: styles.messagesContainer, children: [
+          messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { textAlign: "center", padding: "2rem", color: "#666" }, children: "No messages yet. Start the conversation!" }),
+          messages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              className: `channlize-message ${message.author === "user" ? "channlize-message-user" : "channlize-message-agent"}`,
+              style: {
+                ...styles.message,
+                ...message.author === "user" ? styles.userMessage : styles.agentMessage
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-message-content", children: message.content }),
+                showTimestamps && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    className: "channlize-message-timestamp",
+                    style: styles.timestamp,
+                    children: formatTimestamp(message.timestamp)
+                  }
+                )
+              ]
+            },
+            message.id || index
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: messagesEndRef })
+        ] }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "channlize-error", style: styles.error, children: error.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "form",
+          {
+            className: "channlize-chat-input-container",
+            style: styles.inputContainer,
+            onSubmit: handleSubmit,
+            children: [
+              allowAttachments && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "input",
+                  {
+                    type: "file",
+                    multiple: true,
+                    onChange: handleFileChange,
+                    style: { fontSize: "0.875rem" }
+                  }
+                ),
+                attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: "0.75rem", marginTop: "0.25rem" }, children: [
+                  attachments.length,
+                  " file(s) selected"
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: messageInput,
+                    onChange: (e) => setMessageInput(e.target.value),
+                    placeholder,
+                    disabled: !session || isConnecting,
+                    style: { ...styles.input, flex: 1 }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    type: "submit",
+                    disabled: !session || isConnecting || !messageInput.trim() && attachments.length === 0,
+                    style: styles.button,
+                    children: sendButtonText
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/ChannlizeChat.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var emptySubscribe = () => () => {
+};
+function subscribeDarkMode(onStoreChange) {
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  mediaQuery.addEventListener("change", onStoreChange);
+  return () => mediaQuery.removeEventListener("change", onStoreChange);
+}
+function getDarkModeSnapshot() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
 function ChannlizeChat({
   config,
   position = "bottom-right",
@@ -729,20 +822,17 @@ function ChannlizeChat({
   buttonClassName = "",
   chatClassName = ""
 }) {
-  const [isOpen, setIsOpen] = (0, import_react6.useState)(defaultOpen);
-  const [isMounted, setIsMounted] = (0, import_react6.useState)(false);
-  const [isDarkMode, setIsDarkMode] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
-    setIsMounted(true);
-  }, []);
-  (0, import_react6.useEffect)(() => {
-    if (typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    setIsDarkMode(mediaQuery.matches);
-    const handler = (e) => setIsDarkMode(e.matches);
-    mediaQuery.addEventListener("change", handler);
-    return () => mediaQuery.removeEventListener("change", handler);
-  }, []);
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(defaultOpen);
+  const isMounted = (0, import_react7.useSyncExternalStore)(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+  const isDarkMode = (0, import_react7.useSyncExternalStore)(
+    subscribeDarkMode,
+    getDarkModeSnapshot,
+    () => false
+  );
   if (!isMounted) {
     return null;
   }
@@ -859,173 +949,166 @@ function ChannlizeChat({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
-      {
-        style: chatContainerStyle,
-        className: chatClassName,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            SupportChat,
-            {
-              autoConnect: isOpen,
-              persistSession: true,
-              title: "Support Chat",
-              placeholder: "Type your message...",
-              showTimestamps: true,
-              ...chatProps,
-              styles: {
-                container: {
-                  width: "384px",
-                  height: "600px",
-                  maxHeight: "calc(100vh - 120px)",
-                  borderRadius: "16px",
-                  overflow: "hidden",
-                  boxShadow: isDarkMode ? "0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.5)" : "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-                  backgroundColor: isDarkMode ? "#1f2937" : "#ffffff",
-                  display: "flex",
-                  flexDirection: "column",
-                  position: "relative",
-                  ...chatProps.styles?.container
-                },
-                header: {
-                  background: "linear-gradient(135deg, #3b82f6 0%, #9333ea 100%)",
-                  padding: "20px",
-                  borderRadius: "16px 16px 0 0",
-                  color: "white",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  ...chatProps.styles?.header
-                },
-                messagesContainer: {
-                  flex: 1,
-                  overflowY: "auto",
-                  padding: "20px",
-                  backgroundColor: isDarkMode ? "#111827" : "#f9fafb",
-                  ...chatProps.styles?.messagesContainer
-                },
-                inputContainer: {
-                  padding: "16px",
-                  backgroundColor: isDarkMode ? "#1f2937" : "white",
-                  borderTop: `1px solid ${isDarkMode ? "#374151" : "#e5e7eb"}`,
-                  ...chatProps.styles?.inputContainer
-                },
-                input: {
-                  ...chatProps.styles?.input,
-                  borderRadius: "12px",
-                  padding: "12px 16px",
-                  fontSize: "14px",
-                  border: `1px solid ${isDarkMode ? "#374151" : "#d1d5db"}`,
-                  outline: "none",
-                  backgroundColor: isDarkMode ? "#374151" : "#ffffff",
-                  color: isDarkMode ? "#f9fafb" : "#111827",
-                  fontWeight: "400"
-                },
-                button: {
-                  backgroundColor: "#3b82f6",
-                  color: "white",
-                  borderRadius: "12px",
-                  padding: "12px 24px",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  border: "none",
-                  cursor: "pointer",
-                  transition: "background-color 0.2s",
-                  ...chatProps.styles?.button
-                },
-                userMessage: {
-                  backgroundColor: "#3b82f6",
-                  color: "white",
-                  padding: "10px 14px",
-                  borderRadius: "12px 12px 4px 12px",
-                  marginBottom: "8px",
-                  marginLeft: "auto",
-                  maxWidth: "80%",
-                  width: "fit-content",
-                  ...chatProps.styles?.userMessage
-                },
-                agentMessage: {
-                  backgroundColor: isDarkMode ? "#374151" : "white",
-                  color: isDarkMode ? "#f9fafb" : "#1f2937",
-                  padding: "10px 14px",
-                  borderRadius: "12px 12px 12px 4px",
-                  marginBottom: "8px",
-                  marginRight: "auto",
-                  maxWidth: "80%",
-                  width: "fit-content",
-                  boxShadow: isDarkMode ? "0 1px 2px 0 rgb(0 0 0 / 0.3)" : "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-                  ...chatProps.styles?.agentMessage
-                },
-                timestamp: {
-                  fontSize: "11px",
-                  opacity: 0.7,
-                  marginTop: "4px",
-                  color: isDarkMode ? "#d1d5db" : "inherit",
-                  ...chatProps.styles?.timestamp
-                },
-                error: {
-                  backgroundColor: isDarkMode ? "#7f1d1d" : "#fee2e2",
-                  color: isDarkMode ? "#fca5a5" : "#991b1b",
-                  padding: "12px",
-                  margin: "8px 16px",
-                  borderRadius: "8px",
-                  fontSize: "14px",
-                  ...chatProps.styles?.error
-                }
-              }
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: chatContainerStyle, className: chatClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        SupportChat,
+        {
+          autoConnect: isOpen,
+          persistSession: true,
+          title: "Support Chat",
+          placeholder: "Type your message...",
+          showTimestamps: true,
+          ...chatProps,
+          styles: {
+            container: {
+              width: "384px",
+              height: "600px",
+              maxHeight: "calc(100vh - 120px)",
+              borderRadius: "16px",
+              overflow: "hidden",
+              boxShadow: isDarkMode ? "0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.5)" : "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+              backgroundColor: isDarkMode ? "#1f2937" : "#ffffff",
+              display: "flex",
+              flexDirection: "column",
+              position: "relative",
+              ...chatProps.styles?.container
+            },
+            header: {
+              background: "linear-gradient(135deg, #3b82f6 0%, #9333ea 100%)",
+              padding: "20px",
+              borderRadius: "16px 16px 0 0",
+              color: "white",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              ...chatProps.styles?.header
+            },
+            messagesContainer: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "20px",
+              backgroundColor: isDarkMode ? "#111827" : "#f9fafb",
+              ...chatProps.styles?.messagesContainer
+            },
+            inputContainer: {
+              padding: "16px",
+              backgroundColor: isDarkMode ? "#1f2937" : "white",
+              borderTop: `1px solid ${isDarkMode ? "#374151" : "#e5e7eb"}`,
+              ...chatProps.styles?.inputContainer
+            },
+            input: {
+              ...chatProps.styles?.input,
+              borderRadius: "12px",
+              padding: "12px 16px",
+              fontSize: "14px",
+              border: `1px solid ${isDarkMode ? "#374151" : "#d1d5db"}`,
+              outline: "none",
+              backgroundColor: isDarkMode ? "#374151" : "#ffffff",
+              color: isDarkMode ? "#f9fafb" : "#111827",
+              fontWeight: "400"
+            },
+            button: {
+              backgroundColor: "#3b82f6",
+              color: "white",
+              borderRadius: "12px",
+              padding: "12px 24px",
+              fontSize: "14px",
+              fontWeight: "500",
+              border: "none",
+              cursor: "pointer",
+              transition: "background-color 0.2s",
+              ...chatProps.styles?.button
+            },
+            userMessage: {
+              backgroundColor: "#3b82f6",
+              color: "white",
+              padding: "10px 14px",
+              borderRadius: "12px 12px 4px 12px",
+              marginBottom: "8px",
+              marginLeft: "auto",
+              maxWidth: "80%",
+              width: "fit-content",
+              ...chatProps.styles?.userMessage
+            },
+            agentMessage: {
+              backgroundColor: isDarkMode ? "#374151" : "white",
+              color: isDarkMode ? "#f9fafb" : "#1f2937",
+              padding: "10px 14px",
+              borderRadius: "12px 12px 12px 4px",
+              marginBottom: "8px",
+              marginRight: "auto",
+              maxWidth: "80%",
+              width: "fit-content",
+              boxShadow: isDarkMode ? "0 1px 2px 0 rgb(0 0 0 / 0.3)" : "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+              ...chatProps.styles?.agentMessage
+            },
+            timestamp: {
+              fontSize: "11px",
+              opacity: 0.7,
+              marginTop: "4px",
+              color: isDarkMode ? "#d1d5db" : "inherit",
+              ...chatProps.styles?.timestamp
+            },
+            error: {
+              backgroundColor: isDarkMode ? "#7f1d1d" : "#fee2e2",
+              color: isDarkMode ? "#fca5a5" : "#991b1b",
+              padding: "12px",
+              margin: "8px 16px",
+              borderRadius: "8px",
+              fontSize: "14px",
+              ...chatProps.styles?.error
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "button",
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          onClick: handleToggle,
+          style: {
+            position: "absolute",
+            top: "16px",
+            right: "16px",
+            width: "32px",
+            height: "32px",
+            borderRadius: "50%",
+            backgroundColor: "rgba(255, 255, 255, 0.2)",
+            border: "none",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "white",
+            transition: "background-color 0.2s",
+            zIndex: 10
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+          },
+          "aria-label": "Close chat",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "svg",
             {
-              onClick: handleToggle,
-              style: {
-                position: "absolute",
-                top: "16px",
-                right: "16px",
-                width: "32px",
-                height: "32px",
-                borderRadius: "50%",
-                backgroundColor: "rgba(255, 255, 255, 0.2)",
-                border: "none",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                color: "white",
-                transition: "background-color 0.2s",
-                zIndex: 10
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
-              },
-              "aria-label": "Close chat",
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-                "svg",
-                {
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                  ]
-                }
-              )
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ]
             }
           )
-        ]
-      }
-    )
+        }
+      )
+    ] })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -1035,6 +1118,7 @@ function ChannlizeChat({
   ContactForm,
   SupportChat,
   useChannlize,
+  useChannlizeAnalytics,
   useChatSession,
   useContactForm
 });