@avatarfirst/react 0.1.0 → 0.2.0

package/dist/index.js

@@ -210,7 +210,7 @@ function useAvatarFirst(options) {
       }
       if (response.actions) {
         for (const action of response.actions) {
-          optionsRef.current.onAction?.(action);
+          optionsRef.current.onAction?.({ type: action.intent, payload: action.data });
         }
       }
       setIsProcessing(false);
@@ -247,6 +247,7 @@ function useAvatarFirst(options) {
 }
 
 // src/components/overlays/OverlayContainer.tsx
+import React2 from "react";
 import { AnimatePresence, motion } from "framer-motion";
 
 // src/animations/overlayAnimations.ts
@@ -311,7 +312,7 @@ function getOverlayVariants(animation = "fade") {
 }
 
 // src/components/overlays/OverlayContainer.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function getPositionStyles(position = "bottom-center") {
   if (typeof position === "object") {
     return { position: "absolute", left: position.x, top: position.y };
@@ -320,6 +321,8 @@ function getPositionStyles(position = "bottom-center") {
   switch (position) {
     case "center":
       return { ...base, top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+    case "chest":
+      return { ...base, bottom: "5rem", left: "50%", transform: "translateX(-50%)", width: "90%", maxWidth: "28rem" };
     case "bottom-center":
       return { ...base, bottom: "2rem", left: "50%", transform: "translateX(-50%)" };
     case "bottom-right":
@@ -343,41 +346,54 @@ function OverlayContainer({ components }) {
     if (!Component) return null;
     const variants = getOverlayVariants(overlay.animation);
     const positionStyle = getPositionStyles(overlay.position);
-    return /* @__PURE__ */ jsx2(
-      motion.div,
-      {
-        variants,
-        initial: "initial",
-        animate: "animate",
-        exit: "exit",
-        style: positionStyle,
-        className: "pointer-events-auto",
-        onClick: overlay.dismissOnClickOutside ? (e) => {
-          if (e.target === e.currentTarget) hide(overlay.id);
-        } : void 0,
-        children: /* @__PURE__ */ jsx2(
-          Component,
-          {
-            data: overlay.data,
-            overlayId: overlay.id,
-            onDismiss: () => hide(overlay.id)
-          }
-        )
-      },
-      overlay.id
-    );
+    return /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+      overlay.position === "center" && /* @__PURE__ */ jsx2(
+        motion.div,
+        {
+          className: "fixed inset-0 bg-black/60 pointer-events-auto",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          onClick: () => overlay.dismissOnClickOutside !== false && hide(overlay.id)
+        },
+        `backdrop-${overlay.id}`
+      ),
+      /* @__PURE__ */ jsx2(
+        motion.div,
+        {
+          variants,
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          style: positionStyle,
+          className: "pointer-events-auto",
+          onClick: overlay.dismissOnClickOutside ? (e) => {
+            if (e.target === e.currentTarget) hide(overlay.id);
+          } : void 0,
+          children: /* @__PURE__ */ jsx2(
+            Component,
+            {
+              data: overlay.data,
+              overlayId: overlay.id,
+              onDismiss: () => hide(overlay.id)
+            }
+          )
+        },
+        `content-${overlay.id}`
+      )
+    ] }, overlay.id);
   }) }) });
 }
 
 // src/components/AvatarAgent.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function AvatarAgent({
   config,
   overlayComponents = {},
   autoStart = false,
   children
 }) {
-  return /* @__PURE__ */ jsxs(AvatarProvider, { agent: config, autoStart, children: [
+  return /* @__PURE__ */ jsxs2(AvatarProvider, { agent: config, autoStart, children: [
     children,
     /* @__PURE__ */ jsx3(OverlayContainer, { components: overlayComponents })
   ] });
@@ -397,7 +413,7 @@ import { motion as motion3 } from "framer-motion";
 
 // src/components/AvatarFallback.tsx
 import { motion as motion2 } from "framer-motion";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function AvatarFallback({ size, state }) {
   const isSmall = size === "small";
   const isMedium = size === "medium";
@@ -405,7 +421,7 @@ function AvatarFallback({ size, state }) {
   const eyeSize = isSmall ? 4 : isMedium ? 6 : 12;
   const mouthWidth = isSmall ? 15 : isMedium ? 25 : 50;
   if (state === "connecting") {
-    return /* @__PURE__ */ jsxs2("div", { className: "relative w-full h-full flex items-center justify-center", children: [
+    return /* @__PURE__ */ jsxs3("div", { className: "relative w-full h-full flex items-center justify-center", children: [
       /* @__PURE__ */ jsx4(
         motion2.div,
         {
@@ -432,7 +448,7 @@ function AvatarFallback({ size, state }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs2("div", { className: `relative ${faceSize}`, children: [
+  return /* @__PURE__ */ jsxs3("div", { className: `relative ${faceSize}`, children: [
     /* @__PURE__ */ jsx4(
       motion2.div,
       {
@@ -449,7 +465,7 @@ function AvatarFallback({ size, state }) {
       }
     ),
     /* @__PURE__ */ jsx4("div", { className: "absolute inset-2 rounded-full bg-gradient-to-br from-white/30 to-transparent" }),
-    /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 100 100", className: "absolute inset-0 w-full h-full", children: [
+    /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 100 100", className: "absolute inset-0 w-full h-full", children: [
       /* @__PURE__ */ jsx4(
         motion2.ellipse,
         {
@@ -522,7 +538,7 @@ function AvatarFallback({ size, state }) {
 }
 
 // src/components/AvatarView.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var sizeClasses = {
   small: "w-16 h-16",
   medium: "w-32 h-32",
@@ -540,8 +556,8 @@ function AvatarView({ size = "medium", showStatus = true, className = "" }) {
   }, [attachVideoElement]);
   const isConnected = state === "connected" || state === "speaking" || state === "listening" || state === "thinking";
   const isFullscreen = size === "fullscreen";
-  return /* @__PURE__ */ jsxs3("div", { className: `relative ${className}`, children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4("div", { className: `relative ${className}`, children: [
+    /* @__PURE__ */ jsxs4(
       motion3.div,
       {
         className: `relative overflow-hidden ${isFullscreen ? "rounded-2xl" : "rounded-full"} ${sizeClasses[size]}`,
@@ -605,17 +621,17 @@ function AvatarView({ size = "medium", showStatus = true, className = "" }) {
 }
 
 // src/components/overlays/CardOverlay.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function CardOverlay({ data, onDismiss }) {
   const { title, description, items, actions } = data ?? {};
-  return /* @__PURE__ */ jsxs4("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[300px] max-w-md", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[300px] max-w-md", children: [
     title && /* @__PURE__ */ jsx6("h3", { className: "text-lg font-semibold mb-1", children: title }),
     description && /* @__PURE__ */ jsx6("p", { className: "text-sm text-gray-500 mb-4", children: description }),
-    items && items.length > 0 && /* @__PURE__ */ jsx6("div", { className: "space-y-2 mb-4", children: items.map((item, i) => /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between py-2 border-b border-gray-100 last:border-0", children: [
+    items && items.length > 0 && /* @__PURE__ */ jsx6("div", { className: "space-y-2 mb-4", children: items.map((item, i) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between py-2 border-b border-gray-100 last:border-0", children: [
       /* @__PURE__ */ jsx6("span", { className: "text-sm font-medium text-gray-700", children: item.label }),
       item.value && /* @__PURE__ */ jsx6("span", { className: "text-sm text-gray-500", children: item.value })
     ] }, i)) }),
-    /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 justify-end", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex gap-2 justify-end", children: [
       actions?.map((action, i) => /* @__PURE__ */ jsx6(
         "button",
         {
@@ -639,7 +655,7 @@ function CardOverlay({ data, onDismiss }) {
 
 // src/components/overlays/FormOverlay.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function FormOverlay({ data, onDismiss }) {
   const { title, fields = [], submitLabel = "Submit", onSubmit } = data ?? {};
   const [values, setValues] = useState3({});
@@ -648,10 +664,10 @@ function FormOverlay({ data, onDismiss }) {
     onSubmit?.(values);
     onDismiss();
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-md", children: [
+  return /* @__PURE__ */ jsxs6("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-md", children: [
     title && /* @__PURE__ */ jsx7("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
-      fields.map((field) => /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
+      fields.map((field) => /* @__PURE__ */ jsxs6("div", { children: [
         /* @__PURE__ */ jsx7("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: field.label }),
         field.type === "textarea" ? /* @__PURE__ */ jsx7(
           "textarea",
@@ -662,7 +678,7 @@ function FormOverlay({ data, onDismiss }) {
             value: values[field.name] ?? "",
             onChange: (e) => setValues((v) => ({ ...v, [field.name]: e.target.value }))
           }
-        ) : field.type === "select" ? /* @__PURE__ */ jsxs5(
+        ) : field.type === "select" ? /* @__PURE__ */ jsxs6(
           "select",
           {
             className: "w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500",
@@ -686,7 +702,7 @@ function FormOverlay({ data, onDismiss }) {
           }
         )
       ] }, field.name)),
-      /* @__PURE__ */ jsxs5("div", { className: "flex gap-2 justify-end pt-2", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex gap-2 justify-end pt-2", children: [
         /* @__PURE__ */ jsx7(
           "button",
           {
@@ -710,15 +726,15 @@ function FormOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/TableOverlay.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function TableOverlay({ data, onDismiss }) {
   const { title, columns = [], rows = [] } = data ?? {};
-  return /* @__PURE__ */ jsxs6("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[400px] max-w-2xl overflow-x-auto", children: [
-    title && /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between mb-4", children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[400px] max-w-2xl overflow-x-auto", children: [
+    title && /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ jsx8("h3", { className: "text-lg font-semibold", children: title }),
       /* @__PURE__ */ jsx8("button", { onClick: onDismiss, className: "text-gray-400 hover:text-gray-600 text-sm", children: "Close" })
     ] }),
-    /* @__PURE__ */ jsxs6("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs7("table", { className: "w-full", children: [
       columns.length > 0 && /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { className: "border-b", children: columns.map((col, i) => /* @__PURE__ */ jsx8("th", { className: "text-left py-2 px-3 text-sm font-medium text-gray-500", children: col }, i)) }) }),
       /* @__PURE__ */ jsx8("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx8("tr", { className: "border-b last:border-0 hover:bg-gray-50", children: row.map((cell, j) => /* @__PURE__ */ jsx8("td", { className: "py-2 px-3 text-sm text-gray-700", children: cell }, j)) }, i)) })
     ] })
@@ -726,12 +742,12 @@ function TableOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/ProgressOverlay.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function ProgressOverlay({ data, onDismiss }) {
   const { title, steps = [] } = data ?? {};
-  return /* @__PURE__ */ jsxs7("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-sm", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-sm", children: [
     title && /* @__PURE__ */ jsx9("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    /* @__PURE__ */ jsx9("div", { className: "space-y-3", children: steps.map((step, i) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx9("div", { className: "space-y-3", children: steps.map((step, i) => /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
       /* @__PURE__ */ jsx9(
         "div",
         {
@@ -753,13 +769,13 @@ function ProgressOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/ConfirmOverlay.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function ConfirmOverlay({ data, onDismiss }) {
   const { title, message, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel } = data ?? {};
-  return /* @__PURE__ */ jsxs8("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[300px] max-w-sm", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[300px] max-w-sm", children: [
     title && /* @__PURE__ */ jsx10("h3", { className: "text-lg font-semibold mb-2", children: title }),
     message && /* @__PURE__ */ jsx10("p", { className: "text-sm text-gray-500 mb-6", children: message }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex gap-3", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex gap-3", children: [
       /* @__PURE__ */ jsx10(
         "button",
         {
@@ -789,7 +805,7 @@ function ConfirmOverlay({ data, onDismiss }) {
 // src/components/overlays/ChatOverlay.tsx
 import { useState as useState4 } from "react";
 import { motion as motion4 } from "framer-motion";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function ChatOverlay({ data, onDismiss }) {
   const { title = "Chat", messages: initialMessages = [], suggestions = [] } = data ?? {};
   const [messages, setMessages] = useState4(initialMessages);
@@ -814,12 +830,12 @@ function ChatOverlay({ data, onDismiss }) {
     };
     setMessages((prev) => [...prev, aiMsg]);
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-2xl shadow-2xl overflow-hidden w-96 flex flex-col", style: { maxHeight: "500px" }, children: [
-    /* @__PURE__ */ jsxs9("div", { className: "bg-gradient-to-r from-blue-500 to-blue-600 p-4 flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "bg-white rounded-2xl shadow-2xl overflow-hidden w-96 flex flex-col", style: { maxHeight: "500px" }, children: [
+    /* @__PURE__ */ jsxs10("div", { className: "bg-gradient-to-r from-blue-500 to-blue-600 p-4 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx11("h3", { className: "text-white font-semibold", children: title }),
       /* @__PURE__ */ jsx11("button", { onClick: onDismiss, className: "text-white/70 hover:text-white text-sm", children: "Close" })
     ] }),
-    /* @__PURE__ */ jsx11("div", { className: "flex-1 overflow-y-auto p-4 space-y-3", children: messages.length === 0 ? /* @__PURE__ */ jsxs9("div", { className: "text-center text-gray-400 py-8", children: [
+    /* @__PURE__ */ jsx11("div", { className: "flex-1 overflow-y-auto p-4 space-y-3", children: messages.length === 0 ? /* @__PURE__ */ jsxs10("div", { className: "text-center text-gray-400 py-8", children: [
       /* @__PURE__ */ jsx11("p", { className: "font-medium mb-4", children: "How can I help?" }),
       /* @__PURE__ */ jsx11("div", { className: "space-y-2", children: suggestions.map((s) => /* @__PURE__ */ jsx11(
         "button",
@@ -836,14 +852,14 @@ function ChatOverlay({ data, onDismiss }) {
         className: `flex ${msg.role === "user" ? "justify-end" : "justify-start"}`,
         initial: { opacity: 0, y: 10 },
         animate: { opacity: 1, y: 0 },
-        children: /* @__PURE__ */ jsxs9("div", { className: `max-w-[80%] p-3 rounded-2xl ${msg.role === "user" ? "bg-blue-500 text-white rounded-br-none" : "bg-gray-100 text-gray-800 rounded-bl-none"}`, children: [
+        children: /* @__PURE__ */ jsxs10("div", { className: `max-w-[80%] p-3 rounded-2xl ${msg.role === "user" ? "bg-blue-500 text-white rounded-br-none" : "bg-gray-100 text-gray-800 rounded-bl-none"}`, children: [
           /* @__PURE__ */ jsx11("p", { className: "text-sm", children: msg.content }),
           msg.timestamp && /* @__PURE__ */ jsx11("p", { className: `text-xs mt-1 ${msg.role === "user" ? "text-blue-100" : "text-gray-400"}`, children: msg.timestamp })
         ] })
       },
       msg.id
     )) }),
-    /* @__PURE__ */ jsx11("div", { className: "p-3 border-t", children: /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx11("div", { className: "p-3 border-t", children: /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ jsx11(
         "input",
         {
@@ -869,7 +885,7 @@ function ChatOverlay({ data, onDismiss }) {
 
 // src/components/overlays/InsightOverlay.tsx
 import { motion as motion5 } from "framer-motion";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var insightStyles = {
   recommendation: { bg: "bg-green-50", border: "border-green-200", icon: "\u2191", iconColor: "text-green-500" },
   comparison: { bg: "bg-blue-50", border: "border-blue-200", icon: "\u2261", iconColor: "text-blue-500" },
@@ -877,9 +893,9 @@ var insightStyles = {
 };
 function InsightOverlay({ data, onDismiss }) {
   const { title, subtitle, insights = [], actions = [], onAction } = data ?? {};
-  return /* @__PURE__ */ jsxs10("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-md", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsxs10("div", { children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-md", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxs11("div", { children: [
         title && /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold", children: title }),
         subtitle && /* @__PURE__ */ jsx12("p", { className: "text-sm text-gray-500", children: subtitle })
       ] }),
@@ -894,11 +910,11 @@ function InsightOverlay({ data, onDismiss }) {
           initial: { opacity: 0, x: -10 },
           animate: { opacity: 1, x: 0 },
           transition: { delay: i * 0.1 },
-          children: /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-2", children: [
+          children: /* @__PURE__ */ jsxs11("div", { className: "flex items-start gap-2", children: [
             /* @__PURE__ */ jsx12("span", { className: style.iconColor, children: style.icon }),
-            /* @__PURE__ */ jsxs10("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxs11("div", { className: "flex-1", children: [
               /* @__PURE__ */ jsx12("p", { className: "text-sm", children: insight.text }),
-              insight.confidence != null && /* @__PURE__ */ jsxs10("p", { className: "text-xs text-gray-400 mt-1", children: [
+              insight.confidence != null && /* @__PURE__ */ jsxs11("p", { className: "text-xs text-gray-400 mt-1", children: [
                 "Confidence: ",
                 Math.round(insight.confidence * 100),
                 "%"
@@ -922,10 +938,10 @@ function InsightOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/DetailCardOverlay.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function DetailCardOverlay({ data, onDismiss }) {
   const { title, body, image, metadata, actions } = data ?? {};
-  return /* @__PURE__ */ jsxs11("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-lg", children: [
+  return /* @__PURE__ */ jsxs12("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-lg", children: [
     image && /* @__PURE__ */ jsx13(
       "img",
       {
@@ -936,11 +952,11 @@ function DetailCardOverlay({ data, onDismiss }) {
     ),
     title && /* @__PURE__ */ jsx13("h3", { className: "text-lg font-semibold mb-1", children: title }),
     body && /* @__PURE__ */ jsx13("p", { className: "text-sm text-gray-600 mb-4 leading-relaxed", children: body }),
-    metadata && Object.keys(metadata).length > 0 && /* @__PURE__ */ jsx13("div", { className: "space-y-1.5 mb-4", children: Object.entries(metadata).map(([key, value]) => /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between py-1.5 border-b border-gray-100 last:border-0", children: [
+    metadata && Object.keys(metadata).length > 0 && /* @__PURE__ */ jsx13("div", { className: "space-y-1.5 mb-4", children: Object.entries(metadata).map(([key, value]) => /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between py-1.5 border-b border-gray-100 last:border-0", children: [
       /* @__PURE__ */ jsx13("span", { className: "text-xs font-medium text-gray-400 uppercase tracking-wider", children: key }),
       /* @__PURE__ */ jsx13("span", { className: "text-sm text-gray-700", children: value })
     ] }, key)) }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex gap-2 justify-end", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex gap-2 justify-end", children: [
       actions?.map((action, i) => /* @__PURE__ */ jsx13(
         "button",
         {
@@ -963,18 +979,18 @@ function DetailCardOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/ComparisonOverlay.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function ComparisonOverlay({ data, onDismiss }) {
   const { title, items } = data ?? {};
   const attributeKeys = items?.length ? [...new Set(items.flatMap((item) => Object.keys(item.attributes)))] : [];
-  return /* @__PURE__ */ jsxs12("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[400px] max-w-2xl", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[400px] max-w-2xl", children: [
     title && /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    items && items.length > 0 && /* @__PURE__ */ jsx14("div", { className: "overflow-x-auto mb-4", children: /* @__PURE__ */ jsxs12("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs12("tr", { className: "border-b border-gray-200", children: [
+    items && items.length > 0 && /* @__PURE__ */ jsx14("div", { className: "overflow-x-auto mb-4", children: /* @__PURE__ */ jsxs13("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs13("tr", { className: "border-b border-gray-200", children: [
         /* @__PURE__ */ jsx14("th", { className: "text-left py-2 pr-4 text-gray-400 font-medium text-xs uppercase tracking-wider", children: "Feature" }),
         items.map((item) => /* @__PURE__ */ jsx14("th", { className: "text-center py-2 px-3 font-semibold text-gray-800", children: item.name }, item.name))
       ] }) }),
-      /* @__PURE__ */ jsx14("tbody", { children: attributeKeys.map((key, i) => /* @__PURE__ */ jsxs12("tr", { className: i % 2 === 0 ? "bg-gray-50" : "", children: [
+      /* @__PURE__ */ jsx14("tbody", { children: attributeKeys.map((key, i) => /* @__PURE__ */ jsxs13("tr", { className: i % 2 === 0 ? "bg-gray-50" : "", children: [
         /* @__PURE__ */ jsx14("td", { className: "py-2 pr-4 text-gray-600 font-medium", children: key }),
         items.map((item) => /* @__PURE__ */ jsx14("td", { className: "text-center py-2 px-3 text-gray-700", children: String(item.attributes[key] ?? "\u2014") }, item.name))
       ] }, key)) })
@@ -992,7 +1008,7 @@ function ComparisonOverlay({ data, onDismiss }) {
 
 // src/components/overlays/CalendarOverlay.tsx
 import { useState as useState5, useMemo as useMemo3 } from "react";
-import { Fragment, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function CalendarOverlay({ data, onDismiss }) {
   const { title, available_slots, onSelect } = data ?? {};
   const [selectedDate, setSelectedDate] = useState5(null);
@@ -1016,9 +1032,9 @@ function CalendarOverlay({ data, onDismiss }) {
       onDismiss();
     }
   };
-  return /* @__PURE__ */ jsxs13("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-sm", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-sm", children: [
     title && /* @__PURE__ */ jsx15("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    dates.length > 0 && /* @__PURE__ */ jsxs13(Fragment, { children: [
+    dates.length > 0 && /* @__PURE__ */ jsxs14(Fragment, { children: [
       /* @__PURE__ */ jsx15("div", { className: "flex gap-2 overflow-x-auto pb-2 mb-3", children: dates.map((date) => /* @__PURE__ */ jsx15(
         "button",
         {
@@ -1046,7 +1062,7 @@ function CalendarOverlay({ data, onDismiss }) {
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsxs13("div", { className: "flex gap-2 justify-end", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex gap-2 justify-end", children: [
       selectedSlot && /* @__PURE__ */ jsx15(
         "button",
         {
@@ -1068,12 +1084,12 @@ function CalendarOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/MediaOverlay.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function MediaOverlay({ data, onDismiss }) {
   const { title, url, type = "image", alt, autoplay } = data ?? {};
-  return /* @__PURE__ */ jsxs14("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-xl", children: [
+  return /* @__PURE__ */ jsxs15("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-xl", children: [
     title && /* @__PURE__ */ jsx16("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    url && /* @__PURE__ */ jsxs14("div", { className: "mb-4 rounded-xl overflow-hidden bg-gray-100", children: [
+    url && /* @__PURE__ */ jsxs15("div", { className: "mb-4 rounded-xl overflow-hidden bg-gray-100", children: [
       type === "video" && /* @__PURE__ */ jsx16(
         "video",
         {
@@ -1105,17 +1121,17 @@ function MediaOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/MapOverlay.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function MapOverlay({ data, onDismiss }) {
   const { title, locations } = data ?? {};
   const getMapsUrl = (loc) => `https://www.google.com/maps/search/?api=1&query=${loc.lat},${loc.lng}`;
-  return /* @__PURE__ */ jsxs15("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-md", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-md", children: [
     title && /* @__PURE__ */ jsx17("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    locations && locations.length > 0 && /* @__PURE__ */ jsx17("div", { className: "space-y-3 mb-4", children: locations.map((loc, i) => /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-3 p-3 rounded-xl bg-gray-50", children: [
+    locations && locations.length > 0 && /* @__PURE__ */ jsx17("div", { className: "space-y-3 mb-4", children: locations.map((loc, i) => /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-3 p-3 rounded-xl bg-gray-50", children: [
       /* @__PURE__ */ jsx17("div", { className: "w-8 h-8 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx17("svg", { className: "w-4 h-4 text-red-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx17("path", { fillRule: "evenodd", d: "M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z", clipRule: "evenodd" }) }) }),
-      /* @__PURE__ */ jsxs15("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
         loc.label && /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium text-gray-800", children: loc.label }),
-        /* @__PURE__ */ jsxs15("p", { className: "text-xs text-gray-400", children: [
+        /* @__PURE__ */ jsxs16("p", { className: "text-xs text-gray-400", children: [
           loc.lat.toFixed(4),
           ", ",
           loc.lng.toFixed(4)
@@ -1145,7 +1161,7 @@ function MapOverlay({ data, onDismiss }) {
 
 // src/components/overlays/RichTextOverlay.tsx
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function parseMarkdown(md) {
   let html = md.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="bg-gray-900 text-gray-100 rounded-lg p-3 text-xs overflow-x-auto my-2"><code>$2</code></pre>').replace(/`([^`]+)`/g, '<code class="bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-xs">$1</code>').replace(/^### (.+)$/gm, '<h4 class="text-base font-semibold mt-3 mb-1">$1</h4>').replace(/^## (.+)$/gm, '<h3 class="text-lg font-semibold mt-4 mb-1">$1</h3>').replace(/^# (.+)$/gm, '<h2 class="text-xl font-bold mt-4 mb-2">$1</h2>').replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:text-blue-600 underline">$1</a>').replace(/^- (.+)$/gm, '<li class="ml-4 list-disc text-sm">$1</li>').replace(/^(?!<[hlupao])(.*\S.*)$/gm, '<p class="text-sm text-gray-600 my-1">$1</p>');
   return html;
@@ -1153,7 +1169,7 @@ function parseMarkdown(md) {
 function RichTextOverlay({ data, onDismiss }) {
   const { title, content } = data ?? {};
   const html = useMemo4(() => content ? parseMarkdown(content) : "", [content]);
-  return /* @__PURE__ */ jsxs16("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-lg", children: [
+  return /* @__PURE__ */ jsxs17("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-lg", children: [
     title && /* @__PURE__ */ jsx18("h3", { className: "text-lg font-semibold mb-4", children: title }),
     html && /* @__PURE__ */ jsx18(
       "div",
@@ -1174,11 +1190,11 @@ function RichTextOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/ChartOverlay.tsx
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 var DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#06b6d4", "#ef4444", "#84cc16"];
 function BarChart({ series }) {
   const max = Math.max(...series.map((s) => s.value), 1);
-  return /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: series.map((item, i) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
+  return /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: series.map((item, i) => /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsx19("span", { className: "text-xs text-gray-500 w-20 truncate text-right", children: item.label }),
     /* @__PURE__ */ jsx19("div", { className: "flex-1 h-6 bg-gray-100 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx19(
       "div",
@@ -1198,7 +1214,7 @@ function PieChart({ series }) {
   const radius = 60;
   const circumference = 2 * Math.PI * radius;
   let offset = 0;
-  return /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-6", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-6", children: [
     /* @__PURE__ */ jsx19("svg", { width: "160", height: "160", viewBox: "0 0 160 160", className: "flex-shrink-0", children: series.map((item, i) => {
       const dash = item.value / total * circumference;
       const currentOffset = offset;
@@ -1219,7 +1235,7 @@ function PieChart({ series }) {
         i
       );
     }) }),
-    /* @__PURE__ */ jsx19("div", { className: "space-y-1.5", children: series.map((item, i) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx19("div", { className: "space-y-1.5", children: series.map((item, i) => /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx19(
         "div",
         {
@@ -1228,7 +1244,7 @@ function PieChart({ series }) {
         }
       ),
       /* @__PURE__ */ jsx19("span", { className: "text-xs text-gray-600", children: item.label }),
-      /* @__PURE__ */ jsxs17("span", { className: "text-xs font-medium text-gray-800", children: [
+      /* @__PURE__ */ jsxs18("span", { className: "text-xs font-medium text-gray-800", children: [
         Math.round(item.value / total * 100),
         "%"
       ] })
@@ -1245,8 +1261,8 @@ function LineChart({ series }) {
     y: height - padding - item.value / max * (height - padding * 2)
   }));
   const pathD = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-  return /* @__PURE__ */ jsxs17("div", { children: [
-    /* @__PURE__ */ jsxs17("svg", { width, height, viewBox: `0 0 ${width} ${height}`, className: "w-full", children: [
+  return /* @__PURE__ */ jsxs18("div", { children: [
+    /* @__PURE__ */ jsxs18("svg", { width, height, viewBox: `0 0 ${width} ${height}`, className: "w-full", children: [
       /* @__PURE__ */ jsx19("path", { d: pathD, fill: "none", stroke: "#3b82f6", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
       points.map((p, i) => /* @__PURE__ */ jsx19("circle", { cx: p.x, cy: p.y, r: "3", fill: "#3b82f6" }, i))
     ] }),
@@ -1255,9 +1271,9 @@ function LineChart({ series }) {
 }
 function ChartOverlay({ data, onDismiss }) {
   const { title, type = "bar", series } = data ?? {};
-  return /* @__PURE__ */ jsxs17("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-md", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-md", children: [
     title && /* @__PURE__ */ jsx19("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    series && series.length > 0 && /* @__PURE__ */ jsxs17("div", { className: "mb-4", children: [
+    series && series.length > 0 && /* @__PURE__ */ jsxs18("div", { className: "mb-4", children: [
       type === "bar" && /* @__PURE__ */ jsx19(BarChart, { series }),
       type === "pie" && /* @__PURE__ */ jsx19(PieChart, { series }),
       type === "line" && /* @__PURE__ */ jsx19(LineChart, { series })
@@ -1275,7 +1291,7 @@ function ChartOverlay({ data, onDismiss }) {
 
 // src/components/overlays/FileUploadOverlay.tsx
 import { useRef as useRef3, useState as useState6, useCallback as useCallback6 } from "react";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 var MIME_MAP = {
   pdf: "application/pdf",
   docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
@@ -1316,9 +1332,9 @@ function FileUploadOverlay({ data, onDismiss }) {
       onDismiss();
     }
   };
-  return /* @__PURE__ */ jsxs18("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-sm", children: [
+  return /* @__PURE__ */ jsxs19("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[280px] max-w-sm", children: [
     title && /* @__PURE__ */ jsx20("h3", { className: "text-lg font-semibold mb-4", children: title }),
-    /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsxs19(
       "div",
       {
         className: `border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-colors mb-3 ${dragging ? "border-blue-400 bg-blue-50" : "border-gray-200 hover:border-gray-300"}`,
@@ -1337,7 +1353,7 @@ function FileUploadOverlay({ data, onDismiss }) {
           /* @__PURE__ */ jsx20("svg", { className: "w-8 h-8 text-gray-300 mx-auto mb-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
           /* @__PURE__ */ jsx20("p", { className: "text-sm text-gray-500", children: "Drop files here or click to browse" }),
           accept && /* @__PURE__ */ jsx20("p", { className: "text-xs text-gray-400 mt-1", children: accept.map((e) => `.${e}`).join(", ") }),
-          max_size && /* @__PURE__ */ jsxs18("p", { className: "text-xs text-gray-400", children: [
+          max_size && /* @__PURE__ */ jsxs19("p", { className: "text-xs text-gray-400", children: [
             "Max ",
             formatSize(max_size)
           ] }),
@@ -1355,14 +1371,14 @@ function FileUploadOverlay({ data, onDismiss }) {
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsx20("div", { className: "space-y-2 mb-4", children: files.map((file, i) => /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between py-1.5 px-3 bg-gray-50 rounded-lg", children: [
-      /* @__PURE__ */ jsxs18("div", { className: "min-w-0", children: [
+    files.length > 0 && /* @__PURE__ */ jsx20("div", { className: "space-y-2 mb-4", children: files.map((file, i) => /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between py-1.5 px-3 bg-gray-50 rounded-lg", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx20("p", { className: "text-sm text-gray-700 truncate", children: file.name }),
         /* @__PURE__ */ jsx20("p", { className: "text-xs text-gray-400", children: formatSize(file.size) })
       ] }),
       /* @__PURE__ */ jsx20("button", { onClick: () => removeFile(i), className: "text-gray-400 hover:text-red-500 text-sm ml-2", children: "\xD7" })
     ] }, i)) }),
-    /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 justify-end", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex gap-2 justify-end", children: [
       files.length > 0 && /* @__PURE__ */ jsx20(
         "button",
         {
@@ -1384,27 +1400,40 @@ function FileUploadOverlay({ data, onDismiss }) {
 }
 
 // src/components/AvatarFirst.tsx
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 var defaultOverlays = {
   card: CardOverlay,
+  card_list: CardOverlay,
+  detail: DetailCardOverlay,
+  detail_card: DetailCardOverlay,
   form: FormOverlay,
   table: TableOverlay,
   progress: ProgressOverlay,
   confirm: ConfirmOverlay,
   chat: ChatOverlay,
-  insight: InsightOverlay
+  insight: InsightOverlay,
+  comparison: ComparisonOverlay,
+  calendar: CalendarOverlay,
+  media: MediaOverlay,
+  map: MapOverlay,
+  rich_text: RichTextOverlay,
+  chart: ChartOverlay,
+  file_upload: FileUploadOverlay
 };
 function AvatarFirstInner({
   client,
+  onContainer,
+  onActions,
   onOverlay,
   onAction
 }) {
   const { state: avatarState, speak } = useAvatar();
-  const { show } = useOverlay();
+  const { show, hide } = useOverlay();
   const [sessionId, setSessionId] = useState7(null);
   const [greeting, setGreeting] = useState7(null);
   const [hasGreeted, setHasGreeted] = useState7(false);
   const [isProcessing, setIsProcessing] = useState7(false);
+  const activeContainerRef = useRef4(null);
   useEffect5(() => {
     if (avatarState === "connected" && !sessionId) {
       client.createSession().then((session) => {
@@ -1421,28 +1450,98 @@ function AvatarFirstInner({
       speak(greeting);
     }
   }, [sessionId, avatarState, greeting, hasGreeted, speak]);
+  const applyContainerAction = useCallback7((ui) => {
+    if (!ui) return;
+    switch (ui.action) {
+      case "show": {
+        const position = ui.position === "modal" ? "center" : "chest";
+        const animation = ui.position === "modal" ? "fade" : "slide-up";
+        show({
+          id: ui.id,
+          component: ui.type,
+          data: {
+            ...ui.data,
+            title: ui.title,
+            intents: ui.intents
+          },
+          position,
+          animation,
+          dismissOnClickOutside: ui.dismissible ?? true
+        });
+        activeContainerRef.current = ui;
+        onContainer?.(ui);
+        break;
+      }
+      case "update": {
+        if (activeContainerRef.current) {
+          const updated = {
+            ...activeContainerRef.current,
+            data: { ...activeContainerRef.current.data, ...ui.data }
+          };
+          show({
+            id: updated.id,
+            component: updated.type,
+            data: {
+              ...updated.data,
+              title: updated.title,
+              intents: updated.intents
+            },
+            position: updated.position === "modal" ? "center" : "chest",
+            animation: "none",
+            dismissOnClickOutside: updated.dismissible ?? true
+          });
+          activeContainerRef.current = updated;
+        }
+        onContainer?.(ui);
+        break;
+      }
+      case "dismiss": {
+        hide(ui.id ?? activeContainerRef.current?.id);
+        activeContainerRef.current = null;
+        onContainer?.(ui);
+        break;
+      }
+    }
+  }, [show, hide, onContainer]);
   const handleResponse = useCallback7((data) => {
     if (data.speech) {
       speak(data.speech);
     }
-    if (data.overlay) {
+    if (data.ui) {
+      applyContainerAction(data.ui);
+    } else if (data.overlay) {
       const overlayId = `overlay-${Date.now()}`;
       show({
         id: overlayId,
         component: data.overlay.type,
-        data: data.overlay.data,
-        position: "right-center",
-        animation: "slide-left",
+        data: data.overlay.data ?? {},
+        position: "chest",
+        animation: "slide-up",
         dismissOnClickOutside: true
       });
       onOverlay?.(data.overlay);
     }
-    if (data.actions) {
-      for (const action of data.actions) {
-        onAction?.(action);
+    if (data.actions && data.actions.length > 0) {
+      onActions?.(data.actions);
+      if (onAction) {
+        for (const action of data.actions) {
+          onAction({ type: action.intent, payload: action.data });
+        }
       }
     }
-  }, [speak, show, onOverlay, onAction]);
+  }, [speak, applyContainerAction, show, onOverlay, onActions, onAction]);
+  const handleIntent = useCallback7(async (intent) => {
+    if (!sessionId || isProcessing) return;
+    setIsProcessing(true);
+    try {
+      const response = await client.sendIntent(sessionId, intent);
+      handleResponse(response);
+    } catch (err) {
+      console.error("[AvatarFirst] Intent failed:", err);
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [client, sessionId, isProcessing, handleResponse]);
   const handleSend = useCallback7(async (text) => {
     if (!sessionId || isProcessing) return;
     setIsProcessing(true);
@@ -1456,7 +1555,7 @@ function AvatarFirstInner({
     }
   }, [client, sessionId, isProcessing, handleResponse]);
   const isConnected = avatarState === "connected" || avatarState === "speaking" || avatarState === "listening" || avatarState === "thinking";
-  return /* @__PURE__ */ jsxs19("div", { className: "relative w-full h-full", children: [
+  return /* @__PURE__ */ jsxs20("div", { className: "relative w-full h-full", children: [
     /* @__PURE__ */ jsx21(AvatarView, { size: "fullscreen", showStatus: false, className: "w-full h-full" }),
     isConnected && sessionId && /* @__PURE__ */ jsx21("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-20 w-full max-w-md px-4", children: /* @__PURE__ */ jsx21(
       "form",
@@ -1481,7 +1580,7 @@ function AvatarFirstInner({
         )
       }
     ) }),
-    !isConnected && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 flex items-center justify-center bg-slate-950/80 z-30", children: /* @__PURE__ */ jsxs19("div", { className: "text-center", children: [
+    !isConnected && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 flex items-center justify-center bg-slate-950/80 z-30", children: /* @__PURE__ */ jsxs20("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx21("div", { className: "w-12 h-12 border-2 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" }),
       /* @__PURE__ */ jsx21("p", { className: "text-white/60 text-sm", children: "Connecting..." })
     ] }) })
@@ -1490,6 +1589,8 @@ function AvatarFirstInner({
 function AvatarFirst({
   apiKey,
   baseUrl,
+  onContainer,
+  onActions,
   onOverlay,
   onAction,
   onStateChange,
@@ -1548,7 +1649,7 @@ function AvatarFirst({
   }, [agent]);
   if (error || !agent) {
     if (error) {
-      return /* @__PURE__ */ jsx21("div", { className: `flex items-center justify-center bg-slate-950 ${className || ""}`, children: /* @__PURE__ */ jsxs19("div", { className: "text-center", children: [
+      return /* @__PURE__ */ jsx21("div", { className: `flex items-center justify-center bg-slate-950 ${className || ""}`, children: /* @__PURE__ */ jsxs20("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx21("p", { className: "text-red-400 mb-2 text-sm", children: "Failed to connect" }),
         /* @__PURE__ */ jsx21(
           "button",
@@ -1562,9 +1663,18 @@ function AvatarFirst({
     }
     return /* @__PURE__ */ jsx21("div", { className: `flex items-center justify-center bg-slate-950 ${className || ""}`, children: /* @__PURE__ */ jsx21("div", { className: "w-12 h-12 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" }) });
   }
-  return /* @__PURE__ */ jsx21("div", { className, children: /* @__PURE__ */ jsxs19(AvatarProvider, { agent, autoStart: true, children: [
+  return /* @__PURE__ */ jsx21("div", { className, children: /* @__PURE__ */ jsxs20(AvatarProvider, { agent, autoStart: true, children: [
     /* @__PURE__ */ jsx21(OverlayContainer, { components: mergedOverlays }),
-    /* @__PURE__ */ jsx21(AvatarFirstInner, { client, onOverlay, onAction })
+    /* @__PURE__ */ jsx21(
+      AvatarFirstInner,
+      {
+        client,
+        onContainer,
+        onActions,
+        onOverlay,
+        onAction
+      }
+    )
   ] }) });
 }