@adia-ai/web-modules 0.8.3 → 0.8.4

package/CHANGELOG.md

@@ -1,4 +1,13 @@
 # Changelog — @adia-ai/web-modules
+
+## [Unreleased]
+
+### Added
+- **`chat-shell.appendMessage({ html: true })`** — assistant messages can carry trusted app-authored component markup (light-DOM upgrade in place); the `render` (markdown) path escapes inline HTML by design, which made gen-ui's error bubbles show raw `<col-ui …>` source text. The html mode persists on the message record and survives `stopStreaming()` and `conversation` getter/setter round-trips.
+
+### Maintenance
+- **`dist/` bundles rebuilt** (`chat/chat-shell.min.js`, `everything.min.js` — the chat-shell change plus the inlined @adia-ai/llm provider-routing fixes).
+
 ## [0.8.3] — 2026-07-16
 
 ### Maintenance

package/chat/chat-shell/chat-shell.js

@@ -66,13 +66,15 @@ class ChatShell extends UIElement {
   get conversation() {
     return this.#messages
       .filter(m => m.role === 'user' || m.role === 'assistant')
-      .map(m => ({ role: m.role, content: m.content }));
+      .map(m => (m.html ? { role: m.role, content: m.content, html: true } : { role: m.role, content: m.content }));
   }
 
   set conversation(msgs) {
     this.clear();
     for (const m of msgs) {
-      this.appendMessage({ role: m.role, content: m.content, render: true });
+      // Round-trip the html mode — re-rendering an html message through
+      // the markdown path would escape its component markup.
+      this.appendMessage({ role: m.role, content: m.content, render: !m.html, html: !!m.html });
     }
   }
 
@@ -122,9 +124,22 @@ class ChatShell extends UIElement {
 
   // ── Message management ──
 
-  appendMessage({ role, content = '', render: renderMd = false }) {
+  /**
+   * @param {object} msg
+   * @param {string} msg.role — 'user' | 'assistant' | 'error'
+   * @param {string} [msg.content]
+   * @param {boolean} [msg.render] — treat content as MARKDOWN (inline HTML
+   *   is escaped — component markup shows as literal text under this flag)
+   * @param {boolean} [msg.html] — assistant only: insert content as raw
+   *   HTML (light-DOM component markup upgrades in place). TRUSTED
+   *   app-authored strings only — never LLM output or user input; the
+   *   caller owns escaping of any interpolated values.
+   */
+  appendMessage({ role, content = '', render: renderMd = false, html = false }) {
     const id = `msg_${++msgId}`;
-    this.#messages.push({ id, role, content });
+    // html persists on the record: stopStreaming() and the conversation
+    // setter must never push an html message back through the markdown path.
+    this.#messages.push({ id, role, content, html });
 
     const el = document.createElement('div');
     el.setAttribute('data-role', role);
@@ -133,10 +148,13 @@ class ChatShell extends UIElement {
     if (role === 'user') {
       el.innerHTML = `<div data-bubble>${escapeHTML(content)}</div>`;
     } else if (role === 'assistant') {
-      const rendered = renderMd && content ? renderMarkdown(content) : escapeHTML(content);
+      const done = renderMd || html;
+      const rendered = html ? content
+        : renderMd && content ? renderMarkdown(content)
+        : escapeHTML(content);
       el.innerHTML = `
         <span data-avatar>AI</span>
-        <div data-bubble><div data-content>${rendered}</div>${!renderMd ? '<span data-cursor></span>' : ''}</div>
+        <div data-bubble><div data-content>${rendered}</div>${!done ? '<span data-cursor></span>' : ''}</div>
       `;
     } else if (role === 'error') {
       el.innerHTML = `<icon-ui name="warning"></icon-ui><span>${escapeHTML(content)}</span>`;
@@ -202,9 +220,11 @@ class ChatShell extends UIElement {
     // Remove cursor
     this.#messagesEl?.querySelector('[data-role]:last-child [data-cursor]')?.remove();
 
-    // Render markdown in last assistant bubble
+    // Render markdown in last assistant bubble — never an html-mode
+    // message: its component markup is already live DOM, and the markdown
+    // path would re-escape it to source text.
     const last = this.#messages[this.#messages.length - 1];
-    if (last?.role === 'assistant' && last.content) {
+    if (last?.role === 'assistant' && last.content && !last.html) {
       const contentEl = this.#messagesEl?.querySelector('[data-role]:last-child [data-content]');
       if (contentEl) {
         contentEl.innerHTML = renderMarkdown(last.content);