@channlize/react 0.1.0-alpha.1

package/dist/index.js

@@ -0,0 +1,1032 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ChannlizeChat: () => ChannlizeChat,
+  ChannlizeProvider: () => ChannlizeProvider,
+  ContactForm: () => ContactForm,
+  SupportChat: () => SupportChat,
+  useChannlize: () => useChannlize,
+  useChatSession: () => useChatSession,
+  useContactForm: () => useContactForm
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context/ChannlizeContext.tsx
+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 }) {
+  const client = new import_core.ChannlizeClient(config);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannlizeContext.Provider, { value: { client, config }, children });
+}
+function useChannlize() {
+  const context = (0, import_react.useContext)(ChannlizeContext);
+  if (!context) {
+    throw new Error("useChannlize must be used within a ChannlizeProvider");
+  }
+  return context;
+}
+
+// src/hooks/useContactForm.ts
+var import_react2 = require("react");
+function useContactForm(options = {}) {
+  const { client } = useChannlize();
+  const [isSubmitting, setIsSubmitting] = (0, import_react2.useState)(false);
+  const [isSuccess, setIsSuccess] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const submit = (0, import_react2.useCallback)(
+    async (data) => {
+      setIsSubmitting(true);
+      setError(null);
+      setIsSuccess(false);
+      try {
+        const response = await client.submitContactForm(data);
+        setIsSuccess(true);
+        options.onSuccess?.(response);
+      } catch (err) {
+        const error2 = err;
+        setError(error2);
+        options.onError?.(error2);
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [client, options]
+  );
+  const reset = (0, import_react2.useCallback)(() => {
+    setIsSubmitting(false);
+    setIsSuccess(false);
+    setError(null);
+  }, []);
+  return {
+    submit,
+    isSubmitting,
+    isSuccess,
+    error,
+    reset
+  };
+}
+
+// src/hooks/useChatSession.ts
+var import_react3 = require("react");
+function useChatSession(options = {}) {
+  const { client, config } = useChannlize();
+  const [session, setSession] = (0, import_react3.useState)(null);
+  const [messages, setMessages] = (0, import_react3.useState)([]);
+  const [isConnecting, setIsConnecting] = (0, import_react3.useState)(false);
+  const [isConnected, setIsConnected] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const eventSourceRef = (0, import_react3.useRef)(null);
+  const sessionRef = (0, import_react3.useRef)(null);
+  const isInitializedRef = (0, import_react3.useRef)(false);
+  const baseUrl = config.baseUrl || "https://api.channlize.com";
+  const storageKey = options.storageKey || `channlize_session_${config.apiKey}`;
+  const persistSession = options.persistSession ?? true;
+  (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);
+      }
+    }
+  }, [persistSession, storageKey]);
+  const getSessionFromStorage = (0, import_react3.useCallback)(() => {
+    if (persistSession && typeof window !== "undefined") {
+      try {
+        return localStorage.getItem(storageKey);
+      } catch (err) {
+        console.warn("Failed to get session from localStorage:", err);
+      }
+    }
+    return null;
+  }, [persistSession, storageKey]);
+  const clearSessionFromStorage = (0, import_react3.useCallback)(() => {
+    if (persistSession && typeof window !== "undefined") {
+      try {
+        localStorage.removeItem(storageKey);
+      } catch (err) {
+        console.warn("Failed to clear session from localStorage:", err);
+      }
+    }
+  }, [persistSession, storageKey]);
+  const connectToSSE = (0, import_react3.useCallback)((sseEndpoint) => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+    const fullUrl = sseEndpoint.startsWith("http") ? sseEndpoint : `${baseUrl}${sseEndpoint}`;
+    const eventSource = new EventSource(fullUrl);
+    eventSourceRef.current = eventSource;
+    eventSource.onopen = () => {
+      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);
+      }
+    });
+    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 = () => {
+      setIsConnected(false);
+      eventSource.close();
+      eventSourceRef.current = null;
+      const error2 = new Error("Connection lost");
+      setError(error2);
+      options.onError?.(error2);
+    };
+  }, [baseUrl, options.onError, options.onMessage]);
+  const startSession = (0, import_react3.useCallback)(async () => {
+    if (isConnecting || session) return;
+    setIsConnecting(true);
+    setError(null);
+    try {
+      const existingSessionId = options.sessionId || getSessionFromStorage();
+      if (existingSessionId) {
+        try {
+          console.log("\u{1F4E6} Resuming session from storage:", existingSessionId);
+          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()
+          }));
+          setMessages(normalizedMessages2);
+          const sseEndpoint = `/v1/chat/sessions/${existingSessionId}/events`;
+          connectToSSE(sseEndpoint);
+          console.log("\u2705 Session resumed successfully");
+          return;
+        } catch (err) {
+          console.warn("\u26A0\uFE0F Failed to resume session, creating new one:", err);
+          clearSessionFromStorage();
+        }
+      }
+      console.log("\u{1F195} Creating new chat session");
+      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()
+      }));
+      setMessages(normalizedMessages);
+      if (response.sseEndpoint) {
+        connectToSSE(response.sseEndpoint);
+      }
+      console.log("\u2705 New session created:", response.session.id);
+    } catch (err) {
+      const error2 = err;
+      setError(error2);
+      options.onError?.(error2);
+    } finally {
+      setIsConnecting(false);
+    }
+  }, [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) {
+        throw new Error("No active chat session");
+      }
+      try {
+        const response = await client.sendMessage(
+          sessionRef.current.id,
+          content,
+          attachments
+        );
+        setMessages((prev) => {
+          const exists = prev.some((m) => m.id === response.message.id);
+          if (exists) return prev;
+          const message = {
+            ...response.message,
+            timestamp: response.message.timestamp ? new Date(response.message.timestamp) : /* @__PURE__ */ new Date()
+          };
+          return [...prev, message];
+        });
+      } catch (err) {
+        const error2 = err;
+        setError(error2);
+        options.onError?.(error2);
+        throw error2;
+      }
+    },
+    [client, options.onError]
+  );
+  const endSession = (0, import_react3.useCallback)(async () => {
+    if (!sessionRef.current) return;
+    try {
+      await client.closeChatSession(sessionRef.current.id);
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      clearSessionFromStorage();
+      setSession(null);
+      setMessages([]);
+      setIsConnected(false);
+      console.log("\u2705 Session ended and cleared from storage");
+    } catch (err) {
+      const error2 = err;
+      setError(error2);
+      options.onError?.(error2);
+    }
+  }, [client, options.onError, clearSessionFromStorage]);
+  (0, import_react3.useEffect)(() => {
+    if (options.autoConnect && !session && !isConnecting && !isInitializedRef.current) {
+      isInitializedRef.current = true;
+      startSession();
+    }
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+      }
+    };
+  }, [options.autoConnect, session, isConnecting, startSession]);
+  return {
+    session,
+    messages,
+    isConnecting,
+    isConnected,
+    error,
+    sendMessage,
+    startSession,
+    endSession
+  };
+}
+
+// src/components/Form.tsx
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Form({
+  customFields = [],
+  onSuccess,
+  onError,
+  className = "",
+  styles = {},
+  submitText = "Send Message",
+  successMessage = "Thank you! Your message has been sent."
+}) {
+  const [formData, setFormData] = (0, import_react4.useState)({
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+    customFields: {}
+  });
+  const { submit, isSubmitting, isSuccess, error, reset } = useContactForm({
+    onSuccess: () => {
+      setFormData({
+        name: "",
+        email: "",
+        subject: "",
+        message: "",
+        customFields: {}
+      });
+      onSuccess?.();
+    },
+    onError
+  });
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!formData.name || !formData.email || !formData.message) {
+      return;
+    }
+    await submit(formData);
+  };
+  const handleInputChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleCustomFieldChange = (fieldName, value) => {
+    setFormData((prev) => ({
+      ...prev,
+      customFields: {
+        ...prev.customFields,
+        [fieldName]: value
+      }
+    }));
+  };
+  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)(
+    "form",
+    {
+      className: `channlize-form ${className}`,
+      style: styles.form,
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "channlize-field", style: styles.field, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "channlize-name", style: styles.label, children: "Name *" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              id: "channlize-name",
+              type: "text",
+              value: formData.name || "",
+              onChange: (e) => handleInputChange("name", e.target.value),
+              required: true,
+              style: styles.input
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "channlize-field", style: styles.field, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "channlize-email", style: styles.label, children: "Email *" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              id: "channlize-email",
+              type: "email",
+              value: formData.email || "",
+              onChange: (e) => handleInputChange("email", e.target.value),
+              required: true,
+              style: styles.input
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "channlize-field", style: styles.field, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "channlize-subject", style: styles.label, children: "Subject" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              id: "channlize-subject",
+              type: "text",
+              value: formData.subject || "",
+              onChange: (e) => handleInputChange("subject", e.target.value),
+              style: styles.input
+            }
+          )
+        ] }),
+        customFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "channlize-field", style: styles.field, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: `channlize-${field.name}`, style: styles.label, children: [
+            field.label,
+            " ",
+            field.required && "*"
+          ] }),
+          field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "select",
+            {
+              id: `channlize-${field.name}`,
+              value: formData.customFields?.[field.name] || "",
+              onChange: (e) => handleCustomFieldChange(field.name, e.target.value),
+              required: field.required,
+              style: styles.input,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "Select..." }),
+                field.options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: option, children: option }, option))
+              ]
+            }
+          ) : field.type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "textarea",
+            {
+              id: `channlize-${field.name}`,
+              value: formData.customFields?.[field.name] || "",
+              onChange: (e) => handleCustomFieldChange(field.name, e.target.value),
+              required: field.required,
+              style: styles.textarea
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              id: `channlize-${field.name}`,
+              type: field.type,
+              value: formData.customFields?.[field.name] || "",
+              onChange: (e) => handleCustomFieldChange(field.name, e.target.value),
+              required: field.required,
+              style: styles.input
+            }
+          )
+        ] }, field.name)),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "channlize-field", style: styles.field, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "channlize-message", style: styles.label, children: "Message *" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "textarea",
+            {
+              id: "channlize-message",
+              value: formData.message || "",
+              onChange: (e) => handleInputChange("message", e.target.value),
+              required: true,
+              rows: 4,
+              style: styles.textarea
+            }
+          )
+        ] }),
+        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
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ContactForm.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ContactForm(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Form, { ...props });
+}
+
+// src/components/SupportChat.tsx
+var import_react5 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SupportChat({
+  autoConnect = true,
+  metadata,
+  onMessage,
+  onError,
+  sessionId,
+  persistSession,
+  storageKey,
+  className = "",
+  styles = {},
+  placeholder = "Type your message...",
+  title = "Support Chat",
+  sendButtonText = "Send",
+  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 {
+    session,
+    messages,
+    isConnecting,
+    isConnected,
+    error,
+    sendMessage,
+    startSession,
+    endSession
+  } = useChatSession({
+    autoConnect,
+    metadata,
+    onMessage,
+    onError,
+    sessionId,
+    persistSession,
+    storageKey
+  });
+  (0, import_react5.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);
+      setMessageInput("");
+      setAttachments([]);
+    } catch (err) {
+      console.error("Failed to send message:", err);
+    }
+  };
+  const handleFileChange = (e) => {
+    if (e.target.files) {
+      setAttachments(Array.from(e.target.files));
+    }
+  };
+  const formatTimestamp = (date) => {
+    if (!date || isNaN(date.getTime())) {
+      return "";
+    }
+    try {
+      return new Intl.DateTimeFormat("en-US", {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true
+      }).format(date);
+    } catch (error2) {
+      console.warn("Failed to format timestamp:", error2);
+      return "";
+    }
+  };
+  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",
+      {
+        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_jsx_runtime5 = require("react/jsx-runtime");
+function ChannlizeChat({
+  config,
+  position = "bottom-right",
+  offset = { x: 24, y: 24 },
+  buttonElement,
+  buttonIcon,
+  buttonSize = 56,
+  buttonColors = {
+    background: "#3b82f6",
+    hover: "#2563eb",
+    text: "#ffffff"
+  },
+  chatProps = {},
+  defaultOpen = false,
+  showBadge = false,
+  unreadCount = 0,
+  zIndex = 1e3,
+  showOnMobile = true,
+  onOpen,
+  onClose,
+  enableAnimations = true,
+  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);
+  }, []);
+  if (!isMounted) {
+    return null;
+  }
+  const handleToggle = () => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    if (newState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+  const positionStyles = {
+    position: "fixed",
+    zIndex,
+    ...position.includes("bottom") ? { bottom: `${offset.y}px` } : { top: `${offset.y}px` },
+    ...position.includes("right") ? { right: `${offset.x}px` } : { left: `${offset.x}px` }
+  };
+  const buttonStyle = {
+    width: `${buttonSize}px`,
+    height: `${buttonSize}px`,
+    borderRadius: "50%",
+    backgroundColor: buttonColors.background,
+    color: buttonColors.text,
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    transition: enableAnimations ? "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)" : "none",
+    transform: enableAnimations && isOpen ? "scale(0.9)" : "scale(1)"
+  };
+  const chatContainerStyle = {
+    ...positionStyles,
+    opacity: isOpen ? 1 : 0,
+    visibility: isOpen ? "visible" : "hidden",
+    transform: enableAnimations ? isOpen ? "scale(1) translateY(0)" : "scale(0.95) translateY(10px)" : "none",
+    transition: enableAnimations ? "opacity 0.2s, transform 0.2s, visibility 0.2s" : "none"
+  };
+  const defaultIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      width: buttonSize * 0.5,
+      height: buttonSize * 0.5,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { 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" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 10h.01" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 10h.01" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16 10h.01" })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ChannlizeProvider, { config, children: [
+    !isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        style: {
+          ...positionStyles,
+          display: !showOnMobile && typeof window !== "undefined" && window.innerWidth < 768 ? "none" : "block"
+        },
+        className: buttonClassName,
+        children: buttonElement ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { onClick: handleToggle, style: { cursor: "pointer" }, children: buttonElement }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "button",
+          {
+            onClick: handleToggle,
+            style: buttonStyle,
+            onMouseEnter: (e) => {
+              if (enableAnimations) {
+                e.currentTarget.style.backgroundColor = buttonColors.hover || buttonColors.background || "#2563eb";
+                e.currentTarget.style.transform = "scale(1.05)";
+              }
+            },
+            onMouseLeave: (e) => {
+              if (enableAnimations) {
+                e.currentTarget.style.backgroundColor = buttonColors.background || "#3b82f6";
+                e.currentTarget.style.transform = "scale(1)";
+              }
+            },
+            "aria-label": isOpen ? "Close chat" : "Open chat",
+            children: [
+              buttonIcon || defaultIcon,
+              showBadge && unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "-4px",
+                    right: "-4px",
+                    backgroundColor: "#ef4444",
+                    color: "white",
+                    borderRadius: "10px",
+                    padding: "2px 6px",
+                    fontSize: "12px",
+                    fontWeight: "600",
+                    minWidth: "20px",
+                    textAlign: "center",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
+                  },
+                  children: unreadCount > 99 ? "99+" : unreadCount
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__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",
+            {
+              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" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChannlizeChat,
+  ChannlizeProvider,
+  ContactForm,
+  SupportChat,
+  useChannlize,
+  useChatSession,
+  useContactForm
+});
+//# sourceMappingURL=index.js.map