@absolutejs/voice 0.0.22-beta.508 → 0.0.22-beta.509

package/dist/react/index.d.ts

@@ -41,6 +41,8 @@ export { VoiceCallPlayer } from "./VoiceCallPlayer";
 export type { VoiceCallPlayerProps } from "./VoiceCallPlayer";
 export { VoiceCostDashboard } from "./VoiceCostDashboard";
 export type { VoiceCostDashboardProps } from "./VoiceCostDashboard";
+export { VoiceLiveAgentConsole } from "./VoiceLiveAgentConsole";
+export type { VoiceLiveAgentConsoleProps } from "./VoiceLiveAgentConsole";
 export { VoiceLiveCallViewer } from "./VoiceLiveCallViewer";
 export type { VoiceLiveCallViewerProps } from "./VoiceLiveCallViewer";
 export { VoiceReplayTimeline } from "./VoiceReplayTimeline";

package/dist/react/index.js

@@ -13339,7 +13339,7 @@ var VoiceCostDashboard = ({
     ]
   }, undefined, true, undefined, this);
 };
-// src/react/VoiceLiveCallViewer.tsx
+// src/react/VoiceLiveAgentConsole.tsx
 import { useEffect as useEffect27, useMemo as useMemo3, useState as useState2 } from "react";
 
 // src/client/liveCallViewer.ts
@@ -13450,8 +13450,263 @@ var createLiveCallViewer = (options) => {
   };
 };
 
-// src/react/VoiceLiveCallViewer.tsx
+// src/client/liveAgentConsole.ts
+var createLiveAgentConsole = (options) => {
+  const viewer = createLiveCallViewer(options);
+  const recentLimit = Math.max(1, options.recentLimit ?? 12);
+  let caller;
+  let hasTakeover = false;
+  let takeoverAt;
+  let takeoverReason;
+  const subscribers = new Set;
+  const buildState = () => {
+    const view = viewer.getState();
+    return {
+      caller,
+      hasTakeover,
+      recentTimeline: view.events.slice(-recentLimit),
+      takeoverAt,
+      takeoverReason,
+      view
+    };
+  };
+  const notify = () => {
+    for (const subscriber of subscribers)
+      subscriber();
+  };
+  const unsubscribeViewer = viewer.subscribe(() => {
+    notify();
+  });
+  if (options.resolveCaller) {
+    Promise.resolve(options.resolveCaller()).then((snapshot) => {
+      caller = snapshot;
+      notify();
+    });
+  }
+  return {
+    getState: buildState,
+    noteAgentAudio: (at) => viewer.noteAgentAudio(at),
+    notePartial: (text, at) => viewer.notePartial(text, at),
+    noteTranscript: (text, at) => viewer.noteTranscript(text, at),
+    releaseTakeover: () => {
+      if (!hasTakeover)
+        return;
+      hasTakeover = false;
+      takeoverAt = undefined;
+      takeoverReason = undefined;
+      viewer.applyControl({ reason: "released", type: "takeover.release" });
+      notify();
+    },
+    setCaller: (snapshot) => {
+      caller = snapshot;
+      notify();
+    },
+    subscribe: (listener) => {
+      subscribers.add(listener);
+      return () => {
+        subscribers.delete(listener);
+        if (subscribers.size === 0)
+          unsubscribeViewer();
+      };
+    },
+    takeover: (reason) => {
+      if (hasTakeover)
+        return;
+      hasTakeover = true;
+      takeoverAt = Date.now();
+      takeoverReason = reason;
+      viewer.applyControl({ reason, type: "takeover.engaged" });
+      notify();
+    },
+    viewer
+  };
+};
+
+// src/react/VoiceLiveAgentConsole.tsx
 import { jsxDEV as jsxDEV25 } from "react/jsx-dev-runtime";
+var VoiceLiveAgentConsole = ({
+  className,
+  console: consoleProp,
+  onTakeover,
+  sessionId,
+  takeoverButtonLabel = "Take over",
+  takeoverReason,
+  title = "Live agent console"
+}) => {
+  const console = useMemo3(() => consoleProp ?? createLiveAgentConsole({ sessionId: sessionId ?? "live" }), [consoleProp, sessionId]);
+  const [state, setState] = useState2(() => console.getState());
+  useEffect27(() => {
+    const unsubscribe = console.subscribe(() => {
+      setState(console.getState());
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [console]);
+  const handleTakeover = () => {
+    console.takeover(takeoverReason);
+    onTakeover?.(takeoverReason);
+  };
+  const handleRelease = () => {
+    console.releaseTakeover();
+  };
+  return /* @__PURE__ */ jsxDEV25("section", {
+    "aria-label": "voice-live-agent-console",
+    className: className ?? "absolute-voice-live-agent-console",
+    "data-takeover": state.hasTakeover ? "true" : "false",
+    style: {
+      background: "#0f172a",
+      borderRadius: 16,
+      color: "#f8fafc",
+      fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      padding: 20
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV25("header", {
+        style: {
+          alignItems: "center",
+          display: "flex",
+          gap: 12,
+          marginBottom: 12
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV25("strong", {
+            style: { fontSize: 16 },
+            children: title
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV25("span", {
+            style: {
+              background: state.hasTakeover ? "rgba(239,68,68,0.18)" : "rgba(59,130,246,0.18)",
+              borderRadius: 999,
+              fontSize: 11,
+              padding: "3px 10px",
+              textTransform: "uppercase"
+            },
+            children: state.hasTakeover ? "Human" : "Agent"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV25("span", {
+            style: { fontSize: 13, marginLeft: "auto", opacity: 0.7 },
+            children: state.view.sessionId
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      state.caller ? /* @__PURE__ */ jsxDEV25("div", {
+        style: {
+          background: "rgba(255,255,255,0.06)",
+          borderRadius: 12,
+          fontSize: 13,
+          margin: "0 0 12px",
+          padding: 12
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV25("div", {
+            style: { fontSize: 11, opacity: 0.7, textTransform: "uppercase" },
+            children: "Caller"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV25("div", {
+            style: { marginTop: 4 },
+            children: state.caller.summary
+          }, undefined, false, undefined, this),
+          Object.keys(state.caller.facts ?? {}).length > 0 ? /* @__PURE__ */ jsxDEV25("dl", {
+            style: {
+              display: "grid",
+              fontSize: 12,
+              gap: 4,
+              gridTemplateColumns: "auto 1fr",
+              margin: "8px 0 0"
+            },
+            children: Object.entries(state.caller.facts).map(([key, value]) => /* @__PURE__ */ jsxDEV25("div", {
+              style: { display: "contents" },
+              children: [
+                /* @__PURE__ */ jsxDEV25("dt", {
+                  style: { opacity: 0.7 },
+                  children: key
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV25("dd", {
+                  style: { margin: 0 },
+                  children: value
+                }, undefined, false, undefined, this)
+              ]
+            }, key, true, undefined, this))
+          }, undefined, false, undefined, this) : null,
+          state.caller.openActions.length > 0 ? /* @__PURE__ */ jsxDEV25("ul", {
+            style: {
+              fontSize: 12,
+              margin: "8px 0 0",
+              paddingLeft: 16
+            },
+            children: state.caller.openActions.map((action) => /* @__PURE__ */ jsxDEV25("li", {
+              children: action
+            }, action, false, undefined, this))
+          }, undefined, false, undefined, this) : null
+        ]
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV25("div", {
+        style: { display: "flex", gap: 10, marginBottom: 12 },
+        children: state.hasTakeover ? /* @__PURE__ */ jsxDEV25("button", {
+          onClick: handleRelease,
+          style: {
+            background: "rgba(255,255,255,0.08)",
+            border: "1px solid rgba(255,255,255,0.18)",
+            borderRadius: 12,
+            color: "#f8fafc",
+            cursor: "pointer",
+            fontSize: 13,
+            padding: "8px 14px"
+          },
+          type: "button",
+          children: "Release back to agent"
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV25("button", {
+          onClick: handleTakeover,
+          style: {
+            background: "#ef4444",
+            border: "none",
+            borderRadius: 12,
+            color: "#f8fafc",
+            cursor: "pointer",
+            fontSize: 13,
+            padding: "8px 14px"
+          },
+          type: "button",
+          children: takeoverButtonLabel
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV25("ol", {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 6,
+          listStyle: "none",
+          margin: 0,
+          maxHeight: 260,
+          overflowY: "auto",
+          padding: 0
+        },
+        children: state.recentTimeline.map((event, index) => /* @__PURE__ */ jsxDEV25("li", {
+          style: {
+            alignItems: "center",
+            display: "flex",
+            fontSize: 13,
+            gap: 12,
+            paddingLeft: 8
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV25("strong", {
+              children: event.title
+            }, undefined, false, undefined, this),
+            event.detail ? /* @__PURE__ */ jsxDEV25("span", {
+              style: { opacity: 0.85 },
+              children: event.detail
+            }, undefined, false, undefined, this) : null
+          ]
+        }, `${event.at}-${index}`, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+// src/react/VoiceLiveCallViewer.tsx
+import { useEffect as useEffect28, useMemo as useMemo4, useState as useState3 } from "react";
+import { jsxDEV as jsxDEV26 } from "react/jsx-dev-runtime";
 var CATEGORY_COLOR = {
   agent_audio: "#3b82f6",
   agent_text: "#3b82f6",
@@ -13471,9 +13726,9 @@ var VoiceLiveCallViewer = ({
   title,
   viewer: viewerProp
 }) => {
-  const viewer = useMemo3(() => viewerProp ?? createLiveCallViewer({ sessionId: sessionId ?? "live" }), [viewerProp, sessionId]);
-  const [state, setState] = useState2(() => viewer.getState());
-  useEffect27(() => {
+  const viewer = useMemo4(() => viewerProp ?? createLiveCallViewer({ sessionId: sessionId ?? "live" }), [viewerProp, sessionId]);
+  const [state, setState] = useState3(() => viewer.getState());
+  useEffect28(() => {
     const unsubscribe = viewer.subscribe(() => {
       setState(viewer.getState());
     });
@@ -13481,7 +13736,7 @@ var VoiceLiveCallViewer = ({
       unsubscribe();
     };
   }, [viewer]);
-  return /* @__PURE__ */ jsxDEV25("section", {
+  return /* @__PURE__ */ jsxDEV26("section", {
     "aria-label": "voice-live-call-viewer",
     className: className ?? "absolute-voice-live-call-viewer",
     "data-agent-state": state.agentState,
@@ -13493,7 +13748,7 @@ var VoiceLiveCallViewer = ({
       padding: 20
     },
     children: [
-      /* @__PURE__ */ jsxDEV25("header", {
+      /* @__PURE__ */ jsxDEV26("header", {
         style: {
           alignItems: "center",
           display: "flex",
@@ -13501,11 +13756,11 @@ var VoiceLiveCallViewer = ({
           marginBottom: 12
         },
         children: [
-          /* @__PURE__ */ jsxDEV25("strong", {
+          /* @__PURE__ */ jsxDEV26("strong", {
             style: { fontSize: 16 },
             children: title ?? "Live call"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV25("span", {
+          /* @__PURE__ */ jsxDEV26("span", {
             style: {
               background: "rgba(59,130,246,0.18)",
               borderRadius: 999,
@@ -13515,7 +13770,7 @@ var VoiceLiveCallViewer = ({
             },
             children: state.agentState
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV25("span", {
+          /* @__PURE__ */ jsxDEV26("span", {
             style: { fontSize: 13, marginLeft: "auto", opacity: 0.7 },
             children: [
               state.sessionId,
@@ -13525,7 +13780,7 @@ var VoiceLiveCallViewer = ({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      state.partialTranscript ? /* @__PURE__ */ jsxDEV25("p", {
+      state.partialTranscript ? /* @__PURE__ */ jsxDEV26("p", {
         style: {
           background: "rgba(16,185,129,0.12)",
           borderRadius: 12,
@@ -13540,7 +13795,7 @@ var VoiceLiveCallViewer = ({
           "\u201D"
         ]
       }, undefined, true, undefined, this) : null,
-      /* @__PURE__ */ jsxDEV25("ol", {
+      /* @__PURE__ */ jsxDEV26("ol", {
         style: {
           display: "flex",
           flexDirection: "column",
@@ -13551,7 +13806,7 @@ var VoiceLiveCallViewer = ({
           overflowY: "auto",
           padding: 0
         },
-        children: state.events.map((event, index) => /* @__PURE__ */ jsxDEV25("li", {
+        children: state.events.map((event, index) => /* @__PURE__ */ jsxDEV26("li", {
           style: {
             alignItems: "center",
             borderLeft: `3px solid ${CATEGORY_COLOR[event.kind] ?? "#94a3b8"}`,
@@ -13561,7 +13816,7 @@ var VoiceLiveCallViewer = ({
             paddingLeft: 12
           },
           children: [
-            /* @__PURE__ */ jsxDEV25("span", {
+            /* @__PURE__ */ jsxDEV26("span", {
               style: {
                 color: "#cbd5e1",
                 fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -13570,11 +13825,11 @@ var VoiceLiveCallViewer = ({
               },
               children: formatRelative(event.at - (state.events[0]?.at ?? event.at))
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV25("strong", {
+            /* @__PURE__ */ jsxDEV26("strong", {
               style: { fontSize: 13 },
               children: event.title
             }, undefined, false, undefined, this),
-            event.detail ? /* @__PURE__ */ jsxDEV25("span", {
+            event.detail ? /* @__PURE__ */ jsxDEV26("span", {
               style: { opacity: 0.85 },
               children: event.detail
             }, undefined, false, undefined, this) : null
@@ -13636,7 +13891,7 @@ var buildReplayTimelineReport = (input) => {
 };
 
 // src/react/VoiceReplayTimeline.tsx
-import { jsxDEV as jsxDEV26 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV27 } from "react/jsx-dev-runtime";
 var CATEGORY_COLOR2 = {
   agent: "#3b82f6",
   lifecycle: "#94a3b8",
@@ -13655,7 +13910,7 @@ var VoiceReplayTimeline = ({
   title
 }) => {
   const report = buildReplayTimelineReport({ artifact });
-  return /* @__PURE__ */ jsxDEV26("section", {
+  return /* @__PURE__ */ jsxDEV27("section", {
     "aria-label": "voice-replay-timeline",
     className: className ?? "absolute-voice-replay-timeline",
     style: {
@@ -13666,7 +13921,7 @@ var VoiceReplayTimeline = ({
       padding: 20
     },
     children: [
-      /* @__PURE__ */ jsxDEV26("header", {
+      /* @__PURE__ */ jsxDEV27("header", {
         style: {
           alignItems: "baseline",
           display: "flex",
@@ -13674,11 +13929,11 @@ var VoiceReplayTimeline = ({
           marginBottom: 12
         },
         children: [
-          /* @__PURE__ */ jsxDEV26("strong", {
+          /* @__PURE__ */ jsxDEV27("strong", {
             style: { fontSize: 16 },
             children: title ?? report.metadata.title ?? "Replay"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV26("span", {
+          /* @__PURE__ */ jsxDEV27("span", {
             style: { fontSize: 13, opacity: 0.7 },
             children: [
               report.events.length,
@@ -13694,10 +13949,10 @@ var VoiceReplayTimeline = ({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      report.events.length === 0 ? /* @__PURE__ */ jsxDEV26("p", {
+      report.events.length === 0 ? /* @__PURE__ */ jsxDEV27("p", {
         style: { fontSize: 13, opacity: 0.7 },
         children: "No timeline events."
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV26("ol", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV27("ol", {
         style: {
           display: "flex",
           flexDirection: "column",
@@ -13706,7 +13961,7 @@ var VoiceReplayTimeline = ({
           margin: 0,
           padding: 0
         },
-        children: report.events.map((event, index) => /* @__PURE__ */ jsxDEV26("li", {
+        children: report.events.map((event, index) => /* @__PURE__ */ jsxDEV27("li", {
           style: {
             alignItems: "center",
             borderLeft: `3px solid ${CATEGORY_COLOR2[event.category]}`,
@@ -13716,7 +13971,7 @@ var VoiceReplayTimeline = ({
             paddingLeft: 12
           },
           children: [
-            /* @__PURE__ */ jsxDEV26("span", {
+            /* @__PURE__ */ jsxDEV27("span", {
               style: {
                 color: "#cbd5e1",
                 fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -13725,11 +13980,11 @@ var VoiceReplayTimeline = ({
               },
               children: formatRelative2(event.at - report.startedAt)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV26("strong", {
+            /* @__PURE__ */ jsxDEV27("strong", {
               style: { fontSize: 13 },
               children: event.label
             }, undefined, false, undefined, this),
-            event.detail ? /* @__PURE__ */ jsxDEV26("span", {
+            event.detail ? /* @__PURE__ */ jsxDEV27("span", {
               style: { opacity: 0.85 },
               children: event.detail
             }, undefined, false, undefined, this) : null
@@ -13740,7 +13995,7 @@ var VoiceReplayTimeline = ({
   }, undefined, true, undefined, this);
 };
 // src/react/useVoiceWorkflowStatus.tsx
-import { useEffect as useEffect28, useRef as useRef28, useSyncExternalStore as useSyncExternalStore26 } from "react";
+import { useEffect as useEffect29, useRef as useRef28, useSyncExternalStore as useSyncExternalStore26 } from "react";
 
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
@@ -13828,7 +14083,7 @@ var useVoiceWorkflowStatus = (path = "/evals/scenarios/json", options = {}) => {
     storeRef.current = createVoiceWorkflowStatusStore(path, options);
   }
   const store = storeRef.current;
-  useEffect28(() => {
+  useEffect29(() => {
     store.refresh().catch(() => {});
     return () => store.close();
   }, [store]);
@@ -13885,6 +14140,7 @@ export {
   VoiceOpsStatus,
   VoiceOpsActionCenter,
   VoiceLiveCallViewer,
+  VoiceLiveAgentConsole,
   VoiceDeliveryRuntime,
   VoiceCostDashboard,
   VoiceCallPlayer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@absolutejs/voice",
-  "version": "0.0.22-beta.508",
+  "version": "0.0.22-beta.509",
   "description": "Voice primitives and Elysia plugin for AbsoluteJS",
   "repository": {
     "type": "git",