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

package/dist/vue/VoiceWidget.d.ts

@@ -0,0 +1,77 @@
+import { type PropType } from "vue";
+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 declare const VoiceWidget: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    controllerOptions: {
+        default: () => {};
+        type: PropType<VoiceControllerOptions>;
+    };
+    labels: {
+        default: () => {};
+        type: PropType<VoiceWidgetLabels>;
+    };
+    path: {
+        default: string;
+        type: StringConstructor;
+    };
+    theme: {
+        default: () => {};
+        type: PropType<VoiceWidgetTheme>;
+    };
+    title: {
+        default: string;
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (_message: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    controllerOptions: {
+        default: () => {};
+        type: PropType<VoiceControllerOptions>;
+    };
+    labels: {
+        default: () => {};
+        type: PropType<VoiceWidgetLabels>;
+    };
+    path: {
+        default: string;
+        type: StringConstructor;
+    };
+    theme: {
+        default: () => {};
+        type: PropType<VoiceWidgetTheme>;
+    };
+    title: {
+        default: string;
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    onError?: ((_message: string) => any) | undefined;
+}>, {
+    title: string;
+    path: string;
+    theme: VoiceWidgetTheme;
+    controllerOptions: VoiceControllerOptions;
+    labels: VoiceWidgetLabels;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/vue/index.d.ts

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

package/dist/vue/index.js

@@ -11867,6 +11867,221 @@ function useVoiceController(path, options = {}) {
     turns
   };
 }
+// src/vue/VoiceWidget.ts
+import { computed as computed10, defineComponent as defineComponent18, h as h18 } from "vue";
+
+// 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/vue/VoiceWidget.ts
+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 resolveRadius = (radius) => typeof radius === "number" ? `${radius}px` : radius;
+var VoiceWidget = defineComponent18({
+  name: "VoiceWidget",
+  props: {
+    controllerOptions: {
+      default: () => ({}),
+      type: Object
+    },
+    labels: {
+      default: () => ({}),
+      type: Object
+    },
+    path: { default: "/voice", type: String },
+    theme: {
+      default: () => ({}),
+      type: Object
+    },
+    title: { default: "Voice", type: String }
+  },
+  emits: { error: (_message) => true },
+  setup(props, { emit }) {
+    const controller = useVoiceController(props.path, props.controllerOptions);
+    const theme = computed10(() => ({ ...DEFAULT_THEME, ...props.theme }));
+    const labels = computed10(() => ({ ...DEFAULT_LABELS, ...props.labels }));
+    const agentState = computed10(() => {
+      const lastAssistantAt = controller.assistantAudio.value.at(-1)?.receivedAt;
+      const lastTranscriptAt = controller.turns.value.at(-1)?.committedAt;
+      return deriveVoiceAgentUIState({
+        hasActivePartial: controller.partial.value.length > 0,
+        isConnected: controller.isConnected.value,
+        isPlaying: false,
+        isRecording: controller.isRecording.value,
+        lastAssistantAt,
+        lastTranscriptAt
+      });
+    });
+    return () => {
+      const t = theme.value;
+      const l = labels.value;
+      if (controller.error.value) {
+        emit("error", controller.error.value);
+      }
+      const stateLabel = controller.error.value ? "Error" : !controller.isConnected.value && controller.status.value !== "idle" ? l.connecting : controller.status.value === "completed" ? l.callEnded : agentState.value === "listening" ? l.listening : agentState.value === "speaking" ? l.speaking : agentState.value === "thinking" ? l.thinking : l.idle;
+      const showStart = !controller.isRecording.value && controller.status.value !== "completed";
+      return h18("div", {
+        "aria-live": "polite",
+        "data-agent-state": agentState.value,
+        role: "region",
+        style: {
+          background: t.background,
+          borderRadius: resolveRadius(t.radius),
+          color: t.foreground,
+          fontFamily: t.fontFamily,
+          minWidth: "240px",
+          padding: "20px 22px"
+        }
+      }, [
+        h18("div", {
+          style: {
+            alignItems: "center",
+            display: "flex",
+            gap: "10px",
+            marginBottom: "12px"
+          }
+        }, [
+          h18("span", {
+            "aria-hidden": "true",
+            style: {
+              background: controller.error.value ? t.errorAccent : agentState.value === "idle" ? "rgba(148,163,184,0.6)" : t.accent,
+              borderRadius: "50%",
+              height: "10px",
+              width: "10px"
+            }
+          }),
+          h18("strong", { style: { fontSize: "15px" } }, props.title),
+          h18("span", {
+            style: {
+              fontSize: "13px",
+              marginLeft: "auto",
+              opacity: "0.7"
+            }
+          }, stateLabel)
+        ]),
+        controller.partial.value ? h18("p", {
+          style: {
+            fontSize: "13px",
+            margin: "8px 0 12px",
+            opacity: "0.85",
+            wordBreak: "break-word"
+          }
+        }, `\u201C${controller.partial.value}\u201D`) : null,
+        h18("div", { style: { display: "flex", gap: "10px" } }, [
+          showStart ? h18("button", {
+            onClick: () => {
+              controller.startRecording();
+            },
+            style: {
+              background: t.accent,
+              border: "none",
+              borderRadius: "12px",
+              color: t.foreground,
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: "500",
+              padding: "10px 14px"
+            },
+            type: "button"
+          }, l.startCall) : null,
+          controller.isRecording.value ? h18("button", {
+            onClick: () => controller.stopRecording(),
+            style: {
+              background: "transparent",
+              border: "1px solid rgba(255,255,255,0.18)",
+              borderRadius: "12px",
+              color: t.foreground,
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: "500",
+              padding: "10px 14px"
+            },
+            type: "button"
+          }, l.mute) : null,
+          controller.isConnected.value ? h18("button", {
+            onClick: () => {
+              controller.close();
+            },
+            style: {
+              background: t.errorAccent,
+              border: "none",
+              borderRadius: "12px",
+              color: t.foreground,
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: "500",
+              padding: "10px 14px"
+            },
+            type: "button"
+          }, l.endCall) : null
+        ]),
+        controller.error.value ? h18("p", {
+          style: {
+            color: t.errorAccent,
+            fontSize: "12px",
+            marginTop: "12px"
+          }
+        }, controller.error.value) : null
+      ]);
+    };
+  }
+});
 // src/vue/useVoiceTraceTimeline.ts
 import { onUnmounted as onUnmounted23, ref as ref18, shallowRef as shallowRef22 } from "vue";
 function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
@@ -12036,6 +12251,7 @@ export {
   useVoiceCampaignDialerProof,
   useVoiceCallDebugger,
   useVoiceAgentSquadStatus,
+  VoiceWidget,
   VoiceTurnQuality,
   VoiceTurnLatency,
   VoiceSessionSnapshot,

package/package.json

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