@meridial/react 0.1.0 → 0.1.1

package/dist/{chunk-WCRZUGN4.js → chunk-BWBGNRKO.js}

@@ -19,7 +19,7 @@ import {
   useMergedRefs,
   useRenderElement,
   useStableCallback
-} from "./chunk-QCWLFL7O.js";
+} from "./chunk-PRTYKFO3.js";
 
 // src/voicebox.tsx
 import {
@@ -35,7 +35,7 @@ import {
   useRef as useRef6,
   useState as useState9,
   useMemo as useMemo5,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useCallback as useCallback5
 } from "react";
 import { ChatFeedback01Icon, Loading03Icon as Loading03Icon3 } from "@hugeicons/core-free-icons";
@@ -1015,7 +1015,7 @@ function StartAudioButton({
 }
 
 // src/components/workflow-execution.tsx
-import { useState as useState7, useCallback as useCallback4, useRef as useRef5 } from "react";
+import { useState as useState7, useCallback as useCallback4, useEffect as useEffect5, useRef as useRef5 } from "react";
 import { createPortal } from "react-dom";
 import {
   motion,
@@ -1035,8 +1035,10 @@ var SPRING_CONFIG = { stiffness: 120, damping: 20, mass: 0.8 };
 var CURSOR_OFFSET = 16;
 function WorkflowExecution({
   workflow,
+  attribute = "data-meridial-id",
   cursor,
   onClose,
+  onStepChange,
   onError
 }) {
   const [currentIndex, setCurrentIndex] = useState7(0);
@@ -1044,6 +1046,9 @@ function WorkflowExecution({
   const currentStep = steps[currentIndex];
   const isFirstStep = currentIndex === 0;
   const isLastStep = currentIndex === steps.length - 1;
+  useEffect5(() => {
+    onStepChange?.(currentIndex);
+  }, [currentIndex, onStepChange]);
   const handleBack = useCallback4(() => {
     setCurrentIndex((prev) => Math.max(0, prev - 1));
   }, []);
@@ -1065,6 +1070,7 @@ function WorkflowExecution({
       totalSteps: steps.length,
       isFirstStep,
       isLastStep,
+      attribute,
       cursor,
       onBack: handleBack,
       onNext: handleNext,
@@ -1078,13 +1084,15 @@ function ExecutionOverlay({
   totalSteps,
   isFirstStep,
   isLastStep,
+  attribute,
   cursor,
   onBack,
   onNext,
   onError
 }) {
+  const cssSelector = `[${attribute}="${step.elementId}"]`;
   const { rect } = useElementTracker({
-    selector: step.elementId,
+    selector: cssSelector,
     urlPath: step.urlPath,
     onError: onError ? (msg) => {
       if (msg !== null) onError(msg);
@@ -1368,21 +1376,16 @@ import { HugeiconsIcon as HugeiconsIcon6 } from "@hugeicons/react";
 import {
   Call02Icon,
   ViewOffSlashIcon,
-  ArrowDown01Icon,
-  PlayIcon
+  PlayIcon,
+  Cancel01Icon,
+  StarIcon
 } from "@hugeicons/core-free-icons";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var POSITIONS = [
-  "top-left",
-  "top-right",
-  "bottom-left",
-  "bottom-right"
-];
 var POSITION_LABELS = {
-  "top-left": "TL",
-  "top-right": "TR",
-  "bottom-left": "BL",
-  "bottom-right": "BR"
+  "top-left": "Top Left",
+  "top-right": "Top Right",
+  "bottom-left": "Bottom Left",
+  "bottom-right": "Bottom Right"
 };
 var MENU_PLACEMENT = {
   "bottom-right": {
@@ -1407,22 +1410,31 @@ var MENU_PLACEMENT = {
   }
 };
 function VoiceboxMenu({
-  favoriteWorkflows,
+  workflows,
   position,
+  playingWorkflowId,
+  playingStepIndex = 0,
   onPositionChange,
   onHide,
   onAskMeridial,
-  onPlayGuide
+  onPlayGuide,
+  onAbortGuide
 }) {
   const placement = MENU_PLACEMENT[position];
-  const [guidesExpanded, setGuidesExpanded] = useState8(false);
-  const hasFavorites = favoriteWorkflows.length > 0;
+  const [activeTab, setActiveTab] = useState8("settings");
+  const sortedWorkflows = [...workflows].sort((a, b) => {
+    if (a.isFavorite && !b.isFavorite) return -1;
+    if (!a.isFavorite && b.isFavorite) return 1;
+    return 0;
+  });
   return /* @__PURE__ */ jsxs7(
     motion2.div,
     {
       "data-meridial-ui": true,
+      onClick: (e) => e.stopPropagation(),
       className: cn(
-        "absolute z-50 w-56 overflow-hidden rounded-lg border border-border bg-card shadow-lg",
+        "absolute z-50 w-72 overflow-hidden rounded-lg border border-border bg-card shadow-lg",
+        "[&::-webkit-scrollbar]:hidden scrollbar-none",
         placement.className
       ),
       initial: { opacity: 0, scale: 0.9 },
@@ -1433,108 +1445,173 @@ function VoiceboxMenu({
       },
       transition: { duration: 0.15, ease: "easeOut" },
       children: [
-        hasFavorites && /* @__PURE__ */ jsxs7("div", { "data-meridial-ui": true, className: "border-b border-border", children: [
-          /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs7("div", { "data-meridial-ui": true, className: "flex border-b border-border", children: [
+          /* @__PURE__ */ jsx12(
             "button",
             {
               "data-meridial-ui": true,
-              onClick: () => setGuidesExpanded((prev) => !prev),
-              className: "flex w-full cursor-pointer items-center justify-between px-3 py-2",
-              children: [
-                /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium tracking-wider text-muted-foreground", children: "Top Guides" }),
+              onClick: () => setActiveTab("settings"),
+              className: cn(
+                "flex-1 cursor-pointer px-3 py-2 text-xs font-medium tracking-wider transition-colors",
+                activeTab === "settings" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: "Settings"
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              "data-meridial-ui": true,
+              onClick: () => setActiveTab("guides"),
+              className: cn(
+                "flex-1 cursor-pointer px-3 py-2 text-xs font-medium tracking-wider transition-colors",
+                activeTab === "guides" ? "border-b-2 border-primary text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: "Guides"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx12(AnimatePresence2, { mode: "wait", children: activeTab === "settings" ? /* @__PURE__ */ jsxs7(
+          motion2.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.1 },
+            className: "flex flex-col gap-0 h-[200px]",
+            children: [
+              /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  "data-meridial-ui": true,
+                  className: "border-b border-border px-3 py-2.5",
+                  children: [
+                    /* @__PURE__ */ jsx12("span", { className: "mb-1.5 block text-xs font-medium tracking-wider text-muted-foreground", children: "Position" }),
+                    /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-2 gap-1", children: Object.entries(POSITION_LABELS).map(([pos, label]) => /* @__PURE__ */ jsx12(
+                      "button",
+                      {
+                        "data-meridial-ui": true,
+                        onClick: () => onPositionChange(pos),
+                        className: cn(
+                          "cursor-pointer rounded px-2 py-1.5 text-xs font-medium transition-colors",
+                          pos === position ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"
+                        ),
+                        children: label
+                      },
+                      pos
+                    )) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between border-b border-border px-3 py-2.5", children: [
+                /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium tracking-wider text-muted-foreground", children: "Hide Until Next Visit" }),
                 /* @__PURE__ */ jsx12(
-                  HugeiconsIcon6,
+                  Button,
                   {
-                    icon: ArrowDown01Icon,
-                    size: 14,
-                    className: cn(
-                      "shrink-0 text-muted-foreground transition-transform duration-200",
-                      guidesExpanded && "rotate-180"
+                    variant: "ghost",
+                    size: "sm",
+                    "data-meridial-ui": true,
+                    onClick: onHide,
+                    children: /* @__PURE__ */ jsx12(
+                      HugeiconsIcon6,
+                      {
+                        icon: ViewOffSlashIcon,
+                        size: 16,
+                        className: "shrink-0"
+                      }
                     )
                   }
                 )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx12(AnimatePresence2, { initial: false, children: guidesExpanded && /* @__PURE__ */ jsx12(
-            motion2.div,
-            {
-              initial: { height: 0, opacity: 0 },
-              animate: { height: "auto", opacity: 1 },
-              exit: { height: 0, opacity: 0 },
-              transition: { duration: 0.15, ease: "easeOut" },
-              style: { overflow: "hidden" },
-              children: /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-0.5 px-3 pb-2", children: favoriteWorkflows.map((wf) => /* @__PURE__ */ jsxs7(
-                "button",
+              ] }),
+              /* @__PURE__ */ jsx12("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ jsxs7(
+                Button,
                 {
                   "data-meridial-ui": true,
-                  onClick: () => onPlayGuide(wf),
-                  className: "flex w-full cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-left text-sm text-foreground hover:bg-muted/50",
+                  onClick: onAskMeridial,
+                  variant: "default",
+                  className: "w-full",
                   children: [
                     /* @__PURE__ */ jsx12(
                       HugeiconsIcon6,
                       {
-                        icon: PlayIcon,
+                        icon: Call02Icon,
                         size: 16,
-                        className: "shrink-0 text-primary fill-primary/60"
+                        className: "shrink-0"
                       }
                     ),
-                    /* @__PURE__ */ jsx12("span", { className: "truncate", children: wf.name })
+                    "Ask For Help"
+                  ]
+                }
+              ) })
+            ]
+          },
+          "settings"
+        ) : /* @__PURE__ */ jsx12(
+          motion2.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.1 },
+            className: "h-[200px] overflow-y-auto",
+            children: sortedWorkflows.length === 0 ? /* @__PURE__ */ jsx12("div", { className: "flex h-full items-center justify-center text-xs text-muted-foreground", children: "No guides available" }) : /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-0.5 p-2", children: sortedWorkflows.map((wf) => {
+              const isPlaying = wf.id === playingWorkflowId;
+              const totalSteps = wf.steps.length;
+              const progressPercent = isPlaying && totalSteps > 0 ? (playingStepIndex + 1) / totalSteps * 100 : 0;
+              return /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  "data-meridial-ui": true,
+                  className: "relative overflow-hidden rounded-md px-3 py-2 hover:bg-muted",
+                  children: [
+                    isPlaying && /* @__PURE__ */ jsx12(
+                      "div",
+                      {
+                        className: "absolute inset-0 bg-primary/10 transition-[width] duration-300 ease-out",
+                        style: { width: `${progressPercent}%` }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs7("div", { className: "relative flex items-start gap-2", children: [
+                      /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+                          wf.isFavorite && /* @__PURE__ */ jsx12(
+                            HugeiconsIcon6,
+                            {
+                              icon: StarIcon,
+                              size: 12,
+                              className: "shrink-0 fill-amber-400 text-amber-400"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx12("span", { className: "line-clamp-1 text-sm font-medium text-foreground", children: wf.name })
+                        ] }),
+                        wf.description && /* @__PURE__ */ jsx12("p", { className: "line-clamp-2 mt-0.5 text-xs text-muted-foreground", children: wf.description })
+                      ] }),
+                      /* @__PURE__ */ jsx12(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          "data-meridial-ui": true,
+                          onClick: () => isPlaying ? onAbortGuide() : onPlayGuide(wf),
+                          children: /* @__PURE__ */ jsx12(
+                            HugeiconsIcon6,
+                            {
+                              icon: isPlaying ? Cancel01Icon : PlayIcon,
+                              size: 16,
+                              className: isPlaying ? "" : "fill-primary/60 text-primary"
+                            }
+                          )
+                        }
+                      )
+                    ] })
                   ]
                 },
                 wf.id
-              )) })
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs7("div", { "data-meridial-ui": true, className: "border-b border-border px-3 py-2", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium tracking-wider text-muted-foreground", children: "Position" }),
-          /* @__PURE__ */ jsx12("div", { className: "mt-1 grid grid-cols-4 gap-1", children: POSITIONS.map((pos) => /* @__PURE__ */ jsx12(
-            "button",
-            {
-              "data-meridial-ui": true,
-              onClick: () => onPositionChange(pos),
-              className: cn(
-                "cursor-pointer rounded px-2 py-1 text-xs font-medium transition-colors",
-                pos === position ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"
-              ),
-              children: POSITION_LABELS[pos]
-            },
-            pos
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "px-3 py-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Hide Until Next Visit" }),
-          /* @__PURE__ */ jsx12(Button, { variant: "ghost", size: "sm", "data-meridial-ui": true, onClick: onHide, children: /* @__PURE__ */ jsx12(
-            HugeiconsIcon6,
-            {
-              icon: ViewOffSlashIcon,
-              size: 16,
-              className: "shrink-0"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx12(Separator, {}),
-        /* @__PURE__ */ jsxs7("div", { className: "px-3 py-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium tracking-wider text-muted-foreground", children: "Ask For Help" }),
-          /* @__PURE__ */ jsx12(
-            Button,
-            {
-              "data-meridial-ui": true,
-              onClick: onAskMeridial,
-              variant: "ghost",
-              size: "sm",
-              children: /* @__PURE__ */ jsx12(
-                HugeiconsIcon6,
-                {
-                  icon: Call02Icon,
-                  size: 16,
-                  className: "shrink-0 fill-primary/60 text-primary"
-                }
-              )
-            }
-          )
-        ] })
+              );
+            }) })
+          },
+          "guides"
+        ) })
       ]
     }
   );
@@ -1548,12 +1625,6 @@ var BADGE_POSITION_CLASSES = {
   "top-right": "right-6 top-6",
   "top-left": "left-6 top-6"
 };
-var BAR_POSITION_CLASSES = {
-  "bottom-right": "right-4 bottom-4",
-  "bottom-left": "left-4 bottom-4",
-  "top-right": "right-4 top-4",
-  "top-left": "left-4 top-4"
-};
 function VoiceboxBadge({
   triggerIcon,
   onClick
@@ -1572,9 +1643,9 @@ function VoiceboxBadge({
 function VoiceboxContent({
   baseUrl,
   publishableKey,
+  attribute,
   tools,
   cursor,
-  barPosition,
   initialWorkflow,
   onDisconnect,
   onError
@@ -1610,7 +1681,7 @@ function VoiceboxContent({
   );
   useToolRegistration(tools, triggerOutcomeBar);
   useDraggable(draggableRef);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!publishableKey) return;
     fetch(`${baseUrl}/api/workflows`, {
       headers: { Authorization: `Bearer ${publishableKey}` }
@@ -1622,7 +1693,7 @@ function VoiceboxContent({
       );
     });
   }, [baseUrl, publishableKey]);
-  useEffect5(() => {
+  useEffect6(() => {
     room.registerRpcMethod("workflow:execute", async (rpcData) => {
       try {
         const { slug } = JSON.parse(rpcData.payload);
@@ -1654,7 +1725,7 @@ function VoiceboxContent({
   }, [room]);
   const { state } = useAgent();
   const { start } = useSessionContext3();
-  useEffect5(() => {
+  useEffect6(() => {
     if (!autoStarted.current) {
       autoStarted.current = true;
       start();
@@ -1671,91 +1742,107 @@ function VoiceboxContent({
       WorkflowExecution,
       {
         workflow: activeWorkflow.workflow,
+        attribute,
         cursor,
-        onClose: () => setActiveWorkflow(null),
+        onClose: () => {
+          setActiveWorkflow(null);
+          triggerOutcomeBar();
+        },
         onError
       }
     ),
-    /* @__PURE__ */ jsxs8(
-      "div",
+    /* @__PURE__ */ jsx13(
+      motion3.div,
       {
-        ref: draggableRef,
-        "data-meridial-ui": true,
-        className: cn(
-          "fixed z-50 w-96 items-stretch rounded border border-border bg-card shadow-md",
-          BAR_POSITION_CLASSES[barPosition]
-        ),
-        children: [
-          /* @__PURE__ */ jsx13(AnimatePresence3, { initial: false, children: showTranscript && /* @__PURE__ */ jsx13(
-            motion3.div,
-            {
-              initial: { height: 0, opacity: 0 },
-              animate: { height: "auto", opacity: 1 },
-              exit: { height: 0, opacity: 0 },
-              transition: { duration: 0.24, ease: "easeOut" },
-              style: { overflow: "hidden" },
-              children: /* @__PURE__ */ jsx13(AgentTranscriptPanel, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsx13(AnimatePresence3, { initial: false, children: showOutcomeBar && /* @__PURE__ */ jsx13(
-            motion3.div,
-            {
-              initial: { height: 0, opacity: 0 },
-              animate: { height: "auto", opacity: 1 },
-              exit: { height: 0, opacity: 0 },
-              transition: { duration: 0.24, ease: "easeOut" },
-              style: { overflow: "hidden" },
-              children: /* @__PURE__ */ jsx13(OutcomeBar, { onSubmit: handleOutcomeSubmit })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs8("div", { "data-meridial-ui": true, className: "flex h-12 items-center", children: [
-            /* @__PURE__ */ jsx13(DragHandle, { className: "px-2" }),
-            /* @__PURE__ */ jsx13(Separator, { orientation: "vertical", className: "h-full" }),
-            /* @__PURE__ */ jsxs8("div", { className: "relative flex h-full flex-1 items-center justify-between px-2", children: [
-              /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx13(
-                  AgentTrackControl,
-                  {
-                    source: "microphone",
-                    pressed: microphoneToggle.enabled,
-                    pending: microphoneToggle.pending,
-                    disabled: microphoneToggle.pending,
-                    audioTrack: microphoneTrack,
-                    onPressedChange: microphoneToggle.toggle
-                  }
-                ),
-                /* @__PURE__ */ jsx13(
-                  Toggle3,
-                  {
-                    disabled: isDisconnected || isConnecting,
-                    pressed: showTranscript,
-                    "aria-label": "Toggle transcript",
-                    onPressedChange: setShowTranscript,
-                    className: cn(
-                      "size-9 rounded-lg",
-                      showTranscript ? "bg-muted text-foreground" : "bg-transparent text-muted-foreground hover:text-foreground"
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.3, ease: "easeOut" },
+        className: "fixed inset-x-0 bottom-8 z-50 flex justify-center",
+        children: /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            ref: draggableRef,
+            "data-meridial-ui": true,
+            className: "w-96 items-stretch rounded border border-border bg-card shadow-md",
+            children: [
+              /* @__PURE__ */ jsx13(AnimatePresence3, { initial: false, children: showTranscript && /* @__PURE__ */ jsx13(
+                motion3.div,
+                {
+                  initial: { height: 0, opacity: 0 },
+                  animate: { height: "auto", opacity: 1 },
+                  exit: { height: 0, opacity: 0 },
+                  transition: { duration: 0.24, ease: "easeOut" },
+                  style: { overflow: "hidden" },
+                  children: /* @__PURE__ */ jsx13(AgentTranscriptPanel, {})
+                }
+              ) }),
+              /* @__PURE__ */ jsx13(AnimatePresence3, { initial: false, children: showOutcomeBar && /* @__PURE__ */ jsx13(
+                motion3.div,
+                {
+                  initial: { height: 0, opacity: 0 },
+                  animate: { height: "auto", opacity: 1 },
+                  exit: { height: 0, opacity: 0 },
+                  transition: { duration: 0.24, ease: "easeOut" },
+                  style: { overflow: "hidden" },
+                  children: /* @__PURE__ */ jsx13(OutcomeBar, { onSubmit: handleOutcomeSubmit })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs8("div", { "data-meridial-ui": true, className: "flex h-12 items-center", children: [
+                /* @__PURE__ */ jsx13(DragHandle, { className: "px-2" }),
+                /* @__PURE__ */ jsx13(Separator, { orientation: "vertical", className: "h-full" }),
+                /* @__PURE__ */ jsxs8("div", { className: "relative flex h-full flex-1 items-center justify-between px-2", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx13(
+                      AgentTrackControl,
+                      {
+                        source: "microphone",
+                        pressed: microphoneToggle.enabled,
+                        pending: microphoneToggle.pending,
+                        disabled: microphoneToggle.pending,
+                        audioTrack: microphoneTrack,
+                        onPressedChange: microphoneToggle.toggle
+                      }
                     ),
-                    children: /* @__PURE__ */ jsx13(HugeiconsIcon7, { icon: ChatFeedback01Icon })
-                  }
-                ),
-                /* @__PURE__ */ jsx13(
-                  AgentAudioVisualizerBar,
-                  {
-                    barCount: 12,
-                    state,
-                    audioTrack: microphoneTrack,
-                    className: "mx-4"
-                  }
-                )
-              ] }),
-              isConnecting ? /* @__PURE__ */ jsxs8(Button, { variant: "outline", children: [
-                /* @__PURE__ */ jsx13("span", { children: "Connecting" }),
-                /* @__PURE__ */ jsx13(HugeiconsIcon7, { icon: Loading03Icon3, className: "animate-spin" })
-              ] }) : /* @__PURE__ */ jsx13(AgentDisconnectButton, { onClick: handleDisconnect }),
-              /* @__PURE__ */ jsx13(StartAudioButton, { label: "Start Audio" })
-            ] })
-          ] })
-        ]
+                    /* @__PURE__ */ jsx13(
+                      Toggle3,
+                      {
+                        disabled: isDisconnected || isConnecting,
+                        pressed: showTranscript,
+                        "aria-label": "Toggle transcript",
+                        onPressedChange: setShowTranscript,
+                        className: cn(
+                          "size-9 rounded-lg",
+                          showTranscript ? "bg-muted text-foreground" : "bg-transparent text-muted-foreground hover:text-foreground"
+                        ),
+                        children: /* @__PURE__ */ jsx13(HugeiconsIcon7, { icon: ChatFeedback01Icon })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx13(
+                      AgentAudioVisualizerBar,
+                      {
+                        barCount: 12,
+                        state,
+                        audioTrack: microphoneTrack,
+                        className: "mx-4"
+                      }
+                    )
+                  ] }),
+                  isConnecting ? /* @__PURE__ */ jsxs8(Button, { variant: "outline", children: [
+                    /* @__PURE__ */ jsx13("span", { children: "Connecting" }),
+                    /* @__PURE__ */ jsx13(
+                      HugeiconsIcon7,
+                      {
+                        icon: Loading03Icon3,
+                        className: "animate-spin"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsx13(AgentDisconnectButton, { onClick: handleDisconnect }),
+                  /* @__PURE__ */ jsx13(StartAudioButton, { label: "Start Audio" })
+                ] })
+              ] })
+            ]
+          }
+        )
       }
     )
   ] });
@@ -1764,6 +1851,7 @@ function Voicebox({
   baseUrl = "",
   publishableKey,
   identifier,
+  attribute,
   tools,
   triggerIcon,
   cursor,
@@ -1778,24 +1866,26 @@ function Voicebox({
     if (typeof window === "undefined") return "bottom-right";
     return localStorage.getItem(STORAGE_KEYS.triggerPos) || "bottom-right";
   });
-  const [favoriteWorkflows, setFavoriteWorkflows] = useState9([]);
+  const [allWorkflows, setAllWorkflows] = useState9([]);
   const [initialWorkflow, setInitialWorkflow] = useState9(null);
   const [guideWorkflow, setGuideWorkflow] = useState9(null);
-  useEffect5(() => {
+  const [playingWorkflowId, setPlayingWorkflowId] = useState9(
+    null
+  );
+  const [playingStepIndex, setPlayingStepIndex] = useState9(0);
+  useEffect6(() => {
     if (sessionStorage.getItem(STORAGE_KEYS.hidden) === "true") {
       setHidden(true);
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!publishableKey) return;
     fetch(`${baseUrl}/api/workflows`, {
       headers: { Authorization: `Bearer ${publishableKey}` }
     }).then((r) => r.json()).then((data) => {
       const parsed = apiWorkflowsResponseSchema.safeParse(data);
       if (parsed.success && parsed.data.workflows) {
-        setFavoriteWorkflows(
-          parsed.data.workflows.filter((w) => w.isFavorite)
-        );
+        setAllWorkflows(parsed.data.workflows);
       }
     }).catch(() => {
     });
@@ -1861,73 +1951,73 @@ function Voicebox({
       configured: true,
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     });
-    setView("guide");
+    setPlayingWorkflowId(wf.id);
+    setPlayingStepIndex(0);
+  };
+  const handleAbortGuide = () => {
+    setGuideWorkflow(null);
+    setPlayingWorkflowId(null);
+    setPlayingStepIndex(0);
   };
   const handleBadgeClick = () => {
     setView((prev) => prev === "menu" ? "badge" : "menu");
   };
   if (hidden) return null;
-  return /* @__PURE__ */ jsx13(AgentSessionProvider, { session, children: view === "call" ? /* @__PURE__ */ jsx13(
-    VoiceboxContent,
-    {
-      baseUrl,
-      publishableKey,
-      tools,
-      cursor,
-      barPosition: badgePosition,
-      initialWorkflow,
-      onDisconnect: handleDisconnect,
-      onError
-    }
-  ) : view === "guide" && guideWorkflow ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs8(AgentSessionProvider, { session, children: [
+    guideWorkflow && /* @__PURE__ */ jsx13(
       WorkflowExecution,
       {
         workflow: guideWorkflow,
+        attribute,
         cursor,
         onClose: () => {
           setGuideWorkflow(null);
-          setView("badge");
+          setPlayingWorkflowId(null);
+          setPlayingStepIndex(0);
         },
+        onStepChange: (index) => setPlayingStepIndex(index),
         onError
       }
     ),
-    /* @__PURE__ */ jsx13(
+    view === "call" ? /* @__PURE__ */ jsx13(
+      VoiceboxContent,
+      {
+        baseUrl,
+        publishableKey,
+        attribute,
+        tools,
+        cursor,
+        initialWorkflow,
+        onDisconnect: handleDisconnect,
+        onError
+      }
+    ) : /* @__PURE__ */ jsxs8(
       "div",
       {
         className: cn("fixed z-50", BADGE_POSITION_CLASSES[badgePosition]),
-        children: /* @__PURE__ */ jsx13(
-          VoiceboxBadge,
-          {
-            triggerIcon,
-            onClick: handleBadgeClick
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsx13(AnimatePresence3, { children: view === "menu" && /* @__PURE__ */ jsx13(
+            VoiceboxMenu,
+            {
+              workflows: allWorkflows,
+              position: badgePosition,
+              playingWorkflowId,
+              playingStepIndex,
+              onPositionChange: handlePositionChange,
+              onHide: handleHide,
+              onAskMeridial: handleAskMeridial,
+              onPlayGuide: handlePlayGuide,
+              onAbortGuide: handleAbortGuide
+            }
+          ) }),
+          /* @__PURE__ */ jsx13(VoiceboxBadge, { triggerIcon, onClick: handleBadgeClick })
+        ]
       }
     )
-  ] }) : /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      className: cn("fixed z-50", BADGE_POSITION_CLASSES[badgePosition]),
-      children: [
-        /* @__PURE__ */ jsx13(AnimatePresence3, { children: view === "menu" && /* @__PURE__ */ jsx13(
-          VoiceboxMenu,
-          {
-            favoriteWorkflows,
-            position: badgePosition,
-            onPositionChange: handlePositionChange,
-            onHide: handleHide,
-            onAskMeridial: handleAskMeridial,
-            onPlayGuide: handlePlayGuide
-          }
-        ) }),
-        /* @__PURE__ */ jsx13(VoiceboxBadge, { triggerIcon, onClick: handleBadgeClick })
-      ]
-    }
-  ) });
+  ] });
 }
 
 export {
   Voicebox
 };
-//# sourceMappingURL=chunk-WCRZUGN4.js.map
+//# sourceMappingURL=chunk-BWBGNRKO.js.map