@aikaara/chat-sdk 0.2.0 → 0.3.3

package/dist/ui.mjs

@@ -1,1012 +1,18 @@
-import { a as p, D as u, e as d, f as g, g as m, h as f, i as x, j as k, k as c, l as v } from "./AikaaraChatClient-C4lWcRsS.mjs";
-class y {
-  client;
-  panel;
-  bubble;
-  header;
-  messageList;
-  input;
-  errorBanner;
-  isOpen = !1;
-  constructor(e, t) {
-    this.client = new p(e), this.bubble = t.querySelector("aikaara-chat-bubble"), this.panel = t.querySelector(".aikaara-panel"), this.header = t.querySelector("aikaara-chat-header"), this.messageList = t.querySelector("aikaara-message-list"), this.input = t.querySelector("aikaara-chat-input"), this.errorBanner = t.querySelector("aikaara-error-banner"), e.welcomeMessage && this.messageList.setWelcomeMessage(e.welcomeMessage), e.showTimestamps !== void 0 && this.messageList.setShowTimestamps(e.showTimestamps), this.wireEvents();
-  }
-  async connect() {
-    try {
-      await this.client.connect(), this.messageList.renderMessages(this.client.messages);
-    } catch {
-      this.errorBanner.show("Failed to connect. Retrying...", 5e3);
-    }
-  }
-  async disconnect() {
-    await this.client.disconnect();
-  }
-  wireEvents() {
-    this.bubble.addEventListener("toggle", () => {
-      this.togglePanel();
-    }), this.header.addEventListener("header-close", () => {
-      this.togglePanel(!1);
-    }), this.input.addEventListener("send", ((e) => {
-      this.handleSend(e.detail.content);
-    })), this.client.on("message:sent", (e) => {
-      this.messageList.addMessage(e);
-    }), this.client.on("stream:start", () => {
-      this.messageList.removeTypingIndicator();
-      const e = this.client.messages[this.client.messages.length - 1];
-      e && this.messageList.addMessage(e);
-    }), this.client.on("stream:update", ({ content: e }) => {
-      this.messageList.updateStreamingContent(e);
-    }), this.client.on("stream:end", () => {
-      this.messageList.finalizeStreaming();
-    }), this.client.on("typing:start", () => {
-      const e = this.client.messages, t = e[e.length - 1];
-      (!t || t.status !== "streaming") && this.messageList.showTypingIndicator();
-    }), this.client.on("typing:stop", () => {
-      this.messageList.removeTypingIndicator();
-    }), this.client.on("connection:state", (e) => {
-      this.header.setStatus(e), e === "connected" ? (this.errorBanner.hide(), this.input.disabled = !1) : e === "reconnecting" ? (this.errorBanner.show("Connection lost. Reconnecting..."), this.input.disabled = !0) : e === "disconnected" && (this.input.disabled = !0);
-    }), this.client.on("error", (e) => {
-      this.errorBanner.show(e.message, 5e3);
-    });
-  }
-  async handleSend(e) {
-    try {
-      await this.client.sendMessage(e);
-    } catch {
-      this.errorBanner.show("Failed to send message", 3e3);
-    }
-  }
-  sendUserEvent(e, t, a) {
-    this.client.sendUserEvent(e, t, a);
-  }
-  getClient() {
-    return this.client;
-  }
-  togglePanel(e) {
-    this.isOpen = e !== void 0 ? e : !this.isOpen, this.isOpen ? (this.panel.removeAttribute("hidden"), requestAnimationFrame(() => {
-      this.panel.classList.remove("entering"), this.panel.classList.add("visible"), this.input.focus();
-    })) : (this.panel.classList.remove("visible"), this.panel.classList.add("entering"), setTimeout(() => {
-      this.panel.setAttribute("hidden", "");
-    }, 200));
-  }
-}
-class w extends HTMLElement {
-  shadow;
-  controller = null;
-  _config = {};
-  static get observedAttributes() {
-    return [
-      "base-url",
-      "ws-url",
-      "user-token",
-      "api-key",
-      "title",
-      "subtitle",
-      "theme",
-      "primary-color",
-      "position",
-      "width",
-      "height",
-      "placeholder",
-      "welcome-message",
-      "avatar-url"
-    ];
-  }
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.render(), this.initController();
-  }
-  disconnectedCallback() {
-    this.controller?.disconnect();
-  }
-  attributeChangedCallback(e, t, a) {
-    t !== a && this.controller && (this.render(), this.initController());
-  }
-  configure(e) {
-    this._config = { ...this._config, ...e };
-  }
-  getConfig() {
-    return {
-      baseUrl: this.getAttribute("base-url") || this._config.baseUrl || "",
-      wsUrl: this.getAttribute("ws-url") || this._config.wsUrl,
-      userToken: this.getAttribute("user-token") || this._config.userToken || "",
-      apiKey: this.getAttribute("api-key") || this._config.apiKey,
-      title: this.getAttribute("title") || this._config.title || "Chat",
-      subtitle: this.getAttribute("subtitle") || this._config.subtitle,
-      theme: this.getAttribute("theme") || this._config.theme || v,
-      primaryColor: this.getAttribute("primary-color") || this._config.primaryColor || c,
-      position: this.getAttribute("position") || this._config.position || k,
-      width: Number(this.getAttribute("width")) || this._config.width || x,
-      height: Number(this.getAttribute("height")) || this._config.height || f,
-      fontFamily: this._config.fontFamily || m,
-      borderRadius: this._config.borderRadius ?? g,
-      placeholder: this.getAttribute("placeholder") || this._config.placeholder || d,
-      welcomeMessage: this.getAttribute("welcome-message") || this._config.welcomeMessage,
-      avatarUrl: this.getAttribute("avatar-url") || this._config.avatarUrl,
-      showTimestamps: this._config.showTimestamps ?? !0,
-      persistConversation: this._config.persistConversation ?? !0,
-      showBubble: this._config.showBubble ?? !0,
-      offset: this._config.offset || u,
-      conversationId: this._config.conversationId,
-      systemPromptId: this._config.systemPromptId,
-      channel: this._config.channel,
-      extUid: this._config.extUid,
-      onMessage: this._config.onMessage,
-      onStatusChange: this._config.onStatusChange,
-      onError: this._config.onError,
-      onStreamUpdate: this._config.onStreamUpdate,
-      onConnectionStateChange: this._config.onConnectionStateChange
-    };
-  }
-  render() {
-    const e = this.getConfig();
-    this.shadow.innerHTML = `
-      <style>
-        :host {
-          --aikaara-primary: ${e.primaryColor};
-          --aikaara-primary-hover: ${this.darkenColor(e.primaryColor || c)};
-          --aikaara-bg: #ffffff;
-          --aikaara-bg-secondary: #f9fafb;
-          --aikaara-text: #1f2937;
-          --aikaara-text-secondary: #6b7280;
-          --aikaara-border: #e5e7eb;
-          --aikaara-radius: ${e.borderRadius}px;
-          --aikaara-font: ${e.fontFamily};
-          --aikaara-panel-width: ${e.width}px;
-          --aikaara-panel-height: ${e.height}px;
-          --aikaara-bubble-size: 60px;
-          --aikaara-offset-x: ${e.offset?.x ?? 20}px;
-          --aikaara-offset-y: ${e.offset?.y ?? 20}px;
-          font-family: var(--aikaara-font);
-          position: fixed;
-          z-index: 9999;
-          bottom: var(--aikaara-offset-y);
-          ${e.position === "bottom-left" ? "left" : "right"}: var(--aikaara-offset-x);
-        }
-
-        .aikaara-panel {
-          width: var(--aikaara-panel-width);
-          height: var(--aikaara-panel-height);
-          max-height: calc(100vh - 100px);
-          background: var(--aikaara-bg);
-          border-radius: var(--aikaara-radius);
-          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
-          border: 1px solid var(--aikaara-border);
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          position: absolute;
-          bottom: calc(var(--aikaara-bubble-size) + 16px);
-          ${e.position === "bottom-left" ? "left" : "right"}: 0;
-          transition: opacity 200ms ease, transform 200ms ease;
-        }
-
-        .aikaara-panel[hidden] {
-          display: none;
-        }
-
-        .aikaara-panel.entering {
-          opacity: 0;
-          transform: translateY(8px) scale(0.98);
-        }
-
-        .aikaara-panel.visible {
-          opacity: 1;
-          transform: translateY(0) scale(1);
-        }
-
-        aikaara-chat-header,
-        aikaara-message-list,
-        aikaara-chat-input,
-        aikaara-error-banner {
-          display: block;
-        }
-
-        aikaara-message-list {
-          flex: 1;
-          overflow: scroll;
-          min-height: 0;
-        }
-
-        aikaara-chat-input {
-          flex-shrink: 0;
-        }
-
-        aikaara-chat-header {
-          flex-shrink: 0;
-        }
-      </style>
-
-      <aikaara-chat-bubble></aikaara-chat-bubble>
-
-      <div class="aikaara-panel entering" hidden role="dialog" aria-label="Chat">
-        <aikaara-chat-header
-          title="${e.title || "Chat"}"
-          ${e.subtitle ? `subtitle="${e.subtitle}"` : ""}
-          ${e.avatarUrl ? `avatar-url="${e.avatarUrl}"` : ""}
-        ></aikaara-chat-header>
-        <aikaara-message-list></aikaara-message-list>
-        <aikaara-chat-input placeholder="${e.placeholder || d}"></aikaara-chat-input>
-        <aikaara-error-banner></aikaara-error-banner>
-      </div>
-    `;
-  }
-  async initController() {
-    const e = this.getConfig();
-    !e.baseUrl || !e.userToken || (this.controller?.disconnect(), this.controller = new y(e, this.shadow), await this.controller.connect());
-  }
-  sendUserEvent(e, t, a) {
-    this.controller?.sendUserEvent(e, t, a);
-  }
-  getClient() {
-    return this.controller?.getClient() ?? null;
-  }
-  darkenColor(e) {
-    try {
-      const t = parseInt(e.replace("#", ""), 16), a = Math.max(0, (t >> 16) - 20), s = Math.max(0, (t >> 8 & 255) - 20), n = Math.max(0, (t & 255) - 20);
-      return `#${(a << 16 | s << 8 | n).toString(16).padStart(6, "0")}`;
-    } catch {
-      return e;
-    }
-  }
-}
-class T extends HTMLElement {
-  shadow;
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.render(), this.shadow.querySelector(".bubble")?.addEventListener("click", () => {
-      this.dispatchEvent(new CustomEvent("toggle", { bubbles: !0, composed: !0 }));
-    });
-  }
-  render() {
-    this.shadow.innerHTML = `
-      <style>
-        .bubble {
-          width: var(--aikaara-bubble-size, 60px);
-          height: var(--aikaara-bubble-size, 60px);
-          border-radius: 50%;
-          background: var(--aikaara-primary, #6366f1);
-          color: #ffffff;
-          border: none;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-          transition: transform 200ms ease, box-shadow 200ms ease;
-        }
-        .bubble:hover {
-          transform: scale(1.05);
-          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-        }
-        .bubble svg {
-          width: 28px;
-          height: 28px;
-        }
-        .bubble-text {
-          font-family: var(--aikaara-font, system-ui, sans-serif);
-          font-size: 12px;
-          font-weight: 500;
-        }
-      </style>
-      <button class="bubble" aria-label="Open chat">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-        </svg>
-      </button>
-    `;
-  }
-  setIcon(e) {
-    const t = this.shadow.querySelector(".bubble");
-    t && (t.innerHTML = e);
-  }
-}
-class C extends HTMLElement {
-  shadow;
-  static get observedAttributes() {
-    return ["title", "subtitle", "avatar-url", "status"];
-  }
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.render(), this.bindClose();
-  }
-  attributeChangedCallback() {
-    this.render(), this.bindClose();
-  }
-  bindClose() {
-    this.shadow.querySelector(".close-btn")?.addEventListener("click", () => {
-      this.dispatchEvent(new CustomEvent("header-close", { bubbles: !0, composed: !0 }));
-    });
-  }
-  render() {
-    const e = this.getAttribute("title") || "Chat", t = this.getAttribute("subtitle") || "", a = this.getAttribute("avatar-url"), s = this.getAttribute("status") || "connected", n = s === "connected" ? "#10b981" : s === "connecting" || s === "reconnecting" ? "#f59e0b" : "#ef4444";
-    this.shadow.innerHTML = `
-      <style>
-        .header {
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          padding: 14px 16px;
-          background: var(--aikaara-primary, #6366f1);
-          color: #ffffff;
-          flex-shrink: 0;
-        }
-        .avatar {
-          width: 36px;
-          height: 36px;
-          border-radius: 50%;
-          background: rgba(255,255,255,0.2);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-          overflow: hidden;
-        }
-        .avatar img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-        .avatar svg {
-          width: 20px;
-          height: 20px;
-        }
-        .info {
-          flex: 1;
-          min-width: 0;
-        }
-        .title {
-          font-size: 15px;
-          font-weight: 600;
-          line-height: 1.2;
-          display: flex;
-          align-items: center;
-          gap: 6px;
-        }
-        .status-dot {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          flex-shrink: 0;
-        }
-        .subtitle {
-          font-size: 12px;
-          opacity: 0.85;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .close-btn {
-          background: none;
-          border: none;
-          color: #ffffff;
-          cursor: pointer;
-          padding: 4px;
-          border-radius: 4px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          opacity: 0.8;
-          transition: opacity 200ms;
-        }
-        .close-btn:hover {
-          opacity: 1;
-        }
-        .close-btn svg {
-          width: 20px;
-          height: 20px;
-        }
-      </style>
-      <div class="header">
-        <div class="avatar">
-          ${a ? `<img src="${a}" alt="Avatar" />` : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'}
-        </div>
-        <div class="info">
-          <div class="title">
-            ${e}
-            <span class="status-dot" style="background:${n}"></span>
-          </div>
-          ${t ? `<div class="subtitle">${t}</div>` : ""}
-        </div>
-        <button class="close-btn" aria-label="Close chat">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-          </svg>
-        </button>
-      </div>
-    `;
-  }
-  setStatus(e) {
-    this.setAttribute("status", e);
-  }
-}
-function o(i) {
-  let e = L(i);
-  return e = e.replace(/```(\w*)\n([\s\S]*?)```/g, (t, a, s) => `<pre><code>${s.trim()}</code></pre>`), e = e.replace(/`([^`]+)`/g, "<code>$1</code>"), e = e.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), e = e.replace(/\*(.+?)\*/g, "<em>$1</em>"), e = e.replace(
-    /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
-    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
-  ), e = e.replace(/\n/g, "<br>"), e;
-}
-function L(i) {
-  const e = {
-    "&": "&amp;",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#039;"
-  };
-  return i.replace(/[&<>"']/g, (t) => e[t]);
-}
-const A = /* @__PURE__ */ new Set([
-  "p",
-  "br",
-  "strong",
-  "em",
-  "code",
-  "pre",
-  "a",
-  "ul",
-  "ol",
-  "li",
-  "blockquote",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "span",
-  "div"
-]), E = {
-  a: /* @__PURE__ */ new Set(["href", "target", "rel"]),
-  code: /* @__PURE__ */ new Set(["class"]),
-  pre: /* @__PURE__ */ new Set(["class"]),
-  span: /* @__PURE__ */ new Set(["class"]),
-  div: /* @__PURE__ */ new Set(["class"])
-};
-function l(i) {
-  const e = document.createElement("template");
-  return e.innerHTML = i, h(e.content), e.innerHTML;
-}
-function h(i) {
-  const e = Array.from(i.childNodes);
-  for (const t of e)
-    if (t.nodeType === Node.ELEMENT_NODE) {
-      const a = t, s = a.tagName.toLowerCase();
-      if (!A.has(s)) {
-        const r = document.createTextNode(a.textContent || "");
-        i.replaceChild(r, t);
-        continue;
-      }
-      const n = E[s] || /* @__PURE__ */ new Set(), b = Array.from(a.attributes);
-      for (const r of b)
-        n.has(r.name) || a.removeAttribute(r.name);
-      if (a.hasAttribute("href")) {
-        const r = a.getAttribute("href") || "";
-        !r.startsWith("http://") && !r.startsWith("https://") && !r.startsWith("/") && a.removeAttribute("href");
-      }
-      h(t);
-    }
-}
-class S extends HTMLElement {
-  shadow;
-  container;
-  welcomeMessage = "";
-  showTimestamps = !0;
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.shadow.innerHTML = `
-      <style>
-        :host {
-          display: flex;
-          flex-direction: column;
-          min-height: 0;
-        }
-        .message-list {
-          flex: 1;
-          overflow-y: auto;
-          padding: 16px;
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-          scroll-behavior: smooth;
-        }
-        .message-list::-webkit-scrollbar { width: 6px; }
-        .message-list::-webkit-scrollbar-track { background: transparent; }
-        .message-list::-webkit-scrollbar-thumb { background: var(--aikaara-border, #e5e7eb); border-radius: 3px; }
-        .message-wrap { display: flex; flex-direction: column; }
-        .message-wrap.user { align-items: flex-end; }
-        .message-wrap.assistant { align-items: flex-start; }
-        .bubble {
-          max-width: 85%;
-          padding: 10px 14px;
-          border-radius: var(--aikaara-radius, 12px);
-          font-size: 14px;
-          line-height: 1.5;
-          word-wrap: break-word;
-          overflow-wrap: break-word;
-        }
-        .bubble.user {
-          background: var(--aikaara-primary, #6366f1);
-          color: #ffffff;
-          border-bottom-right-radius: 4px;
-        }
-        .bubble.assistant {
-          background: var(--aikaara-bg-secondary, #f9fafb);
-          color: var(--aikaara-text, #1f2937);
-          border-bottom-left-radius: 4px;
-        }
-        .bubble pre {
-          background: rgba(0,0,0,0.06);
-          padding: 8px 12px;
-          border-radius: 6px;
-          overflow-x: auto;
-          font-size: 13px;
-          margin: 8px 0;
-        }
-        .bubble code {
-          font-family: 'SF Mono', 'Fira Code', monospace;
-          font-size: 13px;
-        }
-        .bubble.assistant code:not(pre code) {
-          background: rgba(0,0,0,0.06);
-          padding: 2px 4px;
-          border-radius: 3px;
-        }
-        .bubble a { color: inherit; text-decoration: underline; }
-        .timestamp {
-          font-size: 11px;
-          color: var(--aikaara-text-secondary, #6b7280);
-          margin-top: 2px;
-          padding: 0 4px;
-        }
-        .welcome {
-          text-align: center;
-          color: var(--aikaara-text-secondary, #6b7280);
-          font-size: 14px;
-          padding: 24px 16px;
-        }
-        .streaming-cursor::after {
-          content: '\\25CF';
-          animation: blink 1s infinite;
-          margin-left: 2px;
-          font-size: 10px;
-          vertical-align: middle;
-        }
-        @keyframes blink {
-          0%, 100% { opacity: 1; }
-          50% { opacity: 0; }
-        }
-        .typing-indicator {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          padding: 10px 14px;
-          align-self: flex-start;
-          background: var(--aikaara-bg-secondary, #f9fafb);
-          border-radius: var(--aikaara-radius, 12px);
-          border-bottom-left-radius: 4px;
-        }
-        .typing-indicator .dot {
-          width: 6px;
-          height: 6px;
-          border-radius: 50%;
-          background: var(--aikaara-text-secondary, #6b7280);
-          animation: typing-bounce 1.4s infinite ease-in-out;
-        }
-        .typing-indicator .dot:nth-child(1) { animation-delay: 0ms; }
-        .typing-indicator .dot:nth-child(2) { animation-delay: 200ms; }
-        .typing-indicator .dot:nth-child(3) { animation-delay: 400ms; }
-        @keyframes typing-bounce {
-          0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
-          30% { transform: translateY(-4px); opacity: 1; }
-        }
-      </style>
-      <div class="message-list"></div>
-    `, this.container = this.shadow.querySelector(".message-list"), this.welcomeMessage && this.renderMessages([]);
-  }
-  setWelcomeMessage(e) {
-    this.welcomeMessage = e;
-  }
-  setShowTimestamps(e) {
-    this.showTimestamps = e;
-  }
-  renderMessages(e) {
-    if (this.container) {
-      if (this.container.innerHTML = "", e.length === 0 && this.welcomeMessage) {
-        this.container.innerHTML = `<div class="welcome">${l(o(this.welcomeMessage))}</div>`;
-        return;
-      }
-      for (const t of e)
-        this.appendMessageElement(t);
-      this.scrollToBottom();
-    }
-  }
-  addMessage(e) {
-    const t = this.container.querySelector(".welcome");
-    t && t.remove(), this.appendMessageElement(e), this.scrollToBottom();
-  }
-  updateStreamingContent(e) {
-    const t = this.container.querySelector('[data-streaming="true"] .bubble');
-    t && (t.innerHTML = l(o(e)), t.classList.add("streaming-cursor"), this.scrollToBottom());
-  }
-  finalizeStreaming() {
-    const e = this.container.querySelector('[data-streaming="true"]');
-    e && (e.removeAttribute("data-streaming"), e.querySelector(".bubble")?.classList.remove("streaming-cursor"));
-  }
-  showTypingIndicator() {
-    this.removeTypingIndicator();
-    const e = document.createElement("div");
-    e.classList.add("typing-indicator"), e.setAttribute("data-typing", "true"), e.innerHTML = '<span class="dot"></span><span class="dot"></span><span class="dot"></span>', this.container.appendChild(e), this.scrollToBottom();
-  }
-  removeTypingIndicator() {
-    this.container.querySelector('[data-typing="true"]')?.remove();
-  }
-  appendMessageElement(e) {
-    const t = document.createElement("div");
-    t.classList.add("message-wrap", e.role), e.status === "streaming" && t.setAttribute("data-streaming", "true");
-    const a = document.createElement("div");
-    if (a.classList.add("bubble", e.role), e.role === "user" ? a.textContent = e.content : (a.innerHTML = l(o(e.content || "")), e.status === "streaming" && a.classList.add("streaming-cursor")), t.appendChild(a), this.showTimestamps && e.createdAt) {
-      const s = document.createElement("div");
-      s.classList.add("timestamp"), s.textContent = this.formatTime(e.createdAt), t.appendChild(s);
-    }
-    this.container.appendChild(t);
-  }
-  scrollToBottom() {
-    requestAnimationFrame(() => {
-      this.container.scrollTop = this.container.scrollHeight;
-    });
-  }
-  formatTime(e) {
-    try {
-      return new Date(e).toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
-    } catch {
-      return "";
-    }
-  }
-}
-class M extends HTMLElement {
-  shadow;
-  static get observedAttributes() {
-    return ["role", "content", "timestamp"];
-  }
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.render();
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  render() {
-    const e = this.getAttribute("role") || "user", t = this.getAttribute("content") || "", a = this.getAttribute("timestamp") || "", s = e === "user" ? document.createTextNode(t).textContent || "" : l(o(t));
-    this.shadow.innerHTML = `
-      <style>
-        :host { display: flex; flex-direction: column; }
-        :host([role="user"]) { align-items: flex-end; }
-        :host([role="assistant"]) { align-items: flex-start; }
-        .bubble {
-          max-width: 85%;
-          padding: 10px 14px;
-          border-radius: var(--aikaara-radius, 12px);
-          font-size: 14px;
-          line-height: 1.5;
-          word-wrap: break-word;
-        }
-        .bubble.user {
-          background: var(--aikaara-primary, #6366f1);
-          color: #fff;
-          border-bottom-right-radius: 4px;
-        }
-        .bubble.assistant {
-          background: var(--aikaara-bg-secondary, #f9fafb);
-          color: var(--aikaara-text, #1f2937);
-          border-bottom-left-radius: 4px;
-        }
-        .timestamp {
-          font-size: 11px;
-          color: var(--aikaara-text-secondary, #6b7280);
-          margin-top: 2px;
-          padding: 0 4px;
-        }
-      </style>
-      <div class="bubble ${e}">${s}</div>
-      ${a ? `<div class="timestamp">${a}</div>` : ""}
-    `;
-  }
-}
-class _ extends HTMLElement {
-  shadow;
-  textarea;
-  sendBtn;
-  _disabled = !1;
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    const e = this.getAttribute("placeholder") || "Type a message...";
-    this.shadow.innerHTML = `
-      <style>
-        .input-container {
-          display: flex;
-          align-items: flex-end;
-          gap: 8px;
-          padding: 12px 16px;
-          border-top: 1px solid var(--aikaara-border, #e5e7eb);
-          background: var(--aikaara-bg, #ffffff);
-        }
-        textarea {
-          flex: 1;
-          resize: none;
-          border: 1px solid var(--aikaara-border, #e5e7eb);
-          border-radius: 8px;
-          padding: 10px 12px;
-          font-family: var(--aikaara-font, system-ui, sans-serif);
-          font-size: 14px;
-          color: var(--aikaara-text, #1f2937);
-          background: var(--aikaara-bg, #ffffff);
-          outline: none;
-          min-height: 40px;
-          max-height: 120px;
-          line-height: 1.4;
-          transition: border-color 200ms ease;
-        }
-        textarea:focus {
-          border-color: var(--aikaara-primary, #6366f1);
-        }
-        textarea::placeholder {
-          color: var(--aikaara-text-secondary, #6b7280);
-        }
-        .send-btn {
-          width: 40px;
-          height: 40px;
-          border: none;
-          border-radius: 50%;
-          background: var(--aikaara-primary, #6366f1);
-          color: #ffffff;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-          transition: background 200ms, opacity 200ms;
-        }
-        .send-btn:hover { background: var(--aikaara-primary-hover, #4f46e5); }
-        .send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-        .send-btn svg { width: 18px; height: 18px; }
-      </style>
-      <div class="input-container">
-        <textarea rows="1" placeholder="${e}"></textarea>
-        <button class="send-btn" aria-label="Send message" disabled>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
-          </svg>
-        </button>
-      </div>
-    `, this.textarea = this.shadow.querySelector("textarea"), this.sendBtn = this.shadow.querySelector(".send-btn"), this.textarea.addEventListener("input", () => {
-      this.autoGrow(), this.sendBtn.disabled = this._disabled || !this.textarea.value.trim();
-    }), this.textarea.addEventListener("keydown", (t) => {
-      t.key === "Enter" && !t.shiftKey && (t.preventDefault(), this.handleSend());
-    }), this.sendBtn.addEventListener("click", () => this.handleSend());
-  }
-  set disabled(e) {
-    this._disabled = e, this.textarea && (this.textarea.disabled = e), this.sendBtn && (this.sendBtn.disabled = e || !this.textarea?.value.trim());
-  }
-  get disabled() {
-    return this._disabled;
-  }
-  focus() {
-    this.textarea?.focus();
-  }
-  clear() {
-    this.textarea && (this.textarea.value = "", this.textarea.style.height = "auto", this.sendBtn.disabled = !0);
-  }
-  handleSend() {
-    const e = this.textarea.value.trim();
-    !e || this._disabled || (this.dispatchEvent(new CustomEvent("send", {
-      detail: { content: e },
-      bubbles: !0,
-      composed: !0
-    })), this.clear(), this.textarea.focus());
-  }
-  autoGrow() {
-    this.textarea.style.height = "auto", this.textarea.style.height = Math.min(this.textarea.scrollHeight, 120) + "px";
-  }
-}
-class H extends HTMLElement {
-  shadow;
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.shadow.innerHTML = `
-      <style>
-        :host { display: none; }
-        :host([visible]) { display: block; }
-        .typing {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          padding: 10px 14px;
-          background: var(--aikaara-bg-secondary, #f9fafb);
-          border-radius: var(--aikaara-radius, 12px);
-          border-bottom-left-radius: 4px;
-          width: fit-content;
-        }
-        .dot {
-          width: 6px;
-          height: 6px;
-          border-radius: 50%;
-          background: var(--aikaara-text-secondary, #6b7280);
-          animation: bounce 1.4s infinite ease-in-out;
-        }
-        .dot:nth-child(1) { animation-delay: 0ms; }
-        .dot:nth-child(2) { animation-delay: 200ms; }
-        .dot:nth-child(3) { animation-delay: 400ms; }
-        @keyframes bounce {
-          0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
-          30% { transform: translateY(-4px); opacity: 1; }
-        }
-      </style>
-      <div class="typing">
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
-      </div>
-    `;
-  }
-  show() {
-    this.setAttribute("visible", "");
-  }
-  hide() {
-    this.removeAttribute("visible");
-  }
-}
-class $ extends HTMLElement {
-  shadow;
-  bubble;
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.shadow.innerHTML = `
-      <style>
-        :host {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-        }
-        .bubble {
-          max-width: 85%;
-          padding: 10px 14px;
-          border-radius: var(--aikaara-radius, 12px);
-          border-bottom-left-radius: 4px;
-          background: var(--aikaara-bg-secondary, #f9fafb);
-          color: var(--aikaara-text, #1f2937);
-          font-size: 14px;
-          line-height: 1.5;
-          word-wrap: break-word;
-          min-height: 20px;
-        }
-        .bubble pre {
-          background: rgba(0,0,0,0.06);
-          padding: 8px 12px;
-          border-radius: 6px;
-          overflow-x: auto;
-          font-size: 13px;
-          margin: 8px 0;
-        }
-        .bubble code {
-          font-family: 'SF Mono', 'Fira Code', monospace;
-          font-size: 13px;
-        }
-        .bubble code:not(pre code) {
-          background: rgba(0,0,0,0.06);
-          padding: 2px 4px;
-          border-radius: 3px;
-        }
-        .cursor::after {
-          content: '\\25CF';
-          animation: blink 1s infinite;
-          margin-left: 2px;
-          font-size: 10px;
-          vertical-align: middle;
-        }
-        @keyframes blink {
-          0%, 100% { opacity: 1; }
-          50% { opacity: 0; }
-        }
-      </style>
-      <div class="bubble cursor"></div>
-    `, this.bubble = this.shadow.querySelector(".bubble");
-  }
-  updateContent(e) {
-    this.bubble && (this.bubble.innerHTML = l(o(e)), this.bubble.classList.add("cursor"));
-  }
-  finalize() {
-    this.bubble?.classList.remove("cursor");
-  }
-}
-class z extends HTMLElement {
-  shadow;
-  container;
-  dismissTimer = null;
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.shadow.innerHTML = `
-      <style>
-        .banner {
-          display: none;
-          padding: 8px 16px;
-          background: #fef2f2;
-          color: #dc2626;
-          font-size: 13px;
-          text-align: center;
-          border-top: 1px solid #fecaca;
-        }
-        .banner.visible {
-          display: block;
-        }
-        .dismiss {
-          background: none;
-          border: none;
-          color: #dc2626;
-          cursor: pointer;
-          font-size: 12px;
-          text-decoration: underline;
-          margin-left: 8px;
-        }
-      </style>
-      <div class="banner">
-        <span class="message"></span>
-        <button class="dismiss">Dismiss</button>
-      </div>
-    `, this.container = this.shadow.querySelector(".banner"), this.shadow.querySelector(".dismiss")?.addEventListener("click", () => this.hide());
-  }
-  show(e, t) {
-    const a = this.container.querySelector(".message");
-    a && (a.textContent = e), this.container.classList.add("visible"), this.dismissTimer && clearTimeout(this.dismissTimer), t && (this.dismissTimer = setTimeout(() => this.hide(), t));
-  }
-  hide() {
-    this.container.classList.remove("visible"), this.dismissTimer && (clearTimeout(this.dismissTimer), this.dismissTimer = null);
-  }
-}
-function B() {
-  const i = [
-    ["aikaara-chat-widget", w],
-    ["aikaara-chat-bubble", T],
-    ["aikaara-chat-header", C],
-    ["aikaara-message-list", S],
-    ["aikaara-message-bubble", M],
-    ["aikaara-chat-input", _],
-    ["aikaara-typing-indicator", H],
-    ["aikaara-streaming-message", $],
-    ["aikaara-error-banner", z]
-  ];
-  for (const [e, t] of i)
-    customElements.get(e) || customElements.define(e, t);
-}
-B();
+import { a as i, c as s, d as e, e as t, f as A, g as k, h as n, s as o, t as g, i as d, u as l, v as m, w as p, j as b, r as h } from "./ui-BMGa0gZH.mjs";
 export {
-  T as AikaaraChatBubble,
-  C as AikaaraChatHeader,
-  _ as AikaaraChatInput,
-  w as AikaaraChatWidget,
-  z as AikaaraErrorBanner,
-  M as AikaaraMessageBubble,
-  S as AikaaraMessageList,
-  $ as AikaaraStreamingMessage,
-  H as AikaaraTypingIndicator,
-  B as registerComponents
+  i as AikaaraChatBubble,
+  s as AikaaraChatHeader,
+  e as AikaaraChatInput,
+  t as AikaaraChatWidget,
+  A as AikaaraErrorBanner,
+  k as AikaaraMessageBubble,
+  n as AikaaraMessageList,
+  o as AikaaraModalAction,
+  g as AikaaraOptionList,
+  d as AikaaraStreamingMessage,
+  l as AikaaraSubmitAction,
+  m as AikaaraSystemPill,
+  p as AikaaraTemplateRenderer,
+  b as AikaaraTypingIndicator,
+  h as registerComponents
 };