@aikaara/chat-sdk 0.1.3 → 0.2.0

package/dist/ui.mjs

@@ -1,18 +1,15 @@
-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-CXRux2Q-.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();
+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 {
@@ -29,55 +26,58 @@ class L {
       this.togglePanel();
     }), this.header.addEventListener("header-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.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 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);
+      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 t = this.client.messages, e = t[t.length - 1];
-      (!e || e.status !== "streaming") && this.messageList.showTypingIndicator();
+      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", (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);
+    }), 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(t) {
+  async handleSend(e) {
     try {
-      await this.client.sendMessage(t);
+      await this.client.sendMessage(e);
     } 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(() => {
+  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 C extends HTMLElement {
-  constructor() {
-    super();
-    i(this, "shadow");
-    i(this, "controller", null);
-    i(this, "_config", {});
-    this.shadow = this.attachShadow({ mode: "open" });
-  }
+class w extends HTMLElement {
+  shadow;
+  controller = null;
+  _config = {};
   static get observedAttributes() {
     return [
       "base-url",
+      "ws-url",
       "user-token",
       "api-key",
       "title",
@@ -92,15 +92,17 @@ class C extends HTMLElement {
       "avatar-url"
     ];
   }
+  constructor() {
+    super(), this.shadow = this.attachShadow({ mode: "open" });
+  }
   connectedCallback() {
     this.render(), this.initController();
   }
   disconnectedCallback() {
-    var e;
-    (e = this.controller) == null || e.disconnect();
+    this.controller?.disconnect();
   }
-  attributeChangedCallback(e, a, r) {
-    a !== r && this.controller && (this.render(), this.initController());
+  attributeChangedCallback(e, t, a) {
+    t !== a && this.controller && (this.render(), this.initController());
   }
   configure(e) {
     this._config = { ...this._config, ...e };
@@ -108,27 +110,29 @@ class C extends HTMLElement {
   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 || 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,
+      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 || f,
+      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,
@@ -137,13 +141,12 @@ class C extends HTMLElement {
     };
   }
   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-primary-hover: ${this.darkenColor(e.primaryColor || c)};
           --aikaara-bg: #ffffff;
           --aikaara-bg-secondary: #f9fafb;
           --aikaara-text: #1f2937;
@@ -154,8 +157,8 @@ class C extends HTMLElement {
           --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;
+          --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;
@@ -193,6 +196,27 @@ class C extends HTMLElement {
           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>
@@ -204,34 +228,37 @@ class C extends HTMLElement {
           ${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-chat-input placeholder="${e.placeholder || d}"></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());
+    !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 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")}`;
+      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 A extends HTMLElement {
+class T extends HTMLElement {
+  shadow;
   constructor() {
-    super();
-    i(this, "shadow");
-    this.shadow = this.attachShadow({ mode: "open" });
+    super(), this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    var e;
-    this.render(), (e = this.shadow.querySelector(".bubble")) == null || e.addEventListener("click", () => {
+    this.render(), this.shadow.querySelector(".bubble")?.addEventListener("click", () => {
       this.dispatchEvent(new CustomEvent("toggle", { bubbles: !0, composed: !0 }));
     });
   }
@@ -274,19 +301,18 @@ class A extends HTMLElement {
     `;
   }
   setIcon(e) {
-    const a = this.shadow.querySelector(".bubble");
-    a && (a.innerHTML = e);
+    const t = this.shadow.querySelector(".bubble");
+    t && (t.innerHTML = e);
   }
 }
-class S extends HTMLElement {
-  constructor() {
-    super();
-    i(this, "shadow");
-    this.shadow = this.attachShadow({ mode: "open" });
-  }
+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();
   }
@@ -294,13 +320,12 @@ class S extends HTMLElement {
     this.render(), this.bindClose();
   }
   bindClose() {
-    var e;
-    (e = this.shadow.querySelector(".close-btn")) == null || e.addEventListener("click", () => {
+    this.shadow.querySelector(".close-btn")?.addEventListener("click", () => {
       this.dispatchEvent(new CustomEvent("header-close", { bubbles: !0, composed: !0 }));
     });
   }
   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";
+    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 {
@@ -380,14 +405,14 @@ class S extends HTMLElement {
       </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>'}
+          ${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:${l}"></span>
+            <span class="status-dot" style="background:${n}"></span>
           </div>
-          ${a ? `<div class="subtitle">${a}</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">
@@ -401,24 +426,24 @@ class S extends HTMLElement {
     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(
+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>'
-  ), t = t.replace(/\n/g, "<br>"), t;
+  ), e = e.replace(/\n/g, "<br>"), e;
 }
-function E(s) {
-  const t = {
+function L(i) {
+  const e = {
     "&": "&amp;",
     "<": "&lt;",
     ">": "&gt;",
     '"': "&quot;",
     "'": "&#039;"
   };
-  return s.replace(/[&<>"']/g, (e) => t[e]);
+  return i.replace(/[&<>"']/g, (t) => e[t]);
 }
-const M = /* @__PURE__ */ new Set([
+const A = /* @__PURE__ */ new Set([
   "p",
   "br",
   "strong",
@@ -438,49 +463,53 @@ const M = /* @__PURE__ */ new Set([
   "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 c(s) {
-  const t = document.createElement("template");
-  return t.innerHTML = s, p(t.content), t.innerHTML;
+function l(i) {
+  const e = document.createElement("template");
+  return e.innerHTML = i, h(e.content), e.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);
+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 = _[r] || /* @__PURE__ */ new Set(), l = Array.from(a.attributes);
-      for (const o of l)
-        n.has(o.name) || a.removeAttribute(o.name);
+      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 o = a.getAttribute("href") || "";
-        !o.startsWith("http://") && !o.startsWith("https://") && !o.startsWith("/") && a.removeAttribute("href");
+        const r = a.getAttribute("href") || "";
+        !r.startsWith("http://") && !r.startsWith("https://") && !r.startsWith("/") && a.removeAttribute("href");
       }
-      p(e);
+      h(t);
     }
 }
-class H extends HTMLElement {
+class S extends HTMLElement {
+  shadow;
+  container;
+  welcomeMessage = "";
+  showTimestamps = !0;
   constructor() {
-    super();
-    i(this, "shadow");
-    i(this, "container");
-    i(this, "welcomeMessage", "");
-    i(this, "showTimestamps", !0);
-    this.shadow = this.attachShadow({ mode: "open" });
+    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;
@@ -582,7 +611,7 @@ class H extends HTMLElement {
         }
       </style>
       <div class="message-list"></div>
-    `, this.container = this.shadow.querySelector(".message-list");
+    `, this.container = this.shadow.querySelector(".message-list"), this.welcomeMessage && this.renderMessages([]);
   }
   setWelcomeMessage(e) {
     this.welcomeMessage = e;
@@ -593,29 +622,25 @@ class H extends HTMLElement {
   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>`;
+        this.container.innerHTML = `<div class="welcome">${l(o(this.welcomeMessage))}</div>`;
         return;
       }
-      for (const a of e)
-        this.appendMessageElement(a);
+      for (const t of e)
+        this.appendMessageElement(t);
       this.scrollToBottom();
     }
   }
   addMessage(e) {
-    const a = this.container.querySelector(".welcome");
-    a && a.remove(), this.appendMessageElement(e), this.scrollToBottom();
+    const t = this.container.querySelector(".welcome");
+    t && t.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());
+    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"]');
-    if (e) {
-      e.removeAttribute("data-streaming");
-      const a = e.querySelector(".bubble");
-      a == null || a.classList.remove("streaming-cursor");
-    }
+    e && (e.removeAttribute("data-streaming"), e.querySelector(".bubble")?.classList.remove("streaming-cursor"));
   }
   showTypingIndicator() {
     this.removeTypingIndicator();
@@ -623,18 +648,17 @@ class H extends HTMLElement {
     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();
+    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");
-    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);
+    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(a);
+    this.container.appendChild(t);
   }
   scrollToBottom() {
     requestAnimationFrame(() => {
@@ -649,15 +673,14 @@ class H extends HTMLElement {
     }
   }
 }
-class $ extends HTMLElement {
-  constructor() {
-    super();
-    i(this, "shadow");
-    this.shadow = this.attachShadow({ mode: "open" });
-  }
+class M extends HTMLElement {
+  shadow;
   static get observedAttributes() {
     return ["role", "content", "timestamp"];
   }
+  constructor() {
+    super(), this.shadow = this.attachShadow({ mode: "open" });
+  }
   connectedCallback() {
     this.render();
   }
@@ -665,7 +688,7 @@ class $ extends HTMLElement {
     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));
+    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; }
@@ -696,19 +719,18 @@ class $ extends HTMLElement {
           padding: 0 4px;
         }
       </style>
-      <div class="bubble ${e}">${n}</div>
-      ${r ? `<div class="timestamp">${r}</div>` : ""}
+      <div class="bubble ${e}">${s}</div>
+      ${a ? `<div class="timestamp">${a}</div>` : ""}
     `;
   }
 }
-class z extends HTMLElement {
+class _ extends HTMLElement {
+  shadow;
+  textarea;
+  sendBtn;
+  _disabled = !1;
   constructor() {
-    super();
-    i(this, "shadow");
-    i(this, "textarea");
-    i(this, "sendBtn");
-    i(this, "_disabled", !1);
-    this.shadow = this.attachShadow({ mode: "open" });
+    super(), this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     const e = this.getAttribute("placeholder") || "Type a message...";
@@ -772,20 +794,18 @@ class z extends HTMLElement {
       </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.textarea.addEventListener("keydown", (t) => {
+      t.key === "Enter" && !t.shiftKey && (t.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()));
+    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() {
-    var e;
-    (e = this.textarea) == null || e.focus();
+    this.textarea?.focus();
   }
   clear() {
     this.textarea && (this.textarea.value = "", this.textarea.style.height = "auto", this.sendBtn.disabled = !0);
@@ -802,11 +822,10 @@ class z extends HTMLElement {
     this.textarea.style.height = "auto", this.textarea.style.height = Math.min(this.textarea.scrollHeight, 120) + "px";
   }
 }
-class B extends HTMLElement {
+class H extends HTMLElement {
+  shadow;
   constructor() {
-    super();
-    i(this, "shadow");
-    this.shadow = this.attachShadow({ mode: "open" });
+    super(), this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     this.shadow.innerHTML = `
@@ -852,12 +871,11 @@ class B extends HTMLElement {
     this.removeAttribute("visible");
   }
 }
-class F extends HTMLElement {
+class $ extends HTMLElement {
+  shadow;
+  bubble;
   constructor() {
-    super();
-    i(this, "shadow");
-    i(this, "bubble");
-    this.shadow = this.attachShadow({ mode: "open" });
+    super(), this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
     this.shadow.innerHTML = `
@@ -912,23 +930,20 @@ class F extends HTMLElement {
     `, this.bubble = this.shadow.querySelector(".bubble");
   }
   updateContent(e) {
-    this.bubble && (this.bubble.innerHTML = c(d(e)), this.bubble.classList.add("cursor"));
+    this.bubble && (this.bubble.innerHTML = l(o(e)), this.bubble.classList.add("cursor"));
   }
   finalize() {
-    var e;
-    (e = this.bubble) == null || e.classList.remove("cursor");
+    this.bubble?.classList.remove("cursor");
   }
 }
-class q extends HTMLElement {
+class z extends HTMLElement {
+  shadow;
+  container;
+  dismissTimer = null;
   constructor() {
-    super();
-    i(this, "shadow");
-    i(this, "container");
-    i(this, "dismissTimer", null);
-    this.shadow = this.attachShadow({ mode: "open" });
+    super(), this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    var e;
     this.shadow.innerHTML = `
       <style>
         .banner {
@@ -957,41 +972,41 @@ class q extends HTMLElement {
         <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());
+    `, this.container = this.shadow.querySelector(".banner"), this.shadow.querySelector(".dismiss")?.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));
+  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 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]
+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 [t, e] of s)
-    customElements.get(t) || customElements.define(t, e);
+  for (const [e, t] of i)
+    customElements.get(e) || customElements.define(e, t);
 }
-I();
+B();
 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
+  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
 };