@makemore/agent-frontend 2.10.0 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "A lightweight chat widget for AI agents. Use as an embeddable script tag or import directly into React/Preact projects.",
   "type": "module",
   "main": "dist/chat-widget.cjs.js",

package/src/components/ContentBlocks.js

@@ -0,0 +1,203 @@
+/**
+ * ContentBlocks - renders structured content blocks from tool results.
+ *
+ * Each block type has a dedicated renderer.  Unknown types are silently
+ * skipped so the system is forward-compatible with new block types that
+ * only newer clients understand.
+ */
+
+import { html } from 'htm/preact';
+import { useState } from 'preact/hooks';
+import { escapeHtml, parseMarkdown } from '../utils/helpers.js';
+
+// ---------------------------------------------------------------------------
+// Individual block components
+// ---------------------------------------------------------------------------
+
+function CardBlock({ block, onAction, markdownParser }) {
+  return html`
+    <div class="cw-block-card">
+      ${block.image && html`<img class="cw-block-card-image" src=${block.image} alt=${block.title || ''} />`}
+      <div class="cw-block-card-body">
+        ${block.badge && html`<span class="cw-block-card-badge">${block.badge}</span>`}
+        ${block.title && html`<div class="cw-block-card-title">${block.title}</div>`}
+        ${block.subtitle && html`<div class="cw-block-card-subtitle">${block.subtitle}</div>`}
+        ${block.metadata && block.metadata.length > 0 && html`
+          <div class="cw-block-card-meta">
+            ${block.metadata.map(m => html`
+              <span class="cw-block-meta-pair">
+                <span class="cw-block-meta-label">${m.label}:</span> ${m.value}
+              </span>
+            `)}
+          </div>
+        `}
+        ${block.actions && block.actions.length > 0 && html`
+          <div class="cw-block-card-actions">
+            ${block.actions.map(a => html`<${ActionButton} action=${a} onAction=${onAction} />`)}
+          </div>
+        `}
+      </div>
+    </div>
+  `;
+}
+
+function CardListBlock({ block, onAction, markdownParser }) {
+  const layout = block.layout || 'vertical';
+  return html`
+    <div class="cw-block-card-list cw-block-card-list-${layout}">
+      ${(block.items || []).map(item => html`
+        <${CardBlock} block=${{ type: 'card', ...item }} onAction=${onAction} markdownParser=${markdownParser} />
+      `)}
+    </div>
+  `;
+}
+
+function ActionButton({ action, onAction }) {
+  const style = action.style || 'primary';
+  const handleClick = () => {
+    if (!onAction) return;
+    onAction(action);
+  };
+
+  if (action.type === 'link') {
+    return html`<a class="cw-block-btn cw-block-btn-${style}" href=${action.url} target="_blank" rel="noopener">${action.label}</a>`;
+  }
+  return html`<button class="cw-block-btn cw-block-btn-${style}" onClick=${handleClick}>${action.label}</button>`;
+}
+
+function ActionButtonsBlock({ block, onAction }) {
+  return html`
+    <div class="cw-block-action-buttons">
+      ${(block.buttons || []).map(a => html`<${ActionButton} action=${a} onAction=${onAction} />`)}
+    </div>
+  `;
+}
+
+function CalloutBlock({ block }) {
+  const style = block.style || 'info';
+  const icons = { info: 'ℹ️', success: '✅', warning: '⚠️' };
+  return html`
+    <div class="cw-block-callout cw-block-callout-${style}">
+      <span class="cw-block-callout-icon">${icons[style] || 'ℹ️'}</span>
+      <div class="cw-block-callout-content">
+        ${block.title && html`<strong>${block.title}</strong>`}
+        ${block.body && html`<span>${block.body}</span>`}
+      </div>
+    </div>
+  `;
+}
+
+function ImageBlock({ block }) {
+  return html`
+    <figure class="cw-block-image">
+      <img src=${block.url} alt=${block.alt || ''} />
+      ${block.caption && html`<figcaption>${block.caption}</figcaption>`}
+    </figure>
+  `;
+}
+
+function DividerBlock() {
+  return html`<hr class="cw-block-divider" />`;
+}
+
+function TableBlock({ block }) {
+  return html`
+    <div class="cw-block-table-wrapper">
+      <table class="cw-block-table">
+        ${block.headers && block.headers.length > 0 && html`
+          <thead><tr>${block.headers.map(h => html`<th>${h}</th>`)}</tr></thead>
+        `}
+        <tbody>
+          ${(block.rows || []).map(row => html`
+            <tr>${row.map(cell => html`<td>${cell}</td>`)}</tr>
+          `)}
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+
+function CodeBlock({ block }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(block.code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  return html`
+    <div class="cw-block-code">
+      ${block.filename && html`<div class="cw-block-code-filename">${block.filename}</div>`}
+      <pre><code>${escapeHtml(block.code)}</code></pre>
+      ${block.copyable !== false && html`
+        <button class="cw-block-code-copy" onClick=${handleCopy}>${copied ? '✓' : '⎘'}</button>
+      `}
+    </div>
+  `;
+}
+
+function CollapsibleBlock({ block }) {
+  const [open, setOpen] = useState(block.defaultOpen || false);
+  return html`
+    <details class="cw-block-collapsible" open=${open} onClick=${(e) => { e.preventDefault(); setOpen(!open); }}>
+      <summary>${block.title}</summary>
+      <div class="cw-block-collapsible-body">${block.body}</div>
+    </details>
+  `;
+}
+
+function StatusBlock({ block }) {
+  const icons = { loading: '⏳', success: '✅', error: '❌', warning: '⚠️', info: 'ℹ️' };
+  return html`
+    <div class="cw-block-status cw-block-status-${block.state || 'info'}">
+      <span class="cw-block-status-icon">${icons[block.state] || 'ℹ️'}</span>
+      <div>
+        <strong>${block.title}</strong>
+        ${block.body && html`<div>${block.body}</div>`}
+        ${block.progress != null && html`
+          <div class="cw-block-progress"><div class="cw-block-progress-bar" style=${{ width: `${block.progress * 100}%` }}></div></div>
+        `}
+      </div>
+    </div>
+  `;
+}
+
+// ---------------------------------------------------------------------------
+// Registry & top-level renderer
+// ---------------------------------------------------------------------------
+
+const BLOCK_RENDERERS = {
+  card: CardBlock,
+  cardList: CardListBlock,
+  actionButtons: ActionButtonsBlock,
+  callout: CalloutBlock,
+  image: ImageBlock,
+  divider: DividerBlock,
+  table: TableBlock,
+  code: CodeBlock,
+  collapsible: CollapsibleBlock,
+  status: StatusBlock,
+};
+
+/**
+ * Render a list of content blocks.
+ *
+ * @param {Object} props
+ * @param {Array}  props.blocks       - Array of block objects with a `type` key
+ * @param {Function} props.onAction   - Callback for message/callback actions
+ * @param {Object} props.markdownParser - Optional markdown parser instance
+ */
+export function BlockRenderer({ blocks, onAction, markdownParser }) {
+  if (!blocks || blocks.length === 0) return null;
+
+  return html`
+    <div class="cw-content-blocks">
+      ${blocks.map((block, i) => {
+        const Comp = BLOCK_RENDERERS[block.type];
+        if (!Comp) return null;
+        return html`<${Comp} key=${i} block=${block} onAction=${onAction} markdownParser=${markdownParser} />`;
+      })}
+    </div>
+  `;
+}
+

package/src/components/Message.js

@@ -5,6 +5,7 @@
 import { html } from 'htm/preact';
 import { useState, useRef, useEffect } from 'preact/hooks';
 import { escapeHtml, parseMarkdown, formatFileSize, getFileTypeIcon } from '../utils/helpers.js';
+import { BlockRenderer } from './ContentBlocks.js';
 
 // Debug payload viewer component
 function DebugPayload({ msg, show, onToggle }) {
@@ -152,6 +153,28 @@ export function Message({ msg, debugMode, markdownParser, onEdit, onRetry, isLoa
     `;
   }
 
+  // Content blocks: render rich structured UI elements
+  if (msg.type === 'content_blocks' && msg.metadata?.blocks) {
+    const handleBlockAction = (action) => {
+      if (action.type === 'message' && msg._onSendMessage) {
+        msg._onSendMessage(action.message);
+      }
+      if (action.type === 'callback' && msg._onCallback) {
+        msg._onCallback(action.callbackId);
+      }
+    };
+    return html`
+      <div class="cw-message-row" style="position: relative;">
+        <${BlockRenderer}
+          blocks=${msg.metadata.blocks}
+          onAction=${handleBlockAction}
+          markdownParser=${markdownParser}
+        />
+        ${debugMode && html`<${DebugPayload} msg=${msg} show=${showPayload} onToggle=${() => setShowPayload(!showPayload)} />`}
+      </div>
+    `;
+  }
+
   // Tool call/result: show compact inline version
   if (isToolCall || isToolResult) {
     const hasDetails = msg.metadata?.arguments || msg.metadata?.result;

package/src/hooks/useChat.js

@@ -169,6 +169,26 @@ export function useChat(config, api, storage) {
       } catch (err) { console.error('[ChatWidget] Parse error:', err); }
     });
 
+    // Handle content blocks from tool results (rich UI elements)
+    eventSource.addEventListener('content.blocks', (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (config.onEvent) config.onEvent('content.blocks', data.payload);
+        setMessages(prev => [...prev, {
+          id: 'content-blocks-' + Date.now(),
+          role: 'assistant',
+          content: '',
+          timestamp: new Date(),
+          type: 'content_blocks',
+          metadata: {
+            toolName: data.payload.tool_name,
+            toolCallId: data.payload.tool_call_id,
+            blocks: data.payload.blocks,
+          },
+        }]);
+      } catch (err) { console.error('[ChatWidget] Parse error:', err); }
+    });
+
     const handleTerminal = (event) => {
       try {
         const data = JSON.parse(event.data);