@absolutejs/voice 0.0.22-beta.494 → 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

@@ -1,33 +1,13 @@
 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;
-};
+import { type VoiceWidgetLabels, type VoiceWidgetTheme, type VoiceWidgetViewModel } from "../client/voiceWidgetView";
+export type { VoiceWidgetLabels, VoiceWidgetTheme, VoiceWidgetViewModel };
 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;
+    path?: string;
     theme?: VoiceWidgetTheme;
     title?: string;
 };
-export declare const VoiceWidget: ({ className, controllerOptions, labels: labelsOverride, onError, path, theme: themeOverride, title, }: VoiceWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VoiceWidget: ({ className, controllerOptions, labels, onError, path, theme, title, }: VoiceWidgetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/react/index.js

@@ -12494,9 +12494,8 @@ var voiceAgentUIStateOrder = [
   "speaking"
 ];
 
-// src/react/VoiceWidget.tsx
-import { jsxDEV as jsxDEV22 } from "react/jsx-dev-runtime";
-var DEFAULT_THEME = {
+// src/client/voiceWidgetView.ts
+var DEFAULT_VOICE_WIDGET_THEME = {
   accent: "#3b82f6",
   background: "#0f172a",
   errorAccent: "#ef4444",
@@ -12504,7 +12503,7 @@ var DEFAULT_THEME = {
   foreground: "#f8fafc",
   radius: 16
 };
-var DEFAULT_LABELS = {
+var DEFAULT_VOICE_WIDGET_LABELS = {
   callEnded: "Call ended",
   connecting: "Connecting\u2026",
   endCall: "End call",
@@ -12528,83 +12527,134 @@ var stateLabel = (state, labels) => {
       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: labelsOverride,
+  labels,
   onError,
   path = "/voice",
-  theme: themeOverride,
+  theme,
   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;
+  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,
-    "data-agent-state": agentState,
+    className: className ?? model.classes.container,
+    "data-agent-state": model.agentState,
     role: "region",
-    style: containerStyle,
+    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: {
@@ -12616,11 +12666,16 @@ var VoiceWidget = ({
         children: [
           /* @__PURE__ */ jsxDEV22("span", {
             "aria-hidden": "true",
-            style: statusDotStyle
+            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: title ?? "Voice"
+            children: model.title
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV22("span", {
             style: {
@@ -12628,11 +12683,11 @@ var VoiceWidget = ({
               marginLeft: "auto",
               opacity: 0.7
             },
-            children: controller.error ? "Error" : connecting ? labels.connecting : controller.status === "completed" ? labels.callEnded : stateLabel(agentState, labels)
+            children: model.statusLabel
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      controller.partial ? /* @__PURE__ */ jsxDEV22("p", {
+      model.partial ? /* @__PURE__ */ jsxDEV22("p", {
         style: {
           fontSize: 13,
           margin: "8px 0 12px",
@@ -12641,40 +12696,44 @@ var VoiceWidget = ({
         },
         children: [
           "\u201C",
-          controller.partial,
+          model.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"),
+          model.controls.canStart ? /* @__PURE__ */ jsxDEV22("button", {
+            onClick: () => {
+              controller.startRecording();
+            },
+            style: buttonStyle("primary", model.theme),
             type: "button",
-            children: labels.startCall
+            children: model.labels.startCall
           }, undefined, false, undefined, this) : null,
-          showStop ? /* @__PURE__ */ jsxDEV22("button", {
-            onClick: handleStop,
-            style: buttonStyle("secondary"),
+          model.controls.canMute ? /* @__PURE__ */ jsxDEV22("button", {
+            onClick: () => controller.stopRecording(),
+            style: buttonStyle("secondary", model.theme),
             type: "button",
-            children: labels.mute
+            children: model.labels.mute
           }, undefined, false, undefined, this) : null,
-          controller.isConnected ? /* @__PURE__ */ jsxDEV22("button", {
-            onClick: handleEnd,
-            style: buttonStyle("danger"),
+          model.controls.canEnd ? /* @__PURE__ */ jsxDEV22("button", {
+            onClick: () => {
+              controller.close();
+            },
+            style: buttonStyle("danger", model.theme),
             type: "button",
-            children: labels.endCall
+            children: model.labels.endCall
           }, undefined, false, undefined, this) : null
         ]
       }, undefined, true, undefined, this),
-      controller.error ? /* @__PURE__ */ jsxDEV22("p", {
+      model.errorMessage ? /* @__PURE__ */ jsxDEV22("p", {
         style: {
-          color: theme.errorAccent,
+          color: model.theme.errorAccent,
           fontSize: 12,
           marginTop: 12
         },
-        children: controller.error
+        children: model.errorMessage
       }, undefined, false, undefined, this) : null
     ]
   }, undefined, true, undefined, this);

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";