@mnexium/chat-react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,589 @@
+"use client";
+
+// src/client/MnexiumChat.tsx
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var themes = {
+  dark: {
+    bg: "#1a1a1a",
+    bgSecondary: "#2a2a2a",
+    border: "#333",
+    text: "#fff",
+    textSecondary: "#e5e5e5",
+    textMuted: "#888",
+    inputBg: "#2a2a2a",
+    inputBorder: "#444",
+    codeBg: "#374151",
+    codeBlockBg: "#1f2937"
+  },
+  light: {
+    bg: "#ffffff",
+    bgSecondary: "#f3f4f6",
+    border: "#e5e7eb",
+    text: "#111827",
+    textSecondary: "#374151",
+    textMuted: "#6b7280",
+    inputBg: "#f9fafb",
+    inputBorder: "#d1d5db",
+    codeBg: "#e5e7eb",
+    codeBlockBg: "#f3f4f6"
+  }
+};
+function generateId() {
+  return Math.random().toString(36).substring(2, 15);
+}
+function renderMarkdown(text, themeColors) {
+  if (!text) return null;
+  const lines = text.split("\n");
+  const elements = [];
+  let inCodeBlock = false;
+  let codeContent = [];
+  const processInline = (line) => {
+    const parts = [];
+    let remaining = line;
+    let key = 0;
+    while (remaining.length > 0) {
+      const codeMatch = remaining.match(/`([^`]+)`/);
+      const boldMatch = remaining.match(/\*\*([^*]+)\*\*/);
+      const italicMatch = remaining.match(/\*([^*]+)\*/);
+      const matches = [
+        codeMatch ? { type: "code", match: codeMatch, index: codeMatch.index } : null,
+        boldMatch ? { type: "bold", match: boldMatch, index: boldMatch.index } : null,
+        italicMatch ? { type: "italic", match: italicMatch, index: italicMatch.index } : null
+      ].filter(Boolean).sort((a, b) => a.index - b.index);
+      if (matches.length === 0) {
+        parts.push(remaining);
+        break;
+      }
+      const first = matches[0];
+      if (first.index > 0) {
+        parts.push(remaining.substring(0, first.index));
+      }
+      if (first.type === "code") {
+        parts.push(
+          /* @__PURE__ */ jsx("code", { style: { backgroundColor: themeColors.codeBg, padding: "2px 6px", borderRadius: "4px", fontSize: "13px" }, children: first.match[1] }, key++)
+        );
+      } else if (first.type === "bold") {
+        parts.push(/* @__PURE__ */ jsx("strong", { children: first.match[1] }, key++));
+      } else if (first.type === "italic") {
+        parts.push(/* @__PURE__ */ jsx("em", { children: first.match[1] }, key++));
+      }
+      remaining = remaining.substring(first.index + first.match[0].length);
+    }
+    return parts.length === 1 ? parts[0] : parts;
+  };
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith("```")) {
+      if (!inCodeBlock) {
+        inCodeBlock = true;
+        codeContent = [];
+      } else {
+        elements.push(
+          /* @__PURE__ */ jsx("pre", { style: { backgroundColor: themeColors.codeBlockBg, padding: "12px", borderRadius: "8px", overflow: "auto", fontSize: "13px", margin: "8px 0" }, children: /* @__PURE__ */ jsx("code", { children: codeContent.join("\n") }) }, i)
+        );
+        inCodeBlock = false;
+      }
+      continue;
+    }
+    if (inCodeBlock) {
+      codeContent.push(line);
+      continue;
+    }
+    if (line.startsWith("### ")) {
+      elements.push(/* @__PURE__ */ jsx("h4", { style: { margin: "12px 0 8px", fontSize: "14px", fontWeight: 600 }, children: processInline(line.slice(4)) }, i));
+    } else if (line.startsWith("## ")) {
+      elements.push(/* @__PURE__ */ jsx("h3", { style: { margin: "12px 0 8px", fontSize: "15px", fontWeight: 600 }, children: processInline(line.slice(3)) }, i));
+    } else if (line.startsWith("# ")) {
+      elements.push(/* @__PURE__ */ jsx("h2", { style: { margin: "12px 0 8px", fontSize: "16px", fontWeight: 600 }, children: processInline(line.slice(2)) }, i));
+    } else if (line.startsWith("- ") || line.startsWith("* ")) {
+      elements.push(/* @__PURE__ */ jsx("li", { style: { marginLeft: "16px", listStyleType: "disc" }, children: processInline(line.slice(2)) }, i));
+    } else if (/^\d+\.\s/.test(line)) {
+      const content = line.replace(/^\d+\.\s/, "");
+      elements.push(/* @__PURE__ */ jsx("li", { style: { marginLeft: "16px", listStyleType: "decimal" }, children: processInline(content) }, i));
+    } else if (line.trim() === "") {
+      elements.push(/* @__PURE__ */ jsx("br", {}, i));
+    } else {
+      elements.push(/* @__PURE__ */ jsx("p", { style: { margin: "4px 0" }, children: processInline(line) }, i));
+    }
+  }
+  if (inCodeBlock && codeContent.length > 0) {
+    elements.push(
+      /* @__PURE__ */ jsx("pre", { style: { backgroundColor: themeColors.codeBlockBg, padding: "12px", borderRadius: "8px", overflow: "auto", fontSize: "13px", margin: "8px 0" }, children: /* @__PURE__ */ jsx("code", { children: codeContent.join("\n") }) }, "final-code")
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { children: elements });
+}
+function MnexiumChat({
+  endpoint = "/api/mnx",
+  placeholder = "Type a message...",
+  title = "Ask AI",
+  buttonLabel = "Ask AI",
+  position = "bottom-right",
+  primaryColor = "#facc15",
+  defaultOpen = false,
+  logo,
+  theme = "dark",
+  welcomeIcon = "\u{1F44B}",
+  welcomeMessage = "How can I help you today?",
+  history = false,
+  eagerInit = true
+}) {
+  const t = themes[theme];
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [error, setError] = useState(null);
+  const messagesEndRef = useRef(null);
+  const inputRef = useRef(null);
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!eagerInit && !isOpen) return;
+    const bootstrap = async () => {
+      if (isInitialized) return;
+      try {
+        const res = await fetch(`${endpoint}/bootstrap`);
+        if (!res.ok) throw new Error("Failed to bootstrap");
+        const data = await res.json();
+        if (history && data.chat_id) {
+          try {
+            const historyRes = await fetch(`${endpoint}/conversations/${data.chat_id}`);
+            if (historyRes.ok) {
+              const historyData = await historyRes.json();
+              if (historyData.messages && Array.isArray(historyData.messages)) {
+                setMessages(historyData.messages.map((m) => ({
+                  id: generateId(),
+                  role: m.role,
+                  content: m.content,
+                  timestamp: /* @__PURE__ */ new Date()
+                })));
+              }
+            }
+          } catch {
+          }
+        }
+        setIsInitialized(true);
+      } catch (err) {
+        setError("Failed to initialize chat");
+        console.error("Bootstrap error:", err);
+      }
+    };
+    bootstrap();
+  }, [endpoint, isOpen, isInitialized, history, eagerInit]);
+  const sendMessage = async () => {
+    if (!input.trim() || isLoading || isStreaming) return;
+    const userMessage = {
+      id: generateId(),
+      role: "user",
+      content: input.trim(),
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+    setIsLoading(true);
+    setError(null);
+    const assistantMessageId = generateId();
+    try {
+      const res = await fetch(`${endpoint}/chat`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: userMessage.content })
+      });
+      if (!res.ok) throw new Error("Failed to send message");
+      if (!res.body) throw new Error("No response body");
+      setIsLoading(false);
+      setIsStreaming(true);
+      const assistantMessage = {
+        id: assistantMessageId,
+        role: "assistant",
+        content: "",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6);
+            if (data === "[DONE]") continue;
+            try {
+              const parsed = JSON.parse(data);
+              const content = parsed.choices?.[0]?.delta?.content;
+              if (content) {
+                setMessages(
+                  (prev) => prev.map(
+                    (m) => m.id === assistantMessageId ? { ...m, content: m.content + content } : m
+                  )
+                );
+              }
+            } catch {
+            }
+          }
+        }
+      }
+      if (buffer.startsWith("data: ")) {
+        const data = buffer.slice(6);
+        if (data !== "[DONE]") {
+          try {
+            const parsed = JSON.parse(data);
+            const content = parsed.choices?.[0]?.delta?.content;
+            if (content) {
+              setMessages(
+                (prev) => prev.map(
+                  (m) => m.id === assistantMessageId ? { ...m, content: m.content + content } : m
+                )
+              );
+            }
+          } catch {
+          }
+        }
+      }
+    } catch (err) {
+      setError("Failed to send message");
+      console.error("Chat error:", err);
+      setMessages((prev) => prev.filter((m) => m.id !== assistantMessageId));
+    } finally {
+      setIsLoading(false);
+      setIsStreaming(false);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+  const startNewChat = async () => {
+    try {
+      const res = await fetch(`${endpoint}/new-chat`, { method: "POST" });
+      if (res.ok) {
+        setMessages([]);
+      }
+    } catch {
+      setMessages([]);
+    }
+  };
+  const positionStyles = position === "bottom-right" ? { right: "20px", bottom: "20px" } : { left: "20px", bottom: "20px" };
+  const chatPositionStyles = position === "bottom-right" ? { right: "0", bottom: "60px" } : { left: "0", bottom: "60px" };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes mnx-typing {
+          0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+          40% { transform: scale(1); opacity: 1; }
+        }
+        @keyframes mnx-fade-in {
+          from { opacity: 0; transform: translateY(10px) scale(0.95); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        @keyframes mnx-fade-out {
+          from { opacity: 1; transform: translateY(0) scale(1); }
+          to { opacity: 0; transform: translateY(10px) scale(0.95); }
+        }
+        @keyframes mnx-pulse {
+          0% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
+          50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
+          100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
+        }
+        .mnx-typing-dot:nth-child(1) { animation-delay: 0s; }
+        .mnx-typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .mnx-typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        .mnx-btn-icon {
+          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .mnx-btn-icon.open {
+          transform: rotate(45deg);
+        }
+      ` }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      position: "fixed",
+      zIndex: 9999,
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      ...positionStyles
+    }, children: [
+      isOpen && /* @__PURE__ */ jsxs("div", { style: {
+        position: "absolute",
+        ...chatPositionStyles,
+        width: "380px",
+        height: "500px",
+        backgroundColor: theme === "dark" ? "rgba(26, 26, 26, 0.9)" : "rgba(255, 255, 255, 0.9)",
+        backdropFilter: "blur(8px) saturate(180%)",
+        WebkitBackdropFilter: "blur(16px) saturate(180%)",
+        borderRadius: "16px",
+        border: `1px solid ${primaryColor}33`,
+        boxShadow: theme === "dark" ? "0 25px 50px -12px rgba(0, 0, 0, 0.5)" : "0 25px 50px -12px rgba(0, 0, 0, 0.15)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        animation: "mnx-fade-in 0.2s ease-out",
+        transform: "translateZ(0)",
+        isolation: "isolate"
+      }, children: [
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "8px 8px",
+          borderBottom: `1px solid ${t.border}`,
+          backgroundColor: theme === "dark" ? "rgba(26, 26, 26, 0.7)" : "rgba(255, 255, 255, 0.7)"
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+            /* @__PURE__ */ jsx("div", { style: {
+              width: "32px",
+              height: "32px",
+              backgroundColor: primaryColor,
+              borderRadius: "8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden"
+            }, children: logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "#000", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+              /* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5" }),
+              /* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5" })
+            ] }) }),
+            /* @__PURE__ */ jsx("span", { style: { color: t.text, fontWeight: 600, fontSize: "15px" }, children: title })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: startNewChat,
+                style: {
+                  background: "none",
+                  border: "none",
+                  color: t.textMuted,
+                  cursor: "pointer",
+                  padding: "6px",
+                  borderRadius: "6px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                title: "New chat",
+                children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                  /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setIsOpen(false),
+                style: {
+                  background: "none",
+                  border: "none",
+                  color: t.textMuted,
+                  cursor: "pointer",
+                  padding: "4px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: {
+          flex: 1,
+          overflowY: "auto",
+          padding: "8px 8px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "12px"
+        }, children: [
+          !isInitialized && !error && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: t.textMuted }, children: "Initializing..." }),
+          error && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: "#ef4444" }, children: error }),
+          isInitialized && messages.length === 0 && !error && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", color: t.textMuted, textAlign: "center" }, children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "24px", marginBottom: "8px" }, children: welcomeIcon }),
+            /* @__PURE__ */ jsx("div", { children: welcomeMessage })
+          ] }) }),
+          messages.map((message) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                maxWidth: "85%",
+                padding: "10px 14px",
+                borderRadius: "12px",
+                fontSize: "14px",
+                lineHeight: 1.5,
+                wordBreak: "break-word",
+                ...message.role === "user" ? {
+                  alignSelf: "flex-end",
+                  backgroundColor: `${primaryColor}cc`,
+                  color: "#000",
+                  borderBottomRightRadius: "4px"
+                } : {
+                  alignSelf: "flex-start",
+                  backgroundColor: theme === "dark" ? "rgba(42, 42, 42, 0.7)" : "rgba(243, 244, 246, 0.7)",
+                  color: t.textSecondary,
+                  borderBottomLeftRadius: "4px"
+                }
+              },
+              children: message.role === "assistant" ? renderMarkdown(message.content, { codeBg: t.codeBg, codeBlockBg: t.codeBlockBg }) : message.content
+            },
+            message.id
+          )),
+          isLoading && /* @__PURE__ */ jsxs("div", { style: {
+            display: "flex",
+            gap: "4px",
+            padding: "10px 14px",
+            alignSelf: "flex-start",
+            backgroundColor: theme === "dark" ? "rgba(42, 42, 42, 0.7)" : "rgba(243, 244, 246, 0.7)",
+            borderRadius: "12px",
+            borderBottomLeftRadius: "4px"
+          }, children: [
+            /* @__PURE__ */ jsx("div", { className: "mnx-typing-dot", style: { width: "6px", height: "6px", backgroundColor: t.textMuted, borderRadius: "50%", animation: "mnx-typing 1.4s infinite ease-in-out" } }),
+            /* @__PURE__ */ jsx("div", { className: "mnx-typing-dot", style: { width: "6px", height: "6px", backgroundColor: t.textMuted, borderRadius: "50%", animation: "mnx-typing 1.4s infinite ease-in-out" } }),
+            /* @__PURE__ */ jsx("div", { className: "mnx-typing-dot", style: { width: "6px", height: "6px", backgroundColor: t.textMuted, borderRadius: "50%", animation: "mnx-typing 1.4s infinite ease-in-out" } })
+          ] }),
+          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          gap: "8px",
+          padding: "8px 8px",
+          borderTop: `1px solid ${t.border}`,
+          backgroundColor: theme === "dark" ? "rgba(26, 26, 26, 0.5)" : "rgba(255, 255, 255, 0.5)"
+        }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: input,
+              onChange: (e) => setInput(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled: !isInitialized || isLoading || isStreaming,
+              style: {
+                flex: 1,
+                padding: "10px 14px",
+                backgroundColor: theme === "dark" ? "rgba(42, 42, 42, 0.6)" : "rgba(249, 250, 251, 0.6)",
+                border: "none",
+                borderRadius: "8px",
+                fontSize: "14px",
+                color: t.text,
+                outline: "none",
+                transition: "box-shadow 0.15s ease"
+              },
+              onFocus: (e) => {
+                e.currentTarget.style.boxShadow = `0 0 0 2px ${primaryColor}`;
+              },
+              onBlur: (e) => {
+                e.currentTarget.style.boxShadow = "none";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: sendMessage,
+              disabled: !isInitialized || !input.trim() || isLoading || isStreaming,
+              style: {
+                padding: "10px 16px",
+                backgroundColor: !isInitialized || !input.trim() || isLoading || isStreaming ? t.inputBorder : primaryColor,
+                color: "#000",
+                border: "none",
+                borderRadius: "8px",
+                fontSize: "14px",
+                fontWeight: 500,
+                cursor: !isInitialized || !input.trim() || isLoading || isStreaming ? "not-allowed" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                /* @__PURE__ */ jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+              ] })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setIsOpen(!isOpen),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "12px 16px",
+            backgroundColor: primaryColor,
+            color: "#000",
+            border: "none",
+            borderRadius: "12px",
+            fontSize: "14px",
+            fontWeight: 600,
+            cursor: "pointer",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.transform = "scale(1.05)";
+            e.currentTarget.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.4)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.transform = "scale(1)";
+            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.3)";
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `mnx-btn-icon ${isOpen ? "open" : ""}`,
+                style: { display: "flex", alignItems: "center", justifyContent: "center" },
+                children: isOpen ? /* @__PURE__ */ jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] }) : logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: "", style: { height: "28px", width: "auto", objectFit: "contain" } }) : /* @__PURE__ */ jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+                  /* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5" }),
+                  /* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: {
+              transition: "opacity 0.2s, width 0.3s",
+              overflow: "hidden",
+              whiteSpace: "nowrap"
+            }, children: isOpen ? "Close" : buttonLabel })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  MnexiumChat,
+  MnexiumChat as default
+};
+//# sourceMappingURL=index.mjs.map