vanilla-agent 1.30.0 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "description": "Themeable, plugable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/panel.ts

@@ -94,6 +94,7 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
 
   // Build header using layout config if available, otherwise use standard builder
   const headerLayoutConfig = config?.layout?.header;
+  const showHeader = config?.layout?.showHeader !== false; // default to true
   const headerElements: HeaderElements = headerLayoutConfig
     ? buildHeaderWithLayout(config!, headerLayoutConfig, { showClose })
     : buildHeader({ config, showClose });
@@ -132,10 +133,26 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
 
   // Build composer/footer using extracted builder
   const composerElements: ComposerElements = buildComposer({ config });
+  const showFooter = config?.layout?.showFooter !== false; // default to true
 
   // Assemble container with header, body, and footer
-  attachHeaderToContainer(container, headerElements, config);
-  container.append(body, composerElements.footer);
+  if (showHeader) {
+    attachHeaderToContainer(container, headerElements, config);
+  } else {
+    // Hide header completely
+    headerElements.header.style.display = 'none';
+    attachHeaderToContainer(container, headerElements, config);
+  }
+  
+  container.append(body);
+  
+  if (showFooter) {
+    container.append(composerElements.footer);
+  } else {
+    // Hide footer completely
+    composerElements.footer.style.display = 'none';
+    container.append(composerElements.footer);
+  }
 
   return {
     container,

package/src/components/reasoning-bubble.ts

@@ -4,7 +4,34 @@ import { describeReasonStatus } from "../utils/formatting";
 import { renderLucideIcon } from "../utils/icons";
 
 // Expansion state per widget instance
-const reasoningExpansionState = new Set<string>();
+export const reasoningExpansionState = new Set<string>();
+
+// Helper function to update reasoning bubble UI after expansion state changes
+export const updateReasoningBubbleUI = (messageId: string, bubble: HTMLElement): void => {
+  const expanded = reasoningExpansionState.has(messageId);
+  const header = bubble.querySelector('button[data-expand-header="true"]') as HTMLElement;
+  const content = bubble.querySelector('.tvw-border-t') as HTMLElement;
+  
+  if (!header || !content) return;
+  
+  header.setAttribute("aria-expanded", expanded ? "true" : "false");
+  
+  // Find toggle icon container - it's the direct child div of headerMeta (which has tvw-ml-auto)
+  const headerMeta = header.querySelector('.tvw-ml-auto') as HTMLElement;
+  const toggleIcon = headerMeta?.querySelector(':scope > .tvw-flex.tvw-items-center') as HTMLElement;
+  if (toggleIcon) {
+    toggleIcon.innerHTML = "";
+    const iconColor = "currentColor";
+    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+    if (chevronIcon) {
+      toggleIcon.appendChild(chevronIcon);
+    } else {
+      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    }
+  }
+  
+  content.style.display = expanded ? "" : "none";
+};
 
 export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement => {
   const reasoning = message.reasoning;
@@ -41,6 +68,8 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
   ) as HTMLButtonElement;
   header.type = "button";
   header.setAttribute("aria-expanded", expanded ? "true" : "false");
+  header.setAttribute("data-expand-header", "true");
+  header.setAttribute("data-bubble-type", "reasoning");
 
   const headerContent = createElement("div", "tvw-flex tvw-flex-col tvw-text-left");
   const title = createElement("span", "tvw-text-xs tvw-text-cw-primary");
@@ -105,28 +134,6 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
     content.style.display = expanded ? "" : "none";
   };
 
-  const toggleExpansion = () => {
-    expanded = !expanded;
-    if (expanded) {
-      reasoningExpansionState.add(message.id);
-    } else {
-      reasoningExpansionState.delete(message.id);
-    }
-    applyExpansionState();
-  };
-
-  header.addEventListener("pointerdown", (event) => {
-    event.preventDefault();
-    toggleExpansion();
-  });
-
-  header.addEventListener("keydown", (event) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      toggleExpansion();
-    }
-  });
-
   applyExpansionState();
 
   bubble.append(header, content);

package/src/components/tool-bubble.ts

@@ -4,7 +4,35 @@ import { formatUnknownValue, describeToolTitle } from "../utils/formatting";
 import { renderLucideIcon } from "../utils/icons";
 
 // Expansion state per widget instance
-const toolExpansionState = new Set<string>();
+export const toolExpansionState = new Set<string>();
+
+// Helper function to update tool bubble UI after expansion state changes
+export const updateToolBubbleUI = (messageId: string, bubble: HTMLElement, config?: AgentWidgetConfig): void => {
+  const expanded = toolExpansionState.has(messageId);
+  const toolCallConfig = config?.toolCall ?? {};
+  const header = bubble.querySelector('button[data-expand-header="true"]') as HTMLElement;
+  const content = bubble.querySelector('.tvw-border-t') as HTMLElement;
+  
+  if (!header || !content) return;
+  
+  header.setAttribute("aria-expanded", expanded ? "true" : "false");
+  
+  // Find toggle icon container - it's the direct child div of headerMeta (which has tvw-ml-auto)
+  const headerMeta = header.querySelector('.tvw-ml-auto') as HTMLElement;
+  const toggleIcon = headerMeta?.querySelector(':scope > .tvw-flex.tvw-items-center') as HTMLElement;
+  if (toggleIcon) {
+    toggleIcon.innerHTML = "";
+    const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
+    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+    if (chevronIcon) {
+      toggleIcon.appendChild(chevronIcon);
+    } else {
+      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    }
+  }
+  
+  content.style.display = expanded ? "" : "none";
+};
 
 export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidgetConfig): HTMLElement => {
   const tool = message.toolCall;
@@ -57,6 +85,8 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
   ) as HTMLButtonElement;
   header.type = "button";
   header.setAttribute("aria-expanded", expanded ? "true" : "false");
+  header.setAttribute("data-expand-header", "true");
+  header.setAttribute("data-bubble-type", "tool");
 
   // Apply header styles
   if (toolCallConfig.headerBackgroundColor) {
@@ -248,28 +278,6 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
     content.style.display = expanded ? "" : "none";
   };
 
-  const toggleToolExpansion = () => {
-    expanded = !expanded;
-    if (expanded) {
-      toolExpansionState.add(message.id);
-    } else {
-      toolExpansionState.delete(message.id);
-    }
-    applyToolExpansion();
-  };
-
-  header.addEventListener("pointerdown", (event) => {
-    event.preventDefault();
-    toggleToolExpansion();
-  });
-
-  header.addEventListener("keydown", (event) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      toggleToolExpansion();
-    }
-  });
-
   applyToolExpansion();
 
   bubble.append(header, content);

package/src/types.ts

@@ -790,6 +790,19 @@ export type AgentWidgetLayoutConfig = {
   messages?: AgentWidgetMessageLayoutConfig;
   /** Slot renderers for custom content injection */
   slots?: Partial<Record<WidgetLayoutSlot, SlotRenderer>>;
+  /**
+   * Show/hide the header section entirely.
+   * When false, the header (including icon, title, buttons) is completely hidden.
+   * @default true
+   */
+  showHeader?: boolean;
+  /**
+   * Show/hide the footer/composer section entirely.
+   * When false, the footer (including input field, send button, suggestions) is completely hidden.
+   * Useful for read-only conversation previews.
+   * @default true
+   */
+  showFooter?: boolean;
 };
 
 // ============================================================================

package/src/ui.ts

@@ -26,8 +26,8 @@ import { positionMap } from "./utils/positioning";
 import type { HeaderElements, ComposerElements } from "./components/panel";
 import { MessageTransform, MessageActionCallbacks } from "./components/message-bubble";
 import { createStandardBubble, createTypingIndicator } from "./components/message-bubble";
-import { createReasoningBubble } from "./components/reasoning-bubble";
-import { createToolBubble } from "./components/tool-bubble";
+import { createReasoningBubble, reasoningExpansionState, updateReasoningBubbleUI } from "./components/reasoning-bubble";
+import { createToolBubble, toolExpansionState, updateToolBubbleUI } from "./components/tool-bubble";
 import { createSuggestions } from "./components/suggestions";
 import { enhanceWithForms } from "./components/forms";
 import { pluginRegistry } from "./plugins/registry";
@@ -453,6 +453,60 @@ export const createAgentExperience = (
   // Render custom slots
   renderSlots();
 
+  // Add event delegation for reasoning and tool bubble expansion
+  // This handles clicks even after idiomorph morphs the DOM
+  const handleBubbleExpansion = (event: Event) => {
+    const target = event.target as HTMLElement;
+    
+    // Check if the click/keypress is on an expand header button
+    const headerButton = target.closest('button[data-expand-header="true"]') as HTMLElement;
+    if (!headerButton) return;
+    
+    // Find the parent bubble element
+    const bubble = headerButton.closest('.vanilla-reasoning-bubble, .vanilla-tool-bubble') as HTMLElement;
+    if (!bubble) return;
+    
+    // Get message ID from bubble
+    const messageId = bubble.getAttribute('data-message-id');
+    if (!messageId) return;
+    
+    const bubbleType = headerButton.getAttribute('data-bubble-type');
+    
+    // Toggle expansion state
+    if (bubbleType === 'reasoning') {
+      if (reasoningExpansionState.has(messageId)) {
+        reasoningExpansionState.delete(messageId);
+      } else {
+        reasoningExpansionState.add(messageId);
+      }
+      updateReasoningBubbleUI(messageId, bubble);
+    } else if (bubbleType === 'tool') {
+      if (toolExpansionState.has(messageId)) {
+        toolExpansionState.delete(messageId);
+      } else {
+        toolExpansionState.add(messageId);
+      }
+      updateToolBubbleUI(messageId, bubble, config);
+    }
+  };
+
+  // Attach event listeners to messagesWrapper for event delegation
+  messagesWrapper.addEventListener('pointerdown', (event) => {
+    const target = event.target as HTMLElement;
+    if (target.closest('button[data-expand-header="true"]')) {
+      event.preventDefault();
+      handleBubbleExpansion(event);
+    }
+  });
+
+  messagesWrapper.addEventListener('keydown', (event) => {
+    const target = event.target as HTMLElement;
+    if ((event.key === 'Enter' || event.key === ' ') && target.closest('button[data-expand-header="true"]')) {
+      event.preventDefault();
+      handleBubbleExpansion(event);
+    }
+  });
+
   panel.appendChild(container);
   mount.appendChild(wrapper);
 
@@ -1975,6 +2029,18 @@ export const createAgentExperience = (
         }
       }
 
+      // Update header visibility based on layout.showHeader
+      const showHeader = config.layout?.showHeader !== false; // default to true
+      if (header) {
+        header.style.display = showHeader ? "" : "none";
+      }
+
+      // Update footer visibility based on layout.showFooter
+      const showFooter = config.layout?.showFooter !== false; // default to true
+      if (footer) {
+        footer.style.display = showFooter ? "" : "none";
+      }
+
       // Only update open state if launcher enabled state changed or autoExpand value changed
       const launcherEnabledChanged = launcherEnabled !== prevLauncherEnabled;
       const autoExpandChanged = autoExpand !== prevAutoExpand;