@chatcops/widget 0.2.0

package/dist/chatcops.esm.js

@@ -0,0 +1,752 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const widgetStyles = ":host{--cc-accent: #6366f1;--cc-accent-hover: #4f46e5;--cc-text: #ffffff;--cc-bg: #0a0a0a;--cc-bg-surface: #1a1a1a;--cc-bg-input: #2a2a2a;--cc-border: #333333;--cc-text-secondary: #a0a0a0;--cc-font: system-ui, -apple-system, sans-serif;--cc-radius: 12px;--cc-shadow: 0 8px 32px rgba(0, 0, 0, .4);--cc-fab-size: 56px;--cc-panel-width: 400px;--cc-panel-height: 560px;all:initial;font-family:var(--cc-font);font-size:14px;line-height:1.5;color:var(--cc-text);-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.cc-fab{position:fixed;bottom:20px;right:20px;width:var(--cc-fab-size);height:var(--cc-fab-size);border-radius:50%;background:var(--cc-accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0000004d;transition:transform .2s ease,box-shadow .2s ease;z-index:10000;outline:none}.cc-fab:hover{transform:scale(1.05);box-shadow:0 6px 24px #0006}.cc-fab:active{transform:scale(.95)}.cc-fab.cc-left{right:auto;left:20px}.cc-fab svg{width:24px;height:24px;fill:var(--cc-text);transition:transform .3s ease}.cc-fab.cc-open svg{transform:rotate(90deg)}.cc-fab-badge{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:#ef4444;border:2px solid var(--cc-bg);display:none}.cc-fab-badge.cc-visible{display:block}@keyframes cc-pulse{0%,to{box-shadow:0 4px 16px #0000004d}50%{box-shadow:0 4px 16px #6366f180}}.cc-fab.cc-pulse{animation:cc-pulse 2s ease-in-out 3}.cc-panel{position:fixed;bottom:88px;right:20px;width:var(--cc-panel-width);height:var(--cc-panel-height);max-height:calc(100vh - 100px);background:var(--cc-bg);border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);border:1px solid var(--cc-border);display:flex;flex-direction:column;overflow:hidden;z-index:9999;opacity:0;transform:translateY(16px) scale(.95);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.cc-panel.cc-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.cc-panel.cc-left{right:auto;left:20px}.cc-header{display:flex;align-items:center;padding:16px;background:var(--cc-bg-surface);border-bottom:1px solid var(--cc-border);flex-shrink:0}.cc-header-avatar{width:36px;height:36px;border-radius:50%;margin-right:12px;object-fit:cover}.cc-header-avatar-placeholder{width:36px;height:36px;border-radius:50%;margin-right:12px;background:var(--cc-accent);display:flex;align-items:center;justify-content:center}.cc-header-avatar-placeholder svg{width:20px;height:20px;fill:var(--cc-text)}.cc-header-info{flex:1}.cc-header-name{font-size:15px;font-weight:600;color:var(--cc-text)}.cc-header-subtitle{font-size:12px;color:var(--cc-text-secondary)}.cc-header-close{width:32px;height:32px;border-radius:8px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.cc-header-close:hover{background:var(--cc-bg-input)}.cc-header-close svg{width:16px;height:16px;fill:var(--cc-text-secondary)}.cc-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.cc-messages::-webkit-scrollbar{width:4px}.cc-messages::-webkit-scrollbar-track{background:transparent}.cc-messages::-webkit-scrollbar-thumb{background:var(--cc-border);border-radius:2px}.cc-message{max-width:85%;padding:10px 14px;border-radius:var(--cc-radius);word-wrap:break-word;overflow-wrap:break-word;font-size:14px;line-height:1.5}.cc-message-user{align-self:flex-end;background:var(--cc-accent);color:var(--cc-text);border-bottom-right-radius:4px}.cc-message-assistant{align-self:flex-start;background:var(--cc-bg-surface);color:var(--cc-text);border-bottom-left-radius:4px}.cc-message a{color:var(--cc-accent);text-decoration:underline}.cc-message-user a{color:var(--cc-text)}.cc-message code{background:#0003;padding:1px 4px;border-radius:4px;font-family:SF Mono,Cascadia Code,Consolas,monospace;font-size:13px}.cc-message pre{background:#0000004d;padding:8px 12px;border-radius:8px;overflow-x:auto;margin:4px 0}.cc-message pre code{background:transparent;padding:0}.cc-message ul,.cc-message ol{padding-left:20px;margin:4px 0}.cc-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;align-self:flex-start;background:var(--cc-bg-surface);border-radius:var(--cc-radius);border-bottom-left-radius:4px}.cc-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--cc-text-secondary);animation:cc-bounce 1.2s infinite}.cc-typing-dot:nth-child(2){animation-delay:.2s}.cc-typing-dot:nth-child(3){animation-delay:.4s}@keyframes cc-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-4px)}}.cc-input-area{display:flex;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--cc-border);background:var(--cc-bg);gap:8px}.cc-input{flex:1;background:var(--cc-bg-input);border:1px solid var(--cc-border);border-radius:8px;padding:8px 12px;color:var(--cc-text);font-family:var(--cc-font);font-size:14px;line-height:1.5;resize:none;outline:none;max-height:96px;overflow-y:auto;transition:border-color .15s ease}.cc-input:focus{border-color:var(--cc-accent);outline:2px solid var(--cc-accent);outline-offset:1px}.cc-input::placeholder{color:var(--cc-text-secondary)}.cc-send-btn{width:36px;height:36px;border-radius:8px;background:var(--cc-accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease,opacity .15s ease}.cc-send-btn:hover{background:var(--cc-accent-hover)}.cc-send-btn:disabled{opacity:.4;cursor:not-allowed}.cc-send-btn svg{width:16px;height:16px;fill:var(--cc-text)}.cc-footer{padding:6px 16px;text-align:center;font-size:11px;color:var(--cc-text-secondary);border-top:1px solid var(--cc-border)}.cc-footer a{color:var(--cc-text-secondary);text-decoration:none}.cc-footer a:hover{text-decoration:underline}.cc-bubble{position:fixed;bottom:84px;right:20px;background:var(--cc-bg-surface);color:var(--cc-text);padding:10px 16px;border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);border:1px solid var(--cc-border);max-width:260px;font-size:13px;line-height:1.4;z-index:9998;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;cursor:pointer}.cc-bubble.cc-visible{opacity:1;transform:translateY(0);pointer-events:auto}.cc-bubble.cc-left{right:auto;left:20px}.cc-bubble-close{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--cc-bg);border:1px solid var(--cc-border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--cc-text-secondary)}@media(max-width:768px){.cc-panel{width:100%;height:100%;max-height:100%;bottom:0;right:0;left:0;border-radius:0;border:none}.cc-panel.cc-left{left:0}.cc-bubble{bottom:84px;right:16px;left:16px;max-width:none}}";
+function createShadowRoot() {
+  const host = document.createElement("div");
+  host.id = "chatcops-root";
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = widgetStyles;
+  shadow.appendChild(style);
+  return shadow;
+}
+function destroyShadowRoot() {
+  const host = document.getElementById("chatcops-root");
+  if (host) host.remove();
+}
+const CHAT_ICON = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/><path d="M7 9h10v2H7zm0-3h10v2H7z"/></svg>`;
+const CLOSE_ICON$1 = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
+class FAB {
+  constructor(root, options) {
+    __publicField(this, "el");
+    __publicField(this, "badge");
+    __publicField(this, "isOpen", false);
+    this.el = document.createElement("button");
+    this.el.className = "cc-fab cc-pulse";
+    this.el.setAttribute("aria-label", "Open chat");
+    if (options.position === "bottom-left") {
+      this.el.classList.add("cc-left");
+    }
+    this.el.innerHTML = CHAT_ICON;
+    this.badge = document.createElement("div");
+    this.badge.className = "cc-fab-badge";
+    this.el.appendChild(this.badge);
+    this.el.addEventListener("click", () => {
+      this.el.classList.remove("cc-pulse");
+      options.onClick();
+    });
+    root.appendChild(this.el);
+  }
+  setOpen(open) {
+    this.isOpen = open;
+    this.el.innerHTML = open ? CLOSE_ICON$1 : CHAT_ICON;
+    if (!open) this.el.appendChild(this.badge);
+    this.el.classList.toggle("cc-open", open);
+    this.el.setAttribute("aria-label", open ? "Close chat" : "Open chat");
+  }
+  showBadge() {
+    this.badge.classList.add("cc-visible");
+  }
+  hideBadge() {
+    this.badge.classList.remove("cc-visible");
+  }
+  destroy() {
+    this.el.remove();
+  }
+}
+const ESCAPE_MAP = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtml(text) {
+  return text.replace(/[&<>"']/g, (ch) => ESCAPE_MAP[ch] ?? ch);
+}
+function renderMarkdown(input) {
+  let html = escapeHtml(input);
+  html = html.replace(/```(?:\w*)\n?([\s\S]*?)```/g, (_match, code) => {
+    return `<pre><code>${code.trim()}</code></pre>`;
+  });
+  html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  html = html.replace(
+    /\[([^\]]+)\]\(((?:[^()]*|\([^()]*\))*)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+  );
+  html = html.replace(/^- (.+)$/gm, "<li>$1</li>");
+  html = html.replace(/(<li>.*<\/li>\n?)+/g, (match) => `<ul>${match}</ul>`);
+  html = html.replace(/^\d+\. (.+)$/gm, "<li>$1</li>");
+  html = html.replace(/\n\n/g, "<br><br>");
+  html = html.replace(/\n/g, "<br>");
+  return html;
+}
+class Messages {
+  constructor(parent) {
+    __publicField(this, "container");
+    __publicField(this, "typingEl", null);
+    this.container = document.createElement("div");
+    this.container.className = "cc-messages";
+    parent.appendChild(this.container);
+  }
+  addMessage(msg) {
+    this.removeTyping();
+    const el = document.createElement("div");
+    el.className = `cc-message cc-message-${msg.role}`;
+    el.dataset.id = msg.id;
+    el.innerHTML = msg.role === "assistant" ? renderMarkdown(msg.content) : this.escapeHtml(msg.content);
+    this.container.appendChild(el);
+    this.scrollToBottom();
+    return el;
+  }
+  updateMessage(id, content, isAssistant) {
+    const el = this.container.querySelector(`[data-id="${id}"]`);
+    if (el) {
+      el.innerHTML = isAssistant ? renderMarkdown(content) : this.escapeHtml(content);
+      this.scrollToBottom();
+    }
+  }
+  showTyping() {
+    if (this.typingEl) return;
+    this.typingEl = document.createElement("div");
+    this.typingEl.className = "cc-typing";
+    this.typingEl.innerHTML = '<div class="cc-typing-dot"></div><div class="cc-typing-dot"></div><div class="cc-typing-dot"></div>';
+    this.container.appendChild(this.typingEl);
+    this.scrollToBottom();
+  }
+  removeTyping() {
+    if (this.typingEl) {
+      this.typingEl.remove();
+      this.typingEl = null;
+    }
+  }
+  clear() {
+    this.container.innerHTML = "";
+    this.typingEl = null;
+  }
+  scrollToBottom() {
+    this.container.scrollTop = this.container.scrollHeight;
+  }
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+class Input {
+  constructor(parent, options) {
+    __publicField(this, "area");
+    __publicField(this, "textarea");
+    __publicField(this, "sendBtn");
+    __publicField(this, "onSend");
+    this.onSend = options.onSend;
+    this.area = document.createElement("div");
+    this.area.className = "cc-input-area";
+    this.textarea = document.createElement("textarea");
+    this.textarea.className = "cc-input";
+    this.textarea.placeholder = options.placeholder;
+    this.textarea.rows = 1;
+    this.textarea.addEventListener("input", () => this.autoResize());
+    this.textarea.addEventListener("keydown", (e) => this.handleKeydown(e));
+    this.sendBtn = document.createElement("button");
+    this.sendBtn.className = "cc-send-btn";
+    this.sendBtn.disabled = true;
+    this.sendBtn.setAttribute("aria-label", "Send message");
+    this.sendBtn.innerHTML = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>';
+    this.sendBtn.addEventListener("click", () => this.send());
+    this.textarea.addEventListener("input", () => {
+      this.sendBtn.disabled = this.textarea.value.trim().length === 0;
+    });
+    this.area.appendChild(this.textarea);
+    this.area.appendChild(this.sendBtn);
+    parent.appendChild(this.area);
+  }
+  focus() {
+    this.textarea.focus();
+  }
+  setDisabled(disabled) {
+    this.textarea.disabled = disabled;
+    this.sendBtn.disabled = disabled || this.textarea.value.trim().length === 0;
+  }
+  clear() {
+    this.textarea.value = "";
+    this.sendBtn.disabled = true;
+    this.autoResize();
+  }
+  send() {
+    const text = this.textarea.value.trim();
+    if (!text) return;
+    this.onSend(text);
+    this.clear();
+  }
+  handleKeydown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      this.send();
+    }
+  }
+  autoResize() {
+    this.textarea.style.height = "auto";
+    const maxHeight = 96;
+    this.textarea.style.height = Math.min(this.textarea.scrollHeight, maxHeight) + "px";
+  }
+}
+const BOT_ICON = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>`;
+const CLOSE_ICON = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
+class Panel {
+  constructor(root, options) {
+    __publicField(this, "el");
+    __publicField(this, "messages");
+    __publicField(this, "input");
+    this.el = document.createElement("div");
+    this.el.className = "cc-panel";
+    if (options.position === "bottom-left") {
+      this.el.classList.add("cc-left");
+    }
+    const header = document.createElement("div");
+    header.className = "cc-header";
+    if (options.branding.avatar) {
+      const img = document.createElement("img");
+      img.className = "cc-header-avatar";
+      img.src = options.branding.avatar;
+      img.alt = options.branding.name;
+      header.appendChild(img);
+    } else {
+      const placeholder = document.createElement("div");
+      placeholder.className = "cc-header-avatar-placeholder";
+      placeholder.innerHTML = BOT_ICON;
+      header.appendChild(placeholder);
+    }
+    const info = document.createElement("div");
+    info.className = "cc-header-info";
+    info.innerHTML = `<div class="cc-header-name">${this.escapeHtml(options.branding.name)}</div><div class="cc-header-subtitle">${this.escapeHtml(options.branding.subtitle)}</div>`;
+    header.appendChild(info);
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "cc-header-close";
+    closeBtn.setAttribute("aria-label", "Close chat");
+    closeBtn.innerHTML = CLOSE_ICON;
+    closeBtn.addEventListener("click", options.onClose);
+    header.appendChild(closeBtn);
+    this.el.appendChild(header);
+    this.messages = new Messages(this.el);
+    this.input = new Input(this.el, {
+      placeholder: options.placeholder,
+      onSend: options.onSend
+    });
+    const footer = document.createElement("div");
+    footer.className = "cc-footer";
+    footer.innerHTML = options.footerText;
+    this.el.appendChild(footer);
+    root.appendChild(this.el);
+  }
+  show() {
+    this.el.classList.add("cc-visible");
+    this.input.focus();
+  }
+  hide() {
+    this.el.classList.remove("cc-visible");
+  }
+  get isVisible() {
+    return this.el.classList.contains("cc-visible");
+  }
+  addMessage(msg) {
+    return this.messages.addMessage(msg);
+  }
+  destroy() {
+    this.el.remove();
+  }
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}
+const BUBBLE_SHOWN_KEY = "chatcops_bubble_shown";
+class WelcomeBubble {
+  constructor(root, options) {
+    __publicField(this, "el");
+    __publicField(this, "timerId", null);
+    this.el = document.createElement("div");
+    this.el.className = "cc-bubble";
+    if (options.position === "bottom-left") {
+      this.el.classList.add("cc-left");
+    }
+    this.el.textContent = options.text;
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "cc-bubble-close";
+    closeBtn.innerHTML = "&times;";
+    closeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.hide();
+    });
+    this.el.appendChild(closeBtn);
+    this.el.addEventListener("click", () => {
+      this.hide();
+      options.onClick();
+    });
+    root.appendChild(this.el);
+    if (options.showOnce) {
+      try {
+        if (sessionStorage.getItem(BUBBLE_SHOWN_KEY)) return;
+        sessionStorage.setItem(BUBBLE_SHOWN_KEY, "1");
+      } catch {
+      }
+    }
+    this.timerId = setTimeout(() => {
+      this.el.classList.add("cc-visible");
+    }, options.delay ?? 3e3);
+  }
+  hide() {
+    this.el.classList.remove("cc-visible");
+    if (this.timerId) {
+      clearTimeout(this.timerId);
+      this.timerId = null;
+    }
+  }
+  destroy() {
+    this.hide();
+    this.el.remove();
+  }
+}
+class ChatClient {
+  constructor(options) {
+    __publicField(this, "apiUrl");
+    __publicField(this, "timeout");
+    this.apiUrl = options.apiUrl;
+    this.timeout = options.timeout ?? 3e4;
+  }
+  async *sendMessage(request) {
+    var _a;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+    try {
+      const response = await fetch(this.apiUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(request),
+        signal: controller.signal
+      });
+      if (!response.ok) {
+        if (response.status === 429) {
+          yield { error: "rate_limit" };
+          return;
+        }
+        yield { error: `HTTP ${response.status}` };
+        return;
+      }
+      const reader = (_a = response.body) == null ? void 0 : _a.getReader();
+      if (!reader) {
+        yield { error: "No response body" };
+        return;
+      }
+      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) {
+          const trimmed = line.trim();
+          if (!trimmed || !trimmed.startsWith("data: ")) continue;
+          const data = trimmed.slice(6);
+          if (data === "[DONE]") {
+            yield { done: true };
+            return;
+          }
+          try {
+            yield JSON.parse(data);
+          } catch {
+          }
+        }
+      }
+      yield { done: true };
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") {
+        yield { error: "timeout" };
+      } else {
+        yield { error: "network" };
+      }
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
+}
+const KEY_PREFIX = "chatcops_conversation";
+class ConversationStorage {
+  constructor(siteId) {
+    __publicField(this, "key");
+    this.key = siteId ? `${KEY_PREFIX}_${siteId}` : KEY_PREFIX;
+  }
+  load() {
+    try {
+      const raw = localStorage.getItem(this.key);
+      if (!raw) return null;
+      return JSON.parse(raw);
+    } catch {
+      return null;
+    }
+  }
+  save(conversation) {
+    try {
+      localStorage.setItem(this.key, JSON.stringify(conversation));
+    } catch {
+    }
+  }
+  clear() {
+    try {
+      localStorage.removeItem(this.key);
+    } catch {
+    }
+  }
+  getSessionId() {
+    const SESSION_KEY = "chatcops_session_id";
+    try {
+      let id = sessionStorage.getItem(SESSION_KEY);
+      if (!id) {
+        id = crypto.randomUUID();
+        sessionStorage.setItem(SESSION_KEY, id);
+      }
+      return id;
+    } catch {
+      return crypto.randomUUID();
+    }
+  }
+}
+function applyTheme(root, theme) {
+  const host = root.host;
+  if (theme.accent) {
+    host.style.setProperty("--cc-accent", theme.accent);
+    host.style.setProperty("--cc-accent-hover", darken(theme.accent, 10));
+  }
+  if (theme.textColor) {
+    host.style.setProperty("--cc-text", theme.textColor);
+  }
+  if (theme.bgColor) {
+    host.style.setProperty("--cc-bg", theme.bgColor);
+    host.style.setProperty("--cc-bg-surface", lighten(theme.bgColor, 8));
+    host.style.setProperty("--cc-bg-input", lighten(theme.bgColor, 14));
+  }
+  if (theme.fontFamily) {
+    host.style.setProperty("--cc-font", theme.fontFamily);
+  }
+  if (theme.borderRadius) {
+    host.style.setProperty("--cc-radius", theme.borderRadius);
+  }
+}
+function parseHex(hex) {
+  if (!/^#?[\da-f]{3}(?:[\da-f]{3})?$/i.test(hex)) return [0, 0, 0];
+  const h = hex.replace("#", "");
+  const n = parseInt(h.length === 3 ? h.split("").map((c) => c + c).join("") : h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function toHex(r, g, b) {
+  return "#" + [r, g, b].map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("");
+}
+function darken(hex, percent) {
+  const [r, g, b] = parseHex(hex);
+  const f = 1 - percent / 100;
+  return toHex(Math.round(r * f), Math.round(g * f), Math.round(b * f));
+}
+function lighten(hex, percent) {
+  const [r, g, b] = parseHex(hex);
+  const f = percent / 100;
+  return toHex(Math.round(r + (255 - r) * f), Math.round(g + (255 - g) * f), Math.round(b + (255 - b) * f));
+}
+const en = {
+  welcomeMessage: "Hi! How can I help you today?",
+  inputPlaceholder: "Type a message...",
+  sendButton: "Send",
+  closeButton: "Close",
+  errorGeneric: "Something went wrong. Please try again.",
+  errorNetwork: "Connection error. Please check your network.",
+  errorRateLimit: "Too many messages. Please wait a moment.",
+  typingIndicator: "Typing...",
+  poweredBy: "Powered by ChatCops",
+  newConversation: "New conversation",
+  welcomeBubbleDefault: "Need help? Chat with us!"
+};
+const locales = { en };
+function getWidgetLocale(code, overrides) {
+  const base = locales[code] ?? en;
+  return overrides ? { ...base, ...overrides } : base;
+}
+class Widget {
+  constructor(config) {
+    __publicField(this, "config");
+    __publicField(this, "shadow");
+    __publicField(this, "fab");
+    __publicField(this, "panel");
+    __publicField(this, "bubble");
+    __publicField(this, "client");
+    __publicField(this, "storage");
+    __publicField(this, "locale");
+    __publicField(this, "conversationId");
+    __publicField(this, "messages", []);
+    __publicField(this, "isStreaming", false);
+    __publicField(this, "eventHandlers", /* @__PURE__ */ new Map());
+    this.config = config;
+    this.client = new ChatClient({ apiUrl: config.apiUrl });
+    this.storage = new ConversationStorage();
+    this.locale = getWidgetLocale(config.locale ?? "en", config.strings);
+    this.conversationId = this.storage.getSessionId();
+  }
+  init() {
+    var _a, _b, _c, _d;
+    this.shadow = createShadowRoot();
+    if (this.config.theme) {
+      applyTheme(this.shadow, this.config.theme);
+    }
+    const position = ((_a = this.config.theme) == null ? void 0 : _a.position) ?? "bottom-right";
+    this.fab = new FAB(this.shadow, {
+      position,
+      onClick: () => this.toggle()
+    });
+    this.panel = new Panel(this.shadow, {
+      position,
+      branding: {
+        name: ((_b = this.config.branding) == null ? void 0 : _b.name) ?? "AI Assistant",
+        avatar: (_c = this.config.branding) == null ? void 0 : _c.avatar,
+        subtitle: ((_d = this.config.branding) == null ? void 0 : _d.subtitle) ?? "Online"
+      },
+      placeholder: this.config.placeholder ?? this.locale.inputPlaceholder,
+      footerText: this.locale.poweredBy,
+      onSend: (text) => this.handleSend(text),
+      onClose: () => this.close()
+    });
+    if (this.config.persistHistory !== false) {
+      const saved = this.storage.load();
+      if (saved) {
+        this.conversationId = saved.id;
+        for (const msg of saved.messages) {
+          this.messages.push(msg);
+          this.panel.addMessage(msg);
+        }
+      }
+    }
+    if (this.messages.length === 0) {
+      const welcomeText = this.config.welcomeMessage ?? this.locale.welcomeMessage;
+      const welcomeMsg = {
+        id: "welcome",
+        role: "assistant",
+        content: welcomeText
+      };
+      this.messages.push(welcomeMsg);
+      this.panel.addMessage(welcomeMsg);
+    }
+    if (this.config.welcomeBubble) {
+      this.bubble = new WelcomeBubble(this.shadow, {
+        text: this.config.welcomeBubble.text,
+        delay: this.config.welcomeBubble.delay,
+        showOnce: this.config.welcomeBubble.showOnce ?? true,
+        position,
+        onClick: () => this.open()
+      });
+    }
+  }
+  open() {
+    var _a, _b, _c;
+    this.panel.show();
+    this.fab.setOpen(true);
+    this.fab.hideBadge();
+    (_a = this.bubble) == null ? void 0 : _a.hide();
+    (_c = (_b = this.config).onOpen) == null ? void 0 : _c.call(_b);
+    this.emit("open");
+  }
+  close() {
+    var _a, _b;
+    this.panel.hide();
+    this.fab.setOpen(false);
+    (_b = (_a = this.config).onClose) == null ? void 0 : _b.call(_a);
+    this.emit("close");
+  }
+  toggle() {
+    if (this.panel.isVisible) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  destroy() {
+    var _a;
+    (_a = this.bubble) == null ? void 0 : _a.destroy();
+    this.panel.destroy();
+    this.fab.destroy();
+    destroyShadowRoot();
+    this.eventHandlers.clear();
+    this.messages = [];
+  }
+  on(event, handler) {
+    if (!this.eventHandlers.has(event)) {
+      this.eventHandlers.set(event, /* @__PURE__ */ new Set());
+    }
+    this.eventHandlers.get(event).add(handler);
+  }
+  off(event, handler) {
+    var _a;
+    (_a = this.eventHandlers.get(event)) == null ? void 0 : _a.delete(handler);
+  }
+  emit(event, ...args) {
+    var _a;
+    (_a = this.eventHandlers.get(event)) == null ? void 0 : _a.forEach((h) => h(...args));
+  }
+  async handleSend(text) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (this.isStreaming) return;
+    const userMsg = {
+      id: crypto.randomUUID(),
+      role: "user",
+      content: text
+    };
+    this.messages.push(userMsg);
+    this.panel.addMessage(userMsg);
+    (_b = (_a = this.config).onMessage) == null ? void 0 : _b.call(_a, userMsg);
+    this.emit("message", userMsg);
+    this.isStreaming = true;
+    this.panel.input.setDisabled(true);
+    this.panel.messages.showTyping();
+    const assistantMsg = {
+      id: crypto.randomUUID(),
+      role: "assistant",
+      content: ""
+    };
+    const pageContext = this.config.pageContext !== false ? { url: window.location.href, title: document.title } : void 0;
+    try {
+      let firstChunk = true;
+      for await (const chunk of this.client.sendMessage({
+        conversationId: this.conversationId,
+        message: text,
+        pageContext,
+        locale: this.config.locale
+      })) {
+        if (chunk.error) {
+          const errorKey = chunk.error === "rate_limit" ? "errorRateLimit" : chunk.error === "network" ? "errorNetwork" : "errorGeneric";
+          assistantMsg.content = this.locale[errorKey];
+          this.panel.messages.removeTyping();
+          this.panel.addMessage(assistantMsg);
+          (_d = (_c = this.config).onError) == null ? void 0 : _d.call(_c, new Error(chunk.error));
+          this.emit("error", new Error(chunk.error));
+          break;
+        }
+        if (chunk.done) break;
+        if (chunk.content) {
+          if (firstChunk) {
+            this.panel.messages.removeTyping();
+            this.panel.addMessage(assistantMsg);
+            firstChunk = false;
+          }
+          assistantMsg.content += chunk.content;
+          this.panel.messages.updateMessage(assistantMsg.id, assistantMsg.content, true);
+        }
+      }
+      if (assistantMsg.content) {
+        this.messages.push(assistantMsg);
+        (_f = (_e = this.config).onMessage) == null ? void 0 : _f.call(_e, assistantMsg);
+        this.emit("message", assistantMsg);
+        if (!this.panel.isVisible) {
+          this.fab.showBadge();
+        }
+      }
+    } catch (err) {
+      this.panel.messages.removeTyping();
+      assistantMsg.content = this.locale.errorGeneric;
+      this.panel.addMessage(assistantMsg);
+      (_h = (_g = this.config).onError) == null ? void 0 : _h.call(_g, err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      this.isStreaming = false;
+      this.panel.input.setDisabled(false);
+      this.panel.input.focus();
+      this.saveHistory();
+    }
+  }
+  saveHistory() {
+    if (this.config.persistHistory === false) return;
+    const maxMessages = this.config.maxMessages ?? 50;
+    const toSave = this.messages.filter((m) => m.id !== "welcome").slice(-maxMessages);
+    this.storage.save({
+      id: this.conversationId,
+      messages: toSave.map((m) => ({
+        id: m.id,
+        role: m.role,
+        content: m.content,
+        timestamp: Date.now()
+      })),
+      updatedAt: Date.now()
+    });
+  }
+}
+let instance = null;
+const ChatCops = {
+  init(config) {
+    if (instance) {
+      instance.destroy();
+    }
+    instance = new Widget(config);
+    instance.init();
+    return instance;
+  },
+  open() {
+    instance == null ? void 0 : instance.open();
+  },
+  close() {
+    instance == null ? void 0 : instance.close();
+  },
+  destroy() {
+    instance == null ? void 0 : instance.destroy();
+    instance = null;
+  },
+  on(event, handler) {
+    instance == null ? void 0 : instance.on(event, handler);
+  },
+  off(event, handler) {
+    instance == null ? void 0 : instance.off(event, handler);
+  }
+};
+function autoInit() {
+  const script = document.currentScript;
+  if (!script) return;
+  const apiUrl = script.dataset.apiUrl;
+  if (!apiUrl) return;
+  ChatCops.init({
+    apiUrl,
+    theme: {
+      accent: script.dataset.accent,
+      textColor: script.dataset.textColor,
+      bgColor: script.dataset.bgColor,
+      fontFamily: script.dataset.fontFamily,
+      borderRadius: script.dataset.borderRadius,
+      position: script.dataset.position || void 0
+    },
+    branding: {
+      name: script.dataset.brandName,
+      avatar: script.dataset.brandAvatar,
+      subtitle: script.dataset.brandSubtitle
+    },
+    welcomeMessage: script.dataset.welcomeMessage,
+    welcomeBubble: script.dataset.welcomeBubble ? {
+      text: script.dataset.welcomeBubble,
+      delay: script.dataset.welcomeBubbleDelay ? parseInt(script.dataset.welcomeBubbleDelay, 10) : void 0
+    } : void 0,
+    placeholder: script.dataset.placeholder,
+    locale: script.dataset.locale
+  });
+}
+const currentScript = document.currentScript;
+if (currentScript && currentScript.dataset.apiUrl) {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", autoInit);
+  } else {
+    autoInit();
+  }
+}
+if (typeof window !== "undefined") {
+  window.ChatCops = ChatCops;
+}
+export {
+  ChatCops as default
+};

package/dist/chatcops.min.js

@@ -0,0 +1 @@
+var ChatCops=function(){"use strict";var e=Object.defineProperty,t=(t,s,a)=>((t,s,a)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[s]=a)(t,"symbol"!=typeof s?s+"":s,a);const s='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/><path d="M7 9h10v2H7zm0-3h10v2H7z"/></svg>';class a{constructor(e,a){t(this,"el"),t(this,"badge"),t(this,"isOpen",!1),this.el=document.createElement("button"),this.el.className="cc-fab cc-pulse",this.el.setAttribute("aria-label","Open chat"),"bottom-left"===a.position&&this.el.classList.add("cc-left"),this.el.innerHTML=s,this.badge=document.createElement("div"),this.badge.className="cc-fab-badge",this.el.appendChild(this.badge),this.el.addEventListener("click",()=>{this.el.classList.remove("cc-pulse"),a.onClick()}),e.appendChild(this.el)}setOpen(e){this.isOpen=e,this.el.innerHTML=e?'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>':s,e||this.el.appendChild(this.badge),this.el.classList.toggle("cc-open",e),this.el.setAttribute("aria-label",e?"Close chat":"Open chat")}showBadge(){this.badge.classList.add("cc-visible")}hideBadge(){this.badge.classList.remove("cc-visible")}destroy(){this.el.remove()}}const i={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};function n(e){let t=e.replace(/[&<>"']/g,e=>i[e]??e);return t=t.replace(/```(?:\w*)\n?([\s\S]*?)```/g,(e,t)=>`<pre><code>${t.trim()}</code></pre>`),t=t.replace(/`([^`]+)`/g,"<code>$1</code>"),t=t.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>"),t=t.replace(/\*(.+?)\*/g,"<em>$1</em>"),t=t.replace(/\[([^\]]+)\]\(((?:[^()]*|\([^()]*\))*)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'),t=t.replace(/^- (.+)$/gm,"<li>$1</li>"),t=t.replace(/(<li>.*<\/li>\n?)+/g,e=>`<ul>${e}</ul>`),t=t.replace(/^\d+\. (.+)$/gm,"<li>$1</li>"),t=t.replace(/\n\n/g,"<br><br>"),t=t.replace(/\n/g,"<br>"),t}class o{constructor(e){t(this,"container"),t(this,"typingEl",null),this.container=document.createElement("div"),this.container.className="cc-messages",e.appendChild(this.container)}addMessage(e){this.removeTyping();const t=document.createElement("div");return t.className=`cc-message cc-message-${e.role}`,t.dataset.id=e.id,t.innerHTML="assistant"===e.role?n(e.content):this.escapeHtml(e.content),this.container.appendChild(t),this.scrollToBottom(),t}updateMessage(e,t,s){const a=this.container.querySelector(`[data-id="${e}"]`);a&&(a.innerHTML=s?n(t):this.escapeHtml(t),this.scrollToBottom())}showTyping(){this.typingEl||(this.typingEl=document.createElement("div"),this.typingEl.className="cc-typing",this.typingEl.innerHTML='<div class="cc-typing-dot"></div><div class="cc-typing-dot"></div><div class="cc-typing-dot"></div>',this.container.appendChild(this.typingEl),this.scrollToBottom())}removeTyping(){this.typingEl&&(this.typingEl.remove(),this.typingEl=null)}clear(){this.container.innerHTML="",this.typingEl=null}scrollToBottom(){this.container.scrollTop=this.container.scrollHeight}escapeHtml(e){const t=document.createElement("div");return t.textContent=e,t.innerHTML}}class c{constructor(e,s){t(this,"area"),t(this,"textarea"),t(this,"sendBtn"),t(this,"onSend"),this.onSend=s.onSend,this.area=document.createElement("div"),this.area.className="cc-input-area",this.textarea=document.createElement("textarea"),this.textarea.className="cc-input",this.textarea.placeholder=s.placeholder,this.textarea.rows=1,this.textarea.addEventListener("input",()=>this.autoResize()),this.textarea.addEventListener("keydown",e=>this.handleKeydown(e)),this.sendBtn=document.createElement("button"),this.sendBtn.className="cc-send-btn",this.sendBtn.disabled=!0,this.sendBtn.setAttribute("aria-label","Send message"),this.sendBtn.innerHTML='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>',this.sendBtn.addEventListener("click",()=>this.send()),this.textarea.addEventListener("input",()=>{this.sendBtn.disabled=0===this.textarea.value.trim().length}),this.area.appendChild(this.textarea),this.area.appendChild(this.sendBtn),e.appendChild(this.area)}focus(){this.textarea.focus()}setDisabled(e){this.textarea.disabled=e,this.sendBtn.disabled=e||0===this.textarea.value.trim().length}clear(){this.textarea.value="",this.sendBtn.disabled=!0,this.autoResize()}send(){const e=this.textarea.value.trim();e&&(this.onSend(e),this.clear())}handleKeydown(e){"Enter"!==e.key||e.shiftKey||(e.preventDefault(),this.send())}autoResize(){this.textarea.style.height="auto";this.textarea.style.height=Math.min(this.textarea.scrollHeight,96)+"px"}}class r{constructor(e,s){t(this,"el"),t(this,"messages"),t(this,"input"),this.el=document.createElement("div"),this.el.className="cc-panel","bottom-left"===s.position&&this.el.classList.add("cc-left");const a=document.createElement("div");if(a.className="cc-header",s.branding.avatar){const e=document.createElement("img");e.className="cc-header-avatar",e.src=s.branding.avatar,e.alt=s.branding.name,a.appendChild(e)}else{const e=document.createElement("div");e.className="cc-header-avatar-placeholder",e.innerHTML='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>',a.appendChild(e)}const i=document.createElement("div");i.className="cc-header-info",i.innerHTML=`<div class="cc-header-name">${this.escapeHtml(s.branding.name)}</div><div class="cc-header-subtitle">${this.escapeHtml(s.branding.subtitle)}</div>`,a.appendChild(i);const n=document.createElement("button");n.className="cc-header-close",n.setAttribute("aria-label","Close chat"),n.innerHTML='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>',n.addEventListener("click",s.onClose),a.appendChild(n),this.el.appendChild(a),this.messages=new o(this.el),this.input=new c(this.el,{placeholder:s.placeholder,onSend:s.onSend});const r=document.createElement("div");r.className="cc-footer",r.innerHTML=s.footerText,this.el.appendChild(r),e.appendChild(this.el)}show(){this.el.classList.add("cc-visible"),this.input.focus()}hide(){this.el.classList.remove("cc-visible")}get isVisible(){return this.el.classList.contains("cc-visible")}addMessage(e){return this.messages.addMessage(e)}destroy(){this.el.remove()}escapeHtml(e){const t=document.createElement("div");return t.textContent=e,t.innerHTML}}const l="chatcops_bubble_shown";class d{constructor(e,s){t(this,"el"),t(this,"timerId",null),this.el=document.createElement("div"),this.el.className="cc-bubble","bottom-left"===s.position&&this.el.classList.add("cc-left"),this.el.textContent=s.text;const a=document.createElement("button");if(a.className="cc-bubble-close",a.innerHTML="&times;",a.addEventListener("click",e=>{e.stopPropagation(),this.hide()}),this.el.appendChild(a),this.el.addEventListener("click",()=>{this.hide(),s.onClick()}),e.appendChild(this.el),s.showOnce)try{if(sessionStorage.getItem(l))return;sessionStorage.setItem(l,"1")}catch{}this.timerId=setTimeout(()=>{this.el.classList.add("cc-visible")},s.delay??3e3)}hide(){this.el.classList.remove("cc-visible"),this.timerId&&(clearTimeout(this.timerId),this.timerId=null)}destroy(){this.hide(),this.el.remove()}}class h{constructor(e){t(this,"apiUrl"),t(this,"timeout"),this.apiUrl=e.apiUrl,this.timeout=e.timeout??3e4}async*sendMessage(e){var t;const s=new AbortController,a=setTimeout(()=>s.abort(),this.timeout);try{const a=await fetch(this.apiUrl,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e),signal:s.signal});if(!a.ok)return 429===a.status?void(yield{error:"rate_limit"}):void(yield{error:`HTTP ${a.status}`});const i=null==(t=a.body)?void 0:t.getReader();if(!i)return void(yield{error:"No response body"});const n=new TextDecoder;let o="";for(;;){const{done:e,value:t}=await i.read();if(e)break;o+=n.decode(t,{stream:!0});const s=o.split("\n");o=s.pop()??"";for(const a of s){const e=a.trim();if(!e||!e.startsWith("data: "))continue;const t=e.slice(6);if("[DONE]"===t)return void(yield{done:!0});try{yield JSON.parse(t)}catch{}}}yield{done:!0}}catch(i){i instanceof DOMException&&"AbortError"===i.name?yield{error:"timeout"}:yield{error:"network"}}finally{clearTimeout(a)}}}const p="chatcops_conversation";class g{constructor(e){t(this,"key"),this.key=e?`${p}_${e}`:p}load(){try{const e=localStorage.getItem(this.key);return e?JSON.parse(e):null}catch{return null}}save(e){try{localStorage.setItem(this.key,JSON.stringify(e))}catch{}}clear(){try{localStorage.removeItem(this.key)}catch{}}getSessionId(){const e="chatcops_session_id";try{let t=sessionStorage.getItem(e);return t||(t=crypto.randomUUID(),sessionStorage.setItem(e,t)),t}catch{return crypto.randomUUID()}}}function u(e,t){const s=e.host;t.accent&&(s.style.setProperty("--cc-accent",t.accent),s.style.setProperty("--cc-accent-hover",function(e,t){const[s,a,i]=m(e),n=1-t/100;return b(Math.round(s*n),Math.round(a*n),Math.round(i*n))}(t.accent,10))),t.textColor&&s.style.setProperty("--cc-text",t.textColor),t.bgColor&&(s.style.setProperty("--cc-bg",t.bgColor),s.style.setProperty("--cc-bg-surface",f(t.bgColor,8)),s.style.setProperty("--cc-bg-input",f(t.bgColor,14))),t.fontFamily&&s.style.setProperty("--cc-font",t.fontFamily),t.borderRadius&&s.style.setProperty("--cc-radius",t.borderRadius)}function m(e){if(!/^#?[\da-f]{3}(?:[\da-f]{3})?$/i.test(e))return[0,0,0];const t=e.replace("#",""),s=parseInt(3===t.length?t.split("").map(e=>e+e).join(""):t,16);return[s>>16&255,s>>8&255,255&s]}function b(e,t,s){return"#"+[e,t,s].map(e=>Math.max(0,Math.min(255,e)).toString(16).padStart(2,"0")).join("")}function f(e,t){const[s,a,i]=m(e),n=t/100;return b(Math.round(s+(255-s)*n),Math.round(a+(255-a)*n),Math.round(i+(255-i)*n))}const x={welcomeMessage:"Hi! How can I help you today?",inputPlaceholder:"Type a message...",sendButton:"Send",closeButton:"Close",errorGeneric:"Something went wrong. Please try again.",errorNetwork:"Connection error. Please check your network.",errorRateLimit:"Too many messages. Please wait a moment.",typingIndicator:"Typing...",poweredBy:"Powered by ChatCops",newConversation:"New conversation",welcomeBubbleDefault:"Need help? Chat with us!"},v={en:x};class y{constructor(e){t(this,"config"),t(this,"shadow"),t(this,"fab"),t(this,"panel"),t(this,"bubble"),t(this,"client"),t(this,"storage"),t(this,"locale"),t(this,"conversationId"),t(this,"messages",[]),t(this,"isStreaming",!1),t(this,"eventHandlers",new Map),this.config=e,this.client=new h({apiUrl:e.apiUrl}),this.storage=new g,this.locale=function(e,t){const s=v[e]??x;return t?{...s,...t}:s}(e.locale??"en",e.strings),this.conversationId=this.storage.getSessionId()}init(){var e,t,s,i;this.shadow=function(){const e=document.createElement("div");e.id="chatcops-root",document.body.appendChild(e);const t=e.attachShadow({mode:"open"}),s=document.createElement("style");return s.textContent=":host{--cc-accent: #6366f1;--cc-accent-hover: #4f46e5;--cc-text: #ffffff;--cc-bg: #0a0a0a;--cc-bg-surface: #1a1a1a;--cc-bg-input: #2a2a2a;--cc-border: #333333;--cc-text-secondary: #a0a0a0;--cc-font: system-ui, -apple-system, sans-serif;--cc-radius: 12px;--cc-shadow: 0 8px 32px rgba(0, 0, 0, .4);--cc-fab-size: 56px;--cc-panel-width: 400px;--cc-panel-height: 560px;all:initial;font-family:var(--cc-font);font-size:14px;line-height:1.5;color:var(--cc-text);-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.cc-fab{position:fixed;bottom:20px;right:20px;width:var(--cc-fab-size);height:var(--cc-fab-size);border-radius:50%;background:var(--cc-accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0000004d;transition:transform .2s ease,box-shadow .2s ease;z-index:10000;outline:none}.cc-fab:hover{transform:scale(1.05);box-shadow:0 6px 24px #0006}.cc-fab:active{transform:scale(.95)}.cc-fab.cc-left{right:auto;left:20px}.cc-fab svg{width:24px;height:24px;fill:var(--cc-text);transition:transform .3s ease}.cc-fab.cc-open svg{transform:rotate(90deg)}.cc-fab-badge{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:#ef4444;border:2px solid var(--cc-bg);display:none}.cc-fab-badge.cc-visible{display:block}@keyframes cc-pulse{0%,to{box-shadow:0 4px 16px #0000004d}50%{box-shadow:0 4px 16px #6366f180}}.cc-fab.cc-pulse{animation:cc-pulse 2s ease-in-out 3}.cc-panel{position:fixed;bottom:88px;right:20px;width:var(--cc-panel-width);height:var(--cc-panel-height);max-height:calc(100vh - 100px);background:var(--cc-bg);border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);border:1px solid var(--cc-border);display:flex;flex-direction:column;overflow:hidden;z-index:9999;opacity:0;transform:translateY(16px) scale(.95);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.cc-panel.cc-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.cc-panel.cc-left{right:auto;left:20px}.cc-header{display:flex;align-items:center;padding:16px;background:var(--cc-bg-surface);border-bottom:1px solid var(--cc-border);flex-shrink:0}.cc-header-avatar{width:36px;height:36px;border-radius:50%;margin-right:12px;object-fit:cover}.cc-header-avatar-placeholder{width:36px;height:36px;border-radius:50%;margin-right:12px;background:var(--cc-accent);display:flex;align-items:center;justify-content:center}.cc-header-avatar-placeholder svg{width:20px;height:20px;fill:var(--cc-text)}.cc-header-info{flex:1}.cc-header-name{font-size:15px;font-weight:600;color:var(--cc-text)}.cc-header-subtitle{font-size:12px;color:var(--cc-text-secondary)}.cc-header-close{width:32px;height:32px;border-radius:8px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.cc-header-close:hover{background:var(--cc-bg-input)}.cc-header-close svg{width:16px;height:16px;fill:var(--cc-text-secondary)}.cc-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.cc-messages::-webkit-scrollbar{width:4px}.cc-messages::-webkit-scrollbar-track{background:transparent}.cc-messages::-webkit-scrollbar-thumb{background:var(--cc-border);border-radius:2px}.cc-message{max-width:85%;padding:10px 14px;border-radius:var(--cc-radius);word-wrap:break-word;overflow-wrap:break-word;font-size:14px;line-height:1.5}.cc-message-user{align-self:flex-end;background:var(--cc-accent);color:var(--cc-text);border-bottom-right-radius:4px}.cc-message-assistant{align-self:flex-start;background:var(--cc-bg-surface);color:var(--cc-text);border-bottom-left-radius:4px}.cc-message a{color:var(--cc-accent);text-decoration:underline}.cc-message-user a{color:var(--cc-text)}.cc-message code{background:#0003;padding:1px 4px;border-radius:4px;font-family:SF Mono,Cascadia Code,Consolas,monospace;font-size:13px}.cc-message pre{background:#0000004d;padding:8px 12px;border-radius:8px;overflow-x:auto;margin:4px 0}.cc-message pre code{background:transparent;padding:0}.cc-message ul,.cc-message ol{padding-left:20px;margin:4px 0}.cc-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;align-self:flex-start;background:var(--cc-bg-surface);border-radius:var(--cc-radius);border-bottom-left-radius:4px}.cc-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--cc-text-secondary);animation:cc-bounce 1.2s infinite}.cc-typing-dot:nth-child(2){animation-delay:.2s}.cc-typing-dot:nth-child(3){animation-delay:.4s}@keyframes cc-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-4px)}}.cc-input-area{display:flex;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--cc-border);background:var(--cc-bg);gap:8px}.cc-input{flex:1;background:var(--cc-bg-input);border:1px solid var(--cc-border);border-radius:8px;padding:8px 12px;color:var(--cc-text);font-family:var(--cc-font);font-size:14px;line-height:1.5;resize:none;outline:none;max-height:96px;overflow-y:auto;transition:border-color .15s ease}.cc-input:focus{border-color:var(--cc-accent);outline:2px solid var(--cc-accent);outline-offset:1px}.cc-input::placeholder{color:var(--cc-text-secondary)}.cc-send-btn{width:36px;height:36px;border-radius:8px;background:var(--cc-accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease,opacity .15s ease}.cc-send-btn:hover{background:var(--cc-accent-hover)}.cc-send-btn:disabled{opacity:.4;cursor:not-allowed}.cc-send-btn svg{width:16px;height:16px;fill:var(--cc-text)}.cc-footer{padding:6px 16px;text-align:center;font-size:11px;color:var(--cc-text-secondary);border-top:1px solid var(--cc-border)}.cc-footer a{color:var(--cc-text-secondary);text-decoration:none}.cc-footer a:hover{text-decoration:underline}.cc-bubble{position:fixed;bottom:84px;right:20px;background:var(--cc-bg-surface);color:var(--cc-text);padding:10px 16px;border-radius:var(--cc-radius);box-shadow:var(--cc-shadow);border:1px solid var(--cc-border);max-width:260px;font-size:13px;line-height:1.4;z-index:9998;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;cursor:pointer}.cc-bubble.cc-visible{opacity:1;transform:translateY(0);pointer-events:auto}.cc-bubble.cc-left{right:auto;left:20px}.cc-bubble-close{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--cc-bg);border:1px solid var(--cc-border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--cc-text-secondary)}@media(max-width:768px){.cc-panel{width:100%;height:100%;max-height:100%;bottom:0;right:0;left:0;border-radius:0;border:none}.cc-panel.cc-left{left:0}.cc-bubble{bottom:84px;right:16px;left:16px;max-width:none}}",t.appendChild(s),t}(),this.config.theme&&u(this.shadow,this.config.theme);const n=(null==(e=this.config.theme)?void 0:e.position)??"bottom-right";if(this.fab=new a(this.shadow,{position:n,onClick:()=>this.toggle()}),this.panel=new r(this.shadow,{position:n,branding:{name:(null==(t=this.config.branding)?void 0:t.name)??"AI Assistant",avatar:null==(s=this.config.branding)?void 0:s.avatar,subtitle:(null==(i=this.config.branding)?void 0:i.subtitle)??"Online"},placeholder:this.config.placeholder??this.locale.inputPlaceholder,footerText:this.locale.poweredBy,onSend:e=>this.handleSend(e),onClose:()=>this.close()}),!1!==this.config.persistHistory){const e=this.storage.load();if(e){this.conversationId=e.id;for(const t of e.messages)this.messages.push(t),this.panel.addMessage(t)}}if(0===this.messages.length){const e={id:"welcome",role:"assistant",content:this.config.welcomeMessage??this.locale.welcomeMessage};this.messages.push(e),this.panel.addMessage(e)}this.config.welcomeBubble&&(this.bubble=new d(this.shadow,{text:this.config.welcomeBubble.text,delay:this.config.welcomeBubble.delay,showOnce:this.config.welcomeBubble.showOnce??!0,position:n,onClick:()=>this.open()}))}open(){var e,t,s;this.panel.show(),this.fab.setOpen(!0),this.fab.hideBadge(),null==(e=this.bubble)||e.hide(),null==(s=(t=this.config).onOpen)||s.call(t),this.emit("open")}close(){var e,t;this.panel.hide(),this.fab.setOpen(!1),null==(t=(e=this.config).onClose)||t.call(e),this.emit("close")}toggle(){this.panel.isVisible?this.close():this.open()}destroy(){var e;null==(e=this.bubble)||e.destroy(),this.panel.destroy(),this.fab.destroy(),function(){const e=document.getElementById("chatcops-root");e&&e.remove()}(),this.eventHandlers.clear(),this.messages=[]}on(e,t){this.eventHandlers.has(e)||this.eventHandlers.set(e,new Set),this.eventHandlers.get(e).add(t)}off(e,t){var s;null==(s=this.eventHandlers.get(e))||s.delete(t)}emit(e,...t){var s;null==(s=this.eventHandlers.get(e))||s.forEach(e=>e(...t))}async handleSend(e){var t,s,a,i,n,o,c,r;if(this.isStreaming)return;const l={id:crypto.randomUUID(),role:"user",content:e};this.messages.push(l),this.panel.addMessage(l),null==(s=(t=this.config).onMessage)||s.call(t,l),this.emit("message",l),this.isStreaming=!0,this.panel.input.setDisabled(!0),this.panel.messages.showTyping();const d={id:crypto.randomUUID(),role:"assistant",content:""},h=!1!==this.config.pageContext?{url:window.location.href,title:document.title}:void 0;try{let t=!0;for await(const s of this.client.sendMessage({conversationId:this.conversationId,message:e,pageContext:h,locale:this.config.locale})){if(s.error){const e="rate_limit"===s.error?"errorRateLimit":"network"===s.error?"errorNetwork":"errorGeneric";d.content=this.locale[e],this.panel.messages.removeTyping(),this.panel.addMessage(d),null==(i=(a=this.config).onError)||i.call(a,new Error(s.error)),this.emit("error",new Error(s.error));break}if(s.done)break;s.content&&(t&&(this.panel.messages.removeTyping(),this.panel.addMessage(d),t=!1),d.content+=s.content,this.panel.messages.updateMessage(d.id,d.content,!0))}d.content&&(this.messages.push(d),null==(o=(n=this.config).onMessage)||o.call(n,d),this.emit("message",d),this.panel.isVisible||this.fab.showBadge())}catch(p){this.panel.messages.removeTyping(),d.content=this.locale.errorGeneric,this.panel.addMessage(d),null==(r=(c=this.config).onError)||r.call(c,p instanceof Error?p:new Error(String(p)))}finally{this.isStreaming=!1,this.panel.input.setDisabled(!1),this.panel.input.focus(),this.saveHistory()}}saveHistory(){if(!1===this.config.persistHistory)return;const e=this.config.maxMessages??50,t=this.messages.filter(e=>"welcome"!==e.id).slice(-e);this.storage.save({id:this.conversationId,messages:t.map(e=>({id:e.id,role:e.role,content:e.content,timestamp:Date.now()})),updatedAt:Date.now()})}}let w=null;const k={init:e=>(w&&w.destroy(),w=new y(e),w.init(),w),open(){null==w||w.open()},close(){null==w||w.close()},destroy(){null==w||w.destroy(),w=null},on(e,t){null==w||w.on(e,t)},off(e,t){null==w||w.off(e,t)}};function C(){const e=document.currentScript;if(!e)return;const t=e.dataset.apiUrl;t&&k.init({apiUrl:t,theme:{accent:e.dataset.accent,textColor:e.dataset.textColor,bgColor:e.dataset.bgColor,fontFamily:e.dataset.fontFamily,borderRadius:e.dataset.borderRadius,position:e.dataset.position||void 0},branding:{name:e.dataset.brandName,avatar:e.dataset.brandAvatar,subtitle:e.dataset.brandSubtitle},welcomeMessage:e.dataset.welcomeMessage,welcomeBubble:e.dataset.welcomeBubble?{text:e.dataset.welcomeBubble,delay:e.dataset.welcomeBubbleDelay?parseInt(e.dataset.welcomeBubbleDelay,10):void 0}:void 0,placeholder:e.dataset.placeholder,locale:e.dataset.locale})}const M=document.currentScript;return M&&M.dataset.apiUrl&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",C):C()),"undefined"!=typeof window&&(window.ChatCops=k),k}();

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@chatcops/widget",
+  "version": "0.2.0",
+  "description": "Embeddable AI chatbot widget - zero dependencies, Shadow DOM isolated",
+  "type": "module",
+  "main": "dist/chatcops.min.js",
+  "module": "dist/chatcops.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/chatcops.esm.js",
+      "require": "./dist/chatcops.min.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0",
+    "terser": "^5.37.0",
+    "vitest": "^3.0.0",
+    "happy-dom": "^16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}