vanilla-agent 1.30.0 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.30.0",
+  "version": "1.32.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/client.ts

@@ -139,15 +139,21 @@ export class AgentWidgetClient {
   }
 
   private async _doInitSession(): Promise<ClientSession> {
+    // Get stored session_id if available (for session resumption)
+    const storedSessionId = this.config.getStoredSessionId?.() || null;
+    
+    const requestBody: Record<string, unknown> = {
+      token: this.config.clientToken,
+      ...(this.config.flowId && { flow_id: this.config.flowId }),
+      ...(storedSessionId && { session_id: storedSessionId }),
+    };
+
     const response = await fetch(this.getClientApiUrl('init'), {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
-        token: this.config.clientToken,
-        flow_id: this.config.flowId,
-      }),
+      body: JSON.stringify(requestBody),
     });
 
     if (!response.ok) {
@@ -162,6 +168,12 @@ export class AgentWidgetClient {
     }
 
     const data: ClientInitResponse = await response.json();
+    
+    // Store the new session_id for future resumption
+    if (this.config.setStoredSessionId) {
+      this.config.setStoredSessionId(data.session_id);
+    }
+    
     return {
       sessionId: data.session_id,
       expiresAt: new Date(data.expires_at),
@@ -381,6 +393,13 @@ export class AgentWidgetClient {
       const basePayload = await this.buildPayload(options.messages);
 
       // Build the chat request payload with message IDs for feedback tracking
+      // Filter out session_id from metadata if present (it's only for local storage)
+      const sanitizedMetadata = basePayload.metadata 
+        ? Object.fromEntries(
+            Object.entries(basePayload.metadata).filter(([key]) => key !== 'session_id')
+          )
+        : undefined;
+      
       const chatRequest: ClientChatRequest = {
         session_id: session.sessionId,
         messages: options.messages.map(m => ({
@@ -390,8 +409,8 @@ export class AgentWidgetClient {
         })),
         // Include pre-generated assistant message ID if provided
         ...(options.assistantMessageId && { assistant_message_id: options.assistantMessageId }),
-        // Include metadata/context from middleware if present
-        ...(basePayload.metadata && { metadata: basePayload.metadata }),
+        // Include metadata/context from middleware if present (excluding session_id)
+        ...(sanitizedMetadata && Object.keys(sanitizedMetadata).length > 0 && { metadata: sanitizedMetadata }),
         ...(basePayload.context && { context: basePayload.context }),
       };
 

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;
 };
 
 // ============================================================================
@@ -1101,6 +1114,37 @@ export type AgentWidgetConfig = {
    * ```
    */
   onSessionExpired?: () => void;
+  /**
+   * Get stored session ID for session resumption (client token mode only).
+   * Called when initializing a new session to check if there's a previous session_id
+   * that should be passed to /client/init to resume the same conversation record.
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   getStoredSessionId: () => {
+   *     const stored = localStorage.getItem('session_id');
+   *     return stored || null;
+   *   }
+   * }
+   * ```
+   */
+  getStoredSessionId?: () => string | null;
+  /**
+   * Store session ID for session resumption (client token mode only).
+   * Called when a new session is initialized to persist the session_id
+   * so it can be used to resume the conversation later.
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   setStoredSessionId: (sessionId) => {
+   *     localStorage.setItem('session_id', sessionId);
+   *   }
+   * }
+   * ```
+   */
+  setStoredSessionId?: (sessionId: string) => void;
   /**
    * Static headers to include with each request.
    * For dynamic headers (e.g., auth tokens), use `getHeaders` instead.

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";
@@ -204,8 +204,8 @@ export const createAgentExperience = (
     }
   }
 
-  const getMetadata = () => persistentMetadata;
-  const updateMetadata = (
+  const getSessionMetadata = () => persistentMetadata;
+  const updateSessionMetadata = (
     updater: (prev: Record<string, unknown>) => Record<string, unknown>
   ) => {
     const next = updater({ ...persistentMetadata }) ?? {};
@@ -226,8 +226,8 @@ export const createAgentExperience = (
   let actionManager = createActionManager({
     parsers: resolvedActionParsers,
     handlers: resolvedActionHandlers,
-    getMetadata,
-    updateMetadata,
+    getSessionMetadata,
+    updateSessionMetadata,
     emit: eventBus.emit,
     documentRef: typeof document !== "undefined" ? document : null
   });
@@ -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);
 
@@ -704,7 +758,7 @@ export const createAgentExperience = (
     });
   };
   const persistVoiceMetadata = () => {
-    updateMetadata((prev) => ({
+    updateSessionMetadata((prev) => ({
       ...prev,
       voiceState: {
         active: voiceState.active,
@@ -1228,6 +1282,24 @@ export const createAgentExperience = (
     textarea.style.fontWeight = fontWeight;
   };
 
+  // Add session ID persistence callbacks for client token mode
+  // These allow the widget to resume conversations by passing session_id to /client/init
+  if (config.clientToken) {
+    config = {
+      ...config,
+      getStoredSessionId: () => {
+        const storedId = persistentMetadata['session_id'];
+        return typeof storedId === 'string' ? storedId : null;
+      },
+      setStoredSessionId: (sessionId: string) => {
+        updateSessionMetadata((prev) => ({
+          ...prev,
+          session_id: sessionId,
+        }));
+      },
+    };
+  }
+
   session = new AgentWidgetSession(config, {
     onMessagesChanged(messages) {
       renderMessagesWithPlugins(messagesWrapper, messages, postprocess);
@@ -1975,6 +2047,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;
@@ -2504,8 +2588,8 @@ export const createAgentExperience = (
       actionManager = createActionManager({
         parsers: nextParsers,
         handlers: nextHandlers,
-        getMetadata,
-        updateMetadata,
+        getSessionMetadata,
+        updateSessionMetadata,
         emit: eventBus.emit,
         documentRef: typeof document !== "undefined" ? document : null
       });
@@ -2949,7 +3033,7 @@ export const createAgentExperience = (
     updatePersistentMetadata(
       updater: (prev: Record<string, unknown>) => Record<string, unknown>
     ) {
-      updateMetadata(updater);
+      updateSessionMetadata(updater);
     },
     on(event, handler) {
       return eventBus.on(event, handler);

package/src/utils/actions.ts

@@ -19,8 +19,8 @@ type ActionManagerProcessContext = {
 type ActionManagerOptions = {
   parsers: AgentWidgetActionParser[];
   handlers: AgentWidgetActionHandler[];
-  getMetadata: () => Record<string, unknown>;
-  updateMetadata: (
+  getSessionMetadata: () => Record<string, unknown>;
+  updateSessionMetadata: (
     updater: (prev: Record<string, unknown>) => Record<string, unknown>
   ) => void;
   emit: <K extends keyof AgentWidgetControllerEventMap>(
@@ -123,18 +123,18 @@ const ensureArrayOfStrings = (value: unknown): string[] => {
 
 export const createActionManager = (options: ActionManagerOptions) => {
   let processedIds = new Set(
-    ensureArrayOfStrings(options.getMetadata().processedActionMessageIds)
+    ensureArrayOfStrings(options.getSessionMetadata().processedActionMessageIds)
   );
 
   const syncFromMetadata = () => {
     processedIds = new Set(
-      ensureArrayOfStrings(options.getMetadata().processedActionMessageIds)
+      ensureArrayOfStrings(options.getSessionMetadata().processedActionMessageIds)
     );
   };
 
   const persistProcessedIds = () => {
     const latestIds = Array.from(processedIds);
-    options.updateMetadata((prev) => ({
+    options.updateSessionMetadata((prev) => ({
       ...prev,
       processedActionMessageIds: latestIds
     }));
@@ -195,8 +195,8 @@ export const createActionManager = (options: ActionManagerOptions) => {
       try {
         const handlerResult = handler(action, {
           message: context.message,
-          metadata: options.getMetadata(),
-          updateMetadata: options.updateMetadata,
+          metadata: options.getSessionMetadata(),
+          updateMetadata: options.updateSessionMetadata,
           document: options.documentRef
         } as AgentWidgetActionContext) as AgentWidgetActionHandlerResult | void;