@aikaara/chat-sdk 0.3.0 → 0.4.0

package/dist/ui.mjs

@@ -1,1234 +1,19 @@
-import { a as k, D as y, g as u, h as v, j as w, k as T, l as C, m as L, n as b, o as A } from "./AikaaraChatClient-Cqbcd1jb.mjs";
-class E {
-  client;
-  panel;
-  bubble;
-  header;
-  messageList;
-  input;
-  errorBanner;
-  isOpen = !1;
-  constructor(e, t, a) {
-    this.client = new k(e, { uploadAdapter: a?.uploadAdapter }), 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);
-    }), this.client.on("message:received", (e) => {
-      this.messageList.upsertMessage(e);
-    }), this.client.on("message:updated", (e) => {
-      this.messageList.upsertMessage(e);
-    }), this.messageList.addEventListener("message-action", (e) => {
-      const t = e.detail;
-      t?.text && this.handleSend(t.text);
-    });
-  }
-  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 S 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 || A,
-      primaryColor: this.getAttribute("primary-color") || this._config.primaryColor || b,
-      position: this.getAttribute("position") || this._config.position || L,
-      width: Number(this.getAttribute("width")) || this._config.width || C,
-      height: Number(this.getAttribute("height")) || this._config.height || T,
-      fontFamily: this._config.fontFamily || w,
-      borderRadius: this._config.borderRadius ?? v,
-      placeholder: this.getAttribute("placeholder") || this._config.placeholder || u,
-      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 || y,
-      conversationId: this._config.conversationId,
-      systemPromptId: this._config.systemPromptId,
-      channel: this._config.channel,
-      extUid: this._config.extUid,
-      transport: this._config.transport,
-      tiledesk: this._config.tiledesk,
-      tiledeskIdentity: this._config.tiledeskIdentity,
-      onMessage: this._config.onMessage,
-      onStatusChange: this._config.onStatusChange,
-      onError: this._config.onError,
-      onStreamUpdate: this._config.onStreamUpdate,
-      onConnectionStateChange: this._config.onConnectionStateChange,
-      onTemplateMessage: this._config.onTemplateMessage
-    };
-  }
-  setUploadAdapter(e) {
-    this._config.uploadAdapter = e, this.controller?.getClient().setUploadAdapter(e);
-  }
-  render() {
-    const e = this.getConfig();
-    this.shadow.innerHTML = `
-      <style>
-        :host {
-          --aikaara-primary: ${e.primaryColor};
-          --aikaara-primary-hover: ${this.darkenColor(e.primaryColor || b)};
-          --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 || u}"></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 E(e, this.shadow, {
-      uploadAdapter: this._config.uploadAdapter
-    }), 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), i = Math.max(0, (t >> 8 & 255) - 20), r = Math.max(0, (t & 255) - 20);
-      return `#${(a << 16 | i << 8 | r).toString(16).padStart(6, "0")}`;
-    } catch {
-      return e;
-    }
-  }
-}
-class M 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 _ 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"), i = this.getAttribute("status") || "connected", r = i === "connected" ? "#10b981" : i === "connecting" || i === "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:${r}"></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 l(s) {
-  let e = $(s);
-  return e = e.replace(/```(\w*)\n([\s\S]*?)```/g, (t, a, i) => `<pre><code>${i.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 $(s) {
-  const e = {
-    "&": "&amp;",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#039;"
-  };
-  return s.replace(/[&<>"']/g, (t) => e[t]);
-}
-const H = /* @__PURE__ */ new Set([
-  "p",
-  "br",
-  "strong",
-  "em",
-  "code",
-  "pre",
-  "a",
-  "ul",
-  "ol",
-  "li",
-  "blockquote",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "span",
-  "div"
-]), z = {
-  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 d(s) {
-  const e = document.createElement("template");
-  return e.innerHTML = s, g(e.content), e.innerHTML;
-}
-function g(s) {
-  const e = Array.from(s.childNodes);
-  for (const t of e)
-    if (t.nodeType === Node.ELEMENT_NODE) {
-      const a = t, i = a.tagName.toLowerCase();
-      if (!H.has(i)) {
-        const n = document.createTextNode(a.textContent || "");
-        s.replaceChild(n, t);
-        continue;
-      }
-      const r = z[i] || /* @__PURE__ */ new Set(), o = Array.from(a.attributes);
-      for (const n of o)
-        r.has(n.name) || a.removeAttribute(n.name);
-      if (a.hasAttribute("href")) {
-        const n = a.getAttribute("href") || "";
-        !n.startsWith("http://") && !n.startsWith("https://") && !n.startsWith("/") && a.removeAttribute("href");
-      }
-      g(t);
-    }
-}
-class I 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,
-        .message-wrap.agent,
-        .message-wrap.system { align-items: flex-start; }
-        .message-wrap.system .bubble {
-          background: transparent;
-          color: var(--aikaara-text-secondary, #6b7280);
-          font-size: 12px;
-          font-style: italic;
-          padding: 4px 0;
-        }
-        .attachments {
-          display: flex;
-          flex-direction: column;
-          gap: 4px;
-          margin-top: 6px;
-        }
-        .attachment {
-          display: inline-flex;
-          align-items: center;
-          gap: 6px;
-          padding: 6px 10px;
-          background: rgba(0,0,0,0.05);
-          border-radius: 8px;
-          font-size: 12px;
-          color: inherit;
-          text-decoration: none;
-        }
-        .attachment:hover { background: rgba(0,0,0,0.08); }
-        .status-tick {
-          font-size: 10px;
-          margin-left: 4px;
-          color: var(--aikaara-text-secondary, #6b7280);
-        }
-        .status-tick.read { color: var(--aikaara-primary, #6366f1); }
-        aikaara-template-renderer { display: block; margin-top: 6px; }
-        .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">${d(l(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 = d(l(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"), e.externalId && (t.dataset.externalId = e.externalId), t.dataset.messageId = e.id;
-    const a = document.createElement("div");
-    if (a.classList.add("bubble", e.role), e.role === "user" ? a.textContent = e.content : (a.innerHTML = d(l(e.content || "")), e.status === "streaming" && a.classList.add("streaming-cursor")), e.template?.contentType) {
-      const i = document.createElement("aikaara-template-renderer");
-      i.setAttribute("content-type", e.template.contentType), e.template.templateId && i.setAttribute("template-id", e.template.templateId), i.setPayload(e.template.payload, e.role !== "user" ? e.content : void 0), a.appendChild(i);
-    }
-    if (e.attachments?.length) {
-      const i = document.createElement("div");
-      i.classList.add("attachments");
-      for (const r of e.attachments) {
-        const o = document.createElement("a");
-        o.classList.add("attachment"), o.href = r.fileUrl, o.target = "_blank", o.rel = "noopener noreferrer", o.textContent = `📎 ${r.fileName}`, i.appendChild(o);
-      }
-      a.appendChild(i);
-    }
-    if (t.appendChild(a), this.showTimestamps && e.createdAt || e.role === "user" && e.status) {
-      const i = document.createElement("div");
-      if (i.classList.add("timestamp"), this.showTimestamps && e.createdAt && (i.textContent = this.formatTime(e.createdAt)), e.role === "user" && e.status) {
-        const r = document.createElement("span");
-        r.classList.add("status-tick"), e.status === "read" && r.classList.add("read"), r.textContent = {
-          sending: " ○",
-          sent: " ✓",
-          delivered: " ✓✓",
-          read: " ✓✓"
-        }[e.status] ?? "", i.appendChild(r);
-      }
-      t.appendChild(i);
-    }
-    this.container.appendChild(t);
-  }
-  /**
-   * Replace an existing rendered message (matched by id or externalId) in place.
-   * Used when a Tiledesk self-echo reconciles with an optimistic bubble or when
-   * a status update flips delivered → read.
-   */
-  upsertMessage(e) {
-    const t = this.findRenderedMessage(e);
-    t && t.remove(), this.appendMessageElement(e), this.scrollToBottom();
-  }
-  findRenderedMessage(e) {
-    if (e.externalId) {
-      const t = this.container.querySelector(`[data-external-id="${CSS.escape(e.externalId)}"]`);
-      if (t) return t;
-    }
-    return this.container.querySelector(`[data-message-id="${CSS.escape(e.id)}"]`);
-  }
-  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 U extends HTMLElement {
-  shadow;
-  templatePayload = null;
-  attachments = [];
-  static get observedAttributes() {
-    return ["role", "content", "timestamp", "content-type", "template-id", "inner-message", "message-id", "status"];
-  }
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.render();
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  setTemplatePayload(e) {
-    this.templatePayload = e, this.render();
-  }
-  setAttachments(e) {
-    this.attachments = e, this.render();
-  }
-  render() {
-    const e = this.getAttribute("role") || "user", t = this.getAttribute("content") || "", a = this.getAttribute("timestamp") || "", i = this.getAttribute("status") || "", r = this.getAttribute("content-type") || "", o = this.getAttribute("template-id") || "", n = this.getAttribute("inner-message") || "", h = e === "user" ? document.createTextNode(t).textContent || "" : d(l(t)), p = e === "user" && i, f = i === "sending" ? "○" : i === "sent" ? "✓" : i === "delivered" || i === "read" ? "✓✓" : "";
-    this.shadow.innerHTML = `
-      <style>
-        :host { display: flex; flex-direction: column; }
-        :host([role="user"]) { align-items: flex-end; }
-        :host([role="assistant"]),
-        :host([role="agent"]),
-        :host([role="system"]) { 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, .bubble.agent {
-          background: var(--aikaara-bg-secondary, #f9fafb);
-          color: var(--aikaara-text, #1f2937);
-          border-bottom-left-radius: 4px;
-        }
-        .bubble.system {
-          background: transparent;
-          color: var(--aikaara-text-secondary, #6b7280);
-          font-size: 12px;
-          font-style: italic;
-        }
-        .timestamp {
-          font-size: 11px;
-          color: var(--aikaara-text-secondary, #6b7280);
-          margin-top: 2px;
-          padding: 0 4px;
-        }
-        .status {
-          font-size: 10px;
-          color: ${i === "read" ? "var(--aikaara-primary, #6366f1)" : "var(--aikaara-text-secondary, #6b7280)"};
-          margin-left: 4px;
-        }
-        .attachments {
-          display: flex;
-          flex-direction: column;
-          gap: 6px;
-          margin-top: 8px;
-        }
-        .attachment {
-          display: inline-flex;
-          align-items: center;
-          gap: 6px;
-          padding: 6px 10px;
-          background: rgba(0,0,0,0.05);
-          border-radius: 8px;
-          font-size: 12px;
-          color: inherit;
-          text-decoration: none;
-          max-width: 100%;
-        }
-        .attachment:hover { background: rgba(0,0,0,0.08); }
-        aikaara-template-renderer { display: block; margin-top: 6px; }
-      </style>
-      <div class="bubble ${e}">
-        <div class="content">${h}</div>
-        ${r ? `<aikaara-template-renderer
-                content-type="${r}"
-                template-id="${o}"
-                inner-message="${m(n)}"
-              ></aikaara-template-renderer>` : ""}
-        ${this.renderAttachments()}
-      </div>
-      ${a || p ? `
-        <div class="timestamp">
-          ${a}${p ? `<span class="status">${f}</span>` : ""}
-        </div>
-      ` : ""}
-    `;
-    const c = this.shadow.querySelector("aikaara-template-renderer");
-    c && this.templatePayload !== null && c.setPayload(this.templatePayload, n), c && c.addEventListener("template-action", (x) => {
-      this.dispatchEvent(
-        new CustomEvent("message-action", {
-          detail: x.detail,
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    });
-  }
-  renderAttachments() {
-    return this.attachments.length ? `<div class="attachments">${this.attachments.map(
-      (t) => `<a class="attachment" href="${m(t.fileUrl)}" target="_blank" rel="noopener noreferrer">
-             📎 ${q(t.fileName)}
-           </a>`
-    ).join("")}</div>` : "";
-  }
-}
-function m(s) {
-  return String(s).replace(/[&<>"']/g, (e) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[e]);
-}
-function q(s) {
-  return String(s).replace(/[&<>]/g, (e) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[e]);
-}
-class B 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 D 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 F 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 = d(l(e)), this.bubble.classList.add("cursor"));
-  }
-  finalize() {
-    this.bubble?.classList.remove("cursor");
-  }
-}
-class P 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);
-  }
-}
-class O extends HTMLElement {
-  shadow;
-  payloadData = null;
-  innerMessage = "";
-  static get observedAttributes() {
-    return ["content-type", "template-id", "inner-message"];
-  }
-  constructor() {
-    super(), this.shadow = this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    this.render();
-  }
-  attributeChangedCallback() {
-    this.render();
-  }
-  setPayload(e, t) {
-    this.payloadData = e, t !== void 0 && (this.innerMessage = t), this.render();
-  }
-  render() {
-    const e = this.getAttribute("content-type") ?? "", t = this.getAttribute("template-id") ?? "", a = this.getAttribute("inner-message") ?? this.innerMessage;
-    this.shadow.innerHTML = `
-      <style>
-        :host { display: block; }
-        .inner { font-size: 14px; line-height: 1.5; color: var(--aikaara-text, #1f2937); }
-        .placeholder {
-          font-size: 12px;
-          color: var(--aikaara-text-secondary, #6b7280);
-          padding: 6px 0;
-        }
-      </style>
-      ${a ? '<div class="inner"></div>' : ""}
-      <slot></slot>
-    `;
-    const i = this.shadow.querySelector(".inner");
-    if (i && a && (i.textContent = a), !e) return;
-    const r = t ? `aikaara-template-${t}` : `aikaara-template-${e}`;
-    if (customElements.get(r)) {
-      const o = this.querySelector(r);
-      if (o) {
-        o.setPayload?.(this.payloadData);
-        return;
-      }
-      const n = document.createElement(r);
-      n.setPayload?.(this.payloadData), n.addEventListener("template-action", (h) => {
-        this.dispatchEvent(
-          new CustomEvent("template-action", {
-            detail: h.detail,
-            bubbles: !0,
-            composed: !0
-          })
-        );
-      }), this.appendChild(n);
-    }
-  }
-}
-function N() {
-  const s = [
-    ["aikaara-chat-widget", S],
-    ["aikaara-chat-bubble", M],
-    ["aikaara-chat-header", _],
-    ["aikaara-message-list", I],
-    ["aikaara-message-bubble", U],
-    ["aikaara-chat-input", B],
-    ["aikaara-typing-indicator", D],
-    ["aikaara-streaming-message", F],
-    ["aikaara-error-banner", P],
-    ["aikaara-template-renderer", O]
-  ];
-  for (const [e, t] of s)
-    customElements.get(e) || customElements.define(e, t);
-}
-N();
+import { y as i, a as s, c as e, d as t, e as A, f as k, g as n, h as o, z as g, B as d, i as h, D as l, F as m, G as p, j as C, r as b } from "./MountTenant-5CL6i2El.mjs";
 export {
-  M as AikaaraChatBubble,
-  _ as AikaaraChatHeader,
-  B as AikaaraChatInput,
-  S as AikaaraChatWidget,
-  P as AikaaraErrorBanner,
-  U as AikaaraMessageBubble,
-  I as AikaaraMessageList,
-  F as AikaaraStreamingMessage,
-  O as AikaaraTemplateRenderer,
-  D as AikaaraTypingIndicator,
-  N as registerComponents
+  i as AikaaraChat,
+  s as AikaaraChatBubble,
+  e as AikaaraChatHeader,
+  t as AikaaraChatInput,
+  A as AikaaraChatWidget,
+  k as AikaaraErrorBanner,
+  n as AikaaraMessageBubble,
+  o as AikaaraMessageList,
+  g as AikaaraModalAction,
+  d as AikaaraOptionList,
+  h as AikaaraStreamingMessage,
+  l as AikaaraSubmitAction,
+  m as AikaaraSystemPill,
+  p as AikaaraTemplateRenderer,
+  C as AikaaraTypingIndicator,
+  b as registerComponents
 };