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

package/dist/vue/VoiceLiveAgentConsole.d.ts

@@ -0,0 +1,50 @@
+import { type PropType } from "vue";
+import { type LiveAgentConsole } from "../client/liveAgentConsole";
+export declare const VoiceLiveAgentConsole: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    console: {
+        default: undefined;
+        type: PropType<LiveAgentConsole | undefined>;
+    };
+    sessionId: {
+        default: string;
+        type: StringConstructor;
+    };
+    takeoverButtonLabel: {
+        default: string;
+        type: StringConstructor;
+    };
+    takeoverReason: StringConstructor;
+    title: {
+        default: string;
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    takeover: (_reason?: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    console: {
+        default: undefined;
+        type: PropType<LiveAgentConsole | undefined>;
+    };
+    sessionId: {
+        default: string;
+        type: StringConstructor;
+    };
+    takeoverButtonLabel: {
+        default: string;
+        type: StringConstructor;
+    };
+    takeoverReason: StringConstructor;
+    title: {
+        default: string;
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    onTakeover?: ((_reason?: string | undefined) => any) | undefined;
+}>, {
+    title: string;
+    sessionId: string;
+    console: LiveAgentConsole | undefined;
+    takeoverButtonLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/vue/index.d.ts

@@ -34,6 +34,7 @@ export { useVoiceController } from "./useVoiceController";
 export { VoiceWidget } from "./VoiceWidget";
 export { VoiceCallPlayer } from "./VoiceCallPlayer";
 export { VoiceCostDashboard } from "./VoiceCostDashboard";
+export { VoiceLiveAgentConsole } from "./VoiceLiveAgentConsole";
 export { VoiceLiveCallViewer } from "./VoiceLiveCallViewer";
 export { VoiceReplayTimeline } from "./VoiceReplayTimeline";
 export type { VoiceWidgetLabels, VoiceWidgetTheme, } from "./VoiceWidget";

package/dist/vue/index.js

@@ -12604,7 +12604,7 @@ var VoiceCostDashboard = defineComponent20({
     };
   }
 });
-// src/vue/VoiceLiveCallViewer.ts
+// src/vue/VoiceLiveAgentConsole.ts
 import {
   defineComponent as defineComponent21,
   h as h21,
@@ -12720,7 +12720,224 @@ var createLiveCallViewer = (options) => {
   };
 };
 
+// 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/vue/VoiceLiveAgentConsole.ts
+var VoiceLiveAgentConsole = defineComponent21({
+  name: "VoiceLiveAgentConsole",
+  props: {
+    console: {
+      default: undefined,
+      type: Object
+    },
+    sessionId: { default: "live", type: String },
+    takeoverButtonLabel: { default: "Take over", type: String },
+    takeoverReason: String,
+    title: { default: "Live agent console", type: String }
+  },
+  emits: { takeover: (_reason) => true },
+  setup(props, { emit }) {
+    const console = props.console ?? createLiveAgentConsole({ sessionId: props.sessionId });
+    const state = shallowRef23(console.getState());
+    const unsubscribe = console.subscribe(() => {
+      state.value = console.getState();
+    });
+    onUnmounted24(() => {
+      unsubscribe();
+    });
+    return () => {
+      const s = state.value;
+      return h21("section", {
+        "aria-label": "voice-live-agent-console",
+        class: "absolute-voice-live-agent-console",
+        "data-takeover": s.hasTakeover ? "true" : "false",
+        style: {
+          background: "#0f172a",
+          borderRadius: "16px",
+          color: "#f8fafc",
+          fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          padding: "20px"
+        }
+      }, [
+        h21("header", {
+          style: {
+            alignItems: "center",
+            display: "flex",
+            gap: "12px",
+            marginBottom: "12px"
+          }
+        }, [
+          h21("strong", { style: { fontSize: "16px" } }, props.title),
+          h21("span", {
+            style: {
+              background: s.hasTakeover ? "rgba(239,68,68,0.18)" : "rgba(59,130,246,0.18)",
+              borderRadius: "999px",
+              fontSize: "11px",
+              padding: "3px 10px",
+              textTransform: "uppercase"
+            }
+          }, s.hasTakeover ? "Human" : "Agent"),
+          h21("span", {
+            style: {
+              fontSize: "13px",
+              marginLeft: "auto",
+              opacity: "0.7"
+            }
+          }, s.view.sessionId)
+        ]),
+        s.caller ? h21("div", {
+          style: {
+            background: "rgba(255,255,255,0.06)",
+            borderRadius: "12px",
+            fontSize: "13px",
+            margin: "0 0 12px",
+            padding: "12px"
+          }
+        }, [
+          h21("div", {
+            style: {
+              fontSize: "11px",
+              opacity: "0.7",
+              textTransform: "uppercase"
+            }
+          }, "Caller"),
+          h21("div", { style: { marginTop: "4px" } }, s.caller.summary)
+        ]) : null,
+        h21("div", { style: { display: "flex", gap: "10px", marginBottom: "12px" } }, [
+          s.hasTakeover ? h21("button", {
+            onClick: () => console.releaseTakeover(),
+            style: {
+              background: "rgba(255,255,255,0.08)",
+              border: "1px solid rgba(255,255,255,0.18)",
+              borderRadius: "12px",
+              color: "#f8fafc",
+              cursor: "pointer",
+              fontSize: "13px",
+              padding: "8px 14px"
+            },
+            type: "button"
+          }, "Release back to agent") : h21("button", {
+            onClick: () => {
+              console.takeover(props.takeoverReason);
+              emit("takeover", props.takeoverReason);
+            },
+            style: {
+              background: "#ef4444",
+              border: "none",
+              borderRadius: "12px",
+              color: "#f8fafc",
+              cursor: "pointer",
+              fontSize: "13px",
+              padding: "8px 14px"
+            },
+            type: "button"
+          }, props.takeoverButtonLabel)
+        ]),
+        h21("ol", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            listStyle: "none",
+            margin: "0",
+            maxHeight: "260px",
+            overflowY: "auto",
+            padding: "0"
+          }
+        }, s.recentTimeline.map((event, index) => h21("li", {
+          key: `${event.at}-${index}`,
+          style: {
+            alignItems: "center",
+            display: "flex",
+            fontSize: "13px",
+            gap: "12px",
+            paddingLeft: "8px"
+          }
+        }, [
+          h21("strong", event.title),
+          event.detail ? h21("span", { style: { opacity: "0.85" } }, event.detail) : null
+        ])))
+      ]);
+    };
+  }
+});
 // src/vue/VoiceLiveCallViewer.ts
+import {
+  defineComponent as defineComponent22,
+  h as h22,
+  onUnmounted as onUnmounted25,
+  shallowRef as shallowRef24
+} from "vue";
 var CATEGORY_COLOR = {
   agent_audio: "#3b82f6",
   agent_text: "#3b82f6",
@@ -12734,7 +12951,7 @@ var formatRelative = (ms) => {
   const remaining = seconds % 60;
   return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
 };
-var VoiceLiveCallViewer = defineComponent21({
+var VoiceLiveCallViewer = defineComponent22({
   name: "VoiceLiveCallViewer",
   props: {
     sessionId: { default: "live", type: String },
@@ -12747,17 +12964,17 @@ var VoiceLiveCallViewer = defineComponent21({
   setup(props) {
     const owned = !props.viewer;
     const viewer = props.viewer ?? createLiveCallViewer({ sessionId: props.sessionId });
-    const state = shallowRef23(viewer.getState());
+    const state = shallowRef24(viewer.getState());
     const unsubscribe = viewer.subscribe(() => {
       state.value = viewer.getState();
     });
-    onUnmounted24(() => {
+    onUnmounted25(() => {
       unsubscribe();
     });
     return () => {
       const s = state.value;
       const firstAt = s.events[0]?.at ?? Date.now();
-      return h21("section", {
+      return h22("section", {
         "aria-label": "voice-live-call-viewer",
         class: "absolute-voice-live-call-viewer",
         "data-agent-state": s.agentState,
@@ -12769,7 +12986,7 @@ var VoiceLiveCallViewer = defineComponent21({
           padding: "20px"
         }
       }, [
-        h21("header", {
+        h22("header", {
           style: {
             alignItems: "center",
             display: "flex",
@@ -12777,8 +12994,8 @@ var VoiceLiveCallViewer = defineComponent21({
             marginBottom: "12px"
           }
         }, [
-          h21("strong", { style: { fontSize: "16px" } }, props.title),
-          h21("span", {
+          h22("strong", { style: { fontSize: "16px" } }, props.title),
+          h22("span", {
             style: {
               background: "rgba(59,130,246,0.18)",
               borderRadius: "999px",
@@ -12787,7 +13004,7 @@ var VoiceLiveCallViewer = defineComponent21({
               textTransform: "uppercase"
             }
           }, s.agentState),
-          h21("span", {
+          h22("span", {
             style: {
               fontSize: "13px",
               marginLeft: "auto",
@@ -12795,7 +13012,7 @@ var VoiceLiveCallViewer = defineComponent21({
             }
           }, `${s.sessionId} \xB7 ${formatRelative(s.callDurationMs)}`)
         ]),
-        s.partialTranscript ? h21("p", {
+        s.partialTranscript ? h22("p", {
           style: {
             background: "rgba(16,185,129,0.12)",
             borderRadius: "12px",
@@ -12805,7 +13022,7 @@ var VoiceLiveCallViewer = defineComponent21({
             padding: "10px 12px"
           }
         }, `\u201C${s.partialTranscript}\u201D`) : null,
-        h21("ol", {
+        h22("ol", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -12816,7 +13033,7 @@ var VoiceLiveCallViewer = defineComponent21({
             overflowY: "auto",
             padding: "0"
           }
-        }, s.events.map((event, index) => h21("li", {
+        }, s.events.map((event, index) => h22("li", {
           key: `${event.at}-${index}`,
           style: {
             alignItems: "center",
@@ -12827,7 +13044,7 @@ var VoiceLiveCallViewer = defineComponent21({
             paddingLeft: "12px"
           }
         }, [
-          h21("span", {
+          h22("span", {
             style: {
               color: "#cbd5e1",
               fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -12835,15 +13052,15 @@ var VoiceLiveCallViewer = defineComponent21({
               width: "60px"
             }
           }, formatRelative(event.at - firstAt)),
-          h21("strong", { style: { fontSize: "13px" } }, event.title),
-          event.detail ? h21("span", { style: { opacity: "0.85" } }, event.detail) : null
+          h22("strong", { style: { fontSize: "13px" } }, event.title),
+          event.detail ? h22("span", { style: { opacity: "0.85" } }, event.detail) : null
         ])))
       ]);
     };
   }
 });
 // src/vue/VoiceReplayTimeline.ts
-import { computed as computed12, defineComponent as defineComponent22, h as h22 } from "vue";
+import { computed as computed12, defineComponent as defineComponent23, h as h23 } from "vue";
 
 // src/client/replayTimeline.ts
 var categorize = (entry) => {
@@ -12909,7 +13126,7 @@ var formatRelative2 = (ms) => {
   const remaining = seconds % 60;
   return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
 };
-var VoiceReplayTimeline = defineComponent22({
+var VoiceReplayTimeline = defineComponent23({
   name: "VoiceReplayTimeline",
   props: {
     artifact: {
@@ -12922,7 +13139,7 @@ var VoiceReplayTimeline = defineComponent22({
     const report = computed12(() => buildReplayTimelineReport({ artifact: props.artifact }));
     return () => {
       const r = report.value;
-      return h22("section", {
+      return h23("section", {
         "aria-label": "voice-replay-timeline",
         class: "absolute-voice-replay-timeline",
         style: {
@@ -12933,7 +13150,7 @@ var VoiceReplayTimeline = defineComponent22({
           padding: "20px"
         }
       }, [
-        h22("header", {
+        h23("header", {
           style: {
             alignItems: "baseline",
             display: "flex",
@@ -12941,10 +13158,10 @@ var VoiceReplayTimeline = defineComponent22({
             marginBottom: "12px"
           }
         }, [
-          h22("strong", { style: { fontSize: "16px" } }, props.title ?? r.metadata.title ?? "Replay"),
-          h22("span", { style: { fontSize: "13px", opacity: "0.7" } }, `${r.events.length} events \xB7 ${r.summary.userTurns} user \xB7 ${r.summary.agentTurns} agent \xB7 ${r.summary.toolCalls} tool`)
+          h23("strong", { style: { fontSize: "16px" } }, props.title ?? r.metadata.title ?? "Replay"),
+          h23("span", { style: { fontSize: "13px", opacity: "0.7" } }, `${r.events.length} events \xB7 ${r.summary.userTurns} user \xB7 ${r.summary.agentTurns} agent \xB7 ${r.summary.toolCalls} tool`)
         ]),
-        r.events.length === 0 ? h22("p", { style: { fontSize: "13px", opacity: "0.7" } }, "No timeline events.") : h22("ol", {
+        r.events.length === 0 ? h23("p", { style: { fontSize: "13px", opacity: "0.7" } }, "No timeline events.") : h23("ol", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -12953,7 +13170,7 @@ var VoiceReplayTimeline = defineComponent22({
             margin: "0",
             padding: "0"
           }
-        }, r.events.map((event, index) => h22("li", {
+        }, r.events.map((event, index) => h23("li", {
           key: `${event.at}-${index}`,
           style: {
             alignItems: "center",
@@ -12964,7 +13181,7 @@ var VoiceReplayTimeline = defineComponent22({
             paddingLeft: "12px"
           }
         }, [
-          h22("span", {
+          h23("span", {
             style: {
               color: "#cbd5e1",
               fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -12972,20 +13189,20 @@ var VoiceReplayTimeline = defineComponent22({
               width: "60px"
             }
           }, formatRelative2(event.at - r.startedAt)),
-          h22("strong", { style: { fontSize: "13px" } }, event.label),
-          event.detail ? h22("span", { style: { opacity: "0.85" } }, event.detail) : null
+          h23("strong", { style: { fontSize: "13px" } }, event.label),
+          event.detail ? h23("span", { style: { opacity: "0.85" } }, event.detail) : null
         ])))
       ]);
     };
   }
 });
 // src/vue/useVoiceTraceTimeline.ts
-import { onUnmounted as onUnmounted25, ref as ref20, shallowRef as shallowRef24 } from "vue";
+import { onUnmounted as onUnmounted26, ref as ref20, shallowRef as shallowRef25 } from "vue";
 function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
   const store = createVoiceTraceTimelineStore(path, options);
   const error = ref20(null);
   const isLoading = ref20(false);
-  const report = shallowRef24(null);
+  const report = shallowRef25(null);
   const updatedAt = ref20(undefined);
   const sync = () => {
     const snapshot = store.getSnapshot();
@@ -12997,7 +13214,7 @@ function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
   const unsubscribe = store.subscribe(sync);
   sync();
   store.refresh().catch(() => {});
-  onUnmounted25(() => {
+  onUnmounted26(() => {
     unsubscribe();
     store.close();
   });
@@ -13010,7 +13227,7 @@ function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
   };
 }
 // src/vue/useVoiceWorkflowStatus.ts
-import { onMounted as onMounted11, onUnmounted as onUnmounted26, ref as ref21, shallowRef as shallowRef25 } from "vue";
+import { onMounted as onMounted11, onUnmounted as onUnmounted27, ref as ref21, shallowRef as shallowRef26 } from "vue";
 
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
@@ -13096,7 +13313,7 @@ function useVoiceWorkflowStatus(path = "/evals/scenarios/json", options = {}) {
   const store = createVoiceWorkflowStatusStore(path, options);
   const error = ref21(null);
   const isLoading = ref21(false);
-  const report = shallowRef25(undefined);
+  const report = shallowRef26(undefined);
   const updatedAt = ref21(undefined);
   const sync = () => {
     const snapshot = store.getSnapshot();
@@ -13110,7 +13327,7 @@ function useVoiceWorkflowStatus(path = "/evals/scenarios/json", options = {}) {
   onMounted11(() => {
     store.refresh().catch(() => {});
   });
-  onUnmounted26(() => {
+  onUnmounted27(() => {
     unsubscribe();
     store.close();
   });
@@ -13166,6 +13383,7 @@ export {
   VoiceOpsStatus,
   VoiceOpsActionCenter,
   VoiceLiveCallViewer,
+  VoiceLiveAgentConsole,
   VoiceDeliveryRuntime,
   VoiceCostDashboard,
   VoiceCallPlayer,

package/package.json

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