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

package/dist/react/VoiceWidget.d.ts

@@ -0,0 +1,33 @@
+import type { VoiceControllerOptions } 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 VoiceWidgetProps = {
+    className?: string;
+    controllerOptions?: VoiceControllerOptions;
+    labels?: VoiceWidgetLabels;
+    /** Voice runtime URL. Default '/voice'. */
+    path?: string;
+    /** Optional callback for diagnostic events surfaced by the controller. */
+    onError?: (error: string) => void;
+    theme?: VoiceWidgetTheme;
+    title?: string;
+};
+export declare const VoiceWidget: ({ className, controllerOptions, labels: labelsOverride, onError, path, theme: themeOverride, 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,237 @@ 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/react/VoiceWidget.tsx
+import { jsxDEV as jsxDEV22 } from "react/jsx-dev-runtime";
+var DEFAULT_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_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 resolveRadius = (radius) => typeof radius === "number" ? `${radius}px` : radius;
+var VoiceWidget = ({
+  className,
+  controllerOptions,
+  labels: labelsOverride,
+  onError,
+  path = "/voice",
+  theme: themeOverride,
+  title
+}) => {
+  const theme = { ...DEFAULT_THEME, ...themeOverride };
+  const labels = { ...DEFAULT_LABELS, ...labelsOverride };
+  const lastErrorRef = useRef26(null);
+  const controller = useVoiceController(path, controllerOptions);
+  if (controller.error && controller.error !== lastErrorRef.current) {
+    lastErrorRef.current = controller.error;
+    onError?.(controller.error);
+  }
+  const lastAssistantAt = useMemo(() => {
+    const last = controller.assistantAudio.at(-1);
+    return last?.receivedAt;
+  }, [controller.assistantAudio]);
+  const lastTranscriptAt = useMemo(() => {
+    const lastTurn = controller.turns.at(-1);
+    return lastTurn?.committedAt;
+  }, [controller.turns]);
+  const agentState = deriveVoiceAgentUIState({
+    hasActivePartial: controller.partial.length > 0,
+    isConnected: controller.isConnected,
+    isPlaying: false,
+    isRecording: controller.isRecording,
+    lastAssistantAt,
+    lastTranscriptAt
+  });
+  const connecting = !controller.isConnected && controller.status !== "idle" && !controller.error;
+  const containerStyle = {
+    background: theme.background,
+    borderRadius: resolveRadius(theme.radius),
+    color: theme.foreground,
+    fontFamily: theme.fontFamily,
+    minWidth: 240,
+    padding: "20px 22px"
+  };
+  const statusDotStyle = {
+    background: controller.error ? theme.errorAccent : agentState === "idle" ? "rgba(148, 163, 184, 0.6)" : theme.accent,
+    borderRadius: "50%",
+    boxShadow: agentState === "speaking" ? `0 0 12px ${theme.accent}` : undefined,
+    height: 10,
+    width: 10
+  };
+  const buttonStyle = (variant) => ({
+    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"
+  });
+  const handleStart = () => {
+    controller.startRecording();
+  };
+  const handleStop = () => {
+    controller.stopRecording();
+  };
+  const handleEnd = () => {
+    controller.close();
+  };
+  const showStart = !controller.isRecording && controller.status !== "completed";
+  const showStop = controller.isRecording;
+  return /* @__PURE__ */ jsxDEV22("div", {
+    "aria-live": "polite",
+    className,
+    "data-agent-state": agentState,
+    role: "region",
+    style: containerStyle,
+    children: [
+      /* @__PURE__ */ jsxDEV22("div", {
+        style: {
+          alignItems: "center",
+          display: "flex",
+          gap: 10,
+          marginBottom: 12
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV22("span", {
+            "aria-hidden": "true",
+            style: statusDotStyle
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV22("strong", {
+            style: { fontSize: 15 },
+            children: title ?? "Voice"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV22("span", {
+            style: {
+              fontSize: 13,
+              marginLeft: "auto",
+              opacity: 0.7
+            },
+            children: controller.error ? "Error" : connecting ? labels.connecting : controller.status === "completed" ? labels.callEnded : stateLabel(agentState, labels)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      controller.partial ? /* @__PURE__ */ jsxDEV22("p", {
+        style: {
+          fontSize: 13,
+          margin: "8px 0 12px",
+          opacity: 0.85,
+          wordBreak: "break-word"
+        },
+        children: [
+          "\u201C",
+          controller.partial,
+          "\u201D"
+        ]
+      }, undefined, true, undefined, this) : null,
+      /* @__PURE__ */ jsxDEV22("div", {
+        style: { display: "flex", gap: 10 },
+        children: [
+          showStart ? /* @__PURE__ */ jsxDEV22("button", {
+            onClick: handleStart,
+            style: buttonStyle("primary"),
+            type: "button",
+            children: labels.startCall
+          }, undefined, false, undefined, this) : null,
+          showStop ? /* @__PURE__ */ jsxDEV22("button", {
+            onClick: handleStop,
+            style: buttonStyle("secondary"),
+            type: "button",
+            children: labels.mute
+          }, undefined, false, undefined, this) : null,
+          controller.isConnected ? /* @__PURE__ */ jsxDEV22("button", {
+            onClick: handleEnd,
+            style: buttonStyle("danger"),
+            type: "button",
+            children: labels.endCall
+          }, undefined, false, undefined, this) : null
+        ]
+      }, undefined, true, undefined, this),
+      controller.error ? /* @__PURE__ */ jsxDEV22("p", {
+        style: {
+          color: theme.errorAccent,
+          fontSize: 12,
+          marginTop: 12
+        },
+        children: controller.error
+      }, 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 +12763,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 +12804,7 @@ export {
   useVoiceCampaignDialerProof,
   useVoiceCallDebugger,
   useVoiceAgentSquadStatus,
+  VoiceWidget,
   VoiceTurnQuality,
   VoiceTurnLatency,
   VoiceTraceTimeline,

package/package.json

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