@runtypelabs/persona 3.18.0 → 3.20.0

package/dist/theme-editor.js

@@ -7394,7 +7394,8 @@ var AgentWidgetSession = class _AgentWidgetSession {
       createdAt,
       sequence,
       streaming = false,
-      voiceProcessing
+      voiceProcessing,
+      rawContent
     } = options;
     const messageId = id != null ? id : role === "user" ? generateUserMessageId() : role === "assistant" ? generateAssistantMessageId() : `system-${Date.now()}-${Math.random().toString(16).slice(2)}`;
     const message = {
@@ -7407,7 +7408,8 @@ var AgentWidgetSession = class _AgentWidgetSession {
       // Only include optional fields if provided
       ...llmContent !== void 0 && { llmContent },
       ...contentParts !== void 0 && { contentParts },
-      ...voiceProcessing !== void 0 && { voiceProcessing }
+      ...voiceProcessing !== void 0 && { voiceProcessing },
+      ...rawContent !== void 0 && { rawContent }
     };
     this.upsertMessage(message);
     return message;
@@ -7472,7 +7474,9 @@ var AgentWidgetSession = class _AgentWidgetSession {
         id,
         createdAt,
         sequence,
-        streaming = false
+        streaming = false,
+        voiceProcessing,
+        rawContent
       } = options;
       const messageId = id != null ? id : role === "user" ? generateUserMessageId() : role === "assistant" ? generateAssistantMessageId() : `system-${Date.now()}-${Math.random().toString(16).slice(2)}`;
       const message = {
@@ -7483,7 +7487,9 @@ var AgentWidgetSession = class _AgentWidgetSession {
         sequence: sequence != null ? sequence : this.nextSequence(),
         streaming,
         ...llmContent !== void 0 && { llmContent },
-        ...contentParts !== void 0 && { contentParts }
+        ...contentParts !== void 0 && { contentParts },
+        ...voiceProcessing !== void 0 && { voiceProcessing },
+        ...rawContent !== void 0 && { rawContent }
       };
       results.push(message);
     }
@@ -7491,6 +7497,48 @@ var AgentWidgetSession = class _AgentWidgetSession {
     this.callbacks.onMessagesChanged([...this.messages]);
     return results;
   }
+  /**
+   * Convenience method for injecting a registered component directive as
+   * an assistant message — the same shape Persona produces from a streamed
+   * `{ "text": "...", "component": "...", "props": {...} }` payload.
+   *
+   * Sets `content` to `text`, `rawContent` to the JSON directive (so
+   * `extractComponentDirectiveFromMessage` can find it), and forwards
+   * `llmContent` / `id` / `createdAt` / `sequence`.
+   *
+   * @example
+   * session.injectComponentDirective({
+   *   component: "DynamicForm",
+   *   props: { title: "Book a demo", fields: [...] },
+   *   text: "Share your details to book a demo.",
+   *   llmContent: "[Showed booking form]"
+   * });
+   */
+  injectComponentDirective(options) {
+    const {
+      component,
+      props = {},
+      text = "",
+      llmContent,
+      id,
+      createdAt,
+      sequence
+    } = options;
+    const directive = {
+      text,
+      component,
+      props
+    };
+    return this.injectMessage({
+      role: "assistant",
+      content: text,
+      rawContent: JSON.stringify(directive),
+      ...llmContent !== void 0 && { llmContent },
+      ...id !== void 0 && { id },
+      ...createdAt !== void 0 && { createdAt },
+      ...sequence !== void 0 && { sequence }
+    });
+  }
   async sendMessage(rawInput, options) {
     var _a, _b, _c, _d, _e;
     const input = rawInput.trim();
@@ -8178,25 +8226,260 @@ var createElementInDocument = (documentRef, tag, className) => {
 };
 
 // src/utils/icons.ts
-import * as icons from "lucide";
+import {
+  Activity,
+  ArrowDown,
+  ArrowUp,
+  ArrowUpRight,
+  Bot,
+  ChevronDown,
+  ChevronUp,
+  ChevronRight,
+  ChevronLeft,
+  Check,
+  Clipboard,
+  ClipboardCopy,
+  Copy,
+  File as FileIcon,
+  FileCode,
+  FileSpreadsheet,
+  FileText,
+  ImagePlus,
+  Loader,
+  LoaderCircle,
+  Mic,
+  Paperclip,
+  RefreshCw,
+  Search,
+  Send,
+  ShieldAlert,
+  ShieldCheck,
+  ShieldX,
+  Square,
+  ThumbsDown,
+  ThumbsUp,
+  Upload,
+  Volume2,
+  X,
+  User,
+  Mail,
+  Phone,
+  Calendar,
+  Clock,
+  Building,
+  MapPin,
+  Lock,
+  Key,
+  CreditCard,
+  AtSign,
+  Hash,
+  Globe,
+  Link,
+  CircleCheck,
+  CircleX,
+  TriangleAlert,
+  Info,
+  Ban,
+  Shield,
+  ArrowLeft,
+  ArrowRight,
+  ExternalLink,
+  Ellipsis,
+  EllipsisVertical,
+  Menu,
+  House,
+  Plus,
+  Minus,
+  Pencil,
+  Trash,
+  Trash2,
+  Save,
+  Download,
+  Share,
+  Funnel,
+  Settings,
+  RotateCw,
+  Maximize,
+  Minimize,
+  ShoppingCart,
+  ShoppingBag,
+  Package,
+  Truck,
+  Tag,
+  Gift,
+  Receipt,
+  Wallet,
+  Store,
+  DollarSign,
+  Percent,
+  Play,
+  Pause,
+  VolumeX,
+  Camera,
+  Image as ImageIcon,
+  Film,
+  Headphones,
+  MessageCircle,
+  MessageSquare,
+  Bell,
+  Heart,
+  Star,
+  Eye,
+  EyeOff,
+  Bookmark,
+  CalendarDays,
+  History,
+  Timer,
+  Folder,
+  FolderOpen,
+  Files,
+  Sparkles,
+  Zap,
+  Sun,
+  Moon,
+  Flag,
+  Monitor,
+  Smartphone
+} from "lucide";
+var LUCIDE_ICONS = {
+  // Mandatory
+  "activity": Activity,
+  "arrow-down": ArrowDown,
+  "arrow-up": ArrowUp,
+  "arrow-up-right": ArrowUpRight,
+  "bot": Bot,
+  "chevron-down": ChevronDown,
+  "chevron-up": ChevronUp,
+  "chevron-right": ChevronRight,
+  "chevron-left": ChevronLeft,
+  "check": Check,
+  "clipboard": Clipboard,
+  "clipboard-copy": ClipboardCopy,
+  "copy": Copy,
+  "file": FileIcon,
+  "file-code": FileCode,
+  "file-spreadsheet": FileSpreadsheet,
+  "file-text": FileText,
+  "image-plus": ImagePlus,
+  "loader": Loader,
+  "loader-circle": LoaderCircle,
+  "mic": Mic,
+  "paperclip": Paperclip,
+  "refresh-cw": RefreshCw,
+  "search": Search,
+  "send": Send,
+  "shield-alert": ShieldAlert,
+  "shield-check": ShieldCheck,
+  "shield-x": ShieldX,
+  "square": Square,
+  "thumbs-down": ThumbsDown,
+  "thumbs-up": ThumbsUp,
+  "upload": Upload,
+  "volume-2": Volume2,
+  "x": X,
+  // Forms / inputs
+  "user": User,
+  "mail": Mail,
+  "phone": Phone,
+  "calendar": Calendar,
+  "clock": Clock,
+  "building": Building,
+  "map-pin": MapPin,
+  "lock": Lock,
+  "key": Key,
+  "credit-card": CreditCard,
+  "at-sign": AtSign,
+  "hash": Hash,
+  "globe": Globe,
+  "link": Link,
+  // Status / feedback
+  "circle-check": CircleCheck,
+  "circle-x": CircleX,
+  "triangle-alert": TriangleAlert,
+  "info": Info,
+  "ban": Ban,
+  "shield": Shield,
+  // Navigation
+  "arrow-left": ArrowLeft,
+  "arrow-right": ArrowRight,
+  "external-link": ExternalLink,
+  "ellipsis": Ellipsis,
+  "ellipsis-vertical": EllipsisVertical,
+  "menu": Menu,
+  "house": House,
+  // Actions
+  "plus": Plus,
+  "minus": Minus,
+  "pencil": Pencil,
+  "trash": Trash,
+  "trash-2": Trash2,
+  "save": Save,
+  "download": Download,
+  "share": Share,
+  "funnel": Funnel,
+  "settings": Settings,
+  "rotate-cw": RotateCw,
+  "maximize": Maximize,
+  "minimize": Minimize,
+  // Commerce
+  "shopping-cart": ShoppingCart,
+  "shopping-bag": ShoppingBag,
+  "package": Package,
+  "truck": Truck,
+  "tag": Tag,
+  "gift": Gift,
+  "receipt": Receipt,
+  "wallet": Wallet,
+  "store": Store,
+  "dollar-sign": DollarSign,
+  "percent": Percent,
+  // Media
+  "play": Play,
+  "pause": Pause,
+  "volume-x": VolumeX,
+  "camera": Camera,
+  "image": ImageIcon,
+  "film": Film,
+  "headphones": Headphones,
+  // Social / Comms
+  "message-circle": MessageCircle,
+  "message-square": MessageSquare,
+  "bell": Bell,
+  "heart": Heart,
+  "star": Star,
+  "eye": Eye,
+  "eye-off": EyeOff,
+  "bookmark": Bookmark,
+  // Time
+  "calendar-days": CalendarDays,
+  "history": History,
+  "timer": Timer,
+  // Files
+  "folder": Folder,
+  "folder-open": FolderOpen,
+  "files": Files,
+  // Decorative
+  "sparkles": Sparkles,
+  "zap": Zap,
+  "sun": Sun,
+  "moon": Moon,
+  "flag": Flag,
+  // Devices
+  "monitor": Monitor,
+  "smartphone": Smartphone
+};
 var renderLucideIcon = (iconName, size = 24, color = "currentColor", strokeWidth = 2) => {
-  try {
-    const pascalName = iconName.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
-    const iconData = icons[pascalName];
-    if (!iconData) {
-      console.warn(`Lucide icon "${iconName}" not found (tried "${pascalName}"). Available icons: https://lucide.dev/icons`);
-      return null;
-    }
-    return createSvgFromIconData(iconData, size, color, strokeWidth);
-  } catch (error) {
-    console.warn(`Failed to render Lucide icon "${iconName}":`, error);
+  const iconData = LUCIDE_ICONS[iconName];
+  if (!iconData) {
+    console.warn(
+      `Lucide icon "${iconName}" is not in the Persona registry. Add it to packages/widget/src/utils/icons.ts (see docs/icon-registry-shortlist.md).`
+    );
     return null;
   }
+  return createSvgFromIconData(iconData, size, color, strokeWidth);
 };
 function createSvgFromIconData(iconData, size, color, strokeWidth) {
-  if (!iconData || !Array.isArray(iconData)) {
-    return null;
-  }
+  if (!Array.isArray(iconData)) return null;
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("width", String(size));
   svg.setAttribute("height", String(size));
@@ -8208,19 +8491,15 @@ function createSvgFromIconData(iconData, size, color, strokeWidth) {
   svg.setAttribute("stroke-linejoin", "round");
   svg.setAttribute("aria-hidden", "true");
   iconData.forEach((elementData) => {
-    if (Array.isArray(elementData) && elementData.length >= 2) {
-      const tagName = elementData[0];
-      const attrs = elementData[1];
-      if (attrs) {
-        const element = document.createElementNS("http://www.w3.org/2000/svg", tagName);
-        Object.entries(attrs).forEach(([key, value]) => {
-          if (key !== "stroke") {
-            element.setAttribute(key, String(value));
-          }
-        });
-        svg.appendChild(element);
-      }
-    }
+    if (!Array.isArray(elementData) || elementData.length < 2) return;
+    const tagName = elementData[0];
+    const attrs = elementData[1];
+    if (!attrs) return;
+    const element = document.createElementNS("http://www.w3.org/2000/svg", tagName);
+    Object.entries(attrs).forEach(([key, value]) => {
+      if (key !== "stroke") element.setAttribute(key, String(value));
+    });
+    svg.appendChild(element);
   });
   return svg;
 }
@@ -8240,7 +8519,7 @@ function getFileIconName(mimeType) {
   if (mimeType.startsWith("text/")) return "file-text";
   if (mimeType.includes("word")) return "file-text";
   if (mimeType.includes("excel") || mimeType.includes("spreadsheet")) return "file-spreadsheet";
-  if (mimeType === "application/json") return "file-json";
+  if (mimeType === "application/json") return "file-code";
   return "file";
 }
 var AttachmentManager = class _AttachmentManager {
@@ -8802,7 +9081,7 @@ var wrapTextNodeWords = (textNode, messageId, counterRef) => {
   parent.replaceChild(fragment, textNode);
 };
 var wrapStreamAnimation = (html, mode, messageId, options) => {
-  var _a;
+  var _a, _b;
   if (!html) return html;
   if (typeof document === "undefined") return html;
   const scratch = document.createElement("div");
@@ -8817,7 +9096,7 @@ var wrapStreamAnimation = (html, mode, messageId, options) => {
     }
     node = walker.nextNode();
   }
-  const counterRef = { value: 0 };
+  const counterRef = { value: (_b = options == null ? void 0 : options.startIndex) != null ? _b : 0 };
   const wrap = mode === "char" ? wrapTextNodeChars : wrapTextNodeWords;
   for (const textNode of textNodes) {
     wrap(textNode, messageId, counterRef);
@@ -8963,6 +9242,10 @@ var isDockedMountMode = (config) => {
   var _a, _b;
   return ((_b = (_a = config == null ? void 0 : config.launcher) == null ? void 0 : _a.mountMode) != null ? _b : "floating") === "docked";
 };
+var isComposerBarMountMode = (config) => {
+  var _a, _b;
+  return ((_b = (_a = config == null ? void 0 : config.launcher) == null ? void 0 : _a.mountMode) != null ? _b : "floating") === "composer-bar";
+};
 var resolveDockConfig = (config) => {
   var _a, _b, _c, _d, _e;
   const dock = (_a = config == null ? void 0 : config.launcher) == null ? void 0 : _a.dock;
@@ -9149,6 +9432,226 @@ var createLauncherButton = (config, onToggle) => {
   };
 };
 
+// src/components/header-parts.ts
+var DEFAULT_WRAPPER_CLASS = "persona-relative persona-ml-auto persona-inline-flex persona-items-center persona-justify-center";
+var createCloseButton = (config, options = {}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const {
+    showClose = true,
+    wrapperClassName = DEFAULT_WRAPPER_CLASS,
+    buttonSize,
+    iconSize = "28px"
+  } = options;
+  const launcher = (_a = config == null ? void 0 : config.launcher) != null ? _a : {};
+  const closeButtonSize = (_b = buttonSize != null ? buttonSize : launcher.closeButtonSize) != null ? _b : "32px";
+  const wrapper = createElement("div", wrapperClassName);
+  const button = createElement(
+    "button",
+    "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none"
+  );
+  button.style.height = closeButtonSize;
+  button.style.width = closeButtonSize;
+  button.type = "button";
+  const closeButtonTooltipText = (_c = launcher.closeButtonTooltipText) != null ? _c : "Close chat";
+  const closeButtonShowTooltip = (_d = launcher.closeButtonShowTooltip) != null ? _d : true;
+  button.setAttribute("aria-label", closeButtonTooltipText);
+  button.style.display = showClose ? "" : "none";
+  const closeButtonIconName = (_e = launcher.closeButtonIconName) != null ? _e : "x";
+  const closeButtonIconText = (_f = launcher.closeButtonIconText) != null ? _f : "\xD7";
+  button.style.color = launcher.closeButtonColor || HEADER_THEME_CSS.actionIconColor;
+  const closeIconSvg = renderLucideIcon(closeButtonIconName, iconSize, "currentColor", 1);
+  if (closeIconSvg) {
+    closeIconSvg.style.display = "block";
+    button.appendChild(closeIconSvg);
+  } else {
+    button.textContent = closeButtonIconText;
+  }
+  if (launcher.closeButtonBackgroundColor) {
+    button.style.backgroundColor = launcher.closeButtonBackgroundColor;
+    button.classList.remove("hover:persona-bg-gray-100");
+  } else {
+    button.style.backgroundColor = "";
+    button.classList.add("hover:persona-bg-gray-100");
+  }
+  if (launcher.closeButtonBorderWidth || launcher.closeButtonBorderColor) {
+    const borderWidth = launcher.closeButtonBorderWidth || "0px";
+    const borderColor = launcher.closeButtonBorderColor || "transparent";
+    button.style.border = `${borderWidth} solid ${borderColor}`;
+    button.classList.remove("persona-border-none");
+  } else {
+    button.style.border = "";
+    button.classList.add("persona-border-none");
+  }
+  if (launcher.closeButtonBorderRadius) {
+    button.style.borderRadius = launcher.closeButtonBorderRadius;
+    button.classList.remove("persona-rounded-full");
+  } else {
+    button.style.borderRadius = "";
+    button.classList.add("persona-rounded-full");
+  }
+  if (launcher.closeButtonPaddingX) {
+    button.style.paddingLeft = launcher.closeButtonPaddingX;
+    button.style.paddingRight = launcher.closeButtonPaddingX;
+  } else {
+    button.style.paddingLeft = "";
+    button.style.paddingRight = "";
+  }
+  if (launcher.closeButtonPaddingY) {
+    button.style.paddingTop = launcher.closeButtonPaddingY;
+    button.style.paddingBottom = launcher.closeButtonPaddingY;
+  } else {
+    button.style.paddingTop = "";
+    button.style.paddingBottom = "";
+  }
+  wrapper.appendChild(button);
+  if (closeButtonShowTooltip && closeButtonTooltipText) {
+    let portaledTooltip = null;
+    const showTooltip = () => {
+      if (portaledTooltip) return;
+      const tooltipDocument = button.ownerDocument;
+      const tooltipContainer = tooltipDocument.body;
+      if (!tooltipContainer) return;
+      portaledTooltip = createElementInDocument(
+        tooltipDocument,
+        "div",
+        "persona-clear-chat-tooltip"
+      );
+      portaledTooltip.textContent = closeButtonTooltipText;
+      const arrow = createElementInDocument(tooltipDocument, "div");
+      arrow.className = "persona-clear-chat-tooltip-arrow";
+      portaledTooltip.appendChild(arrow);
+      const buttonRect = button.getBoundingClientRect();
+      portaledTooltip.style.position = "fixed";
+      portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
+      portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
+      portaledTooltip.style.top = `${buttonRect.top - 8}px`;
+      portaledTooltip.style.transform = "translate(-50%, -100%)";
+      tooltipContainer.appendChild(portaledTooltip);
+    };
+    const hideTooltip = () => {
+      if (portaledTooltip && portaledTooltip.parentNode) {
+        portaledTooltip.parentNode.removeChild(portaledTooltip);
+        portaledTooltip = null;
+      }
+    };
+    wrapper.addEventListener("mouseenter", showTooltip);
+    wrapper.addEventListener("mouseleave", hideTooltip);
+    button.addEventListener("focus", showTooltip);
+    button.addEventListener("blur", hideTooltip);
+    wrapper._cleanupTooltip = () => {
+      hideTooltip();
+      wrapper.removeEventListener("mouseenter", showTooltip);
+      wrapper.removeEventListener("mouseleave", hideTooltip);
+      button.removeEventListener("focus", showTooltip);
+      button.removeEventListener("blur", hideTooltip);
+    };
+  }
+  return { button, wrapper };
+};
+var DEFAULT_CLEAR_CHAT_WRAPPER_CLASS = "persona-relative persona-ml-auto persona-clear-chat-button-wrapper";
+var createClearChatButton = (config, options = {}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const {
+    wrapperClassName = DEFAULT_CLEAR_CHAT_WRAPPER_CLASS,
+    buttonSize,
+    iconSize = "20px"
+  } = options;
+  const launcher = (_a = config == null ? void 0 : config.launcher) != null ? _a : {};
+  const clearChatConfig = (_b = launcher.clearChat) != null ? _b : {};
+  const clearChatSize = (_c = buttonSize != null ? buttonSize : clearChatConfig.size) != null ? _c : "32px";
+  const clearChatIconName = (_d = clearChatConfig.iconName) != null ? _d : "refresh-cw";
+  const clearChatIconColor = (_e = clearChatConfig.iconColor) != null ? _e : "";
+  const clearChatBgColor = (_f = clearChatConfig.backgroundColor) != null ? _f : "";
+  const clearChatBorderWidth = (_g = clearChatConfig.borderWidth) != null ? _g : "";
+  const clearChatBorderColor = (_h = clearChatConfig.borderColor) != null ? _h : "";
+  const clearChatBorderRadius = (_i = clearChatConfig.borderRadius) != null ? _i : "";
+  const clearChatPaddingX = (_j = clearChatConfig.paddingX) != null ? _j : "";
+  const clearChatPaddingY = (_k = clearChatConfig.paddingY) != null ? _k : "";
+  const clearChatTooltipText = (_l = clearChatConfig.tooltipText) != null ? _l : "Clear chat";
+  const clearChatShowTooltip = (_m = clearChatConfig.showTooltip) != null ? _m : true;
+  const wrapper = createElement("div", wrapperClassName);
+  const button = createElement(
+    "button",
+    "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none"
+  );
+  button.style.height = clearChatSize;
+  button.style.width = clearChatSize;
+  button.type = "button";
+  button.setAttribute("aria-label", clearChatTooltipText);
+  button.style.color = clearChatIconColor || HEADER_THEME_CSS.actionIconColor;
+  const iconSvg = renderLucideIcon(clearChatIconName, iconSize, "currentColor", 1);
+  if (iconSvg) {
+    iconSvg.style.display = "block";
+    button.appendChild(iconSvg);
+  }
+  if (clearChatBgColor) {
+    button.style.backgroundColor = clearChatBgColor;
+    button.classList.remove("hover:persona-bg-gray-100");
+  }
+  if (clearChatBorderWidth || clearChatBorderColor) {
+    const borderWidth = clearChatBorderWidth || "0px";
+    const borderColor = clearChatBorderColor || "transparent";
+    button.style.border = `${borderWidth} solid ${borderColor}`;
+    button.classList.remove("persona-border-none");
+  }
+  if (clearChatBorderRadius) {
+    button.style.borderRadius = clearChatBorderRadius;
+    button.classList.remove("persona-rounded-full");
+  }
+  if (clearChatPaddingX) {
+    button.style.paddingLeft = clearChatPaddingX;
+    button.style.paddingRight = clearChatPaddingX;
+  }
+  if (clearChatPaddingY) {
+    button.style.paddingTop = clearChatPaddingY;
+    button.style.paddingBottom = clearChatPaddingY;
+  }
+  wrapper.appendChild(button);
+  if (clearChatShowTooltip && clearChatTooltipText) {
+    let portaledTooltip = null;
+    const showTooltip = () => {
+      if (portaledTooltip) return;
+      const tooltipDocument = button.ownerDocument;
+      const tooltipContainer = tooltipDocument.body;
+      if (!tooltipContainer) return;
+      portaledTooltip = createElementInDocument(
+        tooltipDocument,
+        "div",
+        "persona-clear-chat-tooltip"
+      );
+      portaledTooltip.textContent = clearChatTooltipText;
+      const arrow = createElementInDocument(tooltipDocument, "div");
+      arrow.className = "persona-clear-chat-tooltip-arrow";
+      portaledTooltip.appendChild(arrow);
+      const buttonRect = button.getBoundingClientRect();
+      portaledTooltip.style.position = "fixed";
+      portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
+      portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
+      portaledTooltip.style.top = `${buttonRect.top - 8}px`;
+      portaledTooltip.style.transform = "translate(-50%, -100%)";
+      tooltipContainer.appendChild(portaledTooltip);
+    };
+    const hideTooltip = () => {
+      if (portaledTooltip && portaledTooltip.parentNode) {
+        portaledTooltip.parentNode.removeChild(portaledTooltip);
+        portaledTooltip = null;
+      }
+    };
+    wrapper.addEventListener("mouseenter", showTooltip);
+    wrapper.addEventListener("mouseleave", hideTooltip);
+    button.addEventListener("focus", showTooltip);
+    button.addEventListener("blur", hideTooltip);
+    wrapper._cleanupTooltip = () => {
+      hideTooltip();
+      wrapper.removeEventListener("mouseenter", showTooltip);
+      wrapper.removeEventListener("mouseleave", hideTooltip);
+      button.removeEventListener("focus", showTooltip);
+      button.removeEventListener("blur", hideTooltip);
+    };
+  }
+  return { button, wrapper };
+};
+
 // src/components/header-builder.ts
 var HEADER_THEME_CSS = {
   titleColor: "var(--persona-header-title-fg, var(--persona-primary, #0f0f0f))",
@@ -9156,7 +9659,7 @@ var HEADER_THEME_CSS = {
   actionIconColor: "var(--persona-header-action-icon-fg, var(--persona-muted, #9ca3af))"
 };
 var buildHeader = (context) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const { config, showClose = true } = context;
   const header = createElement(
     "div",
@@ -9169,9 +9672,8 @@ var buildHeader = (context) => {
   header.style.borderBottom = "var(--persona-header-border-bottom, 1px solid var(--persona-header-border, var(--persona-divider, #f1f5f9)))";
   const launcher = (_a = config == null ? void 0 : config.launcher) != null ? _a : {};
   const headerIconSize = (_b = launcher.headerIconSize) != null ? _b : "48px";
-  const closeButtonSize = (_c = launcher.closeButtonSize) != null ? _c : "32px";
-  const closeButtonPlacement = (_d = launcher.closeButtonPlacement) != null ? _d : "inline";
-  const headerIconHidden = (_e = launcher.headerIconHidden) != null ? _e : false;
+  const closeButtonPlacement = (_c = launcher.closeButtonPlacement) != null ? _c : "inline";
+  const headerIconHidden = (_d = launcher.headerIconHidden) != null ? _d : false;
   const headerIconName = launcher.headerIconName;
   const iconHolder = createElement(
     "div",
@@ -9188,9 +9690,9 @@ var buildHeader = (context) => {
       if (iconSvg) {
         iconHolder.replaceChildren(iconSvg);
       } else {
-        iconHolder.textContent = (_g = (_f = config == null ? void 0 : config.launcher) == null ? void 0 : _f.agentIconText) != null ? _g : "\u{1F4AC}";
+        iconHolder.textContent = (_f = (_e = config == null ? void 0 : config.launcher) == null ? void 0 : _e.agentIconText) != null ? _f : "\u{1F4AC}";
       }
-    } else if ((_h = config == null ? void 0 : config.launcher) == null ? void 0 : _h.iconUrl) {
+    } else if ((_g = config == null ? void 0 : config.launcher) == null ? void 0 : _g.iconUrl) {
       const img = createElement("img");
       img.src = config.launcher.iconUrl;
       img.alt = "";
@@ -9199,244 +9701,44 @@ var buildHeader = (context) => {
       img.style.width = headerIconSize;
       iconHolder.replaceChildren(img);
     } else {
-      iconHolder.textContent = (_j = (_i = config == null ? void 0 : config.launcher) == null ? void 0 : _i.agentIconText) != null ? _j : "\u{1F4AC}";
+      iconHolder.textContent = (_i = (_h = config == null ? void 0 : config.launcher) == null ? void 0 : _h.agentIconText) != null ? _i : "\u{1F4AC}";
     }
   }
   const headerCopy = createElement("div", "persona-flex persona-flex-col persona-flex-1 persona-min-w-0");
   const title = createElement("span", "persona-text-base persona-font-semibold");
   title.style.color = HEADER_THEME_CSS.titleColor;
-  title.textContent = (_l = (_k = config == null ? void 0 : config.launcher) == null ? void 0 : _k.title) != null ? _l : "Chat Assistant";
+  title.textContent = (_k = (_j = config == null ? void 0 : config.launcher) == null ? void 0 : _j.title) != null ? _k : "Chat Assistant";
   const subtitle = createElement("span", "persona-text-xs");
   subtitle.style.color = HEADER_THEME_CSS.subtitleColor;
-  subtitle.textContent = (_n = (_m = config == null ? void 0 : config.launcher) == null ? void 0 : _m.subtitle) != null ? _n : "Here to help you get answers fast";
+  subtitle.textContent = (_m = (_l = config == null ? void 0 : config.launcher) == null ? void 0 : _l.subtitle) != null ? _m : "Here to help you get answers fast";
   headerCopy.append(title, subtitle);
   if (!headerIconHidden) {
     header.append(iconHolder, headerCopy);
   } else {
     header.append(headerCopy);
   }
-  const clearChatConfig = (_o = launcher.clearChat) != null ? _o : {};
-  const clearChatEnabled = (_p = clearChatConfig.enabled) != null ? _p : true;
-  const clearChatPlacement = (_q = clearChatConfig.placement) != null ? _q : "inline";
+  const clearChatConfig = (_n = launcher.clearChat) != null ? _n : {};
+  const clearChatEnabled = (_o = clearChatConfig.enabled) != null ? _o : true;
+  const clearChatPlacement = (_p = clearChatConfig.placement) != null ? _p : "inline";
   let clearChatButton = null;
   let clearChatButtonWrapper = null;
   if (clearChatEnabled) {
-    const clearChatSize = (_r = clearChatConfig.size) != null ? _r : "32px";
-    const clearChatIconName = (_s = clearChatConfig.iconName) != null ? _s : "refresh-cw";
-    const clearChatIconColor = (_t = clearChatConfig.iconColor) != null ? _t : "";
-    const clearChatBgColor = (_u = clearChatConfig.backgroundColor) != null ? _u : "";
-    const clearChatBorderWidth = (_v = clearChatConfig.borderWidth) != null ? _v : "";
-    const clearChatBorderColor = (_w = clearChatConfig.borderColor) != null ? _w : "";
-    const clearChatBorderRadius = (_x = clearChatConfig.borderRadius) != null ? _x : "";
-    const clearChatPaddingX = (_y = clearChatConfig.paddingX) != null ? _y : "";
-    const clearChatPaddingY = (_z = clearChatConfig.paddingY) != null ? _z : "";
-    const clearChatTooltipText = (_A = clearChatConfig.tooltipText) != null ? _A : "Clear chat";
-    const clearChatShowTooltip = (_B = clearChatConfig.showTooltip) != null ? _B : true;
-    clearChatButtonWrapper = createElement(
-      "div",
-      clearChatPlacement === "top-right" ? "persona-absolute persona-top-4 persona-z-50" : "persona-relative persona-ml-auto persona-clear-chat-button-wrapper"
-    );
+    const wrapperClassName = clearChatPlacement === "top-right" ? "persona-absolute persona-top-4 persona-z-50" : "persona-relative persona-ml-auto persona-clear-chat-button-wrapper";
+    const parts = createClearChatButton(config, { wrapperClassName });
+    clearChatButton = parts.button;
+    clearChatButtonWrapper = parts.wrapper;
     if (clearChatPlacement === "top-right") {
       clearChatButtonWrapper.style.right = "48px";
     }
-    clearChatButton = createElement(
-      "button",
-      "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none"
-    );
-    clearChatButton.style.height = clearChatSize;
-    clearChatButton.style.width = clearChatSize;
-    clearChatButton.type = "button";
-    clearChatButton.setAttribute("aria-label", clearChatTooltipText);
-    clearChatButton.style.color = clearChatIconColor || HEADER_THEME_CSS.actionIconColor;
-    const iconSvg = renderLucideIcon(clearChatIconName, "20px", "currentColor", 1);
-    if (iconSvg) {
-      iconSvg.style.display = "block";
-      clearChatButton.appendChild(iconSvg);
-    }
-    if (clearChatBgColor) {
-      clearChatButton.style.backgroundColor = clearChatBgColor;
-      clearChatButton.classList.remove("hover:persona-bg-gray-100");
-    }
-    if (clearChatBorderWidth || clearChatBorderColor) {
-      const borderWidth = clearChatBorderWidth || "0px";
-      const borderColor = clearChatBorderColor || "transparent";
-      clearChatButton.style.border = `${borderWidth} solid ${borderColor}`;
-      clearChatButton.classList.remove("persona-border-none");
-    }
-    if (clearChatBorderRadius) {
-      clearChatButton.style.borderRadius = clearChatBorderRadius;
-      clearChatButton.classList.remove("persona-rounded-full");
-    }
-    if (clearChatPaddingX) {
-      clearChatButton.style.paddingLeft = clearChatPaddingX;
-      clearChatButton.style.paddingRight = clearChatPaddingX;
-    } else {
-      clearChatButton.style.paddingLeft = "";
-      clearChatButton.style.paddingRight = "";
-    }
-    if (clearChatPaddingY) {
-      clearChatButton.style.paddingTop = clearChatPaddingY;
-      clearChatButton.style.paddingBottom = clearChatPaddingY;
-    } else {
-      clearChatButton.style.paddingTop = "";
-      clearChatButton.style.paddingBottom = "";
-    }
-    clearChatButtonWrapper.appendChild(clearChatButton);
-    if (clearChatShowTooltip && clearChatTooltipText && clearChatButton && clearChatButtonWrapper) {
-      let portaledTooltip = null;
-      const showTooltip = () => {
-        if (portaledTooltip || !clearChatButton) return;
-        const tooltipDocument = clearChatButton.ownerDocument;
-        const tooltipContainer = tooltipDocument.body;
-        if (!tooltipContainer) return;
-        portaledTooltip = createElementInDocument(
-          tooltipDocument,
-          "div",
-          "persona-clear-chat-tooltip"
-        );
-        portaledTooltip.textContent = clearChatTooltipText;
-        const arrow = createElementInDocument(tooltipDocument, "div");
-        arrow.className = "persona-clear-chat-tooltip-arrow";
-        portaledTooltip.appendChild(arrow);
-        const buttonRect = clearChatButton.getBoundingClientRect();
-        portaledTooltip.style.position = "fixed";
-        portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
-        portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
-        portaledTooltip.style.top = `${buttonRect.top - 8}px`;
-        portaledTooltip.style.transform = "translate(-50%, -100%)";
-        tooltipContainer.appendChild(portaledTooltip);
-      };
-      const hideTooltip = () => {
-        if (portaledTooltip && portaledTooltip.parentNode) {
-          portaledTooltip.parentNode.removeChild(portaledTooltip);
-          portaledTooltip = null;
-        }
-      };
-      clearChatButtonWrapper.addEventListener("mouseenter", showTooltip);
-      clearChatButtonWrapper.addEventListener("mouseleave", hideTooltip);
-      clearChatButton.addEventListener("focus", showTooltip);
-      clearChatButton.addEventListener("blur", hideTooltip);
-      clearChatButtonWrapper._cleanupTooltip = () => {
-        hideTooltip();
-        if (clearChatButtonWrapper) {
-          clearChatButtonWrapper.removeEventListener("mouseenter", showTooltip);
-          clearChatButtonWrapper.removeEventListener("mouseleave", hideTooltip);
-        }
-        if (clearChatButton) {
-          clearChatButton.removeEventListener("focus", showTooltip);
-          clearChatButton.removeEventListener("blur", hideTooltip);
-        }
-      };
-    }
     if (clearChatPlacement === "inline") {
       header.appendChild(clearChatButtonWrapper);
     }
   }
-  const closeButtonWrapper = createElement(
-    "div",
-    closeButtonPlacement === "top-right" ? "persona-absolute persona-top-4 persona-right-4 persona-z-50" : clearChatEnabled && clearChatPlacement === "inline" ? "persona-relative persona-inline-flex persona-items-center persona-justify-center" : "persona-relative persona-ml-auto persona-inline-flex persona-items-center persona-justify-center"
-  );
-  const closeButton = createElement(
-    "button",
-    "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none"
+  const closeButtonWrapperClass = closeButtonPlacement === "top-right" ? "persona-absolute persona-top-4 persona-right-4 persona-z-50" : clearChatEnabled && clearChatPlacement === "inline" ? "persona-relative persona-inline-flex persona-items-center persona-justify-center" : "persona-relative persona-ml-auto persona-inline-flex persona-items-center persona-justify-center";
+  const { button: closeButton, wrapper: closeButtonWrapper } = createCloseButton(
+    config,
+    { showClose, wrapperClassName: closeButtonWrapperClass }
   );
-  closeButton.style.height = closeButtonSize;
-  closeButton.style.width = closeButtonSize;
-  closeButton.type = "button";
-  const closeButtonTooltipText = (_C = launcher.closeButtonTooltipText) != null ? _C : "Close chat";
-  const closeButtonShowTooltip = (_D = launcher.closeButtonShowTooltip) != null ? _D : true;
-  closeButton.setAttribute("aria-label", closeButtonTooltipText);
-  closeButton.style.display = showClose ? "" : "none";
-  const closeButtonIconName = (_E = launcher.closeButtonIconName) != null ? _E : "x";
-  const closeButtonIconText = (_F = launcher.closeButtonIconText) != null ? _F : "\xD7";
-  closeButton.style.color = launcher.closeButtonColor || HEADER_THEME_CSS.actionIconColor;
-  const closeIconSvg = renderLucideIcon(closeButtonIconName, "28px", "currentColor", 1);
-  if (closeIconSvg) {
-    closeIconSvg.style.display = "block";
-    closeButton.appendChild(closeIconSvg);
-  } else {
-    closeButton.textContent = closeButtonIconText;
-  }
-  if (launcher.closeButtonBackgroundColor) {
-    closeButton.style.backgroundColor = launcher.closeButtonBackgroundColor;
-    closeButton.classList.remove("hover:persona-bg-gray-100");
-  } else {
-    closeButton.style.backgroundColor = "";
-    closeButton.classList.add("hover:persona-bg-gray-100");
-  }
-  if (launcher.closeButtonBorderWidth || launcher.closeButtonBorderColor) {
-    const borderWidth = launcher.closeButtonBorderWidth || "0px";
-    const borderColor = launcher.closeButtonBorderColor || "transparent";
-    closeButton.style.border = `${borderWidth} solid ${borderColor}`;
-    closeButton.classList.remove("persona-border-none");
-  } else {
-    closeButton.style.border = "";
-    closeButton.classList.add("persona-border-none");
-  }
-  if (launcher.closeButtonBorderRadius) {
-    closeButton.style.borderRadius = launcher.closeButtonBorderRadius;
-    closeButton.classList.remove("persona-rounded-full");
-  } else {
-    closeButton.style.borderRadius = "";
-    closeButton.classList.add("persona-rounded-full");
-  }
-  if (launcher.closeButtonPaddingX) {
-    closeButton.style.paddingLeft = launcher.closeButtonPaddingX;
-    closeButton.style.paddingRight = launcher.closeButtonPaddingX;
-  } else {
-    closeButton.style.paddingLeft = "";
-    closeButton.style.paddingRight = "";
-  }
-  if (launcher.closeButtonPaddingY) {
-    closeButton.style.paddingTop = launcher.closeButtonPaddingY;
-    closeButton.style.paddingBottom = launcher.closeButtonPaddingY;
-  } else {
-    closeButton.style.paddingTop = "";
-    closeButton.style.paddingBottom = "";
-  }
-  closeButtonWrapper.appendChild(closeButton);
-  if (closeButtonShowTooltip && closeButtonTooltipText) {
-    let portaledTooltip = null;
-    const showTooltip = () => {
-      if (portaledTooltip) return;
-      const tooltipDocument = closeButton.ownerDocument;
-      const tooltipContainer = tooltipDocument.body;
-      if (!tooltipContainer) return;
-      portaledTooltip = createElementInDocument(
-        tooltipDocument,
-        "div",
-        "persona-clear-chat-tooltip"
-      );
-      portaledTooltip.textContent = closeButtonTooltipText;
-      const arrow = createElementInDocument(tooltipDocument, "div");
-      arrow.className = "persona-clear-chat-tooltip-arrow";
-      portaledTooltip.appendChild(arrow);
-      const buttonRect = closeButton.getBoundingClientRect();
-      portaledTooltip.style.position = "fixed";
-      portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
-      portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
-      portaledTooltip.style.top = `${buttonRect.top - 8}px`;
-      portaledTooltip.style.transform = "translate(-50%, -100%)";
-      tooltipContainer.appendChild(portaledTooltip);
-    };
-    const hideTooltip = () => {
-      if (portaledTooltip && portaledTooltip.parentNode) {
-        portaledTooltip.parentNode.removeChild(portaledTooltip);
-        portaledTooltip = null;
-      }
-    };
-    closeButtonWrapper.addEventListener("mouseenter", showTooltip);
-    closeButtonWrapper.addEventListener("mouseleave", hideTooltip);
-    closeButton.addEventListener("focus", showTooltip);
-    closeButton.addEventListener("blur", hideTooltip);
-    closeButtonWrapper._cleanupTooltip = () => {
-      hideTooltip();
-      closeButtonWrapper.removeEventListener("mouseenter", showTooltip);
-      closeButtonWrapper.removeEventListener("mouseleave", hideTooltip);
-      closeButton.removeEventListener("focus", showTooltip);
-      closeButton.removeEventListener("blur", hideTooltip);
-    };
-  }
   if (closeButtonPlacement !== "top-right") {
     header.appendChild(closeButtonWrapper);
   }
@@ -9973,25 +10275,9 @@ var buildHeaderWithLayout = (config, layoutConfig, context) => {
   return headerElements;
 };
 
-// src/components/composer-builder.ts
-var buildComposer = (context) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E;
-  const { config } = context;
-  const footer = createElement(
-    "div",
-    "persona-widget-footer persona-border-t-persona-divider persona-bg-persona-surface persona-px-6 persona-py-4"
-  );
-  footer.setAttribute("data-persona-theme-zone", "composer");
-  const suggestions = createElement(
-    "div",
-    "persona-mb-3 persona-flex persona-flex-wrap persona-gap-2"
-  );
-  const composerForm = createElement(
-    "form",
-    `persona-widget-composer persona-flex persona-flex-col persona-gap-2 persona-rounded-2xl persona-border persona-border-gray-200 persona-bg-persona-input-background persona-px-4 persona-py-3`
-  );
-  composerForm.setAttribute("data-persona-composer-form", "");
-  composerForm.style.outline = "none";
+// src/components/composer-parts.ts
+var createComposerTextarea = (config) => {
+  var _a, _b;
   const textarea = createElement("textarea");
   textarea.setAttribute("data-persona-composer-input", "");
   textarea.placeholder = (_b = (_a = config == null ? void 0 : config.copy) == null ? void 0 : _a.inputPlaceholder) != null ? _b : "Type your message\u2026";
@@ -9999,17 +10285,21 @@ var buildComposer = (context) => {
   textarea.rows = 1;
   textarea.style.fontFamily = 'var(--persona-input-font-family, var(--persona-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif))';
   textarea.style.fontWeight = "var(--persona-input-font-weight, var(--persona-font-weight, 400))";
-  const maxLines = 3;
+  const defaultMaxLines = 3;
   const lineHeight = 20;
-  const maxHeight = maxLines * lineHeight;
-  textarea.style.maxHeight = `${maxHeight}px`;
+  textarea.style.maxHeight = `${defaultMaxLines * lineHeight}px`;
   textarea.style.overflowY = "auto";
-  const autoResize = () => {
-    textarea.style.height = "auto";
-    const newHeight = Math.min(textarea.scrollHeight, maxHeight);
-    textarea.style.height = `${newHeight}px`;
+  const readMaxHeight = () => {
+    const parsed = parseFloat(textarea.style.maxHeight);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : defaultMaxLines * lineHeight;
+  };
+  const attachAutoResize = () => {
+    textarea.addEventListener("input", () => {
+      textarea.style.height = "auto";
+      const newHeight = Math.min(textarea.scrollHeight, readMaxHeight());
+      textarea.style.height = `${newHeight}px`;
+    });
   };
-  textarea.addEventListener("input", autoResize);
   textarea.style.border = "none";
   textarea.style.outline = "none";
   textarea.style.borderWidth = "0";
@@ -10027,333 +10317,474 @@ var buildComposer = (context) => {
     textarea.style.border = "none";
     textarea.style.outline = "none";
   });
-  const sendButtonConfig = (_c = config == null ? void 0 : config.sendButton) != null ? _c : {};
-  const useIcon = (_d = sendButtonConfig.useIcon) != null ? _d : false;
-  const iconText = (_e = sendButtonConfig.iconText) != null ? _e : "\u2191";
+  return { textarea, attachAutoResize };
+};
+var createSendButton = (config) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const sendButtonConfig = (_a = config == null ? void 0 : config.sendButton) != null ? _a : {};
+  const useIcon = (_b = sendButtonConfig.useIcon) != null ? _b : false;
+  const iconText = (_c = sendButtonConfig.iconText) != null ? _c : "\u2191";
   const iconName = sendButtonConfig.iconName;
-  const stopIconName = (_f = sendButtonConfig.stopIconName) != null ? _f : "square";
-  const tooltipText = (_g = sendButtonConfig.tooltipText) != null ? _g : "Send message";
-  const stopTooltipText = (_h = sendButtonConfig.stopTooltipText) != null ? _h : "Stop generating";
-  const sendLabel = (_j = (_i = config == null ? void 0 : config.copy) == null ? void 0 : _i.sendButtonLabel) != null ? _j : "Send";
-  const stopLabel = (_l = (_k = config == null ? void 0 : config.copy) == null ? void 0 : _k.stopButtonLabel) != null ? _l : "Stop";
-  const showTooltip = (_m = sendButtonConfig.showTooltip) != null ? _m : false;
-  const buttonSize = (_n = sendButtonConfig.size) != null ? _n : "40px";
+  const stopIconName = (_d = sendButtonConfig.stopIconName) != null ? _d : "square";
+  const tooltipText = (_e = sendButtonConfig.tooltipText) != null ? _e : "Send message";
+  const stopTooltipText = (_f = sendButtonConfig.stopTooltipText) != null ? _f : "Stop generating";
+  const sendLabel = (_h = (_g = config == null ? void 0 : config.copy) == null ? void 0 : _g.sendButtonLabel) != null ? _h : "Send";
+  const stopLabel = (_j = (_i = config == null ? void 0 : config.copy) == null ? void 0 : _i.stopButtonLabel) != null ? _j : "Stop";
+  const showTooltip = (_k = sendButtonConfig.showTooltip) != null ? _k : false;
+  const buttonSize = (_l = sendButtonConfig.size) != null ? _l : "40px";
   const backgroundColor = sendButtonConfig.backgroundColor;
   const textColor = sendButtonConfig.textColor;
-  const sendButtonWrapper = createElement("div", "persona-send-button-wrapper");
-  const sendButton = createElement(
+  const wrapper = createElement("div", "persona-send-button-wrapper");
+  const button = createElement(
     "button",
     useIcon ? "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer" : "persona-rounded-button persona-bg-persona-accent persona-px-4 persona-py-2 persona-text-sm persona-font-semibold disabled:persona-opacity-50 persona-cursor-pointer"
   );
-  sendButton.type = "submit";
-  sendButton.setAttribute("data-persona-composer-submit", "");
+  button.type = "submit";
+  button.setAttribute("data-persona-composer-submit", "");
   let sendIcon = null;
   let stopIcon = null;
   if (useIcon) {
-    sendButton.style.width = buttonSize;
-    sendButton.style.height = buttonSize;
-    sendButton.style.minWidth = buttonSize;
-    sendButton.style.minHeight = buttonSize;
-    sendButton.style.fontSize = "18px";
-    sendButton.style.lineHeight = "1";
-    sendButton.innerHTML = "";
+    button.style.width = buttonSize;
+    button.style.height = buttonSize;
+    button.style.minWidth = buttonSize;
+    button.style.minHeight = buttonSize;
+    button.style.fontSize = "18px";
+    button.style.lineHeight = "1";
+    button.innerHTML = "";
     if (textColor) {
-      sendButton.style.color = textColor;
+      button.style.color = textColor;
     } else {
-      sendButton.style.color = "var(--persona-button-primary-fg, #ffffff)";
+      button.style.color = "var(--persona-button-primary-fg, #ffffff)";
     }
     const iconSize = parseFloat(buttonSize) || 24;
     const iconColor = (textColor == null ? void 0 : textColor.trim()) || "currentColor";
     if (iconName) {
       sendIcon = renderLucideIcon(iconName, iconSize, iconColor, 2);
       if (sendIcon) {
-        sendButton.appendChild(sendIcon);
+        button.appendChild(sendIcon);
       } else {
-        sendButton.textContent = iconText;
+        button.textContent = iconText;
       }
     } else {
-      sendButton.textContent = iconText;
+      button.textContent = iconText;
     }
     stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, 2);
     if (backgroundColor) {
-      sendButton.style.backgroundColor = backgroundColor;
+      button.style.backgroundColor = backgroundColor;
     } else {
-      sendButton.classList.add("persona-bg-persona-primary");
+      button.classList.add("persona-bg-persona-primary");
     }
   } else {
-    sendButton.textContent = sendLabel;
+    button.textContent = sendLabel;
     if (textColor) {
-      sendButton.style.color = textColor;
+      button.style.color = textColor;
     } else {
-      sendButton.classList.add("persona-text-white");
+      button.classList.add("persona-text-white");
     }
   }
   if (sendButtonConfig.borderWidth) {
-    sendButton.style.borderWidth = sendButtonConfig.borderWidth;
-    sendButton.style.borderStyle = "solid";
+    button.style.borderWidth = sendButtonConfig.borderWidth;
+    button.style.borderStyle = "solid";
   }
   if (sendButtonConfig.borderColor) {
-    sendButton.style.borderColor = sendButtonConfig.borderColor;
+    button.style.borderColor = sendButtonConfig.borderColor;
   }
   if (sendButtonConfig.paddingX) {
-    sendButton.style.paddingLeft = sendButtonConfig.paddingX;
-    sendButton.style.paddingRight = sendButtonConfig.paddingX;
+    button.style.paddingLeft = sendButtonConfig.paddingX;
+    button.style.paddingRight = sendButtonConfig.paddingX;
   } else {
-    sendButton.style.paddingLeft = "";
-    sendButton.style.paddingRight = "";
+    button.style.paddingLeft = "";
+    button.style.paddingRight = "";
   }
   if (sendButtonConfig.paddingY) {
-    sendButton.style.paddingTop = sendButtonConfig.paddingY;
-    sendButton.style.paddingBottom = sendButtonConfig.paddingY;
+    button.style.paddingTop = sendButtonConfig.paddingY;
+    button.style.paddingBottom = sendButtonConfig.paddingY;
   } else {
-    sendButton.style.paddingTop = "";
-    sendButton.style.paddingBottom = "";
+    button.style.paddingTop = "";
+    button.style.paddingBottom = "";
   }
-  let sendTooltip = null;
+  let tooltip = null;
   if (showTooltip && tooltipText) {
-    sendTooltip = createElement("div", "persona-send-button-tooltip");
-    sendTooltip.textContent = tooltipText;
-    sendButtonWrapper.appendChild(sendTooltip);
+    tooltip = createElement("div", "persona-send-button-tooltip");
+    tooltip.textContent = tooltipText;
+    wrapper.appendChild(tooltip);
   }
-  sendButton.setAttribute("aria-label", tooltipText);
-  sendButtonWrapper.appendChild(sendButton);
+  button.setAttribute("aria-label", tooltipText);
+  wrapper.appendChild(button);
   let currentMode = "send";
-  const setSendButtonMode = (mode) => {
+  const setMode = (mode) => {
     if (mode === currentMode) return;
     currentMode = mode;
     const label = mode === "stop" ? stopTooltipText : tooltipText;
-    sendButton.setAttribute("aria-label", label);
-    if (sendTooltip) {
-      sendTooltip.textContent = label;
+    button.setAttribute("aria-label", label);
+    if (tooltip) {
+      tooltip.textContent = label;
     }
     if (useIcon) {
       if (sendIcon && stopIcon) {
         const next = mode === "stop" ? stopIcon : sendIcon;
         const prev = mode === "stop" ? sendIcon : stopIcon;
-        if (prev.parentNode === sendButton) {
-          sendButton.replaceChild(next, prev);
+        if (prev.parentNode === button) {
+          button.replaceChild(next, prev);
         } else {
-          sendButton.appendChild(next);
+          button.appendChild(next);
         }
       }
     } else {
-      sendButton.textContent = mode === "stop" ? stopLabel : sendLabel;
+      button.textContent = mode === "stop" ? stopLabel : sendLabel;
     }
   };
-  const voiceRecognitionConfig = (_o = config == null ? void 0 : config.voiceRecognition) != null ? _o : {};
+  return { button, wrapper, setMode };
+};
+var createMicButton = (config) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const voiceRecognitionConfig = (_a = config == null ? void 0 : config.voiceRecognition) != null ? _a : {};
   const voiceRecognitionEnabled = voiceRecognitionConfig.enabled === true;
-  let micButton = null;
-  let micButtonWrapper = null;
+  if (!voiceRecognitionEnabled) return null;
   const hasSpeechRecognition = typeof window !== "undefined" && (typeof window.webkitSpeechRecognition !== "undefined" || typeof window.SpeechRecognition !== "undefined");
-  const hasRuntypeProvider = ((_p = voiceRecognitionConfig.provider) == null ? void 0 : _p.type) === "runtype";
+  const hasRuntypeProvider = ((_b = voiceRecognitionConfig.provider) == null ? void 0 : _b.type) === "runtype";
   const hasVoiceInput = hasSpeechRecognition || hasRuntypeProvider;
-  if (voiceRecognitionEnabled && hasVoiceInput) {
-    micButtonWrapper = createElement("div", "persona-send-button-wrapper");
-    micButton = createElement(
-      "button",
-      "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer"
-    );
-    micButton.type = "button";
-    micButton.setAttribute("data-persona-composer-mic", "");
-    micButton.setAttribute("aria-label", "Start voice recognition");
-    const micIconName = (_q = voiceRecognitionConfig.iconName) != null ? _q : "mic";
-    const micIconSize = (_r = voiceRecognitionConfig.iconSize) != null ? _r : buttonSize;
-    const micIconSizeNum = parseFloat(micIconSize) || 24;
-    const micBackgroundColor = (_s = voiceRecognitionConfig.backgroundColor) != null ? _s : backgroundColor;
-    const micIconColor = (_t = voiceRecognitionConfig.iconColor) != null ? _t : textColor;
-    micButton.style.width = micIconSize;
-    micButton.style.height = micIconSize;
-    micButton.style.minWidth = micIconSize;
-    micButton.style.minHeight = micIconSize;
-    micButton.style.fontSize = "18px";
-    micButton.style.lineHeight = "1";
-    if (micIconColor) {
-      micButton.style.color = micIconColor;
-    } else {
-      micButton.style.color = "var(--persona-text, #111827)";
-    }
-    const iconColorValue = micIconColor || "currentColor";
-    const micIconSvg = renderLucideIcon(
-      micIconName,
-      micIconSizeNum,
-      iconColorValue,
-      1.5
-    );
-    if (micIconSvg) {
-      micButton.appendChild(micIconSvg);
-    } else {
-      micButton.textContent = "\u{1F3A4}";
-    }
-    if (micBackgroundColor) {
-      micButton.style.backgroundColor = micBackgroundColor;
-    }
-    if (voiceRecognitionConfig.borderWidth) {
-      micButton.style.borderWidth = voiceRecognitionConfig.borderWidth;
-      micButton.style.borderStyle = "solid";
-    }
-    if (voiceRecognitionConfig.borderColor) {
-      micButton.style.borderColor = voiceRecognitionConfig.borderColor;
-    }
-    if (voiceRecognitionConfig.paddingX) {
-      micButton.style.paddingLeft = voiceRecognitionConfig.paddingX;
-      micButton.style.paddingRight = voiceRecognitionConfig.paddingX;
-    }
-    if (voiceRecognitionConfig.paddingY) {
-      micButton.style.paddingTop = voiceRecognitionConfig.paddingY;
-      micButton.style.paddingBottom = voiceRecognitionConfig.paddingY;
-    }
-    micButtonWrapper.appendChild(micButton);
-    const micTooltipText = (_u = voiceRecognitionConfig.tooltipText) != null ? _u : "Start voice recognition";
-    const showMicTooltip = (_v = voiceRecognitionConfig.showTooltip) != null ? _v : false;
-    if (showMicTooltip && micTooltipText) {
-      const tooltip = createElement("div", "persona-send-button-tooltip");
-      tooltip.textContent = micTooltipText;
-      micButtonWrapper.appendChild(tooltip);
-    }
-  }
-  const attachmentsConfig = (_w = config == null ? void 0 : config.attachments) != null ? _w : {};
-  const attachmentsEnabled = attachmentsConfig.enabled === true;
-  let attachmentButton = null;
-  let attachmentButtonWrapper = null;
-  let attachmentInput = null;
-  let attachmentPreviewsContainer = null;
-  if (attachmentsEnabled) {
-    attachmentPreviewsContainer = createElement(
-      "div",
-      "persona-attachment-previews persona-flex persona-flex-wrap persona-gap-2 persona-mb-2"
-    );
-    attachmentPreviewsContainer.style.display = "none";
-    attachmentInput = createElement("input");
-    attachmentInput.type = "file";
-    attachmentInput.accept = ((_x = attachmentsConfig.allowedTypes) != null ? _x : ALL_SUPPORTED_MIME_TYPES).join(",");
-    attachmentInput.multiple = ((_y = attachmentsConfig.maxFiles) != null ? _y : 4) > 1;
-    attachmentInput.style.display = "none";
-    attachmentInput.setAttribute("aria-label", "Attach files");
-    attachmentButtonWrapper = createElement("div", "persona-send-button-wrapper");
-    attachmentButton = createElement(
-      "button",
-      "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button"
-    );
-    attachmentButton.type = "button";
-    attachmentButton.setAttribute("aria-label", (_z = attachmentsConfig.buttonTooltipText) != null ? _z : "Attach file");
-    const attachIconName = (_A = attachmentsConfig.buttonIconName) != null ? _A : "paperclip";
-    const attachIconSize = buttonSize;
-    const buttonSizeNum = parseFloat(attachIconSize) || 40;
-    const attachIconSizeNum = Math.round(buttonSizeNum * 0.6);
-    attachmentButton.style.width = attachIconSize;
-    attachmentButton.style.height = attachIconSize;
-    attachmentButton.style.minWidth = attachIconSize;
-    attachmentButton.style.minHeight = attachIconSize;
-    attachmentButton.style.fontSize = "18px";
-    attachmentButton.style.lineHeight = "1";
-    attachmentButton.style.backgroundColor = "transparent";
-    attachmentButton.style.color = "var(--persona-primary, #111827)";
-    attachmentButton.style.border = "none";
-    attachmentButton.style.borderRadius = "6px";
-    attachmentButton.style.transition = "background-color 0.15s ease";
-    attachmentButton.addEventListener("mouseenter", () => {
-      attachmentButton.style.backgroundColor = "var(--persona-palette-colors-black-alpha-50, rgba(0, 0, 0, 0.05))";
-    });
-    attachmentButton.addEventListener("mouseleave", () => {
-      attachmentButton.style.backgroundColor = "transparent";
-    });
-    const attachIconSvg = renderLucideIcon(
-      attachIconName,
-      attachIconSizeNum,
-      "currentColor",
-      1.5
-    );
-    if (attachIconSvg) {
-      attachmentButton.appendChild(attachIconSvg);
-    } else {
-      attachmentButton.textContent = "\u{1F4CE}";
-    }
-    attachmentButton.addEventListener("click", (e) => {
-      e.preventDefault();
-      attachmentInput == null ? void 0 : attachmentInput.click();
-    });
-    attachmentButtonWrapper.appendChild(attachmentButton);
-    const attachTooltipText = (_B = attachmentsConfig.buttonTooltipText) != null ? _B : "Attach file";
+  if (!hasVoiceInput) return null;
+  const buttonSize = (_d = (_c = config == null ? void 0 : config.sendButton) == null ? void 0 : _c.size) != null ? _d : "40px";
+  const wrapper = createElement("div", "persona-send-button-wrapper");
+  const button = createElement(
+    "button",
+    "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer"
+  );
+  button.type = "button";
+  button.setAttribute("data-persona-composer-mic", "");
+  button.setAttribute("aria-label", "Start voice recognition");
+  const micIconName = (_e = voiceRecognitionConfig.iconName) != null ? _e : "mic";
+  const micIconSize = (_f = voiceRecognitionConfig.iconSize) != null ? _f : buttonSize;
+  const micIconSizeNum = parseFloat(micIconSize) || 24;
+  const micBackgroundColor = (_h = voiceRecognitionConfig.backgroundColor) != null ? _h : (_g = config == null ? void 0 : config.sendButton) == null ? void 0 : _g.backgroundColor;
+  const micIconColor = (_j = voiceRecognitionConfig.iconColor) != null ? _j : (_i = config == null ? void 0 : config.sendButton) == null ? void 0 : _i.textColor;
+  button.style.width = micIconSize;
+  button.style.height = micIconSize;
+  button.style.minWidth = micIconSize;
+  button.style.minHeight = micIconSize;
+  button.style.fontSize = "18px";
+  button.style.lineHeight = "1";
+  if (micIconColor) {
+    button.style.color = micIconColor;
+  } else {
+    button.style.color = "var(--persona-text, #111827)";
+  }
+  const iconColorValue = micIconColor || "currentColor";
+  const micIconSvg = renderLucideIcon(micIconName, micIconSizeNum, iconColorValue, 1.5);
+  if (micIconSvg) {
+    button.appendChild(micIconSvg);
+  } else {
+    button.textContent = "\u{1F3A4}";
+  }
+  if (micBackgroundColor) {
+    button.style.backgroundColor = micBackgroundColor;
+  }
+  if (voiceRecognitionConfig.borderWidth) {
+    button.style.borderWidth = voiceRecognitionConfig.borderWidth;
+    button.style.borderStyle = "solid";
+  }
+  if (voiceRecognitionConfig.borderColor) {
+    button.style.borderColor = voiceRecognitionConfig.borderColor;
+  }
+  if (voiceRecognitionConfig.paddingX) {
+    button.style.paddingLeft = voiceRecognitionConfig.paddingX;
+    button.style.paddingRight = voiceRecognitionConfig.paddingX;
+  }
+  if (voiceRecognitionConfig.paddingY) {
+    button.style.paddingTop = voiceRecognitionConfig.paddingY;
+    button.style.paddingBottom = voiceRecognitionConfig.paddingY;
+  }
+  wrapper.appendChild(button);
+  const micTooltipText = (_k = voiceRecognitionConfig.tooltipText) != null ? _k : "Start voice recognition";
+  const showMicTooltip = (_l = voiceRecognitionConfig.showTooltip) != null ? _l : false;
+  if (showMicTooltip && micTooltipText) {
     const tooltip = createElement("div", "persona-send-button-tooltip");
-    tooltip.textContent = attachTooltipText;
-    attachmentButtonWrapper.appendChild(tooltip);
+    tooltip.textContent = micTooltipText;
+    wrapper.appendChild(tooltip);
   }
-  composerForm.addEventListener("click", (e) => {
-    if (e.target !== sendButton && e.target !== sendButtonWrapper && e.target !== micButton && e.target !== micButtonWrapper && e.target !== attachmentButton && e.target !== attachmentButtonWrapper) {
-      textarea.focus();
-    }
+  return { button, wrapper };
+};
+var createAttachmentControls = (config) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const attachmentsConfig = (_a = config == null ? void 0 : config.attachments) != null ? _a : {};
+  if (attachmentsConfig.enabled !== true) return null;
+  const buttonSize = (_c = (_b = config == null ? void 0 : config.sendButton) == null ? void 0 : _b.size) != null ? _c : "40px";
+  const previewsContainer = createElement(
+    "div",
+    "persona-attachment-previews persona-flex persona-flex-wrap persona-gap-2 persona-mb-2"
+  );
+  previewsContainer.style.display = "none";
+  const input = createElement("input");
+  input.type = "file";
+  input.accept = ((_d = attachmentsConfig.allowedTypes) != null ? _d : ALL_SUPPORTED_MIME_TYPES).join(",");
+  input.multiple = ((_e = attachmentsConfig.maxFiles) != null ? _e : 4) > 1;
+  input.style.display = "none";
+  input.setAttribute("aria-label", "Attach files");
+  const wrapper = createElement("div", "persona-send-button-wrapper");
+  const button = createElement(
+    "button",
+    "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button"
+  );
+  button.type = "button";
+  button.setAttribute("aria-label", (_f = attachmentsConfig.buttonTooltipText) != null ? _f : "Attach file");
+  const attachIconName = (_g = attachmentsConfig.buttonIconName) != null ? _g : "paperclip";
+  const attachIconSize = buttonSize;
+  const buttonSizeNum = parseFloat(attachIconSize) || 40;
+  const attachIconSizeNum = Math.round(buttonSizeNum * 0.6);
+  button.style.width = attachIconSize;
+  button.style.height = attachIconSize;
+  button.style.minWidth = attachIconSize;
+  button.style.minHeight = attachIconSize;
+  button.style.fontSize = "18px";
+  button.style.lineHeight = "1";
+  button.style.backgroundColor = "transparent";
+  button.style.color = "var(--persona-primary, #111827)";
+  button.style.border = "none";
+  button.style.borderRadius = "6px";
+  button.style.transition = "background-color 0.15s ease";
+  button.addEventListener("mouseenter", () => {
+    button.style.backgroundColor = "var(--persona-palette-colors-black-alpha-50, rgba(0, 0, 0, 0.05))";
   });
-  if (attachmentPreviewsContainer) {
-    attachmentPreviewsContainer.style.gap = "8px";
-    composerForm.append(attachmentPreviewsContainer);
-  }
-  if (attachmentInput) {
-    composerForm.append(attachmentInput);
+  button.addEventListener("mouseleave", () => {
+    button.style.backgroundColor = "transparent";
+  });
+  const attachIconSvg = renderLucideIcon(attachIconName, attachIconSizeNum, "currentColor", 1.5);
+  if (attachIconSvg) {
+    button.appendChild(attachIconSvg);
+  } else {
+    button.textContent = "\u{1F4CE}";
   }
-  composerForm.append(textarea);
-  const actionsRow = createElement("div", "persona-flex persona-items-center persona-justify-between persona-w-full");
-  const leftActions = createElement("div", "persona-flex persona-items-center persona-gap-2");
-  if (attachmentButtonWrapper) {
-    leftActions.append(attachmentButtonWrapper);
+  button.addEventListener("click", (e) => {
+    e.preventDefault();
+    input.click();
+  });
+  wrapper.appendChild(button);
+  const attachTooltipText = (_h = attachmentsConfig.buttonTooltipText) != null ? _h : "Attach file";
+  const tooltip = createElement("div", "persona-send-button-tooltip");
+  tooltip.textContent = attachTooltipText;
+  wrapper.appendChild(tooltip);
+  return { button, wrapper, input, previewsContainer };
+};
+var createStatusText = (config) => {
+  var _a, _b, _c;
+  const statusConfig = (_a = config == null ? void 0 : config.statusIndicator) != null ? _a : {};
+  const alignClass = statusConfig.align === "left" ? "persona-text-left" : statusConfig.align === "center" ? "persona-text-center" : "persona-text-right";
+  const statusText = createElement(
+    "div",
+    `persona-mt-2 ${alignClass} persona-text-xs persona-text-persona-muted`
+  );
+  statusText.setAttribute("data-persona-composer-status", "");
+  const isVisible = (_b = statusConfig.visible) != null ? _b : true;
+  statusText.style.display = isVisible ? "" : "none";
+  const idleLabel = (_c = statusConfig.idleText) != null ? _c : "Online";
+  if (statusConfig.idleLink) {
+    const link = createElement("a");
+    link.href = statusConfig.idleLink;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.textContent = idleLabel;
+    link.style.color = "inherit";
+    link.style.textDecoration = "none";
+    statusText.appendChild(link);
+  } else {
+    statusText.textContent = idleLabel;
   }
-  const rightActions = createElement("div", "persona-flex persona-items-center persona-gap-1");
-  if (micButtonWrapper) {
-    rightActions.append(micButtonWrapper);
+  return statusText;
+};
+var createSuggestionsRow = () => createElement("div", "persona-mb-3 persona-flex persona-flex-wrap persona-gap-2");
+
+// src/components/composer-builder.ts
+var buildComposer = (context) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { config } = context;
+  const footer = createElement(
+    "div",
+    "persona-widget-footer persona-border-t-persona-divider persona-bg-persona-surface persona-px-6 persona-py-4"
+  );
+  footer.setAttribute("data-persona-theme-zone", "composer");
+  const suggestions = createSuggestionsRow();
+  const composerForm = createElement(
+    "form",
+    "persona-widget-composer persona-flex persona-flex-col persona-gap-2 persona-rounded-2xl persona-border persona-border-gray-200 persona-bg-persona-input-background persona-px-4 persona-py-3"
+  );
+  composerForm.setAttribute("data-persona-composer-form", "");
+  composerForm.style.outline = "none";
+  const { textarea, attachAutoResize } = createComposerTextarea(config);
+  attachAutoResize();
+  const send = createSendButton(config);
+  const mic = createMicButton(config);
+  const attachment = createAttachmentControls(config);
+  const statusText = createStatusText(config);
+  if (attachment) {
+    attachment.previewsContainer.style.gap = "8px";
+    composerForm.append(attachment.previewsContainer, attachment.input);
   }
-  rightActions.append(sendButtonWrapper);
+  composerForm.append(textarea);
+  const actionsRow = createElement(
+    "div",
+    "persona-widget-composer__actions persona-flex persona-items-center persona-justify-between persona-w-full"
+  );
+  const leftActions = createElement(
+    "div",
+    "persona-widget-composer__left-actions persona-flex persona-items-center persona-gap-2"
+  );
+  const rightActions = createElement(
+    "div",
+    "persona-widget-composer__right-actions persona-flex persona-items-center persona-gap-1"
+  );
+  if (attachment) leftActions.append(attachment.wrapper);
+  if (mic) rightActions.append(mic.wrapper);
+  rightActions.append(send.wrapper);
   actionsRow.append(leftActions, rightActions);
   composerForm.append(actionsRow);
-  const statusConfig = (_C = config == null ? void 0 : config.statusIndicator) != null ? _C : {};
-  const alignClass = statusConfig.align === "left" ? "persona-text-left" : statusConfig.align === "center" ? "persona-text-center" : "persona-text-right";
-  const statusText = createElement(
+  composerForm.addEventListener("click", (e) => {
+    if (e.target !== send.button && e.target !== send.wrapper && e.target !== (mic == null ? void 0 : mic.button) && e.target !== (mic == null ? void 0 : mic.wrapper) && e.target !== (attachment == null ? void 0 : attachment.button) && e.target !== (attachment == null ? void 0 : attachment.wrapper)) {
+      textarea.focus();
+    }
+  });
+  footer.append(suggestions, composerForm, statusText);
+  return {
+    footer,
+    suggestions,
+    composerForm,
+    textarea,
+    sendButton: send.button,
+    sendButtonWrapper: send.wrapper,
+    micButton: (_a = mic == null ? void 0 : mic.button) != null ? _a : null,
+    micButtonWrapper: (_b = mic == null ? void 0 : mic.wrapper) != null ? _b : null,
+    statusText,
+    attachmentButton: (_c = attachment == null ? void 0 : attachment.button) != null ? _c : null,
+    attachmentButtonWrapper: (_d = attachment == null ? void 0 : attachment.wrapper) != null ? _d : null,
+    attachmentInput: (_e = attachment == null ? void 0 : attachment.input) != null ? _e : null,
+    attachmentPreviewsContainer: (_f = attachment == null ? void 0 : attachment.previewsContainer) != null ? _f : null,
+    actionsRow,
+    leftActions,
+    rightActions,
+    setSendButtonMode: send.setMode
+  };
+};
+
+// src/components/pill-composer-builder.ts
+var buildPillPeekBanner = () => {
+  const root = createElement("button", "persona-pill-peek");
+  root.type = "button";
+  root.setAttribute("data-persona-pill-peek", "");
+  root.setAttribute("aria-label", "Show conversation");
+  root.setAttribute("tabindex", "-1");
+  const iconHolder = createElement("span", "persona-pill-peek__icon");
+  const messageIcon = renderLucideIcon("message-square", 16, "currentColor", 1.5);
+  if (messageIcon) {
+    iconHolder.appendChild(messageIcon);
+  }
+  const textNode = createElement("span", "persona-pill-peek__text");
+  const caret = createElement("span", "persona-pill-peek__caret");
+  const caretIcon = renderLucideIcon("chevron-up", 16, "currentColor", 1.5);
+  if (caretIcon) {
+    caret.appendChild(caretIcon);
+  }
+  root.append(iconHolder, textNode, caret);
+  return { root, textNode };
+};
+var buildPillComposer = (context) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { config } = context;
+  const footer = createElement("div", "persona-widget-footer persona-widget-footer--pill");
+  footer.setAttribute("data-persona-theme-zone", "composer");
+  const suggestions = createSuggestionsRow();
+  suggestions.style.display = "none";
+  const statusText = createStatusText(config);
+  statusText.style.display = "none";
+  const { textarea, attachAutoResize } = createComposerTextarea(config);
+  textarea.style.maxHeight = "100px";
+  attachAutoResize();
+  const send = createSendButton(config);
+  const mic = createMicButton(config);
+  const attachment = createAttachmentControls(config);
+  if (attachment) {
+    attachment.previewsContainer.classList.add("persona-pill-composer__previews");
+  }
+  const composerForm = createElement(
+    "form",
+    "persona-widget-composer persona-pill-composer"
+  );
+  composerForm.setAttribute("data-persona-composer-form", "");
+  composerForm.style.outline = "none";
+  const leftActions = createElement(
     "div",
-    `persona-mt-2 ${alignClass} persona-text-xs persona-text-persona-muted`
+    "persona-widget-composer__left-actions persona-pill-composer__left"
   );
-  statusText.setAttribute("data-persona-composer-status", "");
-  const isVisible = (_D = statusConfig.visible) != null ? _D : true;
-  statusText.style.display = isVisible ? "" : "none";
-  const idleLabel = (_E = statusConfig.idleText) != null ? _E : "Online";
-  if (statusConfig.idleLink) {
-    const link = createElement("a");
-    link.href = statusConfig.idleLink;
-    link.target = "_blank";
-    link.rel = "noopener noreferrer";
-    link.textContent = idleLabel;
-    link.style.color = "inherit";
-    link.style.textDecoration = "none";
-    statusText.appendChild(link);
-  } else {
-    statusText.textContent = idleLabel;
-  }
-  footer.append(suggestions, composerForm, statusText);
+  if (attachment) leftActions.append(attachment.wrapper);
+  const rightActions = createElement(
+    "div",
+    "persona-widget-composer__right-actions persona-pill-composer__right"
+  );
+  if (mic) rightActions.append(mic.wrapper);
+  rightActions.append(send.wrapper);
+  composerForm.addEventListener("click", (e) => {
+    if (e.target !== send.button && e.target !== send.wrapper && e.target !== (mic == null ? void 0 : mic.button) && e.target !== (mic == null ? void 0 : mic.wrapper) && e.target !== (attachment == null ? void 0 : attachment.button) && e.target !== (attachment == null ? void 0 : attachment.wrapper)) {
+      textarea.focus();
+    }
+  });
+  if (attachment) composerForm.append(attachment.input);
+  composerForm.append(leftActions, textarea, rightActions);
+  if (attachment) footer.append(attachment.previewsContainer);
+  footer.append(composerForm, suggestions, statusText);
+  const actionsRow = composerForm;
   return {
     footer,
     suggestions,
     composerForm,
     textarea,
-    sendButton,
-    sendButtonWrapper,
-    micButton,
-    micButtonWrapper,
+    sendButton: send.button,
+    sendButtonWrapper: send.wrapper,
+    micButton: (_a = mic == null ? void 0 : mic.button) != null ? _a : null,
+    micButtonWrapper: (_b = mic == null ? void 0 : mic.wrapper) != null ? _b : null,
     statusText,
-    // Attachment elements
-    attachmentButton,
-    attachmentButtonWrapper,
-    attachmentInput,
-    attachmentPreviewsContainer,
-    // Actions row layout elements
+    attachmentButton: (_c = attachment == null ? void 0 : attachment.button) != null ? _c : null,
+    attachmentButtonWrapper: (_d = attachment == null ? void 0 : attachment.wrapper) != null ? _d : null,
+    attachmentInput: (_e = attachment == null ? void 0 : attachment.input) != null ? _e : null,
+    attachmentPreviewsContainer: (_f = attachment == null ? void 0 : attachment.previewsContainer) != null ? _f : null,
     actionsRow,
     leftActions,
     rightActions,
-    setSendButtonMode
+    setSendButtonMode: send.setMode
   };
 };
 
 // src/components/panel.ts
 var createWrapper = (config) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
   const launcherEnabled = (_b = (_a = config == null ? void 0 : config.launcher) == null ? void 0 : _a.enabled) != null ? _b : true;
   const dockedMode = isDockedMountMode(config);
+  const composerBarMode = isComposerBarMountMode(config);
+  if (composerBarMode) {
+    const cb = (_d = (_c = config == null ? void 0 : config.launcher) == null ? void 0 : _c.composerBar) != null ? _d : {};
+    const wrapper2 = createElement(
+      "div",
+      "persona-widget-wrapper persona-fixed persona-transition"
+    );
+    wrapper2.setAttribute("data-persona-composer-bar", "");
+    wrapper2.dataset.state = "collapsed";
+    wrapper2.dataset.expandedSize = (_e = cb.expandedSize) != null ? _e : "anchored";
+    wrapper2.style.zIndex = String(
+      (_g = (_f = config == null ? void 0 : config.launcher) == null ? void 0 : _f.zIndex) != null ? _g : DEFAULT_OVERLAY_Z_INDEX
+    );
+    const panel2 = createElement(
+      "div",
+      "persona-widget-panel persona-relative persona-flex persona-flex-1 persona-min-h-0 persona-flex-col"
+    );
+    panel2.style.width = "100%";
+    wrapper2.appendChild(panel2);
+    const pillRoot = createElement("div", "persona-widget-pill-root");
+    pillRoot.setAttribute("data-persona-composer-bar", "");
+    pillRoot.dataset.state = "collapsed";
+    pillRoot.dataset.expandedSize = (_h = cb.expandedSize) != null ? _h : "anchored";
+    pillRoot.style.zIndex = String(
+      (_j = (_i = config == null ? void 0 : config.launcher) == null ? void 0 : _i.zIndex) != null ? _j : DEFAULT_OVERLAY_Z_INDEX
+    );
+    return { wrapper: wrapper2, panel: panel2, pillRoot };
+  }
   if (dockedMode) {
     const wrapper2 = createElement(
       "div",
@@ -10375,35 +10806,171 @@ var createWrapper = (config) => {
       "div",
       "persona-relative persona-flex-1 persona-flex persona-flex-col persona-min-h-0"
     );
-    const inlineWidth = (_d = (_c = config == null ? void 0 : config.launcher) == null ? void 0 : _c.width) != null ? _d : "100%";
+    const inlineWidth = (_l = (_k = config == null ? void 0 : config.launcher) == null ? void 0 : _k.width) != null ? _l : "100%";
     wrapper2.style.width = inlineWidth;
     panel2.style.width = "100%";
     wrapper2.appendChild(panel2);
     return { wrapper: wrapper2, panel: panel2 };
   }
-  const launcher = (_e = config == null ? void 0 : config.launcher) != null ? _e : {};
+  const launcher = (_m = config == null ? void 0 : config.launcher) != null ? _m : {};
   const position = launcher.position && positionMap[launcher.position] ? positionMap[launcher.position] : positionMap["bottom-right"];
   const wrapper = createElement(
     "div",
     `persona-widget-wrapper persona-fixed ${position} persona-transition`
   );
-  wrapper.style.zIndex = String((_g = (_f = config == null ? void 0 : config.launcher) == null ? void 0 : _f.zIndex) != null ? _g : DEFAULT_OVERLAY_Z_INDEX);
+  wrapper.style.zIndex = String((_o = (_n = config == null ? void 0 : config.launcher) == null ? void 0 : _n.zIndex) != null ? _o : DEFAULT_OVERLAY_Z_INDEX);
   const panel = createElement(
     "div",
     "persona-widget-panel persona-relative persona-min-h-[320px]"
   );
-  const launcherWidth = (_i = (_h = config == null ? void 0 : config.launcher) == null ? void 0 : _h.width) != null ? _i : config == null ? void 0 : config.launcherWidth;
+  const launcherWidth = (_q = (_p = config == null ? void 0 : config.launcher) == null ? void 0 : _p.width) != null ? _q : config == null ? void 0 : config.launcherWidth;
   const width = launcherWidth != null ? launcherWidth : DEFAULT_FLOATING_LAUNCHER_WIDTH;
   panel.style.width = width;
   panel.style.maxWidth = width;
   wrapper.appendChild(panel);
   return { wrapper, panel };
 };
+var buildComposerBarPanel = (config, showClose) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const container = createElement(
+    "div",
+    "persona-widget-container persona-relative persona-flex persona-flex-1 persona-min-h-0 persona-flex-col persona-text-persona-primary"
+  );
+  container.setAttribute("data-persona-theme-zone", "container");
+  const { button: closeButton, wrapper: closeButtonWrapper } = createCloseButton(
+    config,
+    {
+      showClose,
+      wrapperClassName: "persona-composer-bar-close",
+      buttonSize: "16px",
+      iconSize: "14px"
+    }
+  );
+  closeButtonWrapper.style.position = "absolute";
+  closeButtonWrapper.style.top = "8px";
+  closeButtonWrapper.style.right = "8px";
+  closeButtonWrapper.style.zIndex = "10";
+  const clearChatEnabled = (_c = (_b = (_a = config == null ? void 0 : config.launcher) == null ? void 0 : _a.clearChat) == null ? void 0 : _b.enabled) != null ? _c : true;
+  let clearChatButton = null;
+  let clearChatButtonWrapper = null;
+  if (clearChatEnabled) {
+    const parts = createClearChatButton(config, {
+      wrapperClassName: "persona-composer-bar-clear-chat",
+      buttonSize: "16px",
+      iconSize: "14px"
+    });
+    clearChatButton = parts.button;
+    clearChatButtonWrapper = parts.wrapper;
+    clearChatButtonWrapper.style.position = "absolute";
+    clearChatButtonWrapper.style.top = "8px";
+    clearChatButtonWrapper.style.right = "32px";
+    clearChatButtonWrapper.style.zIndex = "10";
+  }
+  const headerPlaceholder = createElement("span", "persona-widget-header");
+  headerPlaceholder.setAttribute("data-persona-theme-zone", "header");
+  headerPlaceholder.style.display = "none";
+  const body = createElement(
+    "div",
+    "persona-widget-body persona-flex persona-flex-1 persona-min-h-0 persona-flex-col persona-gap-6 persona-overflow-y-auto persona-bg-persona-container persona-px-6 persona-py-6"
+  );
+  body.style.paddingTop = "48px";
+  body.id = "persona-scroll-container";
+  body.setAttribute("data-persona-theme-zone", "messages");
+  const introCard = createElement(
+    "div",
+    "persona-rounded-2xl persona-bg-persona-surface persona-p-6"
+  );
+  introCard.style.boxShadow = "var(--persona-intro-card-shadow, 0 5px 15px rgba(15, 23, 42, 0.08))";
+  introCard.setAttribute("data-persona-intro-card", "");
+  const introTitle = createElement(
+    "h2",
+    "persona-text-lg persona-font-semibold persona-text-persona-primary"
+  );
+  introTitle.textContent = (_e = (_d = config == null ? void 0 : config.copy) == null ? void 0 : _d.welcomeTitle) != null ? _e : "Hello \u{1F44B}";
+  const introSubtitle = createElement(
+    "p",
+    "persona-mt-2 persona-text-sm persona-text-persona-muted"
+  );
+  introSubtitle.textContent = (_g = (_f = config == null ? void 0 : config.copy) == null ? void 0 : _f.welcomeSubtitle) != null ? _g : "Ask anything about your account or products.";
+  introCard.append(introTitle, introSubtitle);
+  const messagesWrapper = createElement(
+    "div",
+    "persona-flex persona-flex-col persona-gap-3"
+  );
+  const contentMaxWidth = (_h = config == null ? void 0 : config.layout) == null ? void 0 : _h.contentMaxWidth;
+  if (contentMaxWidth) {
+    messagesWrapper.style.maxWidth = contentMaxWidth;
+    messagesWrapper.style.marginLeft = "auto";
+    messagesWrapper.style.marginRight = "auto";
+    messagesWrapper.style.width = "100%";
+  }
+  const showWelcomeCard = ((_i = config == null ? void 0 : config.copy) == null ? void 0 : _i.showWelcomeCard) !== false;
+  if (!showWelcomeCard) {
+    introCard.style.display = "none";
+    body.classList.remove("persona-gap-6");
+    body.classList.add("persona-gap-3");
+  }
+  body.append(introCard, messagesWrapper);
+  const composerOverlay = createElement(
+    "div",
+    "persona-composer-overlay persona-pointer-events-none"
+  );
+  composerOverlay.setAttribute("data-persona-composer-overlay", "");
+  composerOverlay.style.position = "absolute";
+  composerOverlay.style.left = "0";
+  composerOverlay.style.right = "0";
+  composerOverlay.style.bottom = "0";
+  composerOverlay.style.zIndex = "20";
+  const composerElements = buildPillComposer({ config });
+  const { root: peekBanner, textNode: peekTextNode } = buildPillPeekBanner();
+  container.append(headerPlaceholder, closeButtonWrapper, body, composerOverlay);
+  if (clearChatButtonWrapper) {
+    container.appendChild(clearChatButtonWrapper);
+  }
+  return {
+    container,
+    body,
+    messagesWrapper,
+    composerOverlay,
+    suggestions: composerElements.suggestions,
+    textarea: composerElements.textarea,
+    sendButton: composerElements.sendButton,
+    sendButtonWrapper: composerElements.sendButtonWrapper,
+    micButton: composerElements.micButton,
+    micButtonWrapper: composerElements.micButtonWrapper,
+    composerForm: composerElements.composerForm,
+    statusText: composerElements.statusText,
+    introTitle,
+    introSubtitle,
+    closeButton,
+    closeButtonWrapper,
+    clearChatButton,
+    clearChatButtonWrapper,
+    iconHolder: createElement("span"),
+    headerTitle: createElement("span"),
+    headerSubtitle: createElement("span"),
+    header: headerPlaceholder,
+    footer: composerElements.footer,
+    attachmentButton: composerElements.attachmentButton,
+    attachmentButtonWrapper: composerElements.attachmentButtonWrapper,
+    attachmentInput: composerElements.attachmentInput,
+    attachmentPreviewsContainer: composerElements.attachmentPreviewsContainer,
+    actionsRow: composerElements.actionsRow,
+    leftActions: composerElements.leftActions,
+    rightActions: composerElements.rightActions,
+    setSendButtonMode: composerElements.setSendButtonMode,
+    peekBanner,
+    peekTextNode
+  };
+};
 var buildPanel = (config, showClose = true) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (isComposerBarMountMode(config)) {
+    return buildComposerBarPanel(config, showClose);
+  }
   const container = createElement(
     "div",
-    "persona-widget-container persona-flex persona-h-full persona-w-full persona-flex-1 persona-min-h-0 persona-flex-col persona-bg-persona-surface persona-text-persona-primary persona-rounded-2xl persona-overflow-hidden persona-border persona-border-persona-border"
+    "persona-widget-container persona-flex persona-h-full persona-w-full persona-flex-1 persona-min-h-0 persona-flex-col persona-text-persona-primary persona-bg-persona-surface persona-rounded-2xl persona-overflow-hidden persona-border persona-border-persona-border"
   );
   container.setAttribute("data-persona-theme-zone", "container");
   const headerLayoutConfig = (_a = config == null ? void 0 : config.layout) == null ? void 0 : _a.header;
@@ -14810,24 +15377,39 @@ function renderComponentDirective(directive, options) {
     return null;
   }
 }
+function selectDirectiveSource(message) {
+  if (typeof message.rawContent === "string" && message.rawContent.length > 0) {
+    return message.rawContent;
+  }
+  if (typeof message.content === "string") {
+    const trimmed = message.content.trim();
+    if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+      return message.content;
+    }
+  }
+  return null;
+}
 function hasComponentDirective(message) {
-  if (!message.rawContent) return false;
+  const source = selectDirectiveSource(message);
+  if (!source) return false;
   try {
-    const parsed = JSON.parse(message.rawContent);
+    const parsed = JSON.parse(source);
     return typeof parsed === "object" && parsed !== null && "component" in parsed && typeof parsed.component === "string";
   } catch {
     return false;
   }
 }
 function extractComponentDirectiveFromMessage(message) {
-  if (!message.rawContent) return null;
+  const source = selectDirectiveSource(message);
+  if (!source) return null;
   try {
-    const parsed = JSON.parse(message.rawContent);
+    const parsed = JSON.parse(source);
     if (typeof parsed === "object" && parsed !== null && "component" in parsed && typeof parsed.component === "string") {
+      const directive = parsed;
       return {
-        component: parsed.component,
-        props: parsed.props && typeof parsed.props === "object" && parsed.props !== null ? parsed.props : {},
-        raw: message.rawContent
+        component: directive.component,
+        props: directive.props && typeof directive.props === "object" && directive.props !== null ? directive.props : {},
+        raw: source
       };
     }
   } catch {
@@ -15254,7 +15836,7 @@ function buildDropOverlay(dropCfg) {
   return overlay;
 }
 var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U;
   if (mount == null) {
     throw new Error(
       'createAgentExperience: mount must be a non-null HTMLElement (e.g. pass document.getElementById("my-root") after the node exists).'
@@ -15272,7 +15854,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     componentRegistry.registerAll(config.components);
   }
   const eventBus = createEventBus();
-  const storageAdapter = (_a = config.storageAdapter) != null ? _a : createLocalStorageAdapter();
+  const messagePersistenceDisabled = config.persistState === false;
+  const storageAdapter = messagePersistenceDisabled ? null : (_a = config.storageAdapter) != null ? _a : createLocalStorageAdapter();
   let persistentMetadata = {};
   let pendingStoredState = null;
   let shouldOpenAfterStateLoaded = false;
@@ -15363,7 +15946,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let prevLauncherEnabled = launcherEnabled;
   let prevHeaderLayout = (_l = (_k = config.layout) == null ? void 0 : _k.header) == null ? void 0 : _l.layout;
   let wasMobileFullscreen = false;
-  let open = launcherEnabled ? autoExpand : true;
+  const isComposerBar = () => isComposerBarMountMode(config);
+  const isPanelToggleable = () => launcherEnabled || isComposerBar();
+  let open = isComposerBar() ? false : launcherEnabled ? autoExpand : true;
   let pendingResubmit = false;
   let pendingResubmitTimeout = null;
   const handleResubmitRequested = () => {
@@ -15449,8 +16034,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       el.textContent = text;
     }
   }
-  const { wrapper, panel } = createWrapper(config);
-  const panelElements = buildPanel(config, launcherEnabled);
+  const { wrapper, panel, pillRoot } = createWrapper(config);
+  const panelElements = buildPanel(config, isPanelToggleable());
   let {
     container,
     body,
@@ -15533,7 +16118,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const customHeader = headerPlugin.renderHeader({
       config,
       defaultRenderer: () => {
-        const headerElements = buildHeader({ config, showClose: launcherEnabled });
+        const headerElements = buildHeader({ config, showClose: isPanelToggleable() });
         attachHeaderToContainer(container, headerElements, config);
         return headerElements.header;
       },
@@ -15676,6 +16261,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         const value = text.trim();
         const hasAttachments = (_a2 = attachmentManager == null ? void 0 : attachmentManager.hasAttachments()) != null ? _a2 : false;
         if (!value && !hasAttachments) return;
+        maybeExpandComposerBar();
         let contentParts;
         if (hasAttachments) {
           contentParts = [];
@@ -15741,23 +16327,29 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   };
   ensureComposerAttachmentSurface(footer);
   bindComposerRefsFromFooter(footer);
-  const contentMaxWidth = (_D = config.layout) == null ? void 0 : _D.contentMaxWidth;
-  if (contentMaxWidth && composerForm) {
+  const contentMaxWidth = (_H = (_D = config.layout) == null ? void 0 : _D.contentMaxWidth) != null ? _H : isComposerBar() ? (_G = (_F = (_E = config.launcher) == null ? void 0 : _E.composerBar) == null ? void 0 : _F.contentMaxWidth) != null ? _G : "720px" : void 0;
+  if (contentMaxWidth) {
+    messagesWrapper.style.maxWidth = contentMaxWidth;
+    messagesWrapper.style.marginLeft = "auto";
+    messagesWrapper.style.marginRight = "auto";
+    messagesWrapper.style.width = "100%";
+  }
+  if (contentMaxWidth && composerForm && !isComposerBar()) {
     composerForm.style.maxWidth = contentMaxWidth;
     composerForm.style.marginLeft = "auto";
     composerForm.style.marginRight = "auto";
   }
-  if (contentMaxWidth && suggestions) {
+  if (contentMaxWidth && suggestions && !isComposerBar()) {
     suggestions.style.maxWidth = contentMaxWidth;
     suggestions.style.marginLeft = "auto";
     suggestions.style.marginRight = "auto";
   }
-  if (contentMaxWidth && attachmentPreviewsContainer) {
+  if (contentMaxWidth && attachmentPreviewsContainer && !isComposerBar()) {
     attachmentPreviewsContainer.style.maxWidth = contentMaxWidth;
     attachmentPreviewsContainer.style.marginLeft = "auto";
     attachmentPreviewsContainer.style.marginRight = "auto";
   }
-  if (((_E = config.attachments) == null ? void 0 : _E.enabled) && attachmentInput && attachmentPreviewsContainer) {
+  if (((_I = config.attachments) == null ? void 0 : _I.enabled) && attachmentInput && attachmentPreviewsContainer) {
     attachmentManager = AttachmentManager.fromConfig(config.attachments);
     attachmentManager.setPreviewsContainer(attachmentPreviewsContainer);
     attachmentInput.addEventListener("change", (e) => {
@@ -16567,29 +17159,70 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   } else {
     panel.appendChild(container);
+    if (isComposerBar() && pillRoot) {
+      if (panelElements.peekBanner) {
+        pillRoot.appendChild(panelElements.peekBanner);
+      }
+      pillRoot.appendChild(footer);
+    }
   }
   mount.appendChild(wrapper);
+  if (pillRoot) {
+    mount.appendChild(pillRoot);
+  }
   const applyFullHeightStyles = () => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2;
+    if (isComposerBar()) {
+      panel.style.width = "100%";
+      panel.style.maxWidth = "100%";
+      const cb = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.composerBar) != null ? _b2 : {};
+      const isExpanded = wrapper.dataset.state === "expanded";
+      const expandedSize = (_c2 = cb.expandedSize) != null ? _c2 : "anchored";
+      const wantsChrome = isExpanded && expandedSize !== "fullscreen";
+      if (!wantsChrome) {
+        container.style.background = "";
+        container.style.border = "";
+        container.style.borderRadius = "";
+        container.style.overflow = "";
+        container.style.boxShadow = "";
+        return;
+      }
+      const panelPartial2 = (_e2 = (_d2 = config.theme) == null ? void 0 : _d2.components) == null ? void 0 : _e2.panel;
+      const activeTheme2 = getActiveTheme(config);
+      const resolveCb = (raw, fallback) => {
+        var _a3;
+        if (raw == null || raw === "") return fallback;
+        return (_a3 = resolveTokenValue(activeTheme2, raw)) != null ? _a3 : raw;
+      };
+      const defaultBorder = "1px solid var(--persona-border)";
+      const defaultShadow = "var(--persona-palette-shadows-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25))";
+      const defaultRadius = "var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem))";
+      container.style.background = "var(--persona-surface, #ffffff)";
+      container.style.border = resolveCb(panelPartial2 == null ? void 0 : panelPartial2.border, defaultBorder);
+      container.style.borderRadius = resolveCb(panelPartial2 == null ? void 0 : panelPartial2.borderRadius, defaultRadius);
+      container.style.boxShadow = resolveCb(panelPartial2 == null ? void 0 : panelPartial2.shadow, defaultShadow);
+      container.style.overflow = "hidden";
+      return;
+    }
     const dockedMode = isDockedMountMode(config);
-    const sidebarMode = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.sidebarMode) != null ? _b2 : false;
-    const fullHeight = dockedMode || sidebarMode || ((_d2 = (_c2 = config.launcher) == null ? void 0 : _c2.fullHeight) != null ? _d2 : false);
-    const isInlineEmbed = ((_e2 = config.launcher) == null ? void 0 : _e2.enabled) === false;
-    const panelPartial = (_g2 = (_f2 = config.theme) == null ? void 0 : _f2.components) == null ? void 0 : _g2.panel;
+    const sidebarMode = (_g2 = (_f2 = config.launcher) == null ? void 0 : _f2.sidebarMode) != null ? _g2 : false;
+    const fullHeight = dockedMode || sidebarMode || ((_i2 = (_h2 = config.launcher) == null ? void 0 : _h2.fullHeight) != null ? _i2 : false);
+    const isInlineEmbed = ((_j2 = config.launcher) == null ? void 0 : _j2.enabled) === false;
+    const panelPartial = (_l2 = (_k2 = config.theme) == null ? void 0 : _k2.components) == null ? void 0 : _l2.panel;
     const activeTheme = getActiveTheme(config);
     const resolvePanelChrome = (raw, fallback) => {
       var _a3;
       if (raw == null || raw === "") return fallback;
       return (_a3 = resolveTokenValue(activeTheme, raw)) != null ? _a3 : raw;
     };
-    const ownerWindow2 = (_h2 = mount.ownerDocument.defaultView) != null ? _h2 : window;
-    const mobileFullscreen = (_j2 = (_i2 = config.launcher) == null ? void 0 : _i2.mobileFullscreen) != null ? _j2 : true;
-    const mobileBreakpoint = (_l2 = (_k2 = config.launcher) == null ? void 0 : _k2.mobileBreakpoint) != null ? _l2 : 640;
+    const ownerWindow2 = (_m2 = mount.ownerDocument.defaultView) != null ? _m2 : window;
+    const mobileFullscreen = (_o2 = (_n2 = config.launcher) == null ? void 0 : _n2.mobileFullscreen) != null ? _o2 : true;
+    const mobileBreakpoint = (_q2 = (_p2 = config.launcher) == null ? void 0 : _p2.mobileBreakpoint) != null ? _q2 : 640;
     const isMobileViewport = ownerWindow2.innerWidth <= mobileBreakpoint;
     const shouldGoFullscreen = mobileFullscreen && isMobileViewport && launcherEnabled;
-    const position = (_n2 = (_m2 = config.launcher) == null ? void 0 : _m2.position) != null ? _n2 : "bottom-left";
+    const position = (_s2 = (_r2 = config.launcher) == null ? void 0 : _r2.position) != null ? _s2 : "bottom-left";
     const isLeftSidebar = position === "bottom-left" || position === "top-left";
-    const overlayZIndex = (_p2 = (_o2 = config.launcher) == null ? void 0 : _o2.zIndex) != null ? _p2 : DEFAULT_OVERLAY_Z_INDEX;
+    const overlayZIndex = (_u2 = (_t2 = config.launcher) == null ? void 0 : _t2.zIndex) != null ? _u2 : DEFAULT_OVERLAY_Z_INDEX;
     let defaultPanelBorder = sidebarMode || shouldGoFullscreen ? "none" : "1px solid var(--persona-border)";
     let defaultPanelShadow = shouldGoFullscreen ? "none" : sidebarMode ? isLeftSidebar ? "var(--persona-palette-shadows-sidebar-left, 2px 0 12px rgba(0, 0, 0, 0.08))" : "var(--persona-palette-shadows-sidebar-right, -2px 0 12px rgba(0, 0, 0, 0.08))" : "var(--persona-palette-shadows-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25))";
     if (dockedMode && !shouldGoFullscreen) {
@@ -16676,7 +17309,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       restoreBodyScrollTop();
       return;
     }
-    const launcherWidth = (_r2 = (_q2 = config == null ? void 0 : config.launcher) == null ? void 0 : _q2.width) != null ? _r2 : config == null ? void 0 : config.launcherWidth;
+    const launcherWidth = (_w2 = (_v2 = config == null ? void 0 : config.launcher) == null ? void 0 : _v2.width) != null ? _w2 : config == null ? void 0 : config.launcherWidth;
     const width = launcherWidth != null ? launcherWidth : DEFAULT_FLOATING_LAUNCHER_WIDTH;
     if (!sidebarMode && !dockedMode) {
       if (isInlineEmbed && fullHeight) {
@@ -16757,11 +17390,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       "persona-top-4"
     );
     if (!sidebarMode && !isInlineEmbed && !dockedMode) {
-      const positionClasses = (_s2 = positionMap[position]) != null ? _s2 : positionMap["bottom-right"];
+      const positionClasses = (_x2 = positionMap[position]) != null ? _x2 : positionMap["bottom-right"];
       positionClasses.split(" ").forEach((cls) => wrapper.classList.add(cls));
     }
     if (sidebarMode) {
-      const sidebarWidth = (_u2 = (_t2 = config.launcher) == null ? void 0 : _t2.sidebarWidth) != null ? _u2 : "420px";
+      const sidebarWidth = (_z2 = (_y2 = config.launcher) == null ? void 0 : _y2.sidebarWidth) != null ? _z2 : "420px";
       wrapper.style.cssText = `
         position: fixed !important;
         top: 0 !important;
@@ -16813,7 +17446,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     if (!isInlineEmbed && !dockedMode) {
       const maxHeightStyles = "max-height: -moz-available !important; max-height: stretch !important;";
       const paddingStyles = sidebarMode ? "" : "padding-top: 1.25em !important;";
-      const zIndexStyles = !sidebarMode ? `z-index: ${(_w2 = (_v2 = config.launcher) == null ? void 0 : _v2.zIndex) != null ? _w2 : DEFAULT_OVERLAY_Z_INDEX} !important;` : "";
+      const zIndexStyles = !sidebarMode ? `z-index: ${(_B2 = (_A2 = config.launcher) == null ? void 0 : _A2.zIndex) != null ? _B2 : DEFAULT_OVERLAY_Z_INDEX} !important;` : "";
       wrapper.style.cssText += maxHeightStyles + paddingStyles + zIndexStyles;
     }
     restoreBodyScrollTop();
@@ -16883,7 +17516,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       cleanupThemeObserver = null;
     }
   });
-  const streamAnimationConfig = (_F = config.features) == null ? void 0 : _F.streamAnimation;
+  const streamAnimationConfig = (_J = config.features) == null ? void 0 : _J.streamAnimation;
   if ((streamAnimationConfig == null ? void 0 : streamAnimationConfig.type) && streamAnimationConfig.type !== "none") {
     const plugin = resolveStreamAnimationPlugin(
       streamAnimationConfig.type,
@@ -16900,6 +17533,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let isStreaming = false;
   const messageCache = createMessageCache();
   const lastAskBubbleFingerprint = /* @__PURE__ */ new Map();
+  const lastComponentDirectiveFingerprint = /* @__PURE__ */ new Map();
   let configVersion = 0;
   const autoFollow = createFollowStateController();
   let lastScrollTop = 0;
@@ -16916,7 +17550,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     lastUserMessageWasVoice: false,
     lastUserMessageId: null
   };
-  const voiceAutoResumeMode = (_H = (_G = config.voiceRecognition) == null ? void 0 : _G.autoResume) != null ? _H : false;
+  const voiceAutoResumeMode = (_L = (_K = config.voiceRecognition) == null ? void 0 : _K.autoResume) != null ? _L : false;
   const emitVoiceState = (source) => {
     eventBus.emit("voice:state", {
       active: voiceState.active,
@@ -17147,13 +17781,21 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const liveAskToolIds = /* @__PURE__ */ new Set();
     const hasAskPlugin = plugins.some((p) => p.renderAskUserQuestion);
     const askPluginHydrate = [];
+    const componentDirectiveHydrate = [];
+    const componentStreamingEnabled = config.enableComponentStreaming !== false;
     messages.forEach((message) => {
       var _a3, _b3, _c3, _d3, _e3, _f3, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
       activeMessageIds.add(message.id);
       const askWithPlugin = hasAskPlugin && isAskUserQuestionMessage(message);
+      const hasDirectiveBubble = !askWithPlugin && message.role === "assistant" && !message.variant && componentStreamingEnabled && hasComponentDirective(message);
+      if (!hasDirectiveBubble && lastComponentDirectiveFingerprint.has(message.id)) {
+        const existing = container2.querySelector(`#wrapper-${message.id}`);
+        existing == null ? void 0 : existing.removeAttribute("data-preserve-runtime");
+        lastComponentDirectiveFingerprint.delete(message.id);
+      }
       const askMeta = isAskUserQuestionMessage(message) ? `:${((_a3 = message.agentMetadata) == null ? void 0 : _a3.askUserQuestionAnswered) ? "a" : "u"}:${((_b3 = message.agentMetadata) == null ? void 0 : _b3.askUserQuestionAnswers) ? Object.keys(message.agentMetadata.askUserQuestionAnswers).length : 0}` : "";
       const fingerprint = computeMessageFingerprint(message, configVersion) + askMeta;
-      const cachedWrapper = askWithPlugin ? null : getCachedWrapper(messageCache, message.id, fingerprint);
+      const cachedWrapper = askWithPlugin || hasDirectiveBubble ? null : getCachedWrapper(messageCache, message.id, fingerprint);
       if (cachedWrapper) {
         tempContainer.appendChild(cachedWrapper.cloneNode(true));
         if (isAskUserQuestionMessage(message) && ((_c3 = message.toolCall) == null ? void 0 : _c3.id) && ((_d3 = message.agentMetadata) == null ? void 0 : _d3.awaitingLocalTool) === true && !((_e3 = message.agentMetadata) == null ? void 0 : _e3.askUserQuestionAnswered)) {
@@ -17292,18 +17934,20 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           });
         }
       }
-      if (!bubble && message.role === "assistant" && !message.variant) {
-        const enableComponentStreaming = config.enableComponentStreaming !== false;
-        if (enableComponentStreaming && hasComponentDirective(message)) {
-          const directive = extractComponentDirectiveFromMessage(message);
-          if (directive) {
+      if (!bubble && hasDirectiveBubble) {
+        const directive = extractComponentDirectiveFromMessage(message);
+        if (directive) {
+          const lastFp = lastComponentDirectiveFingerprint.get(message.id);
+          const needsRebuild = lastFp !== fingerprint;
+          const wrapChrome = config.wrapComponentDirectiveInBubble !== false;
+          let liveBubble = null;
+          if (needsRebuild) {
             const componentBubble = renderComponentDirective(directive, {
               config,
               message,
               transform
             });
             if (componentBubble) {
-              const wrapChrome = config.wrapComponentDirectiveInBubble !== false;
               if (wrapChrome) {
                 const componentWrapper = document.createElement("div");
                 componentWrapper.className = [
@@ -17329,7 +17973,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
                   componentWrapper.appendChild(textDiv);
                 }
                 componentWrapper.appendChild(componentBubble);
-                bubble = componentWrapper;
+                liveBubble = componentWrapper;
               } else {
                 const stack = document.createElement("div");
                 stack.className = "persona-flex persona-flex-col persona-w-full persona-max-w-full persona-gap-3 persona-items-stretch";
@@ -17348,10 +17992,28 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
                   stack.appendChild(textDiv);
                 }
                 stack.appendChild(componentBubble);
-                bubble = stack;
+                liveBubble = stack;
               }
             }
           }
+          if (liveBubble || lastFp != null) {
+            const stub = document.createElement("div");
+            stub.className = "persona-flex";
+            stub.id = `wrapper-${message.id}`;
+            stub.setAttribute("data-wrapper-id", message.id);
+            stub.setAttribute("data-component-directive-stub", "true");
+            stub.setAttribute("data-preserve-runtime", "true");
+            if (!wrapChrome) {
+              stub.classList.add("persona-w-full");
+            }
+            tempContainer.appendChild(stub);
+            componentDirectiveHydrate.push({
+              messageId: message.id,
+              fingerprint,
+              bubble: liveBubble
+            });
+            return;
+          }
         }
       }
       if (!bubble) {
@@ -17602,15 +18264,327 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         if (!activeMessageIds.has(id)) lastAskBubbleFingerprint.delete(id);
       }
     }
+    if (componentDirectiveHydrate.length > 0) {
+      for (const { messageId, fingerprint, bubble } of componentDirectiveHydrate) {
+        const wrapper2 = container2.querySelector(`#wrapper-${messageId}`);
+        if (!wrapper2) continue;
+        if (bubble === null) {
+          continue;
+        }
+        wrapper2.replaceChildren(bubble);
+        wrapper2.setAttribute("data-bubble-fp", fingerprint);
+        lastComponentDirectiveFingerprint.set(messageId, fingerprint);
+      }
+    }
+    if (lastComponentDirectiveFingerprint.size > 0) {
+      for (const id of lastComponentDirectiveFingerprint.keys()) {
+        if (!activeMessageIds.has(id)) lastComponentDirectiveFingerprint.delete(id);
+      }
+    }
   };
   const renderMessagesWithPlugins = renderMessagesWithPluginsImpl;
+  let composerBarOutsideClickListener = null;
+  const attachComposerBarOutsideClickDismiss = () => {
+    var _a2;
+    if (composerBarOutsideClickListener) return;
+    const listener = (event) => {
+      const path = event.composedPath();
+      if (path.includes(wrapper)) return;
+      if (pillRoot && path.includes(pillRoot)) return;
+      setOpenState(false, "user");
+    };
+    composerBarOutsideClickListener = listener;
+    const targetDoc = (_a2 = mount.ownerDocument) != null ? _a2 : document;
+    targetDoc.addEventListener("pointerdown", listener, true);
+  };
+  const detachComposerBarOutsideClickDismiss = () => {
+    var _a2;
+    if (!composerBarOutsideClickListener) return;
+    const targetDoc = (_a2 = mount.ownerDocument) != null ? _a2 : document;
+    targetDoc.removeEventListener(
+      "pointerdown",
+      composerBarOutsideClickListener,
+      true
+    );
+    composerBarOutsideClickListener = null;
+  };
+  destroyCallbacks.push(() => detachComposerBarOutsideClickDismiss());
+  let composerBarEscapeListener = null;
+  const attachComposerBarEscapeDismiss = () => {
+    var _a2;
+    if (composerBarEscapeListener) return;
+    const listener = (event) => {
+      if (event.key !== "Escape") return;
+      if (event.isComposing) return;
+      setOpenState(false, "user");
+    };
+    composerBarEscapeListener = listener;
+    const targetDoc = (_a2 = mount.ownerDocument) != null ? _a2 : document;
+    targetDoc.addEventListener("keydown", listener, true);
+  };
+  const detachComposerBarEscapeDismiss = () => {
+    var _a2;
+    if (!composerBarEscapeListener) return;
+    const targetDoc = (_a2 = mount.ownerDocument) != null ? _a2 : document;
+    targetDoc.removeEventListener(
+      "keydown",
+      composerBarEscapeListener,
+      true
+    );
+    composerBarEscapeListener = null;
+  };
+  destroyCallbacks.push(() => detachComposerBarEscapeDismiss());
+  let composerHovered = false;
+  const peekActivatedPlugins = /* @__PURE__ */ new Set();
+  const resolvePeekStreamAnimationFeature = () => {
+    var _a2, _b2, _c2, _d2;
+    const peekFeature = (_c2 = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.composerBar) == null ? void 0 : _b2.peek) == null ? void 0 : _c2.streamAnimation;
+    if (peekFeature) return peekFeature;
+    return (_d2 = config.features) == null ? void 0 : _d2.streamAnimation;
+  };
+  const syncComposerBarPeek = () => {
+    var _a2, _b2, _c2, _d2;
+    if (!isComposerBar()) return;
+    const peekBanner = panelElements.peekBanner;
+    const peekTextNode = panelElements.peekTextNode;
+    if (!peekBanner || !peekTextNode) return;
+    if (open) {
+      peekBanner.classList.remove("persona-pill-peek--visible");
+      return;
+    }
+    const messages = (_a2 = session == null ? void 0 : session.getMessages()) != null ? _a2 : [];
+    let lastAssistant;
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const m = messages[i];
+      if (m.role === "assistant" && m.content) {
+        lastAssistant = m;
+        break;
+      }
+    }
+    if (!lastAssistant) {
+      peekBanner.classList.remove("persona-pill-peek--visible");
+      return;
+    }
+    const text = lastAssistant.content;
+    const streaming = Boolean(lastAssistant.streaming);
+    const feature = resolvePeekStreamAnimationFeature();
+    const streamAnimation = resolveStreamAnimation(feature);
+    const plugin = streamAnimation.type !== "none" ? resolveStreamAnimationPlugin(streamAnimation.type, feature == null ? void 0 : feature.plugins) : null;
+    const pluginStillAnimating = ((_b2 = plugin == null ? void 0 : plugin.isAnimating) == null ? void 0 : _b2.call(plugin, lastAssistant)) === true;
+    const animationActive = plugin !== null && (streaming || pluginStillAnimating);
+    if (animationActive && plugin && !peekActivatedPlugins.has(plugin.name)) {
+      ensurePluginActive(plugin, mount);
+      peekActivatedPlugins.add(plugin.name);
+    }
+    const desiredContainerClass = animationActive && (plugin == null ? void 0 : plugin.containerClass) ? plugin.containerClass : null;
+    const currentContainerClass = (_c2 = peekTextNode.dataset.personaPeekStreamClass) != null ? _c2 : null;
+    if (currentContainerClass && currentContainerClass !== desiredContainerClass) {
+      peekTextNode.classList.remove(currentContainerClass);
+      delete peekTextNode.dataset.personaPeekStreamClass;
+    }
+    if (desiredContainerClass && currentContainerClass !== desiredContainerClass) {
+      peekTextNode.classList.add(desiredContainerClass);
+      peekTextNode.dataset.personaPeekStreamClass = desiredContainerClass;
+    }
+    if (animationActive) {
+      peekTextNode.style.setProperty(
+        "--persona-stream-step",
+        `${streamAnimation.speed}ms`
+      );
+      peekTextNode.style.setProperty(
+        "--persona-stream-duration",
+        `${streamAnimation.duration}ms`
+      );
+    } else {
+      peekTextNode.style.removeProperty("--persona-stream-step");
+      peekTextNode.style.removeProperty("--persona-stream-duration");
+    }
+    const buffered = animationActive ? applyStreamBuffer(text, streamAnimation.buffer, plugin, lastAssistant, streaming) : text;
+    const skeletonEnabled = animationActive && streamAnimation.placeholder === "skeleton";
+    const showSkeletonOnly = skeletonEnabled && streaming && (!buffered || !buffered.trim());
+    if (showSkeletonOnly) {
+      const tempContainer = document.createElement("div");
+      const skeleton = createSkeletonPlaceholder();
+      skeleton.classList.add("persona-pill-peek__skeleton");
+      tempContainer.appendChild(skeleton);
+      morphMessages(peekTextNode, tempContainer);
+    } else {
+      const sliceStart = Math.max(0, buffered.length - 100);
+      const slice = buffered.length > 100 ? buffered.slice(-100) : buffered;
+      const escaped = escapeHtml(slice);
+      if (!animationActive || !plugin) {
+        const preview = buffered.length > 100 ? `\u2026${slice}` : slice;
+        if (peekTextNode.textContent !== preview) {
+          peekTextNode.textContent = preview;
+        }
+      } else {
+        let html = escaped;
+        if (plugin.wrap === "char" || plugin.wrap === "word") {
+          html = wrapStreamAnimation(
+            escaped,
+            plugin.wrap,
+            // Namespace span IDs to the peek surface so they don't collide
+            // with the main bubble's spans for the same message id.
+            `peek-${lastAssistant.id}`,
+            { skipTags: plugin.skipTags, startIndex: sliceStart }
+          );
+        }
+        const tempContainer = document.createElement("div");
+        tempContainer.innerHTML = html;
+        if (plugin.useCaret && slice.length > 0) {
+          const caret = createStreamCaret();
+          const spans = tempContainer.querySelectorAll(
+            ".persona-stream-char, .persona-stream-word"
+          );
+          const lastSpan = spans[spans.length - 1];
+          if (lastSpan == null ? void 0 : lastSpan.parentNode) {
+            lastSpan.parentNode.insertBefore(caret, lastSpan.nextSibling);
+          } else {
+            tempContainer.appendChild(caret);
+          }
+        }
+        morphMessages(peekTextNode, tempContainer);
+        (_d2 = plugin.onAfterRender) == null ? void 0 : _d2.call(plugin, {
+          container: peekTextNode,
+          bubble: peekBanner,
+          messageId: lastAssistant.id,
+          message: lastAssistant,
+          speed: streamAnimation.speed,
+          duration: streamAnimation.duration
+        });
+      }
+    }
+    const shouldShow = isStreaming || composerHovered;
+    peekBanner.classList.toggle("persona-pill-peek--visible", shouldShow);
+  };
+  if (isComposerBar()) {
+    const peekBanner = panelElements.peekBanner;
+    if (peekBanner) {
+      const onPeekPointerDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpenState(true, "user");
+      };
+      peekBanner.addEventListener("pointerdown", onPeekPointerDown);
+      destroyCallbacks.push(() => {
+        peekBanner.removeEventListener("pointerdown", onPeekPointerDown);
+      });
+    }
+    const onPanelPointerEnter = () => {
+      if (composerHovered) return;
+      composerHovered = true;
+      syncComposerBarPeek();
+    };
+    const onPanelPointerLeave = () => {
+      if (!composerHovered) return;
+      composerHovered = false;
+      syncComposerBarPeek();
+    };
+    panel.addEventListener("pointerenter", onPanelPointerEnter);
+    panel.addEventListener("pointerleave", onPanelPointerLeave);
+    destroyCallbacks.push(() => {
+      panel.removeEventListener("pointerenter", onPanelPointerEnter);
+      panel.removeEventListener("pointerleave", onPanelPointerLeave);
+    });
+    if (pillRoot) {
+      pillRoot.addEventListener("pointerenter", onPanelPointerEnter);
+      pillRoot.addEventListener("pointerleave", onPanelPointerLeave);
+      destroyCallbacks.push(() => {
+        pillRoot.removeEventListener("pointerenter", onPanelPointerEnter);
+        pillRoot.removeEventListener("pointerleave", onPanelPointerLeave);
+      });
+    }
+  }
+  const applyComposerBarGeometry = (isOpen) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+    const cb = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.composerBar) != null ? _b2 : {};
+    const expandedSize = (_c2 = cb.expandedSize) != null ? _c2 : "anchored";
+    const bottomOffset = (_d2 = cb.bottomOffset) != null ? _d2 : "16px";
+    const collapsedMaxWidth = cb.collapsedMaxWidth;
+    const expandedMaxWidth = (_e2 = cb.expandedMaxWidth) != null ? _e2 : "880px";
+    const expandedTopOffset = (_f2 = cb.expandedTopOffset) != null ? _f2 : "5vh";
+    const modalMaxWidth = (_g2 = cb.modalMaxWidth) != null ? _g2 : "880px";
+    const modalMaxHeight = (_h2 = cb.modalMaxHeight) != null ? _h2 : "min(90vh, 800px)";
+    const viewportClamp = "calc(100vw - 32px)";
+    const pillAreaClearance = "var(--persona-pill-area-height, 80px)";
+    const s = wrapper.style;
+    s.left = "";
+    s.right = "";
+    s.top = "";
+    s.bottom = "";
+    s.transform = "";
+    s.width = "";
+    s.maxWidth = "";
+    s.height = "";
+    s.maxHeight = "";
+    if (pillRoot) {
+      const ps = pillRoot.style;
+      ps.bottom = bottomOffset;
+      ps.width = collapsedMaxWidth != null ? collapsedMaxWidth : "";
+    }
+    if (!isOpen) {
+      return;
+    }
+    if (expandedSize === "fullscreen") {
+      return;
+    }
+    if (expandedSize === "modal") {
+      s.top = "50%";
+      s.left = "50%";
+      s.transform = "translate(-50%, -50%)";
+      s.bottom = "auto";
+      s.right = "auto";
+      s.width = modalMaxWidth;
+      s.maxWidth = viewportClamp;
+      s.maxHeight = modalMaxHeight;
+      s.height = modalMaxHeight;
+      return;
+    }
+    s.left = "50%";
+    s.transform = "translateX(-50%)";
+    s.bottom = `calc(${bottomOffset} + ${pillAreaClearance})`;
+    s.top = expandedTopOffset;
+    s.width = expandedMaxWidth;
+    s.maxWidth = viewportClamp;
+  };
   const updateOpenState = () => {
-    var _a2, _b2, _c2, _d2, _e2;
-    if (!launcherEnabled) return;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+    if (!isPanelToggleable()) return;
+    if (isComposerBar()) {
+      const cb = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.composerBar) != null ? _b2 : {};
+      const expandedSize = (_c2 = cb.expandedSize) != null ? _c2 : "anchored";
+      const nextState = open ? "expanded" : "collapsed";
+      wrapper.dataset.state = nextState;
+      wrapper.dataset.expandedSize = expandedSize;
+      if (pillRoot) {
+        pillRoot.dataset.state = nextState;
+        pillRoot.dataset.expandedSize = expandedSize;
+      }
+      wrapper.style.removeProperty("display");
+      wrapper.classList.remove("persona-pointer-events-none", "persona-opacity-0");
+      panel.classList.remove(
+        "persona-scale-95",
+        "persona-opacity-0",
+        "persona-scale-100",
+        "persona-opacity-100"
+      );
+      applyComposerBarGeometry(open);
+      container.style.display = open ? "flex" : "none";
+      applyFullHeightStyles();
+      if (open) {
+        attachComposerBarOutsideClickDismiss();
+        attachComposerBarEscapeDismiss();
+      } else {
+        detachComposerBarOutsideClickDismiss();
+        detachComposerBarEscapeDismiss();
+      }
+      syncComposerBarPeek();
+      return;
+    }
     const dockedMode = isDockedMountMode(config);
-    const ownerWindow2 = (_a2 = mount.ownerDocument.defaultView) != null ? _a2 : window;
-    const mobileBreakpoint = (_c2 = (_b2 = config.launcher) == null ? void 0 : _b2.mobileBreakpoint) != null ? _c2 : 640;
-    const mobileFullscreen = (_e2 = (_d2 = config.launcher) == null ? void 0 : _d2.mobileFullscreen) != null ? _e2 : true;
+    const ownerWindow2 = (_d2 = mount.ownerDocument.defaultView) != null ? _d2 : window;
+    const mobileBreakpoint = (_f2 = (_e2 = config.launcher) == null ? void 0 : _e2.mobileBreakpoint) != null ? _f2 : 640;
+    const mobileFullscreen = (_h2 = (_g2 = config.launcher) == null ? void 0 : _g2.mobileFullscreen) != null ? _h2 : true;
     const isMobileViewport = ownerWindow2.innerWidth <= mobileBreakpoint;
     const shouldGoFullscreen = mobileFullscreen && isMobileViewport && launcherEnabled;
     const dockReveal = resolveDockConfig(config).reveal;
@@ -17653,20 +18627,21 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   };
   const setOpenState = (nextOpen, source = "user") => {
     var _a2, _b2;
-    if (!launcherEnabled) return;
+    if (!isPanelToggleable()) return;
     if (open === nextOpen) return;
     const prevOpen = open;
     open = nextOpen;
     updateOpenState();
     const isViewportCovering = (() => {
-      var _a3, _b3, _c2, _d2, _e2, _f2, _g2;
+      var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2;
       const sm = (_b3 = (_a3 = config.launcher) == null ? void 0 : _a3.sidebarMode) != null ? _b3 : false;
       const ow = (_c2 = mount.ownerDocument.defaultView) != null ? _c2 : window;
       const mf = (_e2 = (_d2 = config.launcher) == null ? void 0 : _d2.mobileFullscreen) != null ? _e2 : true;
       const mb = (_g2 = (_f2 = config.launcher) == null ? void 0 : _f2.mobileBreakpoint) != null ? _g2 : 640;
       const isMobile = ow.innerWidth <= mb;
       const dockedMF = isDockedMountMode(config) && mf && isMobile;
-      return sm || mf && isMobile && launcherEnabled || dockedMF;
+      const composerBarFS = isComposerBar() && ((_j2 = (_i2 = (_h2 = config.launcher) == null ? void 0 : _h2.composerBar) == null ? void 0 : _i2.expandedSize) != null ? _j2 : "fullscreen") === "fullscreen";
+      return sm || mf && isMobile && launcherEnabled || dockedMF || composerBarFS;
     })();
     if (open && isViewportCovering) {
       if (!teardownHostStacking) {
@@ -17811,6 +18786,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
       voiceState.lastUserMessageWasVoice = Boolean(lastUserMessage == null ? void 0 : lastUserMessage.viaVoice);
       persistState(messages);
+      syncComposerBarPeek();
     },
     onStatusChanged(status) {
       var _a2;
@@ -17834,6 +18810,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       if (!streaming) {
         scheduleAutoScroll(true);
       }
+      syncComposerBarPeek();
     },
     onVoiceStatusChanged(status) {
       var _a2, _b2;
@@ -17870,7 +18847,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   });
   sessionRef.current = session;
-  if (((_J = (_I = config.voiceRecognition) == null ? void 0 : _I.provider) == null ? void 0 : _J.type) === "runtype") {
+  if (((_N = (_M = config.voiceRecognition) == null ? void 0 : _M.provider) == null ? void 0 : _N.type) === "runtype") {
     try {
       session.setupVoice();
     } catch (err) {
@@ -17921,6 +18898,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     });
   }
+  const maybeExpandComposerBar = () => {
+    var _a2, _b2, _c2;
+    if (!isComposerBar()) return;
+    if (open) return;
+    const expandOnSubmit = (_c2 = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.composerBar) == null ? void 0 : _b2.expandOnSubmit) != null ? _c2 : true;
+    if (!expandOnSubmit) return;
+    setOpenState(true, "auto");
+  };
   const handleSubmit = (event) => {
     var _a2;
     event.preventDefault();
@@ -17931,6 +18916,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const value = textarea.value.trim();
     const hasAttachments = (_a2 = attachmentManager == null ? void 0 : attachmentManager.hasAttachments()) != null ? _a2 : false;
     if (!value && !hasAttachments) return;
+    maybeExpandComposerBar();
     let contentParts;
     if (hasAttachments) {
       contentParts = [];
@@ -18096,7 +19082,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       micButton.setAttribute("aria-label", "Start voice recognition");
     }
   };
-  const createMicButton = (voiceConfig, sendButtonConfig) => {
+  const createMicButton2 = (voiceConfig, sendButtonConfig) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
     const hasSpeechRecognition = typeof window !== "undefined" && (typeof window.webkitSpeechRecognition !== "undefined" || typeof window.SpeechRecognition !== "undefined");
     const hasRuntypeProvider = ((_a2 = voiceConfig == null ? void 0 : voiceConfig.provider) == null ? void 0 : _a2.type) === "runtype";
@@ -18373,7 +19359,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   };
   let launcherButtonInstance = null;
   let customLauncherElement = null;
-  if (launcherEnabled) {
+  if (launcherEnabled && !isComposerBar()) {
     const launcherPlugin = plugins.find((p) => p.renderLauncher);
     if (launcherPlugin == null ? void 0 : launcherPlugin.renderLauncher) {
       const customLauncher = launcherPlugin.renderLauncher({
@@ -18404,7 +19390,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   scheduleAutoScroll(true);
   maybeRestoreVoiceFromMetadata();
   if (autoFocusInput) {
-    if (!launcherEnabled) {
+    if (!launcherEnabled || isComposerBar()) {
       setTimeout(() => maybeFocusInput(), 0);
     } else if (open) {
       setTimeout(() => maybeFocusInput(), 200);
@@ -18412,6 +19398,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   const recalcPanelHeight = () => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2;
+    if (isComposerBar()) {
+      updateScrollToBottomButtonOffset();
+      updateOpenState();
+      return;
+    }
     const dockedMode = isDockedMountMode(config);
     const sidebarMode = (_b2 = (_a2 = config.launcher) == null ? void 0 : _a2.sidebarMode) != null ? _b2 : false;
     const fullHeight = dockedMode || sidebarMode || ((_d2 = (_c2 = config.launcher) == null ? void 0 : _c2.fullHeight) != null ? _d2 : false);
@@ -18482,7 +19473,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   };
   recalcPanelHeight();
-  const ownerWindow = (_K = mount.ownerDocument.defaultView) != null ? _K : window;
+  const ownerWindow = (_O = mount.ownerDocument.defaultView) != null ? _O : window;
   ownerWindow.addEventListener("resize", recalcPanelHeight);
   destroyCallbacks.push(() => ownerWindow.removeEventListener("resize", recalcPanelHeight));
   if (typeof ResizeObserver !== "undefined") {
@@ -18552,7 +19543,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       closeButton.removeEventListener("click", closeHandler);
       closeHandler = null;
     }
-    if (launcherEnabled) {
+    if (isPanelToggleable()) {
       closeButton.style.display = "";
       closeHandler = () => {
         setOpenState(false, "user");
@@ -18706,7 +19697,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   const controller = {
     update(nextConfig) {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O2, _P2, _Q2, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O2, _P2, _Q2, _R2, _S2, _T2, _U2, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb;
       const previousToolCallConfig = config.toolCall;
       const previousMessageActions = config.messageActions;
       const previousLayoutMessages = (_a2 = config.layout) == null ? void 0 : _a2.messages;
@@ -18836,11 +19827,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       const headerLayoutChanged = (headerLayoutConfig == null ? void 0 : headerLayoutConfig.layout) !== prevHeaderLayout;
       if (headerLayoutChanged && header) {
         const newHeaderElements = headerLayoutConfig ? buildHeaderWithLayout(config, headerLayoutConfig, {
-          showClose: launcherEnabled,
+          showClose: isPanelToggleable(),
           onClose: () => setOpenState(false, "user")
         }) : buildHeader({
           config,
-          showClose: launcherEnabled,
+          showClose: isPanelToggleable(),
           onClose: () => setOpenState(false, "user")
         });
         header.replaceWith(newHeaderElements.header);
@@ -18970,7 +19961,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             if (existingSvg || existingImg) {
               iconHolder.replaceChildren();
             }
-            iconHolder.textContent = (_R = launcher.agentIconText) != null ? _R : "\u{1F4AC}";
+            iconHolder.textContent = (_R2 = launcher.agentIconText) != null ? _R2 : "\u{1F4AC}";
           }
           const img = iconHolder.querySelector("img");
           if (img) {
@@ -18979,8 +19970,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         }
       }
-      const layoutShowTitle = (_T = (_S = config.layout) == null ? void 0 : _S.header) == null ? void 0 : _T.showTitle;
-      const layoutShowSubtitle = (_V = (_U = config.layout) == null ? void 0 : _U.header) == null ? void 0 : _V.showSubtitle;
+      const layoutShowTitle = (_T2 = (_S2 = config.layout) == null ? void 0 : _S2.header) == null ? void 0 : _T2.showTitle;
+      const layoutShowSubtitle = (_V = (_U2 = config.layout) == null ? void 0 : _U2.header) == null ? void 0 : _V.showSubtitle;
       if (headerTitle) {
         headerTitle.style.display = layoutShowTitle === false ? "none" : "";
       }
@@ -19130,7 +20121,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         if (clearChatButtonWrapper) {
           clearChatButtonWrapper.style.display = shouldShowClearChat ? "" : "none";
           const { closeButtonWrapper } = panelElements;
-          if (closeButtonWrapper && !closeButtonWrapper.classList.contains("persona-absolute")) {
+          if (!isComposerBar() && closeButtonWrapper && !closeButtonWrapper.classList.contains("persona-absolute")) {
             if (shouldShowClearChat) {
               closeButtonWrapper.classList.remove("persona-ml-auto");
             } else {
@@ -19139,7 +20130,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
           const isTopRight = clearChatPlacement === "top-right";
           const currentlyTopRight = clearChatButtonWrapper.classList.contains("persona-absolute");
-          if (isTopRight !== currentlyTopRight && shouldShowClearChat) {
+          if (!isComposerBar() && isTopRight !== currentlyTopRight && shouldShowClearChat) {
             clearChatButtonWrapper.remove();
             if (isTopRight) {
               clearChatButtonWrapper.className = "persona-absolute persona-top-4 persona-z-50";
@@ -19168,14 +20159,17 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         }
         if (shouldShowClearChat) {
-          const clearChatSize = (_la = clearChatConfig.size) != null ? _la : "32px";
-          clearChatButton.style.height = clearChatSize;
-          clearChatButton.style.width = clearChatSize;
+          if (!isComposerBar()) {
+            const clearChatSize = (_la = clearChatConfig.size) != null ? _la : "32px";
+            clearChatButton.style.height = clearChatSize;
+            clearChatButton.style.width = clearChatSize;
+          }
           const clearChatIconName = (_ma = clearChatConfig.iconName) != null ? _ma : "refresh-cw";
           const clearChatIconColor = (_na = clearChatConfig.iconColor) != null ? _na : "";
           clearChatButton.style.color = clearChatIconColor || HEADER_THEME_CSS.actionIconColor;
           clearChatButton.innerHTML = "";
-          const iconSvg = renderLucideIcon(clearChatIconName, "20px", "currentColor", 2);
+          const clearChatIconSize = isComposerBar() ? "14px" : "20px";
+          const iconSvg = renderLucideIcon(clearChatIconName, clearChatIconSize, "currentColor", 2);
           if (iconSvg) {
             clearChatButton.appendChild(iconSvg);
           }
@@ -19299,7 +20293,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       const hasVoiceInput = hasSpeechRecognition || hasRuntypeProvider;
       if (voiceRecognitionEnabled && hasVoiceInput) {
         if (!micButton || !micButtonWrapper) {
-          const micButtonResult = createMicButton(config.voiceRecognition, config.sendButton);
+          const micButtonResult = createMicButton2(config.voiceRecognition, config.sendButton);
           if (micButtonResult) {
             micButton = micButtonResult.micButton;
             micButtonWrapper = micButtonResult.micButtonWrapper;
@@ -19596,7 +20590,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       } else if (tooltip) {
         tooltip.style.display = "none";
       }
-      const updatedContentMaxWidth = (__a = config.layout) == null ? void 0 : __a.contentMaxWidth;
+      const updatedContentMaxWidth = (_cb = (__a = config.layout) == null ? void 0 : __a.contentMaxWidth) != null ? _cb : isComposerBar() ? (_bb = (_ab = (_$a = config.launcher) == null ? void 0 : _$a.composerBar) == null ? void 0 : _ab.contentMaxWidth) != null ? _bb : "720px" : void 0;
       if (updatedContentMaxWidth) {
         messagesWrapper.style.maxWidth = updatedContentMaxWidth;
         messagesWrapper.style.marginLeft = "auto";
@@ -19628,8 +20622,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           suggestions.style.marginRight = "";
         }
       }
-      const statusIndicatorConfig = (_$a = config.statusIndicator) != null ? _$a : {};
-      const isVisible = (_ab = statusIndicatorConfig.visible) != null ? _ab : true;
+      const statusIndicatorConfig = (_db = config.statusIndicator) != null ? _db : {};
+      const isVisible = (_eb = statusIndicatorConfig.visible) != null ? _eb : true;
       statusText.style.display = isVisible ? "" : "none";
       if (session) {
         const currentStatus = session.getStatus();
@@ -19648,15 +20642,15 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       statusText.classList.add(alignClass);
     },
     open() {
-      if (!launcherEnabled) return;
+      if (!isPanelToggleable()) return;
       setOpenState(true, "api");
     },
     close() {
-      if (!launcherEnabled) return;
+      if (!isPanelToggleable()) return;
       setOpenState(false, "api");
     },
     toggle() {
-      if (!launcherEnabled) return;
+      if (!isPanelToggleable()) return;
       setOpenState(!open, "api");
     },
     clearChat() {
@@ -19710,7 +20704,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     setMessage(message) {
       if (!textarea) return false;
       if (session.isStreaming()) return false;
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       textarea.value = message;
@@ -19721,7 +20715,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       if (session.isStreaming()) return false;
       const valueToSubmit = (message == null ? void 0 : message.trim()) || textarea.value.trim();
       if (!valueToSubmit) return false;
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       textarea.value = "";
@@ -19734,7 +20728,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       if (session.isStreaming()) return false;
       if (((_b2 = (_a2 = config.voiceRecognition) == null ? void 0 : _a2.provider) == null ? void 0 : _b2.type) === "runtype") {
         if (session.isVoiceActive()) return true;
-        if (!open && launcherEnabled) setOpenState(true, "system");
+        if (!open && isPanelToggleable()) setOpenState(true, "system");
         voiceState.manuallyDeactivated = false;
         persistVoiceMetadata();
         session.toggleVoice().then(() => {
@@ -19747,7 +20741,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       if (isRecording) return true;
       const SpeechRecognitionClass = getSpeechRecognitionClass();
       if (!SpeechRecognitionClass) return false;
-      if (!open && launcherEnabled) setOpenState(true, "system");
+      if (!open && isPanelToggleable()) setOpenState(true, "system");
       voiceState.manuallyDeactivated = false;
       persistVoiceMetadata();
       startVoiceRecognition("user");
@@ -19773,13 +20767,13 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       return true;
     },
     injectMessage(options) {
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       return session.injectMessage(options);
     },
     injectAssistantMessage(options) {
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       const result = session.injectAssistantMessage(options);
@@ -19798,26 +20792,32 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       return result;
     },
     injectUserMessage(options) {
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       return session.injectUserMessage(options);
     },
     injectSystemMessage(options) {
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       return session.injectSystemMessage(options);
     },
     injectMessageBatch(optionsList) {
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       return session.injectMessageBatch(optionsList);
     },
+    injectComponentDirective(options) {
+      if (!open && isPanelToggleable()) {
+        setOpenState(true, "system");
+      }
+      return session.injectComponentDirective(options);
+    },
     /** @deprecated Use injectMessage() instead */
     injectTestMessage(event) {
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       session.injectTestEvent(event);
@@ -19880,7 +20880,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       return (_a2 = session == null ? void 0 : session.getSelectedArtifactId()) != null ? _a2 : null;
     },
     focusInput() {
-      if (launcherEnabled && !open) return false;
+      if (launcherEnabled && !open && !isComposerBar()) return false;
       if (!textarea) return false;
       textarea.focus();
       return true;
@@ -19918,14 +20918,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     },
     // State query methods
     isOpen() {
-      return launcherEnabled && open;
+      return isPanelToggleable() && open;
     },
     isVoiceActive() {
       return voiceState.active;
     },
     getState() {
       return {
-        open: launcherEnabled && open,
+        open: isPanelToggleable() && open,
         launcherEnabled,
         voiceActive: voiceState.active,
         streaming: session.isStreaming()
@@ -19933,7 +20933,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     },
     // Feedback methods (CSAT/NPS)
     showCSATFeedback(options) {
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       const existingFeedback = messagesWrapper.querySelector(".persona-feedback-container");
@@ -19955,7 +20955,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       feedbackEl.scrollIntoView({ behavior: "smooth", block: "end" });
     },
     showNPSFeedback(options) {
-      if (!open && launcherEnabled) {
+      if (!open && isPanelToggleable()) {
         setOpenState(true, "system");
       }
       const existingFeedback = messagesWrapper.querySelector(".persona-feedback-container");
@@ -19989,6 +20989,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
       destroyCallbacks.forEach((cb) => cb());
       wrapper.remove();
+      pillRoot == null ? void 0 : pillRoot.remove();
       launcherButtonInstance == null ? void 0 : launcherButtonInstance.destroy();
       customLauncherElement == null ? void 0 : customLauncherElement.remove();
       if (closeHandler) {
@@ -19996,7 +20997,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
   };
-  const shouldExposeDebugApi = ((_L = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _L : false) || Boolean(config.debug);
+  const shouldExposeDebugApi = ((_P = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _P : false) || Boolean(config.debug);
   if (shouldExposeDebugApi && typeof window !== "undefined") {
     const previousDebug = window.AgentWidgetBrowser;
     const debugApi = {
@@ -20093,15 +21094,15 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     });
   }
   const persistConfig = normalizePersistStateConfig(config.persistState);
-  if (persistConfig && launcherEnabled) {
+  if (persistConfig && isPanelToggleable()) {
     const storage = getPersistStorage(persistConfig.storage);
     const openKey = `${persistConfig.keyPrefix}widget-open`;
     const voiceKey = `${persistConfig.keyPrefix}widget-voice`;
     const voiceModeKey = `${persistConfig.keyPrefix}widget-voice-mode`;
     if (storage) {
-      const wasOpen = ((_M = persistConfig.persist) == null ? void 0 : _M.openState) && storage.getItem(openKey) === "true";
-      const wasVoiceActive = ((_N = persistConfig.persist) == null ? void 0 : _N.voiceState) && storage.getItem(voiceKey) === "true";
-      const wasInVoiceMode = ((_O = persistConfig.persist) == null ? void 0 : _O.voiceState) && storage.getItem(voiceModeKey) === "true";
+      const wasOpen = ((_Q = persistConfig.persist) == null ? void 0 : _Q.openState) && storage.getItem(openKey) === "true";
+      const wasVoiceActive = ((_R = persistConfig.persist) == null ? void 0 : _R.voiceState) && storage.getItem(voiceKey) === "true";
+      const wasInVoiceMode = ((_S = persistConfig.persist) == null ? void 0 : _S.voiceState) && storage.getItem(voiceModeKey) === "true";
       if (wasOpen) {
         setTimeout(() => {
           controller.open();
@@ -20118,7 +21119,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }, 100);
         }, 0);
       }
-      if ((_P = persistConfig.persist) == null ? void 0 : _P.openState) {
+      if ((_T = persistConfig.persist) == null ? void 0 : _T.openState) {
         eventBus.on("widget:opened", () => {
           storage.setItem(openKey, "true");
         });
@@ -20126,7 +21127,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           storage.setItem(openKey, "false");
         });
       }
-      if ((_Q = persistConfig.persist) == null ? void 0 : _Q.voiceState) {
+      if ((_U = persistConfig.persist) == null ? void 0 : _U.voiceState) {
         eventBus.on("voice:state", (event) => {
           storage.setItem(voiceKey, event.active ? "true" : "false");
         });
@@ -20148,11 +21149,12 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
   }
-  if (shouldOpenAfterStateLoaded && launcherEnabled) {
+  if (shouldOpenAfterStateLoaded && isPanelToggleable()) {
     setTimeout(() => {
       controller.open();
     }, 0);
   }
+  syncComposerBarPeek();
   return controller;
 };