vanilla-agent 1.17.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.17.0",
+  "version": "1.19.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

@@ -18,12 +18,18 @@ export const createWrapper = (config?: AgentWidgetConfig): PanelWrapper => {
     // and only the chat messages area scrolls
     const wrapper = createElement(
       "div",
-      "tvw-relative tvw-w-full tvw-h-full tvw-flex tvw-flex-col tvw-flex-1 tvw-min-h-0"
+      "tvw-relative tvw-h-full tvw-flex tvw-flex-col tvw-flex-1 tvw-min-h-0"
     );
     const panel = createElement(
       "div",
-      "tvw-relative tvw-w-full tvw-flex-1 tvw-flex tvw-flex-col tvw-min-h-0"
+      "tvw-relative tvw-flex-1 tvw-flex tvw-flex-col tvw-min-h-0"
     );
+    
+    // Apply width from config, defaulting to 100% for inline embed mode
+    const inlineWidth = config?.launcher?.width ?? "100%";
+    wrapper.style.width = inlineWidth;
+    panel.style.width = "100%";
+    
     wrapper.appendChild(panel);
     return { wrapper, panel };
   }

package/src/runtime/init.ts

@@ -94,12 +94,9 @@ export const initAgentWidget = (
   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);

package/src/ui.ts

@@ -446,10 +446,10 @@ export const createAgentExperience = (
     container.style.border = panelBorder;
     container.style.borderRadius = panelBorderRadius;
     
+    // Check if this is inline embed mode (launcher disabled) vs launcher mode
+    const isInlineEmbed = config.launcher?.enabled === false;
+    
     if (fullHeight) {
-      // Check if this is inline embed mode (launcher disabled) vs launcher mode
-      const isInlineEmbed = config.launcher?.enabled === false;
-      
       // Mount container
       mount.style.display = 'flex';
       mount.style.flexDirection = 'column';
@@ -502,8 +502,8 @@ export const createAgentExperience = (
       'tvw-bottom-4', 'tvw-right-4', 'tvw-left-4', 'tvw-top-4'
     );
     
-    if (!sidebarMode) {
-      // Restore positioning classes when not in sidebar mode
+    if (!sidebarMode && !isInlineEmbed) {
+      // Restore positioning classes when not in sidebar mode (launcher mode only)
       const positionClasses = positionMap[position as keyof typeof positionMap] ?? positionMap['bottom-right'];
       positionClasses.split(' ').forEach(cls => wrapper.classList.add(cls));
     }
@@ -574,9 +574,12 @@ export const createAgentExperience = (
     // Apply max-height constraints to wrapper to prevent expanding past viewport top
     // Use both -moz-available (Firefox) and stretch (standard) for cross-browser support
     // Append to cssText to allow multiple fallback values for the same property
-    const maxHeightStyles = 'max-height: -moz-available !important; max-height: stretch !important;';
-    const paddingStyles = sidebarMode ? '' : 'padding-top: 1.25em !important;';
-    wrapper.style.cssText += maxHeightStyles + paddingStyles;
+    // Only apply to launcher mode (not sidebar or inline embed)
+    if (!isInlineEmbed) {
+      const maxHeightStyles = 'max-height: -moz-available !important; max-height: stretch !important;';
+      const paddingStyles = sidebarMode ? '' : 'padding-top: 1.25em !important;';
+      wrapper.style.cssText += maxHeightStyles + paddingStyles;
+    }
   };
   applyFullHeightStyles();
   // Apply theme variables after applyFullHeightStyles since it resets mount.style.cssText