vanilla-agent 1.29.0 → 1.31.0

package/dist/widget.css

@@ -1240,8 +1240,12 @@
   margin-top: 0.5rem;
   padding-top: 0.5rem;
   border-top: 1px solid var(--cw-divider, #f1f5f9);
-  /* Fade in when first shown (for "always" visibility) */
-  animation: tvw-message-actions-fade-in 0.3s ease-out;
+}
+
+/* Fade in animation only for "always" visibility mode (not hover) */
+/* forwards ensures final state is kept, idiomorph preserves element so animation only plays once */
+.tvw-message-actions:not(.tvw-message-actions-hover) {
+  animation: tvw-message-actions-fade-in 0.3s ease-out forwards;
 }
 
 /* Action bar alignment */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.29.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",
@@ -23,6 +23,7 @@
     "src"
   ],
   "dependencies": {
+    "idiomorph": "^0.7.4",
     "lucide": "^0.552.0",
     "marked": "^12.0.2",
     "partial-json": "^0.1.7",

package/src/@types/idiomorph.d.ts

@@ -0,0 +1,37 @@
+declare module "idiomorph" {
+  export interface IdiomorphCallbacks {
+    beforeNodeAdded?: (node: Node) => boolean | void;
+    afterNodeAdded?: (node: Node) => void;
+    beforeNodeMorphed?: (oldNode: Node, newNode: Node) => boolean | void;
+    afterNodeMorphed?: (oldNode: Node, newNode: Node) => void;
+    beforeNodeRemoved?: (node: Node) => boolean | void;
+    afterNodeRemoved?: (node: Node) => void;
+    beforeAttributeUpdated?: (
+      attributeName: string,
+      node: Node,
+      mutationType: "update" | "remove"
+    ) => boolean | void;
+  }
+
+  export interface IdiomorphOptions {
+    morphStyle?: "outerHTML" | "innerHTML";
+    ignoreActive?: boolean;
+    ignoreActiveValue?: boolean;
+    restoreFocus?: boolean;
+    callbacks?: IdiomorphCallbacks;
+    head?: {
+      style?: "merge" | "append" | "morph" | "none";
+    };
+  }
+
+  export interface IdiomorphStatic {
+    morph(
+      oldNode: Element | Document,
+      newContent: Element | Node | string,
+      options?: IdiomorphOptions
+    ): void;
+    defaults: IdiomorphOptions;
+  }
+
+  export const Idiomorph: IdiomorphStatic;
+}

package/src/components/message-bubble.ts

@@ -246,6 +246,9 @@ export const createMessageActions = (
       visibility === "hover" ? "tvw-message-actions-hover" : ""
     }`
   );
+  // Set id for idiomorph matching (prevents recreation on morph)
+  container.id = `actions-${message.id}`;
+  container.setAttribute("data-actions-for", message.id);
 
   // Track vote state for this message
   let currentVote: "upvote" | "downvote" | null = null;
@@ -414,6 +417,9 @@ export const createStandardBubble = (
   // Create the bubble element
   const classes = getBubbleClasses(message.role, layout);
   const bubble = createElement("div", classes.join(" "));
+  // Set id for idiomorph matching
+  bubble.id = `bubble-${message.id}`;
+  bubble.setAttribute("data-message-id", message.id);
 
   // Add message content
   const contentDiv = document.createElement("div");

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;
@@ -26,6 +53,9 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
       "tvw-py-0"
     ].join(" ")
   );
+  // Set id for idiomorph matching
+  bubble.id = `bubble-${message.id}`;
+  bubble.setAttribute("data-message-id", message.id);
 
   if (!reasoning) {
     return bubble;
@@ -38,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");
@@ -102,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;
@@ -28,6 +56,9 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
       "tvw-py-0"
     ].join(" ")
   );
+  // Set id for idiomorph matching
+  bubble.id = `bubble-${message.id}`;
+  bubble.setAttribute("data-message-id", message.id);
 
   // Apply bubble-level styles
   if (toolCallConfig.backgroundColor) {
@@ -54,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) {
@@ -245,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/styles/widget.css

@@ -1240,8 +1240,12 @@
   margin-top: 0.5rem;
   padding-top: 0.5rem;
   border-top: 1px solid var(--cw-divider, #f1f5f9);
-  /* Fade in when first shown (for "always" visibility) */
-  animation: tvw-message-actions-fade-in 0.3s ease-out;
+}
+
+/* Fade in animation only for "always" visibility mode (not hover) */
+/* forwards ensures final state is kept, idiomorph preserves element so animation only plays once */
+.tvw-message-actions:not(.tvw-message-actions-hover) {
+  animation: tvw-message-actions-fade-in 0.3s ease-out forwards;
 }
 
 /* Action bar alignment */

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;
 };
 
 // ============================================================================