@absolutejs/voice 0.0.22-beta.493 → 0.0.22-beta.495

package/dist/angular/voice-widget.service.d.ts

@@ -0,0 +1,18 @@
+import type { VoiceControllerOptions } from "../types";
+import { type VoiceWidgetLabels, type VoiceWidgetTheme, type VoiceWidgetViewModel } from "../client/voiceWidgetView";
+export type CreateVoiceWidgetServiceOptions = VoiceControllerOptions & {
+    labels?: VoiceWidgetLabels;
+    theme?: VoiceWidgetTheme;
+    title?: string;
+};
+export declare class VoiceWidgetService {
+    connect<TResult = unknown>(path: string, options?: CreateVoiceWidgetServiceOptions): {
+        close: () => void;
+        endCall: () => void;
+        getHTML: () => string;
+        mute: () => void;
+        startCall: () => Promise<void>;
+        unmute: () => Promise<void>;
+        viewModel: import("@angular/core").Signal<VoiceWidgetViewModel>;
+    };
+}

package/dist/client/voiceWidgetView.d.ts

@@ -0,0 +1,50 @@
+import type { VoiceAgentUIState } from "../agentState";
+import type { VoiceControllerState } from "../types";
+export type VoiceWidgetTheme = {
+    accent?: string;
+    background?: string;
+    errorAccent?: string;
+    fontFamily?: string;
+    foreground?: string;
+    radius?: number | string;
+};
+export type VoiceWidgetLabels = {
+    callEnded?: string;
+    connecting?: string;
+    endCall?: string;
+    idle?: string;
+    listening?: string;
+    mute?: string;
+    speaking?: string;
+    startCall?: string;
+    thinking?: string;
+    unmute?: string;
+};
+export type VoiceWidgetViewModelInput = {
+    labels?: VoiceWidgetLabels;
+    state: Pick<VoiceControllerState, "assistantAudio" | "error" | "isConnected" | "isRecording" | "partial" | "status" | "turns">;
+    theme?: VoiceWidgetTheme;
+    title?: string;
+};
+export type VoiceWidgetViewModel = {
+    agentState: VoiceAgentUIState;
+    classes: {
+        container: string;
+        dot: string;
+    };
+    controls: {
+        canEnd: boolean;
+        canMute: boolean;
+        canStart: boolean;
+    };
+    errorMessage?: string;
+    labels: Required<VoiceWidgetLabels>;
+    partial?: string;
+    statusLabel: string;
+    theme: Required<VoiceWidgetTheme>;
+    title: string;
+};
+export declare const DEFAULT_VOICE_WIDGET_THEME: Required<VoiceWidgetTheme>;
+export declare const DEFAULT_VOICE_WIDGET_LABELS: Required<VoiceWidgetLabels>;
+export declare const createVoiceWidgetViewModel: (input: VoiceWidgetViewModelInput) => VoiceWidgetViewModel;
+export declare const renderVoiceWidgetHTML: (model: VoiceWidgetViewModel) => string;

package/dist/react/VoiceWidget.d.ts

@@ -0,0 +1,13 @@
+import type { VoiceControllerOptions } from "../types";
+import { type VoiceWidgetLabels, type VoiceWidgetTheme, type VoiceWidgetViewModel } from "../client/voiceWidgetView";
+export type { VoiceWidgetLabels, VoiceWidgetTheme, VoiceWidgetViewModel };
+export type VoiceWidgetProps = {
+    className?: string;
+    controllerOptions?: VoiceControllerOptions;
+    labels?: VoiceWidgetLabels;
+    onError?: (error: string) => void;
+    path?: string;
+    theme?: VoiceWidgetTheme;
+    title?: string;
+};
+export declare const VoiceWidget: ({ className, controllerOptions, labels, onError, path, theme, title, }: VoiceWidgetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/react/index.d.ts

@@ -35,6 +35,8 @@ export { useVoiceDeliveryRuntime } from "./useVoiceDeliveryRuntime";
 export { useVoiceCampaignDialerProof } from "./useVoiceCampaignDialerProof";
 export { useVoiceStream } from "./useVoiceStream";
 export { useVoiceController } from "./useVoiceController";
+export { VoiceWidget } from "./VoiceWidget";
+export type { VoiceWidgetLabels, VoiceWidgetProps, VoiceWidgetTheme, } from "./VoiceWidget";
 export { useVoiceProviderStatus } from "./useVoiceProviderStatus";
 export { useVoiceProviderCapabilities } from "./useVoiceProviderCapabilities";
 export { useVoiceProviderContracts } from "./useVoiceProviderContracts";

package/dist/react/index.js

@@ -12450,8 +12450,296 @@ var useVoiceController = (path, options = {}) => {
     toggleRecording: () => controller.toggleRecording()
   };
 };
+// src/react/VoiceWidget.tsx
+import { useMemo, useRef as useRef26 } from "react";
+
+// src/agentState.ts
+var deriveVoiceAgentUIState = (input) => {
+  if (!input.isConnected) {
+    return "idle";
+  }
+  if (input.isPlaying) {
+    return "speaking";
+  }
+  if (input.isRecording && input.hasActivePartial) {
+    return "listening";
+  }
+  if (input.isRecording) {
+    return "listening";
+  }
+  if (input.lastTranscriptAt && !input.lastAssistantAt) {
+    return "thinking";
+  }
+  if (input.lastTranscriptAt && input.lastAssistantAt && input.lastTranscriptAt > input.lastAssistantAt) {
+    return "thinking";
+  }
+  return "idle";
+};
+var describeVoiceAgentUIState = (state) => {
+  switch (state) {
+    case "idle":
+      return "Idle";
+    case "listening":
+      return "Listening";
+    case "speaking":
+      return "Speaking";
+    case "thinking":
+      return "Thinking";
+  }
+};
+var voiceAgentUIStateOrder = [
+  "idle",
+  "listening",
+  "thinking",
+  "speaking"
+];
+
+// src/client/voiceWidgetView.ts
+var DEFAULT_VOICE_WIDGET_THEME = {
+  accent: "#3b82f6",
+  background: "#0f172a",
+  errorAccent: "#ef4444",
+  fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  foreground: "#f8fafc",
+  radius: 16
+};
+var DEFAULT_VOICE_WIDGET_LABELS = {
+  callEnded: "Call ended",
+  connecting: "Connecting\u2026",
+  endCall: "End call",
+  idle: "Idle",
+  listening: "Listening",
+  mute: "Mute",
+  speaking: "Speaking",
+  startCall: "Start call",
+  thinking: "Thinking",
+  unmute: "Unmute"
+};
+var stateLabel = (state, labels) => {
+  switch (state) {
+    case "listening":
+      return labels.listening;
+    case "speaking":
+      return labels.speaking;
+    case "thinking":
+      return labels.thinking;
+    case "idle":
+      return labels.idle;
+  }
+};
+var createVoiceWidgetViewModel = (input) => {
+  const theme = { ...DEFAULT_VOICE_WIDGET_THEME, ...input.theme };
+  const labels = { ...DEFAULT_VOICE_WIDGET_LABELS, ...input.labels };
+  const lastAssistantAt = input.state.assistantAudio.at(-1)?.receivedAt;
+  const lastTranscriptAt = input.state.turns.at(-1)?.committedAt;
+  const agentState = deriveVoiceAgentUIState({
+    hasActivePartial: input.state.partial.length > 0,
+    isConnected: input.state.isConnected,
+    isPlaying: false,
+    isRecording: input.state.isRecording,
+    lastAssistantAt,
+    lastTranscriptAt
+  });
+  const connecting = !input.state.isConnected && input.state.status !== "idle" && !input.state.error;
+  const statusLabel2 = input.state.error ? "Error" : connecting ? labels.connecting : input.state.status === "completed" ? labels.callEnded : stateLabel(agentState, labels);
+  return {
+    agentState,
+    classes: {
+      container: `absolute-voice-widget absolute-voice-widget--${agentState}`,
+      dot: `absolute-voice-widget__dot${input.state.error ? " absolute-voice-widget__dot--error" : ""}`
+    },
+    controls: {
+      canEnd: input.state.isConnected,
+      canMute: input.state.isRecording,
+      canStart: !input.state.isRecording && input.state.status !== "completed"
+    },
+    errorMessage: input.state.error ?? undefined,
+    labels,
+    partial: input.state.partial || undefined,
+    statusLabel: statusLabel2,
+    theme,
+    title: input.title ?? "Voice"
+  };
+};
+var escapeHtml27 = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+var resolveRadius = (radius) => typeof radius === "number" ? `${radius}px` : radius;
+var renderVoiceWidgetHTML = (model) => {
+  const t = model.theme;
+  const containerStyle = `background:${t.background};border-radius:${resolveRadius(t.radius)};color:${t.foreground};font-family:${t.fontFamily};min-width:240px;padding:20px 22px;`;
+  const dotStyle = `background:${model.errorMessage ? t.errorAccent : model.agentState === "idle" ? "rgba(148,163,184,0.6)" : t.accent};border-radius:50%;height:10px;width:10px;`;
+  const buttons = [];
+  if (model.controls.canStart) {
+    buttons.push(`<button type="button" data-action="start" style="background:${t.accent};border:none;border-radius:12px;color:${t.foreground};cursor:pointer;font-size:14px;font-weight:500;padding:10px 14px;">${escapeHtml27(model.labels.startCall)}</button>`);
+  }
+  if (model.controls.canMute) {
+    buttons.push(`<button type="button" data-action="mute" style="background:transparent;border:1px solid rgba(255,255,255,0.18);border-radius:12px;color:${t.foreground};cursor:pointer;font-size:14px;font-weight:500;padding:10px 14px;">${escapeHtml27(model.labels.mute)}</button>`);
+  }
+  if (model.controls.canEnd) {
+    buttons.push(`<button type="button" data-action="end" style="background:${t.errorAccent};border:none;border-radius:12px;color:${t.foreground};cursor:pointer;font-size:14px;font-weight:500;padding:10px 14px;">${escapeHtml27(model.labels.endCall)}</button>`);
+  }
+  return `<div role="region" aria-live="polite" data-agent-state="${model.agentState}" class="${escapeHtml27(model.classes.container)}" style="${containerStyle}">
+  <div style="align-items:center;display:flex;gap:10px;margin-bottom:12px;">
+    <span aria-hidden="true" class="${escapeHtml27(model.classes.dot)}" style="${dotStyle}"></span>
+    <strong style="font-size:15px;">${escapeHtml27(model.title)}</strong>
+    <span style="font-size:13px;margin-left:auto;opacity:0.7;">${escapeHtml27(model.statusLabel)}</span>
+  </div>
+  ${model.partial ? `<p style="font-size:13px;margin:8px 0 12px;opacity:0.85;word-break:break-word;">\u201C${escapeHtml27(model.partial)}\u201D</p>` : ""}
+  <div style="display:flex;gap:10px;">${buttons.join("")}</div>
+  ${model.errorMessage ? `<p style="color:${t.errorAccent};font-size:12px;margin-top:12px;">${escapeHtml27(model.errorMessage)}</p>` : ""}
+</div>`;
+};
+
+// src/react/VoiceWidget.tsx
+import { jsxDEV as jsxDEV22 } from "react/jsx-dev-runtime";
+var resolveRadius2 = (radius) => typeof radius === "number" ? `${radius}px` : radius;
+var buttonStyle = (variant, theme) => ({
+  background: variant === "primary" ? theme.accent : variant === "danger" ? theme.errorAccent : "transparent",
+  border: variant === "secondary" ? `1px solid rgba(255,255,255,0.18)` : "none",
+  borderRadius: 12,
+  color: theme.foreground,
+  cursor: "pointer",
+  fontSize: 14,
+  fontWeight: 500,
+  padding: "10px 14px"
+});
+var VoiceWidget = ({
+  className,
+  controllerOptions,
+  labels,
+  onError,
+  path = "/voice",
+  theme,
+  title
+}) => {
+  const lastErrorRef = useRef26(null);
+  const controller = useVoiceController(path, controllerOptions);
+  if (controller.error && controller.error !== lastErrorRef.current) {
+    lastErrorRef.current = controller.error;
+    onError?.(controller.error);
+  }
+  const model = useMemo(() => createVoiceWidgetViewModel({
+    labels,
+    state: {
+      assistantAudio: controller.assistantAudio,
+      error: controller.error,
+      isConnected: controller.isConnected,
+      isRecording: controller.isRecording,
+      partial: controller.partial,
+      status: controller.status,
+      turns: controller.turns
+    },
+    theme,
+    title
+  }), [
+    controller.assistantAudio,
+    controller.error,
+    controller.isConnected,
+    controller.isRecording,
+    controller.partial,
+    controller.status,
+    controller.turns,
+    labels,
+    theme,
+    title
+  ]);
+  return /* @__PURE__ */ jsxDEV22("div", {
+    "aria-live": "polite",
+    className: className ?? model.classes.container,
+    "data-agent-state": model.agentState,
+    role: "region",
+    style: {
+      background: model.theme.background,
+      borderRadius: resolveRadius2(model.theme.radius),
+      color: model.theme.foreground,
+      fontFamily: model.theme.fontFamily,
+      minWidth: 240,
+      padding: "20px 22px"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV22("div", {
+        style: {
+          alignItems: "center",
+          display: "flex",
+          gap: 10,
+          marginBottom: 12
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV22("span", {
+            "aria-hidden": "true",
+            style: {
+              background: model.errorMessage ? model.theme.errorAccent : model.agentState === "idle" ? "rgba(148, 163, 184, 0.6)" : model.theme.accent,
+              borderRadius: "50%",
+              height: 10,
+              width: 10
+            }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV22("strong", {
+            style: { fontSize: 15 },
+            children: model.title
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV22("span", {
+            style: {
+              fontSize: 13,
+              marginLeft: "auto",
+              opacity: 0.7
+            },
+            children: model.statusLabel
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      model.partial ? /* @__PURE__ */ jsxDEV22("p", {
+        style: {
+          fontSize: 13,
+          margin: "8px 0 12px",
+          opacity: 0.85,
+          wordBreak: "break-word"
+        },
+        children: [
+          "\u201C",
+          model.partial,
+          "\u201D"
+        ]
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV22("div", {
+        style: { display: "flex", gap: 10 },
+        children: [
+          model.controls.canStart ? /* @__PURE__ */ jsxDEV22("button", {
+            onClick: () => {
+              controller.startRecording();
+            },
+            style: buttonStyle("primary", model.theme),
+            type: "button",
+            children: model.labels.startCall
+          }, undefined, false, undefined, this) : null,
+          model.controls.canMute ? /* @__PURE__ */ jsxDEV22("button", {
+            onClick: () => controller.stopRecording(),
+            style: buttonStyle("secondary", model.theme),
+            type: "button",
+            children: model.labels.mute
+          }, undefined, false, undefined, this) : null,
+          model.controls.canEnd ? /* @__PURE__ */ jsxDEV22("button", {
+            onClick: () => {
+              controller.close();
+            },
+            style: buttonStyle("danger", model.theme),
+            type: "button",
+            children: model.labels.endCall
+          }, undefined, false, undefined, this) : null
+        ]
+      }, undefined, true, undefined, this),
+      model.errorMessage ? /* @__PURE__ */ jsxDEV22("p", {
+        style: {
+          color: model.theme.errorAccent,
+          fontSize: 12,
+          marginTop: 12
+        },
+        children: model.errorMessage
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+};
 // src/react/useVoiceWorkflowStatus.tsx
-import { useEffect as useEffect26, useRef as useRef26, useSyncExternalStore as useSyncExternalStore26 } from "react";
+import { useEffect as useEffect26, useRef as useRef27, useSyncExternalStore as useSyncExternalStore26 } from "react";
 
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
@@ -12534,7 +12822,7 @@ var createVoiceWorkflowStatusStore = (path = "/evals/scenarios/json", options =
 
 // src/react/useVoiceWorkflowStatus.tsx
 var useVoiceWorkflowStatus = (path = "/evals/scenarios/json", options = {}) => {
-  const storeRef = useRef26(null);
+  const storeRef = useRef27(null);
   if (!storeRef.current) {
     storeRef.current = createVoiceWorkflowStatusStore(path, options);
   }
@@ -12575,6 +12863,7 @@ export {
   useVoiceCampaignDialerProof,
   useVoiceCallDebugger,
   useVoiceAgentSquadStatus,
+  VoiceWidget,
   VoiceTurnQuality,
   VoiceTurnLatency,
   VoiceTraceTimeline,

package/dist/svelte/createVoiceWidget.d.ts

@@ -0,0 +1,19 @@
+import type { VoiceControllerOptions } from "../types";
+import { type VoiceWidgetLabels, type VoiceWidgetTheme, type VoiceWidgetViewModel } from "../client/voiceWidgetView";
+export type CreateVoiceWidgetOptions = VoiceControllerOptions & {
+    labels?: VoiceWidgetLabels;
+    theme?: VoiceWidgetTheme;
+    title?: string;
+};
+export declare const createVoiceWidget: <TResult = unknown>(path: string, options?: CreateVoiceWidgetOptions) => {
+    close: () => void;
+    endCall: () => void;
+    getHTML: () => string;
+    getSnapshot: () => import("..").VoiceControllerState<TResult>;
+    getViewModel: () => VoiceWidgetViewModel;
+    mute: () => void;
+    startCall: () => Promise<void>;
+    subscribe: (subscriber: () => void) => () => void;
+    unmute: () => Promise<void>;
+};
+export type { VoiceWidgetLabels, VoiceWidgetTheme, VoiceWidgetViewModel, } from "../client/voiceWidgetView";

package/dist/svelte/index.d.ts

@@ -1,4 +1,6 @@
 export { createVoiceCampaignDialerProof } from "./createVoiceCampaignDialerProof";
+export { createVoiceWidget } from "./createVoiceWidget";
+export type { CreateVoiceWidgetOptions, VoiceWidgetLabels, VoiceWidgetTheme, VoiceWidgetViewModel, } from "./createVoiceWidget";
 export { createVoiceDeliveryRuntime } from "./createVoiceDeliveryRuntime";
 export { createVoiceOpsActionCenter } from "./createVoiceOpsActionCenter";
 export { createVoiceLiveOps } from "./createVoiceLiveOps";