@aikaara/chat-sdk 0.2.0 → 0.3.0

package/dist/ui.mjs

@@ -1,5 +1,5 @@
-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 {
+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;
@@ -8,8 +8,8 @@ class y {
   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();
+  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 {
@@ -47,6 +47,13 @@ class y {
       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) {
@@ -70,7 +77,7 @@ class y {
     }, 200));
   }
 }
-class w extends HTMLElement {
+class S extends HTMLElement {
   shadow;
   controller = null;
   _config = {};
@@ -115,38 +122,45 @@ class w extends HTMLElement {
       apiKey: this.getAttribute("api-key") || this._config.apiKey,
       title: this.getAttribute("title") || this._config.title || "Chat",
       subtitle: this.getAttribute("subtitle") || this._config.subtitle,
-      theme: this.getAttribute("theme") || this._config.theme || v,
-      primaryColor: this.getAttribute("primary-color") || this._config.primaryColor || c,
-      position: this.getAttribute("position") || this._config.position || k,
-      width: Number(this.getAttribute("width")) || this._config.width || x,
-      height: Number(this.getAttribute("height")) || this._config.height || f,
-      fontFamily: this._config.fontFamily || m,
-      borderRadius: this._config.borderRadius ?? g,
-      placeholder: this.getAttribute("placeholder") || this._config.placeholder || d,
+      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 || u,
+      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
+      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 || c)};
+          --aikaara-primary-hover: ${this.darkenColor(e.primaryColor || b)};
           --aikaara-bg: #ffffff;
           --aikaara-bg-secondary: #f9fafb;
           --aikaara-text: #1f2937;
@@ -228,14 +242,16 @@ class w extends HTMLElement {
           ${e.avatarUrl ? `avatar-url="${e.avatarUrl}"` : ""}
         ></aikaara-chat-header>
         <aikaara-message-list></aikaara-message-list>
-        <aikaara-chat-input placeholder="${e.placeholder || d}"></aikaara-chat-input>
+        <aikaara-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 y(e, this.shadow), await this.controller.connect());
+    !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);
@@ -245,14 +261,14 @@ class w extends HTMLElement {
   }
   darkenColor(e) {
     try {
-      const t = parseInt(e.replace("#", ""), 16), a = Math.max(0, (t >> 16) - 20), s = Math.max(0, (t >> 8 & 255) - 20), n = Math.max(0, (t & 255) - 20);
-      return `#${(a << 16 | s << 8 | n).toString(16).padStart(6, "0")}`;
+      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 T extends HTMLElement {
+class M extends HTMLElement {
   shadow;
   constructor() {
     super(), this.shadow = this.attachShadow({ mode: "open" });
@@ -305,7 +321,7 @@ class T extends HTMLElement {
     t && (t.innerHTML = e);
   }
 }
-class C extends HTMLElement {
+class _ extends HTMLElement {
   shadow;
   static get observedAttributes() {
     return ["title", "subtitle", "avatar-url", "status"];
@@ -325,7 +341,7 @@ class C extends HTMLElement {
     });
   }
   render() {
-    const e = this.getAttribute("title") || "Chat", t = this.getAttribute("subtitle") || "", a = this.getAttribute("avatar-url"), s = this.getAttribute("status") || "connected", n = s === "connected" ? "#10b981" : s === "connecting" || s === "reconnecting" ? "#f59e0b" : "#ef4444";
+    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 {
@@ -410,7 +426,7 @@ class C extends HTMLElement {
         <div class="info">
           <div class="title">
             ${e}
-            <span class="status-dot" style="background:${n}"></span>
+            <span class="status-dot" style="background:${r}"></span>
           </div>
           ${t ? `<div class="subtitle">${t}</div>` : ""}
         </div>
@@ -426,14 +442,14 @@ class C extends HTMLElement {
     this.setAttribute("status", e);
   }
 }
-function o(i) {
-  let e = L(i);
-  return e = e.replace(/```(\w*)\n([\s\S]*?)```/g, (t, a, s) => `<pre><code>${s.trim()}</code></pre>`), e = e.replace(/`([^`]+)`/g, "<code>$1</code>"), e = e.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), e = e.replace(/\*(.+?)\*/g, "<em>$1</em>"), e = e.replace(
+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 L(i) {
+function $(s) {
   const e = {
     "&": "&amp;",
     "<": "&lt;",
@@ -441,9 +457,9 @@ function L(i) {
     '"': "&quot;",
     "'": "&#039;"
   };
-  return i.replace(/[&<>"']/g, (t) => e[t]);
+  return s.replace(/[&<>"']/g, (t) => e[t]);
 }
-const A = /* @__PURE__ */ new Set([
+const H = /* @__PURE__ */ new Set([
   "p",
   "br",
   "strong",
@@ -463,38 +479,38 @@ const A = /* @__PURE__ */ new Set([
   "h6",
   "span",
   "div"
-]), E = {
+]), 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 l(i) {
+function d(s) {
   const e = document.createElement("template");
-  return e.innerHTML = i, h(e.content), e.innerHTML;
+  return e.innerHTML = s, g(e.content), e.innerHTML;
 }
-function h(i) {
-  const e = Array.from(i.childNodes);
+function g(s) {
+  const e = Array.from(s.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);
+      const a = t, i = a.tagName.toLowerCase();
+      if (!H.has(i)) {
+        const n = document.createTextNode(a.textContent || "");
+        s.replaceChild(n, t);
         continue;
       }
-      const n = E[s] || /* @__PURE__ */ new Set(), b = Array.from(a.attributes);
-      for (const r of b)
-        n.has(r.name) || a.removeAttribute(r.name);
+      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 r = a.getAttribute("href") || "";
-        !r.startsWith("http://") && !r.startsWith("https://") && !r.startsWith("/") && a.removeAttribute("href");
+        const n = a.getAttribute("href") || "";
+        !n.startsWith("http://") && !n.startsWith("https://") && !n.startsWith("/") && a.removeAttribute("href");
       }
-      h(t);
+      g(t);
     }
 }
-class S extends HTMLElement {
+class I extends HTMLElement {
   shadow;
   container;
   welcomeMessage = "";
@@ -524,7 +540,41 @@ class S extends HTMLElement {
         .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; }
+        .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;
@@ -622,7 +672,7 @@ class S extends HTMLElement {
   renderMessages(e) {
     if (this.container) {
       if (this.container.innerHTML = "", e.length === 0 && this.welcomeMessage) {
-        this.container.innerHTML = `<div class="welcome">${l(o(this.welcomeMessage))}</div>`;
+        this.container.innerHTML = `<div class="welcome">${d(l(this.welcomeMessage))}</div>`;
         return;
       }
       for (const t of e)
@@ -636,7 +686,7 @@ class S extends HTMLElement {
   }
   updateStreamingContent(e) {
     const t = this.container.querySelector('[data-streaming="true"] .bubble');
-    t && (t.innerHTML = l(o(e)), t.classList.add("streaming-cursor"), this.scrollToBottom());
+    t && (t.innerHTML = d(l(e)), t.classList.add("streaming-cursor"), this.scrollToBottom());
   }
   finalizeStreaming() {
     const e = this.container.querySelector('[data-streaming="true"]');
@@ -652,14 +702,52 @@ class S extends HTMLElement {
   }
   appendMessageElement(e) {
     const t = document.createElement("div");
-    t.classList.add("message-wrap", e.role), e.status === "streaming" && t.setAttribute("data-streaming", "true");
+    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 = 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);
+    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;
@@ -673,10 +761,12 @@ class S extends HTMLElement {
     }
   }
 }
-class M extends HTMLElement {
+class U extends HTMLElement {
   shadow;
+  templatePayload = null;
+  attachments = [];
   static get observedAttributes() {
-    return ["role", "content", "timestamp"];
+    return ["role", "content", "timestamp", "content-type", "template-id", "inner-message", "message-id", "status"];
   }
   constructor() {
     super(), this.shadow = this.attachShadow({ mode: "open" });
@@ -687,13 +777,21 @@ class M extends HTMLElement {
   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") || "", s = e === "user" ? document.createTextNode(t).textContent || "" : l(o(t));
+    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"]) { align-items: flex-start; }
+        :host([role="assistant"]),
+        :host([role="agent"]),
+        :host([role="system"]) { align-items: flex-start; }
         .bubble {
           max-width: 85%;
           padding: 10px 14px;
@@ -707,24 +805,90 @@ class M extends HTMLElement {
           color: #fff;
           border-bottom-right-radius: 4px;
         }
-        .bubble.assistant {
+        .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}">${s}</div>
-      ${a ? `<div class="timestamp">${a}</div>` : ""}
+      <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>` : "";
   }
 }
-class _ extends HTMLElement {
+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;
@@ -822,7 +986,7 @@ class _ extends HTMLElement {
     this.textarea.style.height = "auto", this.textarea.style.height = Math.min(this.textarea.scrollHeight, 120) + "px";
   }
 }
-class H extends HTMLElement {
+class D extends HTMLElement {
   shadow;
   constructor() {
     super(), this.shadow = this.attachShadow({ mode: "open" });
@@ -871,7 +1035,7 @@ class H extends HTMLElement {
     this.removeAttribute("visible");
   }
 }
-class $ extends HTMLElement {
+class F extends HTMLElement {
   shadow;
   bubble;
   constructor() {
@@ -930,13 +1094,13 @@ class $ extends HTMLElement {
     `, this.bubble = this.shadow.querySelector(".bubble");
   }
   updateContent(e) {
-    this.bubble && (this.bubble.innerHTML = l(o(e)), this.bubble.classList.add("cursor"));
+    this.bubble && (this.bubble.innerHTML = d(l(e)), this.bubble.classList.add("cursor"));
   }
   finalize() {
     this.bubble?.classList.remove("cursor");
   }
 }
-class z extends HTMLElement {
+class P extends HTMLElement {
   shadow;
   container;
   dismissTimer = null;
@@ -982,31 +1146,89 @@ class z extends HTMLElement {
     this.container.classList.remove("visible"), this.dismissTimer && (clearTimeout(this.dismissTimer), this.dismissTimer = null);
   }
 }
-function B() {
-  const i = [
-    ["aikaara-chat-widget", w],
-    ["aikaara-chat-bubble", T],
-    ["aikaara-chat-header", C],
-    ["aikaara-message-list", S],
-    ["aikaara-message-bubble", M],
-    ["aikaara-chat-input", _],
-    ["aikaara-typing-indicator", H],
-    ["aikaara-streaming-message", $],
-    ["aikaara-error-banner", z]
+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 i)
+  for (const [e, t] of s)
     customElements.get(e) || customElements.define(e, t);
 }
-B();
+N();
 export {
-  T as AikaaraChatBubble,
-  C as AikaaraChatHeader,
-  _ as AikaaraChatInput,
-  w as AikaaraChatWidget,
-  z as AikaaraErrorBanner,
-  M as AikaaraMessageBubble,
-  S as AikaaraMessageList,
-  $ as AikaaraStreamingMessage,
-  H as AikaaraTypingIndicator,
-  B as registerComponents
+  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
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aikaara/chat-sdk",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Aikaara Chat SDK — embeddable chat widget and headless client",
   "license": "MIT",