@alexkroman1/aai-ui 5.2.0 → 5.4.0

package/README.md

@@ -0,0 +1,59 @@
+# @alexkroman1/aai-ui
+
+The browser client for aai voice agents: React 19 components, hooks, and a
+framework-agnostic session core (WebSocket + microphone + playback).
+
+```sh
+npm i @alexkroman1/aai-ui react react-dom
+```
+
+Every agent gets this UI for free — `aai dev` and deployed agents serve a
+default client built from this package. Install it directly when the agent
+has its own `client.tsx`.
+
+## A custom client
+
+`client()` mounts the default chat shell with your sidebar, or replaces the
+whole UI with a custom component:
+
+```tsx
+import "@alexkroman1/aai-ui/styles.css";
+import { client, useAgentState, useTheme } from "@alexkroman1/aai-ui";
+
+type OrderView = { items: string[]; total: string };
+
+function OrderSidebar() {
+  const theme = useTheme();
+  // Server state projected by the agent's `syncState`, pushed after every
+  // tool call.
+  const order = useAgentState<OrderView>() ?? { items: [], total: "$0.00" };
+  return (
+    <div style={{ color: theme.text }}>
+      {order.items.map((item) => (
+        <div key={item}>{item}</div>
+      ))}
+      <strong style={{ color: theme.primary }}>{order.total}</strong>
+    </div>
+  );
+}
+
+client({ sidebar: <OrderSidebar /> });
+```
+
+## Hooks
+
+Inside components rendered by `client()`:
+
+- `useSession()` — connection state, transcript, `connect`/`disconnect`.
+- `useAgentState<T>()` — the agent's `syncState` projection, live.
+- `useToolResult(name, cb)` / `useToolCallStart(name, cb)` — observe tool
+  calls as they run (e.g. to render a card per result).
+- `useEvent(name, cb)` — custom events the agent pushes with `ctx.send`.
+- `useTheme()` — the resolved theme colors for custom components.
+
+For a non-React integration, `createSessionCore()` exposes the same session
+as a plain store with an immutable snapshot per change.
+
+## Documentation
+
+Full API reference: <https://alexkroman.github.io/agent/>

package/dist/{chat-view-C6N2oXjo.js → chat-view-CqRGHImR.js}

@@ -2,8 +2,8 @@ import { useSessionSelector, useTheme } from "./context.js";
 import { a as THINKING_COLOR, r as TEXT_FAINT, t as ERROR_COLOR } from "./_colors-Bfh3-BVE.js";
 import { t as AaiLogo } from "./aai-logo-B8lDmsut.js";
 import { t as Eyebrow } from "./eyebrow-C6ZFuiz6.js";
-import { t as Controls } from "./controls-Cqg7T4FN.js";
-import { t as MessageList } from "./message-list-CD9GxrlH.js";
+import { t as Controls } from "./controls-CoBO6sId.js";
+import { t as MessageList } from "./message-list-CdtrNi4w.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region components/console-shell.tsx
@@ -93,13 +93,19 @@ const PULSING_STATES = /* @__PURE__ */ new Set(["listening", "speaking"]);
 * (logo + live-status eyebrow), the conversation on a raised white card,
 * and the session controls beneath it.
 *
-* Must be rendered inside a {@link SessionProvider}.
+* Must be rendered inside a `SessionProvider`.
 *
 * @example
 * ```tsx
-* <StartScreen icon="🍕" title="Pizza Palace">
-*   <ChatView />
-* </StartScreen>
+* import { ChatView, StartScreen } from "@alexkroman1/aai-ui";
+*
+* function App() {
+*   return (
+*     <StartScreen icon="🍕" title="Pizza Palace">
+*       <ChatView />
+*     </StartScreen>
+*   );
+* }
 * ```
 *
 * @param icon - Optional element rendered in place of the logo in the header.

package/dist/client-config.d.ts

@@ -13,8 +13,13 @@
  * named no sessionUrl" (`{}`). See its doc comment.
  */
 import { type ClientConfigResponse } from "@alexkroman1/aai/protocol";
+/** @internal Re-exported for the sibling modules; the SDK's `/protocol` subpath is the canonical home. */
 export type { ClientConfigResponse } from "@alexkroman1/aai/protocol";
-/** Resolve a relative endpoint path against the agent's base URL. */
+/**
+ * Resolve a relative endpoint path against the agent's base URL.
+ *
+ * @internal
+ */
 export declare function buildAgentUrl(platformUrl: string, endpointPath: string): URL;
 /**
  * Fetch the agent's client config, reporting `null` when the lookup did not
@@ -29,7 +34,13 @@ export declare function buildAgentUrl(platformUrl: string, endpointPath: string)
  * platform's `/:slug/websocket` — a WebSocket redirect browsers don't
  * follow, so every retry failed with no re-brokering even after the agent
  * recovered.
+ *
+ * @internal
  */
 export declare function loadClientConfig(platformUrl: string, fetchFn?: typeof globalThis.fetch): Promise<ClientConfigResponse | null>;
-/** Fetch the agent's client config; any failure yields the agent default. */
+/**
+ * Fetch the agent's client config; any failure yields the agent default.
+ *
+ * @internal
+ */
 export declare function fetchClientConfig(platformUrl: string, fetchFn?: typeof globalThis.fetch): Promise<ClientConfigResponse>;

package/dist/components/button.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 /**
  * Visual style of a {@link Button} (design-system "website refresh":
  * rectangular, ALL-CAPS, tracked labels).
@@ -6,15 +6,19 @@ import type { ReactNode } from "react";
  * - `"default"` — Primary filled button (indigo background).
  * - `"secondary"` — Outlined primary (transparent background, primary border).
  * - `"ghost"` — Raised neutral (surface background with hairline border).
+ *
+ * @public
  */
-type ButtonVariant = "default" | "secondary" | "ghost";
+export type ButtonVariant = "default" | "secondary" | "ghost";
 /**
  * Size preset for a {@link Button}.
  *
  * - `"default"` — Compact control (height 36 px).
  * - `"lg"` — Primary CTA (height 44 px, generous padding).
+ *
+ * @public
  */
-type ButtonSize = "default" | "lg";
+export type ButtonSize = "default" | "lg";
 /**
  * A styled button with variant and size presets.
  *
@@ -23,13 +27,16 @@ type ButtonSize = "default" | "lg";
  *
  * @example
  * ```tsx
- * <Button variant="secondary" onClick={handleClick}>
- *   Stop
- * </Button>
+ * import { Button } from "@alexkroman1/aai-ui";
  *
- * <Button size="lg" className="w-full">
- *   Start Conversation
- * </Button>
+ * function Actions({ onStop }: { onStop: () => void }) {
+ *   return (
+ *     <>
+ *       <Button variant="secondary" onClick={onStop}>Stop</Button>
+ *       <Button size="lg" className="w-full">Start Conversation</Button>
+ *     </>
+ *   );
+ * }
  * ```
  *
  * @param variant - Visual style (`"default"` | `"secondary"` | `"ghost"`). Defaults to `"default"`.
@@ -44,5 +51,4 @@ export declare function Button({ variant, size, className, children, style, ...r
     size?: ButtonSize;
     className?: string;
     children?: ReactNode;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">): import("react").JSX.Element;
-export {};
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">): import("react").JSX.Element;

package/dist/components/button.js

@@ -11,13 +11,16 @@ import { jsx } from "react/jsx-runtime";
 *
 * @example
 * ```tsx
-* <Button variant="secondary" onClick={handleClick}>
-*   Stop
-* </Button>
+* import { Button } from "@alexkroman1/aai-ui";
 *
-* <Button size="lg" className="w-full">
-*   Start Conversation
-* </Button>
+* function Actions({ onStop }: { onStop: () => void }) {
+*   return (
+*     <>
+*       <Button variant="secondary" onClick={onStop}>Stop</Button>
+*       <Button size="lg" className="w-full">Start Conversation</Button>
+*     </>
+*   );
+* }
 * ```
 *
 * @param variant - Visual style (`"default"` | `"secondary"` | `"ghost"`). Defaults to `"default"`.

package/dist/components/chat-view.d.ts

@@ -6,13 +6,19 @@ import type { ReactNode } from "react";
  * (logo + live-status eyebrow), the conversation on a raised white card,
  * and the session controls beneath it.
  *
- * Must be rendered inside a {@link SessionProvider}.
+ * Must be rendered inside a `SessionProvider`.
  *
  * @example
  * ```tsx
- * <StartScreen icon="🍕" title="Pizza Palace">
- *   <ChatView />
- * </StartScreen>
+ * import { ChatView, StartScreen } from "@alexkroman1/aai-ui";
+ *
+ * function App() {
+ *   return (
+ *     <StartScreen icon="🍕" title="Pizza Palace">
+ *       <ChatView />
+ *     </StartScreen>
+ *   );
+ * }
  * ```
  *
  * @param icon - Optional element rendered in place of the logo in the header.

package/dist/components/chat-view.js

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as ChatView } from "../chat-view-C6N2oXjo.js";
+import { t as ChatView } from "../chat-view-CqRGHImR.js";
 export { ChatView };

package/dist/components/controls.d.ts

@@ -2,11 +2,15 @@
  * Session control buttons: **Stop / Resume** and **New Conversation**.
  *
  * Reads session state from {@link useSession}. Must be rendered inside a
- * {@link SessionProvider}.
+ * `SessionProvider`.
  *
  * @example
  * ```tsx
- * <Controls className="justify-end" />
+ * import { Controls } from "@alexkroman1/aai-ui";
+ *
+ * function Footer() {
+ *   return <Controls className="justify-end" />;
+ * }
  * ```
  *
  * @param className - Additional CSS class names applied to the container.

package/dist/components/controls.js

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as Controls } from "../controls-Cqg7T4FN.js";
+import { t as Controls } from "../controls-CoBO6sId.js";
 export { Controls };

package/dist/components/message-list.d.ts

@@ -5,11 +5,15 @@
  * Messages and tool calls are interleaved in the correct order. The list
  * auto-scrolls to the latest content.
  *
- * Must be rendered inside a {@link SessionProvider}.
+ * Must be rendered inside a `SessionProvider`.
  *
  * @example
  * ```tsx
- * <MessageList className="flex-1" />
+ * import { MessageList } from "@alexkroman1/aai-ui";
+ *
+ * function Conversation() {
+ *   return <MessageList className="flex-1" />;
+ * }
  * ```
  *
  * @param className - Additional CSS class names applied to the scroll container.

package/dist/components/message-list.js

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as MessageList } from "../message-list-CD9GxrlH.js";
+import { t as MessageList } from "../message-list-CdtrNi4w.js";
 export { MessageList };

package/dist/components/sidebar-layout.d.ts

@@ -5,9 +5,19 @@ import type { ReactNode } from "react";
  *
  * @example
  * ```tsx
- * <SidebarLayout sidebar={<OrderPanel />}>
- *   <ChatView />
- * </SidebarLayout>
+ * import { ChatView, SidebarLayout } from "@alexkroman1/aai-ui";
+ *
+ * function OrderPanel() {
+ *   return <div>Cart</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SidebarLayout sidebar={<OrderPanel />}>
+ *       <ChatView />
+ *     </SidebarLayout>
+ *   );
+ * }
  * ```
  *
  * @public

package/dist/components/sidebar-layout.js

@@ -9,9 +9,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * @example
 * ```tsx
-* <SidebarLayout sidebar={<OrderPanel />}>
-*   <ChatView />
-* </SidebarLayout>
+* import { ChatView, SidebarLayout } from "@alexkroman1/aai-ui";
+*
+* function OrderPanel() {
+*   return <div>Cart</div>;
+* }
+*
+* function App() {
+*   return (
+*     <SidebarLayout sidebar={<OrderPanel />}>
+*       <ChatView />
+*     </SidebarLayout>
+*   );
+* }
 * ```
 *
 * @public

package/dist/components/start-screen.d.ts

@@ -6,6 +6,8 @@ import type { ReactNode } from "react";
  *
  * @example
  * ```tsx
+ * import { ChatView, StartScreen } from "@alexkroman1/aai-ui";
+ *
  * function MyAgent() {
  *   return (
  *     <StartScreen icon="🍕" title="Pizza Palace" subtitle="Voice-powered ordering">

package/dist/components/start-screen.js

@@ -14,6 +14,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * @example
 * ```tsx
+* import { ChatView, StartScreen } from "@alexkroman1/aai-ui";
+*
 * function MyAgent() {
 *   return (
 *     <StartScreen icon="🍕" title="Pizza Palace" subtitle="Voice-powered ordering">

package/dist/components/tool-call-block.d.ts

@@ -16,15 +16,10 @@ import type { ToolCallInfo } from "../types.ts";
  * snapshots and rows are keyed on the stable `callId`, so a list update only
  * re-renders the rows whose tool call actually changed.
  *
- * @example
- * ```tsx
- * <ToolCallBlock toolCall={toolCall} />
- * ```
- *
  * @param toolCall - The tool call to render (see {@link ToolCallInfo}).
  * @param className - Additional CSS class names.
  *
- * @public
+ * @internal Not exported from the package — rendered by `MessageList`.
  */
 export declare const ToolCallBlock: import("react").MemoExoticComponent<({ toolCall, className, }: {
     toolCall: ToolCallInfo;

package/dist/components/tool-call-block.js

@@ -1,3 +1,3 @@
 import "../context.js";
-import { t as ToolCallBlock } from "../tool-call-block-O9vLqoyU.js";
+import { t as ToolCallBlock } from "../tool-call-block-C--Bj04_.js";
 export { ToolCallBlock };

package/dist/components/tool-config-context.d.ts

@@ -8,10 +8,10 @@ export type ToolDisplayConfig = Record<string, {
     label?: string;
 }>;
 /**
- * Context for tool display configuration.
- * Provided by `client` or manually via `ToolConfigContext.Provider`.
+ * Context for tool display configuration. Installed by `client()` from
+ * `ClientConfig.tools`; the built-in components read it via `useToolConfig`.
  *
- * @public
+ * @internal
  */
 export declare const ToolConfigContext: import("react").Context<ToolDisplayConfig>;
 /**

package/dist/components/url-chips.d.ts

@@ -2,7 +2,7 @@
  * The session's shareable UI URL — the page this UI is served from, what
  * you'd send someone to talk to the agent.
  *
- * @public
+ * @internal
  */
 export declare function UiUrlChip({ className }: {
     className?: string | undefined;
@@ -11,7 +11,7 @@ export declare function UiUrlChip({ className }: {
  * The session's programmatic WebSocket endpoint — the URL a script or backend
  * can connect to directly instead of using this UI.
  *
- * @public
+ * @internal
  */
 export declare function ApiUrlChip({ className }: {
     className?: string | undefined;
@@ -22,7 +22,7 @@ export declare function ApiUrlChip({ className }: {
  * told apart. Rendered by the default shell in every session mode (S2S,
  * pipeline).
  *
- * @public
+ * @internal
  */
 export declare function SessionUrlChips({ className }: {
     className?: string | undefined;

package/dist/context.d.ts

@@ -1,12 +1,31 @@
 import { type ReactNode } from "react";
 import type { SessionCore, SessionSnapshot } from "./session-core-types.ts";
 import type { ClientTheme } from "./types.ts";
+/**
+ * Provides the {@link SessionCore} the session hooks read. `client()`
+ * installs it automatically; a custom tree only needs it when bypassing
+ * `client()` and mounting React itself.
+ *
+ * @internal
+ */
 export declare function SessionProvider({ value, children }: {
     value: SessionCore;
     children?: ReactNode;
 }): import("react").FunctionComponentElement<import("react").ProviderProps<SessionCore | null>>;
-/** The session snapshot merged with the core's control methods. Method
- *  signatures come from {@link SessionCore} — one source of truth. */
+/**
+ * What {@link useSession} returns: the live {@link SessionSnapshot} fields
+ * (`state`, `messages`, `toolCalls`, `agentState`, live transcripts, `error`,
+ * `apiUrl`, `started`/`running`/`recording`, …) merged with the session's
+ * control methods (`start`, `toggle`, `reset`, `resetState`, `disconnect`,
+ * `cancel`).
+ *
+ * Note there is no text-send method — sessions are voice-only; the only
+ * client→server inputs are audio and the control methods above.
+ *
+ * Method signatures come from {@link SessionCore} — one source of truth.
+ *
+ * @public
+ */
 export type Session = SessionSnapshot & Pick<SessionCore, "start" | "cancel" | "resetState" | "reset" | "disconnect" | "toggle">;
 /**
  * Return the raw {@link SessionCore} from context without subscribing to
@@ -18,6 +37,30 @@ export type Session = SessionSnapshot & Pick<SessionCore, "start" | "cancel" | "
  * components.
  */
 export declare function useSessionCore(): SessionCore;
+/**
+ * Return the live {@link Session}: the current snapshot fields plus the
+ * control methods (`start`, `toggle`, `reset`, `resetState`, `disconnect`,
+ * `cancel`).
+ *
+ * Throws if used outside the provider `client()` installs (the error names
+ * `<SessionProvider>` — you only mount that yourself when bypassing
+ * `client()`). Re-renders the component on *every* snapshot change; for a
+ * component that reads one field, prefer {@link useSessionSelector} for a
+ * targeted subscription.
+ *
+ * @example
+ * ```tsx
+ * import { useSession } from "@alexkroman1/aai-ui";
+ *
+ * function Controls() {
+ *   const session = useSession();
+ *   if (!session.started) return <button onClick={session.start}>Start</button>;
+ *   return <button onClick={session.toggle}>{session.running ? "Pause" : "Resume"}</button>;
+ * }
+ * ```
+ *
+ * @public
+ */
 export declare function useSession(): Session;
 /**
  * Subscribe to a narrow slice of the session snapshot.
@@ -34,8 +77,22 @@ export declare function useSession(): Session;
  * @public
  */
 export declare function useSessionSelector<T>(selector: (snapshot: SessionSnapshot) => T, isEqual?: (a: T, b: T) => boolean): T;
+/**
+ * Provides the theme the components read via `useTheme`. `client()` installs
+ * it automatically (from `ClientConfig.theme`); a custom tree only needs it
+ * when bypassing `client()` and mounting React itself.
+ *
+ * @internal
+ */
 export declare function ThemeProvider({ value, children, }: {
     value?: ClientTheme | undefined;
     children?: ReactNode;
 }): import("react").FunctionComponentElement<import("react").ProviderProps<Required<ClientTheme>>>;
+/**
+ * Read the resolved theme (every {@link ClientTheme} field filled with its
+ * default) from the nearest theme context. Returns the default theme when no
+ * provider is present, so components can call it unconditionally.
+ *
+ * @public
+ */
 export declare function useTheme(): Required<ClientTheme>;

package/dist/context.js

@@ -9,6 +9,13 @@ const DEFAULT_THEME = {
 	border: "#DCD7CC"
 };
 const SessionCtx = createContext(null);
+/**
+* Provides the {@link SessionCore} the session hooks read. `client()`
+* installs it automatically; a custom tree only needs it when bypassing
+* `client()` and mounting React itself.
+*
+* @internal
+*/
 function SessionProvider({ value, children }) {
 	return createElement(SessionCtx.Provider, { value }, children);
 }
@@ -26,6 +33,30 @@ function useSessionCore() {
 	if (!core) throw new Error("Session hooks must be used within <SessionProvider>");
 	return core;
 }
+/**
+* Return the live {@link Session}: the current snapshot fields plus the
+* control methods (`start`, `toggle`, `reset`, `resetState`, `disconnect`,
+* `cancel`).
+*
+* Throws if used outside the provider `client()` installs (the error names
+* `<SessionProvider>` — you only mount that yourself when bypassing
+* `client()`). Re-renders the component on *every* snapshot change; for a
+* component that reads one field, prefer {@link useSessionSelector} for a
+* targeted subscription.
+*
+* @example
+* ```tsx
+* import { useSession } from "@alexkroman1/aai-ui";
+*
+* function Controls() {
+*   const session = useSession();
+*   if (!session.started) return <button onClick={session.start}>Start</button>;
+*   return <button onClick={session.toggle}>{session.running ? "Pause" : "Resume"}</button>;
+* }
+* ```
+*
+* @public
+*/
 function useSession() {
 	const core = useSessionCore();
 	const snapshot = useSyncExternalStore(core.subscribe, core.getSnapshot);
@@ -58,6 +89,13 @@ function useSessionSelector(selector, isEqual = Object.is) {
 	return useSyncExternalStoreWithSelector(core.subscribe, core.getSnapshot, core.getSnapshot, selector, isEqual);
 }
 const ThemeCtx = createContext(DEFAULT_THEME);
+/**
+* Provides the theme the components read via `useTheme`. `client()` installs
+* it automatically (from `ClientConfig.theme`); a custom tree only needs it
+* when bypassing `client()` and mounting React itself.
+*
+* @internal
+*/
 function ThemeProvider({ value, children }) {
 	const merged = useMemo(() => value ? {
 		...DEFAULT_THEME,
@@ -92,6 +130,13 @@ function usePageBackground(bg) {
 		};
 	}, [bg]);
 }
+/**
+* Read the resolved theme (every {@link ClientTheme} field filled with its
+* default) from the nearest theme context. Returns the default theme when no
+* provider is present, so components can call it unconditionally.
+*
+* @public
+*/
 function useTheme() {
 	return useContext(ThemeCtx);
 }

package/dist/{controls-Cqg7T4FN.js → controls-CoBO6sId.js}

@@ -55,7 +55,7 @@ function UrlChip({ label, url, hint, testId, className }) {
 * The session's shareable UI URL — the page this UI is served from, what
 * you'd send someone to talk to the agent.
 *
-* @public
+* @internal
 */
 function UiUrlChip({ className }) {
 	return /* @__PURE__ */ jsx(UrlChip, {
@@ -70,7 +70,7 @@ function UiUrlChip({ className }) {
 * The session's programmatic WebSocket endpoint — the URL a script or backend
 * can connect to directly instead of using this UI.
 *
-* @public
+* @internal
 */
 function ApiUrlChip({ className }) {
 	return /* @__PURE__ */ jsx(UrlChip, {
@@ -87,7 +87,7 @@ function ApiUrlChip({ className }) {
 * told apart. Rendered by the default shell in every session mode (S2S,
 * pipeline).
 *
-* @public
+* @internal
 */
 function SessionUrlChips({ className }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -102,11 +102,15 @@ function SessionUrlChips({ className }) {
 * Session control buttons: **Stop / Resume** and **New Conversation**.
 *
 * Reads session state from {@link useSession}. Must be rendered inside a
-* {@link SessionProvider}.
+* `SessionProvider`.
 *
 * @example
 * ```tsx
-* <Controls className="justify-end" />
+* import { Controls } from "@alexkroman1/aai-ui";
+*
+* function Footer() {
+*   return <Controls className="justify-end" />;
+* }
 * ```
 *
 * @param className - Additional CSS class names applied to the container.

package/dist/default-client/assets/{audio-C1U_foBG.js → audio-DXQj0wCf.js}

@@ -1 +1 @@
-import{a as e,o as t,t as n}from"./index-CGZajs1V.js";function r(e,t,n){if(e!==t)throw Error(`Browser refused the ${n} sample rate: asked for ${t} Hz, got ${e} Hz`)}function i(e){e.then(e=>{for(let t of e.getTracks())t.stop()}).catch(()=>{})}function a(e,t,n){let r=new AudioWorkletNode(e,`capture-processor`,{channelCount:1,channelCountMode:`explicit`}),i=null;return r.port.onmessage=e=>{let r=e.data;r.event===`chunk`&&r.buffer?t(r.buffer):r.event===`silent`?n?.():r.event===`stopped`&&(i?.(),i=null)},{node:r,start(){r.port.postMessage({event:`start`})},stop(){return new Promise(e=>{let t=setTimeout(e,250);i=()=>{clearTimeout(t),e()},r.port.postMessage({event:`stop`})})}}}async function o(o){let{sttSampleRate:s,ttsSampleRate:c,captureWorkletSrc:l,playbackWorkletSrc:u,onMicData:d,onError:f,onPlaybackStats:p,onMicSilent:m}=o,h=new AudioContext({sampleRate:c,latencyHint:`playback`}),g=s===c,_=g?h:new AudioContext({sampleRate:s,latencyHint:`interactive`});async function v(){let e=g?[h]:[h,_];await Promise.all(e.map(e=>e.close().catch(e=>{console.warn(`AudioContext close failed:`,e)})))}let y=navigator.mediaDevices.getUserMedia({audio:{deviceId:{ideal:`default`},...n}}),b;try{[b]=await Promise.all([y,h.resume(),_.resume(),_.audioWorklet.addModule(l),h.audioWorklet.addModule(u)]),r(_.sampleRate,s,`capture`),r(h.sampleRate,c,`playback`)}catch(e){throw i(y),await v(),e}let x=_.createMediaStreamSource(b),S=a(_,d,m);x.connect(S.node),S.node.onprocessorerror=()=>{let e=Error(`Audio capture worklet crashed`);console.error(`[aai-ui]`,e.message),f?.(e)},S.start();let C=null,w=null,T=new AbortController;function E(){if(C)return C;let e=new AudioWorkletNode(h,`playback-processor`);return e.connect(h.destination),e.port.onmessage=e=>{if(e.data.event===`stop`){let t=e.data.stats;if(t&&t.concealedSamples>0&&p?.(t),e.data.reason===`interrupt`)return;w?.(),w=null}},e.onprocessorerror=()=>{let e=Error(`Audio playback worklet crashed`);console.error(`[aai-ui]`,e.message),w?.(),w=null,f?.(e)},C=e,e}let D={enqueue(e){T.signal.aborted||e.byteLength!==0&&E().port.postMessage({event:`write`,buffer:new Uint8Array(e)},[e])},done(){return!C||(C.port.postMessage({event:`done`}),h.state!==`running`)?Promise.resolve():new Promise(n=>{w?.();let r=()=>{clearInterval(i),clearTimeout(a),w===r&&(w=null),n()},i=setInterval(()=>{h.state!==`running`&&r()},t),a=setTimeout(r,e);w=r})},flush(){C&&(w?.(),w=null,C.port.postMessage({event:`interrupt`}))},async close(){if(!T.signal.aborted){T.abort(),await S.stop(),x.disconnect(),S.node.disconnect(),C&&C.disconnect();for(let e of b.getTracks())e.stop();await v()}},async[Symbol.asyncDispose](){await D.close()}};return D}export{o as createVoiceIO};
+import{a as e,o as t,t as n}from"./index-DyY8OeVc.js";function r(e,t,n){if(e!==t)throw Error(`Browser refused the ${n} sample rate: asked for ${t} Hz, got ${e} Hz`)}function i(e){e.then(e=>{for(let t of e.getTracks())t.stop()}).catch(()=>{})}function a(e,t,n){let r=new AudioWorkletNode(e,`capture-processor`,{channelCount:1,channelCountMode:`explicit`}),i=null;return r.port.onmessage=e=>{let r=e.data;r.event===`chunk`&&r.buffer?t(r.buffer):r.event===`silent`?n?.():r.event===`stopped`&&(i?.(),i=null)},{node:r,start(){r.port.postMessage({event:`start`})},stop(){return new Promise(e=>{let t=setTimeout(e,250);i=()=>{clearTimeout(t),e()},r.port.postMessage({event:`stop`})})}}}async function o(o){let{sttSampleRate:s,ttsSampleRate:c,captureWorkletSrc:l,playbackWorkletSrc:u,onMicData:d,onError:f,onPlaybackStats:p,onMicSilent:m}=o,h=new AudioContext({sampleRate:c,latencyHint:`playback`}),g=s===c,_=g?h:new AudioContext({sampleRate:s,latencyHint:`interactive`});async function v(){let e=g?[h]:[h,_];await Promise.all(e.map(e=>e.close().catch(e=>{console.warn(`AudioContext close failed:`,e)})))}let y=navigator.mediaDevices.getUserMedia({audio:{deviceId:{ideal:`default`},...n}}),b;try{[b]=await Promise.all([y,h.resume(),_.resume(),_.audioWorklet.addModule(l),h.audioWorklet.addModule(u)]),r(_.sampleRate,s,`capture`),r(h.sampleRate,c,`playback`)}catch(e){throw i(y),await v(),e}let x=_.createMediaStreamSource(b),S=a(_,d,m);x.connect(S.node),S.node.onprocessorerror=()=>{let e=Error(`Audio capture worklet crashed`);console.error(`[aai-ui]`,e.message),f?.(e)},S.start();let C=null,w=null,T=new AbortController;function E(){if(C)return C;let e=new AudioWorkletNode(h,`playback-processor`);return e.connect(h.destination),e.port.onmessage=e=>{if(e.data.event===`stop`){let t=e.data.stats;if(t&&t.concealedSamples>0&&p?.(t),e.data.reason===`interrupt`)return;w?.(),w=null}},e.onprocessorerror=()=>{let e=Error(`Audio playback worklet crashed`);console.error(`[aai-ui]`,e.message),w?.(),w=null,f?.(e)},C=e,e}let D={enqueue(e){T.signal.aborted||e.byteLength!==0&&E().port.postMessage({event:`write`,buffer:new Uint8Array(e)},[e])},done(){return!C||(C.port.postMessage({event:`done`}),h.state!==`running`)?Promise.resolve():new Promise(n=>{w?.();let r=()=>{clearInterval(i),clearTimeout(a),w===r&&(w=null),n()},i=setInterval(()=>{h.state!==`running`&&r()},t),a=setTimeout(r,e);w=r})},flush(){C&&(w?.(),w=null,C.port.postMessage({event:`interrupt`}))},async close(){if(!T.signal.aborted){T.abort(),await S.stop(),x.disconnect(),S.node.disconnect(),C&&C.disconnect();for(let e of b.getTracks())e.stop();await v()}},async[Symbol.asyncDispose](){await D.close()}};return D}export{o as createVoiceIO};

package/dist/default-client/assets/{capture-processor-dyyJArQs.js → capture-processor-DZg_Q6hY.js}

@@ -1,4 +1,4 @@
-import{n as e,r as t}from"./index-CGZajs1V.js";import{t as n}from"./_module-url-BX0RuRU2.js";var r=n(`
+import{n as e,r as t}from"./index-DyY8OeVc.js";import{t as n}from"./_module-url-BX0RuRU2.js";var r=n(`
 class CaptureProcessor extends AudioWorkletProcessor {
   constructor(options) {
     super();