vanilla-agent 1.9.0 → 1.11.0

package/src/components/registry.ts

@@ -0,0 +1,87 @@
+import { AgentWidgetConfig, AgentWidgetMessage } from "../types";
+
+/**
+ * Context provided to component renderers
+ */
+export interface ComponentContext {
+  message: AgentWidgetMessage;
+  config: AgentWidgetConfig;
+  /**
+   * Update component props during streaming
+   */
+  updateProps: (newProps: Record<string, unknown>) => void;
+}
+
+/**
+ * Component renderer function signature
+ */
+export type ComponentRenderer = (
+  props: Record<string, unknown>,
+  context: ComponentContext
+) => HTMLElement;
+
+/**
+ * Component registry for managing custom components
+ */
+class ComponentRegistry {
+  private components: Map<string, ComponentRenderer> = new Map();
+
+  /**
+   * Register a custom component
+   */
+  register(name: string, renderer: ComponentRenderer): void {
+    if (this.components.has(name)) {
+      console.warn(`[ComponentRegistry] Component "${name}" is already registered. Overwriting.`);
+    }
+    this.components.set(name, renderer);
+  }
+
+  /**
+   * Unregister a component
+   */
+  unregister(name: string): void {
+    this.components.delete(name);
+  }
+
+  /**
+   * Get a component renderer by name
+   */
+  get(name: string): ComponentRenderer | undefined {
+    return this.components.get(name);
+  }
+
+  /**
+   * Check if a component is registered
+   */
+  has(name: string): boolean {
+    return this.components.has(name);
+  }
+
+  /**
+   * Get all registered component names
+   */
+  getAllNames(): string[] {
+    return Array.from(this.components.keys());
+  }
+
+  /**
+   * Clear all registered components
+   */
+  clear(): void {
+    this.components.clear();
+  }
+
+  /**
+   * Register multiple components at once
+   */
+  registerAll(components: Record<string, ComponentRenderer>): void {
+    Object.entries(components).forEach(([name, renderer]) => {
+      this.register(name, renderer);
+    });
+  }
+}
+
+/**
+ * Global component registry instance
+ */
+export const componentRegistry = new ComponentRegistry();

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

@@ -12,7 +12,23 @@ export type {
   AgentWidgetLauncherConfig,
   AgentWidgetEvent,
   AgentWidgetStreamParser,
-  AgentWidgetStreamParserResult
+  AgentWidgetStreamParserResult,
+  AgentWidgetRequestPayload,
+  AgentWidgetCustomFetch,
+  AgentWidgetSSEEventParser,
+  AgentWidgetSSEEventResult,
+  AgentWidgetHeadersFunction,
+  // Layout types
+  AgentWidgetLayoutConfig,
+  AgentWidgetHeaderLayoutConfig,
+  AgentWidgetMessageLayoutConfig,
+  AgentWidgetAvatarConfig,
+  AgentWidgetTimestampConfig,
+  WidgetLayoutSlot,
+  SlotRenderer,
+  SlotRenderContext,
+  HeaderRenderContext,
+  MessageRenderContext
 } from "./types";
 
 export { initAgentWidgetFn as initAgentWidget };
@@ -36,7 +52,7 @@ export {
   escapeHtml,
   directivePostprocessor
 } from "./postprocessors";
-export { 
+export {
   createPlainTextParser,
   createJsonStreamParser,
   createFlexibleJsonStreamParser,
@@ -49,7 +65,53 @@ export type { AgentWidgetInitHandle };
 export type { AgentWidgetPlugin } from "./plugins/types";
 export { pluginRegistry } from "./plugins/registry";
 
+// Component system exports
+export { componentRegistry } from "./components/registry";
+export type { ComponentRenderer, ComponentContext } from "./components/registry";
+export {
+  createComponentStreamParser,
+  isComponentDirectiveType
+} from "./utils/component-parser";
+export type { ComponentDirective } from "./utils/component-parser";
+export {
+  renderComponentDirective,
+  createComponentMiddleware,
+  hasComponentDirective,
+  extractComponentDirectiveFromMessage
+} from "./utils/component-middleware";
+
 // 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/plugins/registry.ts

@@ -74,3 +74,4 @@ export const pluginRegistry = new PluginRegistry();
 
 
 
+

package/src/plugins/types.ts

@@ -92,3 +92,4 @@ export interface AgentWidgetPlugin {
 
 
 
+

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);
   }