vanilla-agent 1.10.0 → 1.11.0

package/src/defaults.ts

@@ -66,8 +66,9 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
       backgroundColor: "transparent",
       borderColor: "transparent",
       enabled: true,
+      placement: "inline",
       iconName: "refresh-cw",
-      size: "29px",
+      size: "32px",
       showTooltip: true,
       tooltipText: "Clear chat",
       paddingX: "0px",
@@ -134,6 +135,29 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     paddingX: "12px",
     paddingY: "6px",
   },
+  layout: {
+    header: {
+      layout: "default",
+      showIcon: true,
+      showTitle: true,
+      showSubtitle: true,
+      showCloseButton: true,
+      showClearChat: true,
+    },
+    messages: {
+      layout: "bubble",
+      avatar: {
+        show: false,
+        position: "left",
+      },
+      timestamp: {
+        show: false,
+        position: "below",
+      },
+      groupConsecutive: false,
+    },
+    slots: {},
+  },
   debug: false,
 };
 
@@ -186,5 +210,29 @@ export function mergeWithDefaults(
       ...DEFAULT_WIDGET_CONFIG.suggestionChipsConfig,
       ...config.suggestionChipsConfig,
     },
+    layout: {
+      ...DEFAULT_WIDGET_CONFIG.layout,
+      ...config.layout,
+      header: {
+        ...DEFAULT_WIDGET_CONFIG.layout?.header,
+        ...config.layout?.header,
+      },
+      messages: {
+        ...DEFAULT_WIDGET_CONFIG.layout?.messages,
+        ...config.layout?.messages,
+        avatar: {
+          ...DEFAULT_WIDGET_CONFIG.layout?.messages?.avatar,
+          ...config.layout?.messages?.avatar,
+        },
+        timestamp: {
+          ...DEFAULT_WIDGET_CONFIG.layout?.messages?.timestamp,
+          ...config.layout?.messages?.timestamp,
+        },
+      },
+      slots: {
+        ...DEFAULT_WIDGET_CONFIG.layout?.slots,
+        ...config.layout?.slots,
+      },
+    },
   };
 }

package/src/index.ts

@@ -17,7 +17,18 @@ export type {
   AgentWidgetCustomFetch,
   AgentWidgetSSEEventParser,
   AgentWidgetSSEEventResult,
-  AgentWidgetHeadersFunction
+  AgentWidgetHeadersFunction,
+  // Layout types
+  AgentWidgetLayoutConfig,
+  AgentWidgetHeaderLayoutConfig,
+  AgentWidgetMessageLayoutConfig,
+  AgentWidgetAvatarConfig,
+  AgentWidgetTimestampConfig,
+  WidgetLayoutSlot,
+  SlotRenderer,
+  SlotRenderContext,
+  HeaderRenderContext,
+  MessageRenderContext
 } from "./types";
 
 export { initAgentWidgetFn as initAgentWidget };
@@ -72,4 +83,35 @@ export {
 // Default configuration exports
 export { DEFAULT_WIDGET_CONFIG, mergeWithDefaults } from "./defaults";
 
+// Layout system exports
+export {
+  buildHeader,
+  buildComposer,
+  attachHeaderToContainer
+} from "./components/panel";
+export type {
+  HeaderElements,
+  HeaderBuildContext,
+  ComposerElements,
+  ComposerBuildContext
+} from "./components/panel";
+export {
+  headerLayouts,
+  getHeaderLayout,
+  buildHeaderWithLayout,
+  buildDefaultHeader,
+  buildMinimalHeader,
+  buildExpandedHeader
+} from "./components/header-layouts";
+export type {
+  HeaderLayoutContext,
+  HeaderLayoutRenderer
+} from "./components/header-layouts";
+export {
+  createStandardBubble,
+  createBubbleWithLayout,
+  createTypingIndicator
+} from "./components/message-bubble";
+export type { MessageTransform } from "./components/message-bubble";
+
 export default initAgentWidgetFn;

package/src/runtime/init.ts

@@ -92,6 +92,16 @@ export const initAgentWidget = (
   const target = ensureTarget(options.target);
   const host = document.createElement("div");
   host.className = "vanilla-agent-host";
+  
+  // When launcher is disabled (inline embed mode), ensure the host fills its container
+  // This allows the widget to respect the parent container's height
+  const launcherEnabled = options.config?.launcher?.enabled ?? true;
+  if (!launcherEnabled) {
+    host.style.height = "100%";
+    host.style.display = "flex";
+    host.style.flexDirection = "column";
+  }
+  
   target.appendChild(host);
 
   const useShadow = options.useShadowDom !== false;
@@ -103,12 +113,28 @@ export const initAgentWidget = (
     root = shadowRoot;
     mount = document.createElement("div");
     mount.id = "vanilla-agent-root";
+    // When launcher is disabled, ensure mount fills the host
+    if (!launcherEnabled) {
+      mount.style.height = "100%";
+      mount.style.display = "flex";
+      mount.style.flexDirection = "column";
+      mount.style.flex = "1";
+      mount.style.minHeight = "0";
+    }
     shadowRoot.appendChild(mount);
     mountStyles(shadowRoot);
   } else {
     root = host;
     mount = document.createElement("div");
     mount.id = "vanilla-agent-root";
+    // When launcher is disabled, ensure mount fills the host
+    if (!launcherEnabled) {
+      mount.style.height = "100%";
+      mount.style.display = "flex";
+      mount.style.flexDirection = "column";
+      mount.style.flex = "1";
+      mount.style.minHeight = "0";
+    }
     host.appendChild(mount);
     mountStyles(host);
   }

package/src/types.ts

@@ -156,6 +156,24 @@ export type AgentWidgetTheme = {
   radiusLg?: string;
   launcherRadius?: string;
   buttonRadius?: string;
+  /**
+   * Border style for the chat panel container.
+   * @example "1px solid #e5e7eb" | "none"
+   * @default "1px solid var(--tvw-cw-border)"
+   */
+  panelBorder?: string;
+  /**
+   * Box shadow for the chat panel container.
+   * @example "0 25px 50px -12px rgba(0,0,0,0.25)" | "none"
+   * @default "0 25px 50px -12px rgba(0,0,0,0.25)"
+   */
+  panelShadow?: string;
+  /**
+   * Border radius for the chat panel container.
+   * @example "16px" | "0"
+   * @default "16px"
+   */
+  panelBorderRadius?: string;
 };
 
 export type AgentWidgetLauncherConfig = {
@@ -170,6 +188,35 @@ export type AgentWidgetLauncherConfig = {
   position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
   autoExpand?: boolean;
   width?: string;
+  /**
+   * When true, the widget panel will fill the full height of its container.
+   * Useful for sidebar layouts where the chat should take up the entire viewport height.
+   * The widget will use flex layout to ensure header stays at top, messages scroll in middle,
+   * and composer stays fixed at bottom.
+   * 
+   * @default false
+   */
+  fullHeight?: boolean;
+  /**
+   * When true, the widget panel will be positioned as a sidebar flush with the viewport edges.
+   * The panel will have:
+   * - No border-radius (square corners)
+   * - No margins (flush with top, left/right, and bottom edges)
+   * - Full viewport height
+   * - Subtle shadow on the edge facing the content
+   * - No border between footer and messages
+   * 
+   * Use with `position` to control which side ('bottom-left' for left sidebar, 'bottom-right' for right sidebar).
+   * Automatically enables fullHeight when true.
+   * 
+   * @default false
+   */
+  sidebarMode?: boolean;
+  /**
+   * Width of the sidebar panel when sidebarMode is true.
+   * @default "420px"
+   */
+  sidebarWidth?: string;
   callToActionIconText?: string;
   callToActionIconName?: string;
   callToActionIconColor?: string;
@@ -214,6 +261,7 @@ export type AgentWidgetSendButtonConfig = {
 
 export type AgentWidgetClearChatConfig = {
   enabled?: boolean;
+  placement?: "inline" | "top-right";
   iconName?: string;
   iconColor?: string;
   backgroundColor?: string;
@@ -386,6 +434,174 @@ export type AgentWidgetCustomFetch = (
  */
 export type AgentWidgetHeadersFunction = () => Record<string, string> | Promise<Record<string, string>>;
 
+// ============================================================================
+// Layout Configuration Types
+// ============================================================================
+
+/**
+ * Context provided to header render functions
+ */
+export type HeaderRenderContext = {
+  config: AgentWidgetConfig;
+  onClose?: () => void;
+  onClearChat?: () => void;
+};
+
+/**
+ * Context provided to message render functions
+ */
+export type MessageRenderContext = {
+  message: AgentWidgetMessage;
+  config: AgentWidgetConfig;
+  streaming: boolean;
+};
+
+/**
+ * Context provided to slot render functions
+ */
+export type SlotRenderContext = {
+  config: AgentWidgetConfig;
+  defaultContent: () => HTMLElement | null;
+};
+
+/**
+ * Header layout configuration
+ * Allows customization of the header section appearance and behavior
+ */
+export type AgentWidgetHeaderLayoutConfig = {
+  /**
+   * Layout preset: "default" | "minimal" | "expanded"
+   * - default: Standard layout with icon, title, subtitle, and buttons
+   * - minimal: Simplified layout with just title and close button
+   * - expanded: Full branding area with additional content space
+   */
+  layout?: "default" | "minimal" | "expanded";
+  /** Show/hide the header icon */
+  showIcon?: boolean;
+  /** Show/hide the title */
+  showTitle?: boolean;
+  /** Show/hide the subtitle */
+  showSubtitle?: boolean;
+  /** Show/hide the close button */
+  showCloseButton?: boolean;
+  /** Show/hide the clear chat button */
+  showClearChat?: boolean;
+  /**
+   * Custom renderer for complete header override
+   * When provided, replaces the entire header with custom content
+   */
+  render?: (context: HeaderRenderContext) => HTMLElement;
+};
+
+/**
+ * Avatar configuration for message bubbles
+ */
+export type AgentWidgetAvatarConfig = {
+  /** Whether to show avatars */
+  show?: boolean;
+  /** Position of avatar relative to message bubble */
+  position?: "left" | "right";
+  /** URL or emoji for user avatar */
+  userAvatar?: string;
+  /** URL or emoji for assistant avatar */
+  assistantAvatar?: string;
+};
+
+/**
+ * Timestamp configuration for message bubbles
+ */
+export type AgentWidgetTimestampConfig = {
+  /** Whether to show timestamps */
+  show?: boolean;
+  /** Position of timestamp relative to message */
+  position?: "inline" | "below";
+  /** Custom formatter for timestamp display */
+  format?: (date: Date) => string;
+};
+
+/**
+ * Message layout configuration
+ * Allows customization of how chat messages are displayed
+ */
+export type AgentWidgetMessageLayoutConfig = {
+  /**
+   * Layout preset: "bubble" | "flat" | "minimal"
+   * - bubble: Standard chat bubble appearance (default)
+   * - flat: Flat messages without bubble styling
+   * - minimal: Minimal styling with reduced padding/borders
+   */
+  layout?: "bubble" | "flat" | "minimal";
+  /** Avatar configuration */
+  avatar?: AgentWidgetAvatarConfig;
+  /** Timestamp configuration */
+  timestamp?: AgentWidgetTimestampConfig;
+  /** Group consecutive messages from the same role */
+  groupConsecutive?: boolean;
+  /**
+   * Custom renderer for user messages
+   * When provided, replaces the default user message rendering
+   */
+  renderUserMessage?: (context: MessageRenderContext) => HTMLElement;
+  /**
+   * Custom renderer for assistant messages
+   * When provided, replaces the default assistant message rendering
+   */
+  renderAssistantMessage?: (context: MessageRenderContext) => HTMLElement;
+};
+
+/**
+ * Available layout slots for content injection
+ */
+export type WidgetLayoutSlot =
+  | "header-left"
+  | "header-center"
+  | "header-right"
+  | "body-top"
+  | "messages"
+  | "body-bottom"
+  | "footer-top"
+  | "composer"
+  | "footer-bottom";
+
+/**
+ * Slot renderer function signature
+ * Returns HTMLElement to render in the slot, or null to use default content
+ */
+export type SlotRenderer = (context: SlotRenderContext) => HTMLElement | null;
+
+/**
+ * Main layout configuration
+ * Provides comprehensive control over widget layout and appearance
+ * 
+ * @example
+ * ```typescript
+ * config: {
+ *   layout: {
+ *     header: { layout: "minimal" },
+ *     messages: {
+ *       avatar: { show: true, assistantAvatar: "/bot.png" },
+ *       timestamp: { show: true, position: "below" }
+ *     },
+ *     slots: {
+ *       "footer-top": () => {
+ *         const el = document.createElement("div");
+ *         el.textContent = "Powered by AI";
+ *         return el;
+ *       }
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export type AgentWidgetLayoutConfig = {
+  /** Header layout configuration */
+  header?: AgentWidgetHeaderLayoutConfig;
+  /** Message layout configuration */
+  messages?: AgentWidgetMessageLayoutConfig;
+  /** Slot renderers for custom content injection */
+  slots?: Partial<Record<WidgetLayoutSlot, SlotRenderer>>;
+};
+
 export type AgentWidgetConfig = {
   apiUrl?: string;
   flowId?: string;
@@ -580,6 +796,21 @@ export type AgentWidgetConfig = {
    * ```
    */
   parseSSEEvent?: AgentWidgetSSEEventParser;
+  /**
+   * Layout configuration for customizing widget appearance and structure.
+   * Provides control over header, messages, and content slots.
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   layout: {
+   *     header: { layout: "minimal" },
+   *     messages: { avatar: { show: true } }
+   *   }
+   * }
+   * ```
+   */
+  layout?: AgentWidgetLayoutConfig;
 };
 
 export type AgentWidgetMessageRole = "user" | "assistant" | "system";