@convokit/widget 0.0.11 → 0.1.0

package/dist/index.esm.js

@@ -1,615 +1,6 @@
 (function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode(":root{--convokit-primary: #000;--convokit-header-bg: #000;--convokit-font-family: Inter, system-ui, sans-serif;--convokit-font-size: 14px;--convokit-border-radius: 18px;--convokit-chat-bg: #ffffff;--convokit-user-msg-bg: #000;--convokit-assistant-msg-bg: #f3f4f6;--convokit-input-bg: #ffffff;--convokit-input-border: #d1d5db}.convokit-widget{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;font-family:var(--convokit-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.convokit-button{width:56px;height:56px;border-radius:50%;border:2px solid var(--convokit-primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;z-index:10000;transition:all .2s ease;background:var(--convokit-primary)}.convokit-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.convokit-button:active{transform:translateY(0)}.convokit-button-hidden{opacity:0;transform:scale(0);pointer-events:none;transition:all .2s ease-in-out}.convokit-chat-window{width:380px;height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 16px #0000001a;display:flex;flex-direction:column;overflow:hidden;position:absolute;bottom:0;right:0;z-index:9999;transform-origin:bottom right;border:2px solid #000;overscroll-behavior:contain}.convokit-chat-window-body{width:100%;height:100%;background:#fff;display:flex;flex-direction:column;overflow:hidden}.convokit-chat-wrapper{display:flex;flex-direction:column;flex:1;background:var(--convokit-chat-bg);overflow:hidden}.convokit-header{padding:16px 20px;color:#fff;display:flex;justify-content:space-between;align-items:center;min-height:60px;background:var(--convokit-header-bg);position:relative;border-bottom:2px solid var(--convokit-header-bg)}.convokit-header-subtitle{margin:0;font-size:12px;opacity:.85;line-height:1.3}.convokit-header-left{display:flex;align-items:center;gap:12px;flex:1}.convokit-avatar{display:none}.convokit-header-text{display:flex;flex-direction:column;gap:4px}.convokit-header-text h3{margin:0;font-size:16px;font-weight:600;line-height:1.3}.convokit-header-actions{display:flex;align-items:center;gap:4px}.convokit-header-icon{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:opacity .2s ease}.convokit-header-icon:hover{opacity:.7}.convokit-header-icon:active{opacity:.5}.convokit-chat-window-content{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}.convokit-chat-container{display:flex;flex-direction:column;flex:1;padding:16px;border:none;overflow:hidden;background:transparent;overscroll-behavior:contain}.convokit-messages{flex:1;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:16px;background:transparent;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}.convokit-messages::-webkit-scrollbar{display:none}.convokit-welcome{text-align:center;color:#666;padding:20px;font-size:14px}.convokit-message{display:flex;align-items:flex-end;gap:0;max-width:75%}.convokit-message-user{align-self:flex-end}.convokit-message-assistant{align-self:flex-start}.convokit-bot-icon{display:none}.convokit-message-content{padding:10px 14px;border-radius:var(--convokit-border-radius);word-wrap:break-word;font-size:var(--convokit-font-size);line-height:1.5;position:relative;text-align:left}.convokit-message-user .convokit-message-content{background:var(--convokit-user-msg-bg);color:#fff;border-bottom-right-radius:4px}.convokit-message-assistant .convokit-message-content{background:var(--convokit-assistant-msg-bg);color:#000;border-bottom-left-radius:4px}.convokit-message-content strong{font-weight:600}.convokit-message-content em{font-style:italic}.convokit-message-content a{text-decoration:underline}.convokit-typing{display:flex;gap:6px;padding:4px 0;align-items:center}.convokit-typing span{width:8px;height:8px;border-radius:50%;background:#6b7280;animation:typing-bounce 1.4s ease-in-out infinite}.convokit-typing span:nth-child(1){animation-delay:0s}.convokit-typing span:nth-child(2){animation-delay:.2s}.convokit-typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.convokit-input-form{display:flex;align-items:center;padding:12px 0 0;gap:8px;flex-shrink:0;background:transparent;border-bottom:none}.convokit-input{flex:1;padding:11px 14px;border:1px solid color-mix(in srgb,var(--convokit-primary) 35%,transparent);background:var(--convokit-input-bg);border-radius:20px;font-size:var(--convokit-font-size);outline:none;color:#000;font-family:var(--convokit-font-family);transition:border-color .2s ease,box-shadow .2s ease}.convokit-input:focus{border-color:var(--convokit-primary);box-shadow:none}.convokit-input::placeholder{color:#9ca3af}.convokit-input:disabled{background:#f9fafb;color:#9ca3af;border-color:#e5e7eb}.convokit-send-button{width:40px;height:40px;border-radius:50%;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--convokit-primary);transition:opacity .2s ease;position:relative}.convokit-send-button svg{display:block;width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.convokit-send-button:hover:not(:disabled){opacity:.8}.convokit-send-button:active:not(:disabled){opacity:.6}.convokit-send-button:disabled{opacity:.3;cursor:not-allowed;background:var(--convokit-primary)}.convokit-send-button:disabled svg{opacity:.5}.convokit-footer{padding:10px 16px;text-align:center;background:var(--convokit-chat-bg);font-size:11px;color:#6b7280}.convokit-footer a{color:var(--convokit-primary);text-decoration:none;font-weight:500;transition:opacity .2s ease}.convokit-footer a:hover{opacity:.7}.convokit-rating-prompt{padding:16px;border-top:1px solid #e5e7eb;background-color:#f9fafb;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.convokit-rating-question{margin:0 0 12px;font-size:14px;font-weight:500;color:#374151;text-align:center}.convokit-rating-buttons{display:flex;gap:12px;justify-content:center;margin-bottom:12px}.convokit-rating-button{width:48px;height:48px;border-radius:50%;border:2px solid #d1d5db;background-color:#fff;color:#6b7280;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.convokit-rating-button:hover:not(:disabled){border-color:#9ca3af;transform:scale(1.05)}.convokit-rating-button:disabled{opacity:.5;cursor:not-allowed}.convokit-rating-button.convokit-rating-selected{color:#fff;border-width:2px}.convokit-rating-feedback{margin-top:12px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.convokit-rating-textarea{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;min-height:60px;margin-bottom:8px;box-sizing:border-box}.convokit-rating-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.convokit-rating-textarea:disabled{background-color:#f3f4f6;cursor:not-allowed}.convokit-rating-submit{width:100%;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:opacity .2s ease}.convokit-rating-submit:hover:not(:disabled){opacity:.9}.convokit-rating-submit:disabled{opacity:.6;cursor:not-allowed}.convokit-rating-thankyou{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.convokit-rating-icon{width:48px;height:48px;border-radius:50%;background-color:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;margin-bottom:12px}.convokit-rating-message{margin:0;font-size:14px;font-weight:500;color:#374151}@media (max-width: 480px){.convokit-widget{bottom:10px;right:10px}.convokit-chat-window{width:calc(100vw - 20px);height:calc(100vh - 20px);max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);bottom:0;right:0;border-radius:16px}.convokit-message{max-width:85%}.convokit-header{padding:16px 16px 12px;min-height:64px}.convokit-chat-container{padding:12px}}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
 /* empty css                */
-import { M as L, r as _, f as R, i as $, s as G, c as Y, a as q, g as A, b as U, d as V, e as J } from "./PopupWidget-DhKUzzJD.js";
-import { P as me } from "./PopupWidget-DhKUzzJD.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useState as u, useRef as F, useEffect as N } from "react";
-const Q = "convokit-widget", X = ({ config: e, onBack: c, backLabel: r = "Back to editor" }) => {
-  const k = e.widgetId ?? Q, [I, C] = u(!0), [m, x] = u([]), [g, B] = u(""), [v, D] = u(!1), [S, P] = u(null), [o, l] = u(null), T = F(null), a = `convokit_messages_${k}`;
-  N(() => {
-    if (e.persistMessages)
-      try {
-        const i = localStorage.getItem(a);
-        i && x(JSON.parse(i));
-      } catch (i) {
-        console.error("Failed to load messages from localStorage:", i);
-      }
-  }, [e.persistMessages, a]), N(() => {
-    if (e.persistMessages && m.length > 0)
-      try {
-        localStorage.setItem(a, JSON.stringify(m));
-      } catch (i) {
-        console.error("Failed to save messages to localStorage:", i);
-      }
-  }, [e.persistMessages, m, a]), N(() => {
-    (async () => {
-      if (!e.key) return;
-      const s = `convokit_theme_${k}`;
-      try {
-        const f = sessionStorage.getItem(s);
-        if (f) {
-          l(JSON.parse(f));
-          return;
-        }
-      } catch {
-      }
-      const h = await R(e.key);
-      if (h) {
-        l(h);
-        try {
-          sessionStorage.setItem(s, JSON.stringify(h));
-        } catch {
-        }
-      }
-    })();
-  }, [k, e.key]);
-  const p = {
-    ...e,
-    primaryColor: e.primaryColor || (o == null ? void 0 : o.primaryColor) || "#000",
-    title: e.title || (o == null ? void 0 : o.headerTitle) || "Chat",
-    subtitle: e.subtitle || (o == null ? void 0 : o.headerSubtitle),
-    welcomeMessage: e.welcomeMessage || (o == null ? void 0 : o.welcomeMessage) || "How can I help you today?",
-    placeholder: e.placeholder || (o == null ? void 0 : o.placeholder) || "Type a message..."
-  };
-  N(() => {
-    if (typeof document > "u") return;
-    const i = document.documentElement;
-    i.style.setProperty("--convokit-primary", p.primaryColor), i.style.setProperty("--convokit-header-bg", e.headerBg ?? (o == null ? void 0 : o.headerBg) ?? p.primaryColor ?? "#000"), i.style.setProperty("--convokit-font-family", (o == null ? void 0 : o.fontFamily) || "Inter, system-ui, sans-serif"), i.style.setProperty("--convokit-font-size", (o == null ? void 0 : o.fontSize) || "14px"), i.style.setProperty("--convokit-border-radius", (o == null ? void 0 : o.borderRadius) || "18px"), i.style.setProperty("--convokit-chat-bg", e.chatBg ?? (o == null ? void 0 : o.chatBg) ?? "#ffffff"), i.style.setProperty("--convokit-user-msg-bg", e.userMsgBg ?? (o == null ? void 0 : o.userMsgBg) ?? p.primaryColor ?? "#000"), i.style.setProperty("--convokit-assistant-msg-bg", e.assistantMsgBg ?? (o == null ? void 0 : o.assistantMsgBg) ?? "#f3f4f6"), i.style.setProperty("--convokit-input-bg", e.inputBg ?? (o == null ? void 0 : o.inputBg) ?? "#ffffff");
-  }, [o, p.primaryColor, e.headerBg, e.chatBg, e.userMsgBg, e.assistantMsgBg, e.inputBg]), N(() => {
-    var i;
-    (i = T.current) == null || i.scrollIntoView({ behavior: "smooth" });
-  }, [m, v]);
-  const E = async (i) => {
-    if (i.preventDefault(), !g.trim() || v) return;
-    const s = g.trim();
-    B(""), P(null);
-    const h = { role: "user", content: s, timestamp: /* @__PURE__ */ new Date() }, f = [...m, h];
-    x(f), D(!0);
-    try {
-      const d = m.map((H) => ({ role: H.role, content: H.content })), b = typeof window < "u" ? localStorage.getItem("widget_jwt") : null, M = typeof window < "u" ? localStorage.getItem("conversation_id") : null;
-      let y;
-      b && M && !$() ? y = await G(s, d) : (b && M && $() && Y(), y = await q(e.key, s, void 0, k));
-      const j = { role: "assistant", content: typeof (y == null ? void 0 : y.reply) == "string" ? y.reply : (y == null ? void 0 : y.reply) != null ? String(y.reply) : "", timestamp: /* @__PURE__ */ new Date() };
-      x([...f, j]);
-    } catch (d) {
-      console.error("Chat error:", d);
-      const b = d instanceof Error ? d.message : "Sorry, something went wrong.";
-      P(b), x([...f, { role: "assistant", content: `Error: ${b}`, timestamp: /* @__PURE__ */ new Date() }]);
-    } finally {
-      D(!1);
-    }
-  };
-  return I ? /* @__PURE__ */ n(
-    L,
-    {
-      className: "convokit-widget",
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 0.2 },
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 1e4,
-        display: "flex",
-        flexDirection: "column",
-        background: "var(--convokit-chat-bg)",
-        fontFamily: "var(--convokit-font-family)",
-        pointerEvents: "auto"
-      },
-      children: [
-        /* @__PURE__ */ n("div", { className: "convokit-header", style: { flexShrink: 0 }, children: [
-          /* @__PURE__ */ t("div", { className: "convokit-header-left", children: /* @__PURE__ */ n("div", { className: "convokit-header-text", children: [
-            /* @__PURE__ */ t("h3", { children: p.title }),
-            p.subtitle && /* @__PURE__ */ t("p", { className: "convokit-header-subtitle", children: p.subtitle })
-          ] }) }),
-          /* @__PURE__ */ t("div", { className: "convokit-header-actions", children: c ? /* @__PURE__ */ n("button", { type: "button", onClick: c, className: "convokit-header-icon", "aria-label": r, style: { fontSize: 14, gap: 6, display: "flex", alignItems: "center" }, children: [
-            /* @__PURE__ */ t("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
-            r
-          ] }) : /* @__PURE__ */ t("button", { type: "button", onClick: () => C(!1), className: "convokit-header-icon", "aria-label": "Close chat", children: /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-            /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-          ] }) }) })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "convokit-chat-wrapper", style: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ t("div", { className: "convokit-chat-window-content", style: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ n("div", { className: "convokit-chat-container", style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", padding: 16 }, children: [
-          /* @__PURE__ */ n("div", { className: "convokit-messages", style: { flex: 1, overflowY: "auto", padding: "8px 0" }, children: [
-            S && /* @__PURE__ */ n("div", { style: { padding: 12, margin: 8, background: "#fee", color: "#c33", borderRadius: 8, fontSize: 14 }, children: [
-              "⚠️ ",
-              S
-            ] }),
-            m.length === 0 && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(p.welcomeMessage) } }) }),
-            m.map((i, s) => /* @__PURE__ */ t("div", { className: `convokit-message convokit-message-${i.role}`, children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(i.content) } }) }, s)),
-            v && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", children: /* @__PURE__ */ n("div", { className: "convokit-typing", "aria-hidden": "true", children: [
-              /* @__PURE__ */ t("span", {}),
-              /* @__PURE__ */ t("span", {}),
-              /* @__PURE__ */ t("span", {})
-            ] }) }) }),
-            /* @__PURE__ */ t("div", { ref: T })
-          ] }),
-          /* @__PURE__ */ n("form", { onSubmit: E, className: "convokit-input-form", children: [
-            /* @__PURE__ */ t(
-              "input",
-              {
-                type: "text",
-                value: g,
-                onChange: (i) => B(i.target.value),
-                placeholder: p.placeholder,
-                disabled: v,
-                className: "convokit-input"
-              }
-            ),
-            /* @__PURE__ */ t("button", { type: "submit", disabled: v || !g.trim(), className: "convokit-send-button", "aria-label": "Send message", children: /* @__PURE__ */ n("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ t("path", { d: "M22 2L11 13" }),
-              /* @__PURE__ */ t("path", { d: "M22 2l-7 20-4-9-9-4z" })
-            ] }) })
-          ] }),
-          /* @__PURE__ */ n("div", { className: "convokit-footer", children: [
-            "Powered by ",
-            /* @__PURE__ */ t("a", { href: "https://convokit.com", target: "_blank", rel: "noopener noreferrer", children: "ConvoKit" })
-          ] })
-        ] }) }) })
-      ]
-    }
-  ) : /* @__PURE__ */ t(
-    L,
-    {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 1e4,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        background: "var(--convokit-chat-bg)",
-        pointerEvents: "auto"
-      },
-      children: /* @__PURE__ */ n(
-        "button",
-        {
-          type: "button",
-          onClick: () => C(!0),
-          "aria-label": "Open chat",
-          style: {
-            padding: "14px 28px",
-            borderRadius: 12,
-            border: "none",
-            background: p.primaryColor,
-            color: "white",
-            fontSize: 16,
-            fontWeight: 500,
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: 10,
-            boxShadow: "0 4px 14px rgba(0,0,0,0.15)"
-          },
-          children: [
-            /* @__PURE__ */ t("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ t("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
-            "Open chat"
-          ]
-        }
-      )
-    }
-  );
-}, W = {
-  title: "Support",
-  welcomeMessage: "Hi! How can we help?"
-}, ae = (e) => {
-  const c = e.apiKey;
-  if (!c || typeof c != "string" || c.trim() === "")
-    return null;
-  const r = {
-    ...W,
-    key: c.trim(),
-    widgetId: e.widgetId,
-    title: e.title ?? W.title,
-    welcomeMessage: e.welcomeMessage ?? W.welcomeMessage,
-    persistMessages: e.persistMessages,
-    primaryColor: e.primaryColor
-  };
-  return /* @__PURE__ */ t(
-    X,
-    {
-      config: r,
-      onBack: e.onBack,
-      backLabel: e.backLabel ?? "Back"
-    }
-  );
-}, Z = "convokit-widget", ee = ({ config: e }) => {
-  const c = e.widgetId ?? Z, [r, k] = u(!1), [I, C] = u([]), [m, x] = u(""), [g, B] = u(!1), [v, D] = u(!1), [S, P] = u(null), o = F(null), l = {
-    ...e,
-    primaryColor: e.primaryColor || "#000",
-    title: e.title || "Chat",
-    subtitle: e.subtitle,
-    welcomeMessage: e.welcomeMessage || "How can I help you today?",
-    placeholder: e.placeholder || "Type a message...",
-    position: e.position || "bottom-right"
-  };
-  N(() => {
-    if (typeof document > "u") return;
-    const s = document.documentElement;
-    s.style.setProperty("--convokit-primary", l.primaryColor), s.style.setProperty("--convokit-header-bg", e.headerBg ?? l.primaryColor ?? "#000"), s.style.setProperty("--convokit-font-family", "Inter, system-ui, sans-serif"), s.style.setProperty("--convokit-font-size", "14px"), s.style.setProperty("--convokit-border-radius", "18px"), s.style.setProperty("--convokit-chat-bg", e.chatBg ?? "#ffffff"), s.style.setProperty("--convokit-user-msg-bg", e.userMsgBg ?? l.primaryColor ?? "#000"), s.style.setProperty("--convokit-assistant-msg-bg", e.assistantMsgBg ?? "#f3f4f6"), s.style.setProperty("--convokit-input-bg", e.inputBg ?? "#ffffff");
-  }, [l.primaryColor, e.headerBg, e.chatBg, e.userMsgBg, e.assistantMsgBg, e.inputBg]), N(() => {
-    const s = setTimeout(() => D(!0), 100);
-    return () => clearTimeout(s);
-  }, []), N(() => {
-    var s;
-    (s = o.current) == null || s.scrollIntoView({ behavior: "smooth" });
-  }, [I, g]);
-  const T = () => k(!r), a = l.position, p = () => {
-    const s = { position: "absolute", zIndex: 9999 }, h = {
-      "bottom-right": { ...s, bottom: 20, right: 20 },
-      "bottom-left": { ...s, bottom: 20, left: 20 },
-      "bottom-middle": { ...s, bottom: 20, left: "50%" },
-      "top-right": { ...s, top: 20, right: 20 },
-      "top-left": { ...s, top: 20, left: 20 },
-      "top-middle": { ...s, top: 20, left: "50%" }
-    };
-    return h[a] || h["bottom-right"];
-  }, E = () => ({
-    "bottom-right": "bottom right",
-    "bottom-left": "bottom left",
-    "bottom-middle": "bottom center",
-    "top-right": "top right",
-    "top-left": "top left",
-    "top-middle": "top center"
-  })[a] || "bottom right", i = async (s) => {
-    if (s.preventDefault(), !m.trim() || g) return;
-    const h = m.trim();
-    x(""), P(null);
-    const f = { role: "user", content: h, timestamp: /* @__PURE__ */ new Date() }, d = [...I, f];
-    C(d), B(!0);
-    try {
-      const b = I.map((K) => ({ role: K.role, content: K.content })), M = typeof e.getAuthToken == "function" ? await Promise.resolve(e.getAuthToken()) : e.authToken, y = A(c);
-      let w;
-      y ? w = await U(
-        e.apiUrl,
-        h,
-        b,
-        y,
-        M,
-        e.apiKey
-      ) : w = await V(
-        e.apiUrl,
-        h,
-        c,
-        b,
-        M,
-        e.apiKey
-      ), w.conversation_id && typeof window < "u" && J(c, w.conversation_id);
-      const H = { role: "assistant", content: typeof (w == null ? void 0 : w.reply) == "string" ? w.reply : (w == null ? void 0 : w.reply) != null ? String(w.reply) : "", timestamp: /* @__PURE__ */ new Date() };
-      C([...d, H]);
-    } catch (b) {
-      console.error("[ConvoKit Connect] Chat error:", b);
-      const M = b instanceof Error ? b.message : "Sorry, something went wrong.";
-      P(M), C([...d, { role: "assistant", content: `Error: ${M}`, timestamp: /* @__PURE__ */ new Date() }]);
-    } finally {
-      B(!1);
-    }
-  };
-  return /* @__PURE__ */ t("div", { className: "convokit-widget", children: /* @__PURE__ */ n(
-    L,
-    {
-      className: "convokit-morph-container",
-      initial: { opacity: 0, scale: 0, width: 60, height: 60, borderRadius: 50, x: a === "bottom-middle" || a === "top-middle" ? "-50%" : 0 },
-      animate: {
-        opacity: 1,
-        scale: 1,
-        width: r ? 380 : 60,
-        height: r ? 600 : 60,
-        borderRadius: r ? 16 : 50,
-        x: a === "bottom-middle" || a === "top-middle" ? "-50%" : 0
-      },
-      transition: {
-        duration: 0.4,
-        scale: { type: "spring", visualDuration: 0.4, bounce: 0.5 },
-        width: v ? { type: "spring", stiffness: 300, damping: 30 } : { duration: 0 },
-        height: v ? { type: "spring", stiffness: 300, damping: 30 } : { duration: 0 },
-        borderRadius: v ? { type: "spring", stiffness: 300, damping: 30 } : { duration: 0 },
-        x: { duration: 0 }
-      },
-      style: {
-        backgroundColor: l.primaryColor,
-        ...p(),
-        transformOrigin: E(),
-        cursor: r ? "default" : "pointer",
-        overflow: "hidden",
-        boxShadow: r ? "0 12px 40px rgba(0, 0, 0, 0.2)" : "0 4px 20px rgba(0, 0, 0, 0.2)",
-        pointerEvents: "auto"
-      },
-      onClick: r ? void 0 : T,
-      children: [
-        /* @__PURE__ */ t(
-          L,
-          {
-            style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" },
-            animate: { opacity: r ? 0 : 1, scale: r ? 0 : 1 },
-            transition: { duration: 0.2 },
-            children: e.bubbleIconUrl ? /* @__PURE__ */ t("img", { src: e.bubbleIconUrl, alt: "", width: 24, height: 24, style: { objectFit: "contain" } }) : /* @__PURE__ */ t("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ t("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__ */ t(
-          L,
-          {
-            style: { width: "100%", height: "100%", opacity: r ? 1 : 0, pointerEvents: r ? "all" : "none" },
-            animate: { opacity: r ? 1 : 0 },
-            transition: { duration: 0.2, delay: r ? 0.2 : 0 },
-            children: /* @__PURE__ */ t("div", { className: "convokit-chat-window-body", style: { background: "#ffffff", width: "100%", height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ n("div", { className: "convokit-chat-wrapper", children: [
-              /* @__PURE__ */ n("div", { className: "convokit-header", children: [
-                /* @__PURE__ */ n("div", { className: "convokit-header-left", children: [
-                  /* @__PURE__ */ t("div", { className: "convokit-avatar", children: /* @__PURE__ */ n("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
-                    /* @__PURE__ */ t("circle", { cx: "12", cy: "8", r: "4", fill: "white", opacity: "0.9" }),
-                    /* @__PURE__ */ t("path", { d: "M6 20c0-4 2.5-6 6-6s6 2 6 6", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
-                  ] }) }),
-                  /* @__PURE__ */ n("div", { className: "convokit-header-text", children: [
-                    /* @__PURE__ */ t("h3", { children: l.title }),
-                    l.subtitle && /* @__PURE__ */ t("p", { className: "convokit-header-subtitle", children: l.subtitle })
-                  ] })
-                ] }),
-                /* @__PURE__ */ t("div", { className: "convokit-header-actions", children: /* @__PURE__ */ t("button", { onClick: T, className: "convokit-header-icon", "aria-label": "Close chat", children: /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                  /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                ] }) }) })
-              ] }),
-              /* @__PURE__ */ t("div", { className: "convokit-chat-window-content", children: /* @__PURE__ */ n("div", { className: "convokit-chat-container", children: [
-                /* @__PURE__ */ n("div", { className: "convokit-messages", children: [
-                  S && /* @__PURE__ */ n("div", { style: { padding: 12, margin: 8, background: "#fee", color: "#c33", borderRadius: 8, fontSize: 14 }, children: [
-                    "⚠️ ",
-                    S
-                  ] }),
-                  I.length === 0 && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(l.welcomeMessage) } }) }),
-                  I.map((s, h) => /* @__PURE__ */ t("div", { className: `convokit-message convokit-message-${s.role}`, children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(s.content) } }) }, h)),
-                  g && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", children: /* @__PURE__ */ n("div", { className: "convokit-typing", "aria-hidden": "true", children: [
-                    /* @__PURE__ */ t("span", {}),
-                    /* @__PURE__ */ t("span", {}),
-                    /* @__PURE__ */ t("span", {})
-                  ] }) }) }),
-                  /* @__PURE__ */ t("div", { ref: o })
-                ] }),
-                /* @__PURE__ */ n("form", { onSubmit: i, className: "convokit-input-form", children: [
-                  /* @__PURE__ */ t(
-                    "input",
-                    {
-                      type: "text",
-                      value: m,
-                      onChange: (s) => x(s.target.value),
-                      placeholder: l.placeholder,
-                      disabled: g,
-                      className: "convokit-input"
-                    }
-                  ),
-                  /* @__PURE__ */ t("button", { type: "submit", disabled: g || !m.trim(), className: "convokit-send-button", "aria-label": "Send message", children: /* @__PURE__ */ n("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ t("path", { d: "M22 2L11 13" }),
-                    /* @__PURE__ */ t("path", { d: "M22 2l-7 20-4-9-9-4z" })
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ n("div", { className: "convokit-footer", children: [
-                  "Powered by ",
-                  /* @__PURE__ */ t("a", { href: "https://convokit.com", target: "_blank", rel: "noopener noreferrer", children: "ConvoKit" })
-                ] })
-              ] }) })
-            ] }) })
-          }
-        )
-      ]
-    }
-  ) });
-}, z = {
-  title: "Chat",
-  welcomeMessage: "How can I help you today?",
-  position: "bottom-right"
-}, le = (e) => {
-  const { apiUrl: c, apiKey: r } = e;
-  if (!(c != null && c.trim()) || !(r != null && r.trim()))
-    return null;
-  const k = {
-    ...z,
-    apiUrl: c.trim(),
-    apiKey: r.trim(),
-    authToken: e.authToken,
-    widgetId: e.widgetId,
-    title: e.title ?? z.title,
-    welcomeMessage: e.welcomeMessage ?? z.welcomeMessage,
-    position: e.position ?? z.position,
-    primaryColor: e.primaryColor
-  };
-  return /* @__PURE__ */ t(ee, { config: k });
-}, te = "convokit-widget", oe = ({ config: e, onBack: c, backLabel: r = "Back to editor" }) => {
-  const k = e.widgetId ?? te, [I, C] = u(!0), [m, x] = u([]), [g, B] = u(""), [v, D] = u(!1), [S, P] = u(null), o = F(null), l = {
-    ...e,
-    primaryColor: e.primaryColor || "#000",
-    title: e.title || "Chat",
-    subtitle: e.subtitle,
-    welcomeMessage: e.welcomeMessage || "How can I help you today?",
-    placeholder: e.placeholder || "Type a message..."
-  };
-  N(() => {
-    if (typeof document > "u") return;
-    const a = document.documentElement;
-    a.style.setProperty("--convokit-primary", l.primaryColor), a.style.setProperty("--convokit-header-bg", e.headerBg ?? l.primaryColor ?? "#000"), a.style.setProperty("--convokit-font-family", "Inter, system-ui, sans-serif"), a.style.setProperty("--convokit-font-size", "14px"), a.style.setProperty("--convokit-border-radius", "18px"), a.style.setProperty("--convokit-chat-bg", e.chatBg ?? "#ffffff"), a.style.setProperty("--convokit-user-msg-bg", e.userMsgBg ?? l.primaryColor ?? "#000"), a.style.setProperty("--convokit-assistant-msg-bg", e.assistantMsgBg ?? "#f3f4f6"), a.style.setProperty("--convokit-input-bg", e.inputBg ?? "#ffffff");
-  }, [l.primaryColor, e.headerBg, e.chatBg, e.userMsgBg, e.assistantMsgBg, e.inputBg]), N(() => {
-    var a;
-    (a = o.current) == null || a.scrollIntoView({ behavior: "smooth" });
-  }, [m, v]);
-  const T = async (a) => {
-    if (a.preventDefault(), !g.trim() || v) return;
-    const p = g.trim();
-    B(""), P(null);
-    const E = { role: "user", content: p, timestamp: /* @__PURE__ */ new Date() }, i = [...m, E];
-    x(i), D(!0);
-    try {
-      const s = m.map((y) => ({ role: y.role, content: y.content })), h = typeof e.getAuthToken == "function" ? await Promise.resolve(e.getAuthToken()) : e.authToken, f = A(k);
-      let d;
-      f ? d = await U(
-        e.apiUrl,
-        p,
-        s,
-        f,
-        h,
-        e.apiKey
-      ) : d = await V(
-        e.apiUrl,
-        p,
-        k,
-        s,
-        h,
-        e.apiKey
-      ), d.conversation_id && typeof window < "u" && J(k, d.conversation_id);
-      const M = { role: "assistant", content: typeof (d == null ? void 0 : d.reply) == "string" ? d.reply : (d == null ? void 0 : d.reply) != null ? String(d.reply) : "", timestamp: /* @__PURE__ */ new Date() };
-      x([...i, M]);
-    } catch (s) {
-      console.error("[ConvoKit Connect] Chat error:", s);
-      const h = s instanceof Error ? s.message : "Sorry, something went wrong.";
-      P(h), x([...i, { role: "assistant", content: `Error: ${h}`, timestamp: /* @__PURE__ */ new Date() }]);
-    } finally {
-      D(!1);
-    }
-  };
-  return I ? /* @__PURE__ */ n(
-    L,
-    {
-      className: "convokit-widget",
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 0.2 },
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 1e4,
-        display: "flex",
-        flexDirection: "column",
-        background: "var(--convokit-chat-bg)",
-        fontFamily: "var(--convokit-font-family)",
-        pointerEvents: "auto"
-      },
-      children: [
-        /* @__PURE__ */ n("div", { className: "convokit-header", style: { flexShrink: 0 }, children: [
-          /* @__PURE__ */ t("div", { className: "convokit-header-left", children: /* @__PURE__ */ n("div", { className: "convokit-header-text", children: [
-            /* @__PURE__ */ t("h3", { children: l.title }),
-            l.subtitle && /* @__PURE__ */ t("p", { className: "convokit-header-subtitle", children: l.subtitle })
-          ] }) }),
-          /* @__PURE__ */ t("div", { className: "convokit-header-actions", children: c ? /* @__PURE__ */ n("button", { type: "button", onClick: c, className: "convokit-header-icon", "aria-label": r, style: { fontSize: 14, gap: 6, display: "flex", alignItems: "center" }, children: [
-            /* @__PURE__ */ t("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
-            r
-          ] }) : /* @__PURE__ */ t("button", { type: "button", onClick: () => C(!1), className: "convokit-header-icon", "aria-label": "Close chat", children: /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-            /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-          ] }) }) })
-        ] }),
-        /* @__PURE__ */ t("div", { className: "convokit-chat-wrapper", style: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ t("div", { className: "convokit-chat-window-content", style: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ n("div", { className: "convokit-chat-container", style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", padding: 16 }, children: [
-          /* @__PURE__ */ n("div", { className: "convokit-messages", style: { flex: 1, overflowY: "auto", padding: "8px 0" }, children: [
-            S && /* @__PURE__ */ n("div", { style: { padding: 12, margin: 8, background: "#fee", color: "#c33", borderRadius: 8, fontSize: 14 }, children: [
-              "⚠️ ",
-              S
-            ] }),
-            m.length === 0 && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(l.welcomeMessage) } }) }),
-            m.map((a, p) => /* @__PURE__ */ t("div", { className: `convokit-message convokit-message-${a.role}`, children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(a.content) } }) }, p)),
-            v && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", children: /* @__PURE__ */ n("div", { className: "convokit-typing", "aria-hidden": "true", children: [
-              /* @__PURE__ */ t("span", {}),
-              /* @__PURE__ */ t("span", {}),
-              /* @__PURE__ */ t("span", {})
-            ] }) }) }),
-            /* @__PURE__ */ t("div", { ref: o })
-          ] }),
-          /* @__PURE__ */ n("form", { onSubmit: T, className: "convokit-input-form", children: [
-            /* @__PURE__ */ t(
-              "input",
-              {
-                type: "text",
-                value: g,
-                onChange: (a) => B(a.target.value),
-                placeholder: l.placeholder,
-                disabled: v,
-                className: "convokit-input"
-              }
-            ),
-            /* @__PURE__ */ t("button", { type: "submit", disabled: v || !g.trim(), className: "convokit-send-button", "aria-label": "Send message", children: /* @__PURE__ */ n("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ t("path", { d: "M22 2L11 13" }),
-              /* @__PURE__ */ t("path", { d: "M22 2l-7 20-4-9-9-4z" })
-            ] }) })
-          ] }),
-          /* @__PURE__ */ n("div", { className: "convokit-footer", children: [
-            "Powered by ",
-            /* @__PURE__ */ t("a", { href: "https://convokit.com", target: "_blank", rel: "noopener noreferrer", children: "ConvoKit" })
-          ] })
-        ] }) }) })
-      ]
-    }
-  ) : /* @__PURE__ */ t(
-    L,
-    {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 1e4,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        background: "var(--convokit-chat-bg)",
-        pointerEvents: "auto"
-      },
-      children: /* @__PURE__ */ n(
-        "button",
-        {
-          type: "button",
-          onClick: () => C(!0),
-          "aria-label": "Open chat",
-          style: {
-            padding: "14px 28px",
-            borderRadius: 12,
-            border: "none",
-            background: l.primaryColor,
-            color: "white",
-            fontSize: 16,
-            fontWeight: 500,
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: 10,
-            boxShadow: "0 4px 14px rgba(0,0,0,0.15)"
-          },
-          children: [
-            /* @__PURE__ */ t("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ t("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
-            "Open chat"
-          ]
-        }
-      )
-    }
-  );
-}, O = {
-  title: "Chat",
-  welcomeMessage: "How can I help you today?"
-}, ce = (e) => {
-  const { apiUrl: c, apiKey: r } = e;
-  if (!(c != null && c.trim()) || !(r != null && r.trim()))
-    return null;
-  const k = {
-    ...O,
-    apiUrl: c.trim(),
-    apiKey: r.trim(),
-    authToken: e.authToken,
-    widgetId: e.widgetId,
-    title: e.title ?? O.title,
-    welcomeMessage: e.welcomeMessage ?? O.welcomeMessage,
-    primaryColor: e.primaryColor
-  };
-  return /* @__PURE__ */ t(
-    oe,
-    {
-      config: k,
-      onBack: e.onBack,
-      backLabel: e.backLabel ?? "Back"
-    }
-  );
-};
+import { PopupWidget as t } from "./PopupWidget-sIgNr_Yy.js";
 export {
-  ce as FullScreenBackendWidget,
-  ae as FullScreenWidget,
-  le as PopupBackendWidget,
-  me as PopupWidget
+  t as PopupWidget
 };

package/dist/next.esm.js

@@ -3,7 +3,7 @@ import { jsx as o } from "react/jsx-runtime";
 import i from "next/dynamic";
 /* empty css                */
 const n = i(
-  () => import("./PopupWidget-DhKUzzJD.js").then((e) => e.h).then((e) => e.PopupWidget),
+  () => import("./PopupWidget-sIgNr_Yy.js").then((e) => e.PopupWidget),
   { ssr: !1 }
 ), s = () => {
   var e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@convokit/widget",
-  "version": "0.0.11",
+  "version": "0.1.0",
   "description": "AI chat widget for your website",
   "type": "module",
   "main": "dist/index.esm.js",