@avatarfirst/react 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -270,7 +280,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);
@@ -307,6 +317,7 @@ function useAvatarFirst(options) {
 }
 
 // src/components/overlays/OverlayContainer.tsx
+var import_react8 = __toESM(require("react"), 1);
 var import_framer_motion = require("framer-motion");
 
 // src/animations/overlayAnimations.ts
@@ -380,6 +391,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":
@@ -403,29 +416,42 @@ function OverlayContainer({ components }) {
     if (!Component) return null;
     const variants = getOverlayVariants(overlay.animation);
     const positionStyle = getPositionStyles(overlay.position);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_framer_motion.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__ */ (0, import_jsx_runtime2.jsx)(
-          Component,
-          {
-            data: overlay.data,
-            overlayId: overlay.id,
-            onDismiss: () => hide(overlay.id)
-          }
-        )
-      },
-      overlay.id
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react8.default.Fragment, { children: [
+      overlay.position === "center" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_framer_motion.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__ */ (0, import_jsx_runtime2.jsx)(
+        import_framer_motion.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__ */ (0, import_jsx_runtime2.jsx)(
+            Component,
+            {
+              data: overlay.data,
+              overlayId: overlay.id,
+              onDismiss: () => hide(overlay.id)
+            }
+          )
+        },
+        `content-${overlay.id}`
+      )
+    ] }, overlay.id);
   }) }) });
 }
 
@@ -444,11 +470,11 @@ function AvatarAgent({
 }
 
 // src/components/AvatarFirst.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_core2 = require("@avatarfirst/core");
 
 // src/components/AvatarView.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_framer_motion3 = require("framer-motion");
 
 // src/components/AvatarFallback.tsx
@@ -588,8 +614,8 @@ var sizeClasses = {
 };
 function AvatarView({ size = "medium", showStatus = true, className = "" }) {
   const { state, attachVideoElement } = useAvatar();
-  const videoRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const videoRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     if (videoRef.current) {
       attachVideoElement(videoRef.current);
     }
@@ -694,11 +720,11 @@ function CardOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/FormOverlay.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function FormOverlay({ data, onDismiss }) {
   const { title, fields = [], submitLabel = "Submit", onSubmit } = data ?? {};
-  const [values, setValues] = (0, import_react9.useState)({});
+  const [values, setValues] = (0, import_react10.useState)({});
   const handleSubmit = (e) => {
     e.preventDefault();
     onSubmit?.(values);
@@ -843,13 +869,13 @@ function ConfirmOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/ChatOverlay.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_framer_motion4 = require("framer-motion");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function ChatOverlay({ data, onDismiss }) {
   const { title = "Chat", messages: initialMessages = [], suggestions = [] } = data ?? {};
-  const [messages, setMessages] = (0, import_react10.useState)(initialMessages);
-  const [input, setInput] = (0, import_react10.useState)("");
+  const [messages, setMessages] = (0, import_react11.useState)(initialMessages);
+  const [input, setInput] = (0, import_react11.useState)("");
   const { speak } = useAvatar();
   const handleSend = async () => {
     if (!input.trim()) return;
@@ -1047,13 +1073,13 @@ function ComparisonOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/CalendarOverlay.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function CalendarOverlay({ data, onDismiss }) {
   const { title, available_slots, onSelect } = data ?? {};
-  const [selectedDate, setSelectedDate] = (0, import_react11.useState)(null);
-  const [selectedSlot, setSelectedSlot] = (0, import_react11.useState)(null);
-  const groupedSlots = (0, import_react11.useMemo)(() => {
+  const [selectedDate, setSelectedDate] = (0, import_react12.useState)(null);
+  const [selectedSlot, setSelectedSlot] = (0, import_react12.useState)(null);
+  const groupedSlots = (0, import_react12.useMemo)(() => {
     if (!available_slots) return /* @__PURE__ */ new Map();
     const groups = /* @__PURE__ */ new Map();
     for (const slot of available_slots) {
@@ -1200,7 +1226,7 @@ function MapOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/RichTextOverlay.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime18 = require("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>');
@@ -1208,7 +1234,7 @@ function parseMarkdown(md) {
 }
 function RichTextOverlay({ data, onDismiss }) {
   const { title, content } = data ?? {};
-  const html = (0, import_react12.useMemo)(() => content ? parseMarkdown(content) : "", [content]);
+  const html = (0, import_react13.useMemo)(() => content ? parseMarkdown(content) : "", [content]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "bg-white rounded-2xl shadow-2xl p-6 min-w-[320px] max-w-lg", children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "text-lg font-semibold mb-4", children: title }),
     html && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -1330,7 +1356,7 @@ function ChartOverlay({ data, onDismiss }) {
 }
 
 // src/components/overlays/FileUploadOverlay.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var MIME_MAP = {
   pdf: "application/pdf",
@@ -1351,11 +1377,11 @@ function formatSize(bytes) {
 }
 function FileUploadOverlay({ data, onDismiss }) {
   const { title, accept, max_size, multiple, onUpload } = data ?? {};
-  const inputRef = (0, import_react13.useRef)(null);
-  const [files, setFiles] = (0, import_react13.useState)([]);
-  const [dragging, setDragging] = (0, import_react13.useState)(false);
+  const inputRef = (0, import_react14.useRef)(null);
+  const [files, setFiles] = (0, import_react14.useState)([]);
+  const [dragging, setDragging] = (0, import_react14.useState)(false);
   const acceptMime = accept?.map((ext) => MIME_MAP[ext.toLowerCase()] ?? `.${ext}`).join(",");
-  const addFiles = (0, import_react13.useCallback)((newFiles) => {
+  const addFiles = (0, import_react14.useCallback)((newFiles) => {
     if (!newFiles) return;
     const arr = Array.from(newFiles).filter((f) => {
       if (max_size && f.size > max_size) return false;
@@ -1443,25 +1469,38 @@ function FileUploadOverlay({ data, onDismiss }) {
 var import_jsx_runtime21 = require("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 [sessionId, setSessionId] = (0, import_react14.useState)(null);
-  const [greeting, setGreeting] = (0, import_react14.useState)(null);
-  const [hasGreeted, setHasGreeted] = (0, import_react14.useState)(false);
-  const [isProcessing, setIsProcessing] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  const { show, hide } = useOverlay();
+  const [sessionId, setSessionId] = (0, import_react15.useState)(null);
+  const [greeting, setGreeting] = (0, import_react15.useState)(null);
+  const [hasGreeted, setHasGreeted] = (0, import_react15.useState)(false);
+  const [isProcessing, setIsProcessing] = (0, import_react15.useState)(false);
+  const activeContainerRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
     if (avatarState === "connected" && !sessionId) {
       client.createSession().then((session) => {
         setSessionId(session.sessionId);
@@ -1471,35 +1510,105 @@ function AvatarFirstInner({
       });
     }
   }, [avatarState, sessionId, client]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (sessionId && avatarState === "connected" && greeting && !hasGreeted) {
       setHasGreeted(true);
       speak(greeting);
     }
   }, [sessionId, avatarState, greeting, hasGreeted, speak]);
-  const handleResponse = (0, import_react14.useCallback)((data) => {
+  const applyContainerAction = (0, import_react15.useCallback)((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 = (0, import_react15.useCallback)((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]);
-  const handleSend = (0, import_react14.useCallback)(async (text) => {
+  }, [speak, applyContainerAction, show, onOverlay, onActions, onAction]);
+  const handleIntent = (0, import_react15.useCallback)(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 = (0, import_react15.useCallback)(async (text) => {
     if (!sessionId || isProcessing) return;
     setIsProcessing(true);
     try {
@@ -1546,25 +1655,27 @@ function AvatarFirstInner({
 function AvatarFirst({
   apiKey,
   baseUrl,
+  onContainer,
+  onActions,
   onOverlay,
   onAction,
   onStateChange,
   className,
   overlayComponents
 }) {
-  const [agent, setAgent] = (0, import_react14.useState)(null);
-  const [error, setError] = (0, import_react14.useState)(false);
-  const client = (0, import_react14.useMemo)(
+  const [agent, setAgent] = (0, import_react15.useState)(null);
+  const [error, setError] = (0, import_react15.useState)(false);
+  const client = (0, import_react15.useMemo)(
     () => new import_core2.AvatarFirstClient({ apiKey, baseUrl }),
     [apiKey, baseUrl]
   );
-  const mergedOverlays = (0, import_react14.useMemo)(
+  const mergedOverlays = (0, import_react15.useMemo)(
     () => ({ ...defaultOverlays, ...overlayComponents }),
     [overlayComponents]
   );
-  const onStateChangeRef = (0, import_react14.useRef)(onStateChange);
+  const onStateChangeRef = (0, import_react15.useRef)(onStateChange);
   onStateChangeRef.current = onStateChange;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     let cancelled = false;
     async function init() {
       try {
@@ -1597,7 +1708,7 @@ function AvatarFirst({
       cancelled = true;
     };
   }, [client, baseUrl]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     return () => {
       agent?.destroy();
     };
@@ -1620,7 +1731,16 @@ function AvatarFirst({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(AvatarProvider, { agent, autoStart: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(OverlayContainer, { components: mergedOverlays }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AvatarFirstInner, { client, onOverlay, onAction })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      AvatarFirstInner,
+      {
+        client,
+        onContainer,
+        onActions,
+        onOverlay,
+        onAction
+      }
+    )
   ] }) });
 }
 

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import * as _avatarfirst_core from '@avatarfirst/core';
-import { AvatarAgent as AvatarAgent$1, AvatarState, OverlayInstance, OverlayConfig, AvatarEngineEvents, AvatarFirstClientConfig, MessageResponse, SessionResponse, OverlayAnimation } from '@avatarfirst/core';
+import { AvatarAgent as AvatarAgent$1, AvatarState, OverlayInstance, OverlayConfig, AvatarEngineEvents, AvatarFirstClientConfig, MessageResponse, SessionResponse, ContainerAction, ActionButton, OverlayAnimation } from '@avatarfirst/core';
 import { Variants } from 'framer-motion';
 import { ClassValue } from 'clsx';
 
@@ -108,6 +108,11 @@ declare function AvatarAgent({ config, overlayComponents, autoStart, children, }
 interface AvatarFirstProps {
     apiKey: string;
     baseUrl?: string;
+    /** Called when a container is shown (new AFAP ui field) */
+    onContainer?: (container: ContainerAction) => void;
+    /** Called when action buttons are returned */
+    onActions?: (actions: ActionButton[]) => void;
+    /** @deprecated Use onContainer instead */
     onOverlay?: (overlay: MessageResponse['overlay']) => void;
     onAction?: (action: {
         type: string;
@@ -129,7 +134,7 @@ interface AvatarFirstProps {
  * }
  * ```
  */
-declare function AvatarFirst({ apiKey, baseUrl, onOverlay, onAction, onStateChange, className, overlayComponents, }: AvatarFirstProps): react_jsx_runtime.JSX.Element;
+declare function AvatarFirst({ apiKey, baseUrl, onContainer, onActions, onOverlay, onAction, onStateChange, className, overlayComponents, }: AvatarFirstProps): react_jsx_runtime.JSX.Element;
 
 interface AvatarViewProps {
     /** Display size */

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import * as _avatarfirst_core from '@avatarfirst/core';
-import { AvatarAgent as AvatarAgent$1, AvatarState, OverlayInstance, OverlayConfig, AvatarEngineEvents, AvatarFirstClientConfig, MessageResponse, SessionResponse, OverlayAnimation } from '@avatarfirst/core';
+import { AvatarAgent as AvatarAgent$1, AvatarState, OverlayInstance, OverlayConfig, AvatarEngineEvents, AvatarFirstClientConfig, MessageResponse, SessionResponse, ContainerAction, ActionButton, OverlayAnimation } from '@avatarfirst/core';
 import { Variants } from 'framer-motion';
 import { ClassValue } from 'clsx';
 
@@ -108,6 +108,11 @@ declare function AvatarAgent({ config, overlayComponents, autoStart, children, }
 interface AvatarFirstProps {
     apiKey: string;
     baseUrl?: string;
+    /** Called when a container is shown (new AFAP ui field) */
+    onContainer?: (container: ContainerAction) => void;
+    /** Called when action buttons are returned */
+    onActions?: (actions: ActionButton[]) => void;
+    /** @deprecated Use onContainer instead */
     onOverlay?: (overlay: MessageResponse['overlay']) => void;
     onAction?: (action: {
         type: string;
@@ -129,7 +134,7 @@ interface AvatarFirstProps {
  * }
  * ```
  */
-declare function AvatarFirst({ apiKey, baseUrl, onOverlay, onAction, onStateChange, className, overlayComponents, }: AvatarFirstProps): react_jsx_runtime.JSX.Element;
+declare function AvatarFirst({ apiKey, baseUrl, onContainer, onActions, onOverlay, onAction, onStateChange, className, overlayComponents, }: AvatarFirstProps): react_jsx_runtime.JSX.Element;
 
 interface AvatarViewProps {
     /** Display size */