@aikaara/chat-sdk 0.1.0

package/dist/ui.mjs

@@ -0,0 +1,994 @@
+var u = Object.defineProperty;
+var g = (s, t, e) => t in s ? u(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var i = (s, t, e) => g(s, typeof t != "symbol" ? t + "" : t, e);
+import { a as m, D as f, e as h, f as x, g as k, h as y, i as v, j as w, k as b, l as T } from "./headless-DzI-CcOZ.mjs";
+class L {
+  constructor(t, e) {
+    i(this, "client");
+    i(this, "panel");
+    i(this, "bubble");
+    i(this, "header");
+    i(this, "messageList");
+    i(this, "input");
+    i(this, "errorBanner");
+    i(this, "isOpen", !1);
+    this.client = new m(t), this.bubble = e.querySelector("aikaara-chat-bubble"), this.panel = e.querySelector(".aikaara-panel"), this.header = e.querySelector("aikaara-chat-header"), this.messageList = e.querySelector("aikaara-message-list"), this.input = e.querySelector("aikaara-chat-input"), this.errorBanner = e.querySelector("aikaara-error-banner"), t.welcomeMessage && this.messageList.setWelcomeMessage(t.welcomeMessage), t.showTimestamps !== void 0 && this.messageList.setShowTimestamps(t.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("close", () => {
+      this.togglePanel(!1);
+    }), this.input.addEventListener("send", ((t) => {
+      this.handleSend(t.detail.content);
+    })), this.client.on("message:sent", (t) => {
+      this.messageList.addMessage(t);
+    }), this.client.on("stream:start", () => {
+      this.messageList.removeTypingIndicator();
+      const t = this.client.messages[this.client.messages.length - 1];
+      t && this.messageList.addMessage(t);
+    }), this.client.on("stream:update", ({ content: t }) => {
+      this.messageList.updateStreamingContent(t);
+    }), this.client.on("stream:end", () => {
+      this.messageList.finalizeStreaming();
+    }), this.client.on("typing:start", () => {
+      const t = this.client.messages, e = t[t.length - 1];
+      (!e || e.status !== "streaming") && this.messageList.showTypingIndicator();
+    }), this.client.on("typing:stop", () => {
+      this.messageList.removeTypingIndicator();
+    }), this.client.on("connection:state", (t) => {
+      this.header.setStatus(t), t === "connected" ? (this.errorBanner.hide(), this.input.disabled = !1) : t === "reconnecting" ? (this.errorBanner.show("Connection lost. Reconnecting..."), this.input.disabled = !0) : t === "disconnected" && (this.input.disabled = !0);
+    }), this.client.on("error", (t) => {
+      this.errorBanner.show(t.message, 5e3);
+    });
+  }
+  async handleSend(t) {
+    try {
+      await this.client.sendMessage(t);
+    } catch {
+      this.errorBanner.show("Failed to send message", 3e3);
+    }
+  }
+  togglePanel(t) {
+    this.isOpen = t !== void 0 ? t : !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 C extends HTMLElement {
+  constructor() {
+    super();
+    i(this, "shadow");
+    i(this, "controller", null);
+    i(this, "_config", {});
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return [
+      "base-url",
+      "user-token",
+      "api-key",
+      "title",
+      "subtitle",
+      "theme",
+      "primary-color",
+      "position",
+      "width",
+      "height",
+      "placeholder",
+      "welcome-message",
+      "avatar-url"
+    ];
+  }
+  connectedCallback() {
+    this.render(), this.initController();
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this.controller) == null || e.disconnect();
+  }
+  attributeChangedCallback(e, a, r) {
+    a !== r && this.controller && (this.render(), this.initController());
+  }
+  configure(e) {
+    this._config = { ...this._config, ...e };
+  }
+  getConfig() {
+    return {
+      baseUrl: this.getAttribute("base-url") || this._config.baseUrl || "",
+      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 || T,
+      primaryColor: this.getAttribute("primary-color") || this._config.primaryColor || b,
+      position: this.getAttribute("position") || this._config.position || w,
+      width: Number(this.getAttribute("width")) || this._config.width || v,
+      height: Number(this.getAttribute("height")) || this._config.height || y,
+      fontFamily: this._config.fontFamily || k,
+      borderRadius: this._config.borderRadius ?? x,
+      placeholder: this.getAttribute("placeholder") || this._config.placeholder || h,
+      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 || f,
+      conversationId: this._config.conversationId,
+      systemPromptId: this._config.systemPromptId,
+      channel: this._config.channel,
+      onMessage: this._config.onMessage,
+      onStatusChange: this._config.onStatusChange,
+      onError: this._config.onError,
+      onStreamUpdate: this._config.onStreamUpdate,
+      onConnectionStateChange: this._config.onConnectionStateChange
+    };
+  }
+  render() {
+    var a, r;
+    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: ${((a = e.offset) == null ? void 0 : a.x) ?? 20}px;
+          --aikaara-offset-y: ${((r = e.offset) == null ? void 0 : r.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);
+        }
+      </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 || h}"></aikaara-chat-input>
+        <aikaara-error-banner></aikaara-error-banner>
+      </div>
+    `;
+  }
+  async initController() {
+    var a;
+    const e = this.getConfig();
+    !e.baseUrl || !e.userToken || ((a = this.controller) == null || a.disconnect(), this.controller = new L(e, this.shadow), await this.controller.connect());
+  }
+  darkenColor(e) {
+    try {
+      const a = parseInt(e.replace("#", ""), 16), r = Math.max(0, (a >> 16) - 20), n = Math.max(0, (a >> 8 & 255) - 20), l = Math.max(0, (a & 255) - 20);
+      return `#${(r << 16 | n << 8 | l).toString(16).padStart(6, "0")}`;
+    } catch {
+      return e;
+    }
+  }
+}
+class A extends HTMLElement {
+  constructor() {
+    super();
+    i(this, "shadow");
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    var e;
+    this.render(), (e = this.shadow.querySelector(".bubble")) == null || e.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 a = this.shadow.querySelector(".bubble");
+    a && (a.innerHTML = e);
+  }
+}
+class S extends HTMLElement {
+  constructor() {
+    super();
+    i(this, "shadow");
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["title", "subtitle", "avatar-url", "status"];
+  }
+  connectedCallback() {
+    var e;
+    this.render(), (e = this.shadow.querySelector(".close-btn")) == null || e.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
+    });
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const e = this.getAttribute("title") || "Chat", a = this.getAttribute("subtitle") || "", r = this.getAttribute("avatar-url"), n = this.getAttribute("status") || "connected", l = n === "connected" ? "#10b981" : n === "connecting" || n === "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">
+          ${r ? `<img src="${r}" 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:${l}"></span>
+          </div>
+          ${a ? `<div class="subtitle">${a}</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 d(s) {
+  let t = E(s);
+  return t = t.replace(/```(\w*)\n([\s\S]*?)```/g, (e, a, r) => `<pre><code>${r.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(
+    /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+  ), t = t.replace(/\n/g, "<br>"), t;
+}
+function E(s) {
+  const t = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;"
+  };
+  return s.replace(/[&<>"']/g, (e) => t[e]);
+}
+const M = /* @__PURE__ */ new Set([
+  "p",
+  "br",
+  "strong",
+  "em",
+  "code",
+  "pre",
+  "a",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "span",
+  "div"
+]), _ = {
+  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 c(s) {
+  const t = document.createElement("template");
+  return t.innerHTML = s, p(t.content), t.innerHTML;
+}
+function p(s) {
+  const t = Array.from(s.childNodes);
+  for (const e of t)
+    if (e.nodeType === Node.ELEMENT_NODE) {
+      const a = e, r = a.tagName.toLowerCase();
+      if (!M.has(r)) {
+        const o = document.createTextNode(a.textContent || "");
+        s.replaceChild(o, e);
+        continue;
+      }
+      const n = _[r] || /* @__PURE__ */ new Set(), l = Array.from(a.attributes);
+      for (const o of l)
+        n.has(o.name) || a.removeAttribute(o.name);
+      if (a.hasAttribute("href")) {
+        const o = a.getAttribute("href") || "";
+        !o.startsWith("http://") && !o.startsWith("https://") && !o.startsWith("/") && a.removeAttribute("href");
+      }
+      p(e);
+    }
+}
+class H extends HTMLElement {
+  constructor() {
+    super();
+    i(this, "shadow");
+    i(this, "container");
+    i(this, "welcomeMessage", "");
+    i(this, "showTimestamps", !0);
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.shadow.innerHTML = `
+      <style>
+        .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");
+  }
+  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">${c(d(this.welcomeMessage))}</div>`;
+        return;
+      }
+      for (const a of e)
+        this.appendMessageElement(a);
+      this.scrollToBottom();
+    }
+  }
+  addMessage(e) {
+    const a = this.container.querySelector(".welcome");
+    a && a.remove(), this.appendMessageElement(e), this.scrollToBottom();
+  }
+  updateStreamingContent(e) {
+    const a = this.container.querySelector('[data-streaming="true"] .bubble');
+    a && (a.innerHTML = c(d(e)), a.classList.add("streaming-cursor"), this.scrollToBottom());
+  }
+  finalizeStreaming() {
+    const e = this.container.querySelector('[data-streaming="true"]');
+    if (e) {
+      e.removeAttribute("data-streaming");
+      const a = e.querySelector(".bubble");
+      a == null || a.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() {
+    var e;
+    (e = this.container.querySelector('[data-typing="true"]')) == null || e.remove();
+  }
+  appendMessageElement(e) {
+    const a = document.createElement("div");
+    a.classList.add("message-wrap", e.role), e.status === "streaming" && a.setAttribute("data-streaming", "true");
+    const r = document.createElement("div");
+    if (r.classList.add("bubble", e.role), e.role === "user" ? r.textContent = e.content : (r.innerHTML = c(d(e.content || "")), e.status === "streaming" && r.classList.add("streaming-cursor")), a.appendChild(r), this.showTimestamps && e.createdAt) {
+      const n = document.createElement("div");
+      n.classList.add("timestamp"), n.textContent = this.formatTime(e.createdAt), a.appendChild(n);
+    }
+    this.container.appendChild(a);
+  }
+  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 $ extends HTMLElement {
+  constructor() {
+    super();
+    i(this, "shadow");
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["role", "content", "timestamp"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  render() {
+    const e = this.getAttribute("role") || "user", a = this.getAttribute("content") || "", r = this.getAttribute("timestamp") || "", n = e === "user" ? document.createTextNode(a).textContent || "" : c(d(a));
+    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}">${n}</div>
+      ${r ? `<div class="timestamp">${r}</div>` : ""}
+    `;
+  }
+}
+class z extends HTMLElement {
+  constructor() {
+    super();
+    i(this, "shadow");
+    i(this, "textarea");
+    i(this, "sendBtn");
+    i(this, "_disabled", !1);
+    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", (a) => {
+      a.key === "Enter" && !a.shiftKey && (a.preventDefault(), this.handleSend());
+    }), this.sendBtn.addEventListener("click", () => this.handleSend());
+  }
+  set disabled(e) {
+    var a;
+    this._disabled = e, this.textarea && (this.textarea.disabled = e), this.sendBtn && (this.sendBtn.disabled = e || !((a = this.textarea) != null && a.value.trim()));
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  focus() {
+    var e;
+    (e = this.textarea) == null || e.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 B extends HTMLElement {
+  constructor() {
+    super();
+    i(this, "shadow");
+    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 {
+  constructor() {
+    super();
+    i(this, "shadow");
+    i(this, "bubble");
+    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 = c(d(e)), this.bubble.classList.add("cursor"));
+  }
+  finalize() {
+    var e;
+    (e = this.bubble) == null || e.classList.remove("cursor");
+  }
+}
+class q extends HTMLElement {
+  constructor() {
+    super();
+    i(this, "shadow");
+    i(this, "container");
+    i(this, "dismissTimer", null);
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    var e;
+    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"), (e = this.shadow.querySelector(".dismiss")) == null || e.addEventListener("click", () => this.hide());
+  }
+  show(e, a) {
+    const r = this.container.querySelector(".message");
+    r && (r.textContent = e), this.container.classList.add("visible"), this.dismissTimer && clearTimeout(this.dismissTimer), a && (this.dismissTimer = setTimeout(() => this.hide(), a));
+  }
+  hide() {
+    this.container.classList.remove("visible"), this.dismissTimer && (clearTimeout(this.dismissTimer), this.dismissTimer = null);
+  }
+}
+function I() {
+  const s = [
+    ["aikaara-chat-widget", C],
+    ["aikaara-chat-bubble", A],
+    ["aikaara-chat-header", S],
+    ["aikaara-message-list", H],
+    ["aikaara-message-bubble", $],
+    ["aikaara-chat-input", z],
+    ["aikaara-typing-indicator", B],
+    ["aikaara-streaming-message", F],
+    ["aikaara-error-banner", q]
+  ];
+  for (const [t, e] of s)
+    customElements.get(t) || customElements.define(t, e);
+}
+I();
+export {
+  A as AikaaraChatBubble,
+  S as AikaaraChatHeader,
+  z as AikaaraChatInput,
+  C as AikaaraChatWidget,
+  q as AikaaraErrorBanner,
+  $ as AikaaraMessageBubble,
+  H as AikaaraMessageList,
+  F as AikaaraStreamingMessage,
+  B as AikaaraTypingIndicator,
+  I as registerComponents
+};