npm - @alexkroman1/aai-ui - Versions diffs - 5.1.0 → 5.2.0 - Mend

@alexkroman1/aai-ui 5.1.0 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dist/default-client/assets/{playback-processor-BfJzQKW5.js → playback-processor-BO2TdYrv.js} RENAMED Viewed

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

package/dist/default-client/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <title>aai</title>
     <link rel="icon" href="./favicon.ico" />
     <style>html, body { background: #FBF8F2; margin: 0; }</style>
-    <script type="module" crossorigin src="./assets/index-22Wylv4z.js"></script>
+    <script type="module" crossorigin src="./assets/index-CGZajs1V.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-CRfdZPH1.css">
   </head>
   <body>

package/dist/define-client.d.ts CHANGED Viewed

@@ -2,25 +2,23 @@
 import { type ComponentType } from "react";
 import { type ToolDisplayConfig } from "./components/tool-config-context.ts";
 import type { SessionCore } from "./session-core-types.ts";
-import type { ClientTheme, WebSocketConstructor } from "./types.ts";
+import type { ClientTheme, VoiceSessionOptions } from "./types.ts";
 /**
  * Base options shared by both client tiers.
  *
+ * The session-forwarded fields are picked from {@link VoiceSessionOptions}
+ * (one source of truth for types and docs) rather than re-declared — a
+ * re-declared copy is exactly how doc comments drift.
+ *
  * @public
  */
-type BaseOptions = {
+type BaseOptions = Pick<VoiceSessionOptions, "onSessionId" | "resumeSessionId" | "WebSocket"> & {
     /** CSS selector or DOM element to render into. Defaults to `"#app"`. */
     target?: string | HTMLElement;
     /** Base URL of the AAI platform server. Derived from `location.href` by default. */
     platformUrl?: string;
     /** Theme color overrides. */
     theme?: ClientTheme;
-    /** Called when the server sends a session ID. Store it for reconnection. */
-    onSessionId?: (sessionId: string) => void;
-    /** Session ID from a previous connection for resuming persisted state. */
-    resumeSessionId?: string;
-    /** WebSocket constructor override. Passed through to session options. */
-    WebSocket?: WebSocketConstructor;
 };
 /**
  * Tier 1: Config-only options. Renders the default shell (StartScreen + ChatView).

package/dist/define-client.js CHANGED Viewed

@@ -1,7 +1,8 @@
-import { r as fetchClientConfig, t as createSessionCore } from "./session-core-CwCaFzL8.js";
+import { r as fetchClientConfig, t as createSessionCore } from "./session-core-Bvga6tUS.js";
 import { SessionProvider, ThemeProvider } from "./context.js";
-import { t as ChatView } from "./chat-view-CW-tZCMm.js";
-import { n as ToolConfigContext } from "./tool-call-block-DIxpG8GM.js";
+import { t as ChatView } from "./chat-view-C6N2oXjo.js";
+import { t as pageBaseUrl } from "./_utils-CsqbIVGI.js";
+import { n as ToolConfigContext } from "./tool-call-block-O9vLqoyU.js";
 import { SidebarLayout } from "./components/sidebar-layout.js";
 import { StartScreen } from "./components/start-screen.js";
 import { createElement, useEffect, useState } from "react";
@@ -86,7 +87,7 @@ function DefaultRoot({ platformUrl, name, Sidebar, sidebarWidth }) {
 */
 function client(config) {
 	const container = resolveContainer(config.target);
-	const platformUrl = config.platformUrl ?? globalThis.location.origin + globalThis.location.pathname;
+	const platformUrl = config.platformUrl ?? pageBaseUrl();
 	const session = createSessionCore({
 		platformUrl,
 		onSessionId: config.onSessionId,

package/dist/hooks.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useSessionSelector } from "./context.js";
-import { n as tryParseJSON } from "./_utils-CN1yVgYS.js";
+import { r as tryParseJSON } from "./_utils-CsqbIVGI.js";
 import { useEffect, useRef } from "react";
 //#region hooks.ts
 /** Index of the first item whose sequence number is above the watermark (tail scan from the end). */

package/dist/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { n as buildAgentUrl, r as fetchClientConfig, t as createSessionCore } from "./session-core-CwCaFzL8.js";
+import { n as buildAgentUrl, r as fetchClientConfig, t as createSessionCore } from "./session-core-Bvga6tUS.js";
 import { SessionProvider, ThemeProvider, useSession, useSessionSelector, useTheme } from "./context.js";
 import { Button } from "./components/button.js";
-import { t as ChatView } from "./chat-view-CW-tZCMm.js";
-import { i as UiUrlChip, n as ApiUrlChip, r as SessionUrlChips, t as Controls } from "./controls-DV368uhb.js";
-import { n as Markdown, t as MessageList } from "./message-list-q2lTiFhF.js";
-import { n as ToolConfigContext } from "./tool-call-block-DIxpG8GM.js";
+import { t as ChatView } from "./chat-view-C6N2oXjo.js";
+import { i as UiUrlChip, n as ApiUrlChip, r as SessionUrlChips, t as Controls } from "./controls-Cqg7T4FN.js";
+import { n as Markdown, t as MessageList } from "./message-list-CD9GxrlH.js";
+import { n as ToolConfigContext } from "./tool-call-block-O9vLqoyU.js";
 import { SidebarLayout } from "./components/sidebar-layout.js";
 import { StartScreen } from "./components/start-screen.js";
 import { VOICE_CAPTURE_CONSTRAINTS } from "./types.js";

package/dist/{message-list-q2lTiFhF.js → message-list-CD9GxrlH.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { useSessionSelector, useTheme } from "./context.js";
-import { a as primaryTint, i as TEXT_MUTED, n as SURFACE_TINT, r as TEXT_FAINT } from "./_colors-DYX7XRTr.js";
-import { t as ToolCallBlock } from "./tool-call-block-DIxpG8GM.js";
+import { i as TEXT_MUTED, n as SURFACE_TINT, o as primaryTint, r as TEXT_FAINT } from "./_colors-Bfh3-BVE.js";
+import { t as ToolCallBlock } from "./tool-call-block-O9vLqoyU.js";
 import clsx from "clsx";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -52,110 +52,111 @@ function escapeBareListMarkers(text) {
 */
 const Markdown = memo(function Markdown({ text }) {
 	const theme = useTheme();
-	return /* @__PURE__ */ jsx(ReactMarkdown, {
-		remarkPlugins: [remarkGfm],
-		components: {
-			p: (props) => /* @__PURE__ */ jsx("p", {
-				className: "my-1.5 first:mt-0 last:mb-0",
-				...props
-			}),
-			ul: (props) => /* @__PURE__ */ jsx("ul", {
-				className: "my-1.5 list-disc pl-5",
-				...props
-			}),
-			ol: (props) => /* @__PURE__ */ jsx("ol", {
-				className: "my-1.5 list-decimal pl-5",
-				...props
-			}),
-			li: (props) => /* @__PURE__ */ jsx("li", {
-				className: "my-0.5",
-				...props
-			}),
-			h1: (props) => /* @__PURE__ */ jsx("h1", {
-				className: "mt-3 mb-1.5 text-[17px] font-semibold",
-				...props
-			}),
-			h2: (props) => /* @__PURE__ */ jsx("h2", {
-				className: "mt-3 mb-1.5 text-[16px] font-semibold",
-				...props
-			}),
-			h3: (props) => /* @__PURE__ */ jsx("h3", {
-				className: "mt-3 mb-1.5 text-[15px] font-semibold",
-				...props
-			}),
-			a: ({ style, ...props }) => /* @__PURE__ */ jsx("a", {
-				className: "underline underline-offset-2",
-				style: {
-					color: theme.primary,
-					...style
-				},
-				target: "_blank",
-				rel: "noreferrer noopener",
-				...props
-			}),
-			code: ({ className, style, children, ...rest }) => {
-				return /language-/.test(className ?? "") ? /* @__PURE__ */ jsx("code", {
-					className: "font-aai-mono text-[12.5px]",
-					...rest,
-					children
-				}) : /* @__PURE__ */ jsx("code", {
-					className: "rounded-sm border px-1 py-0.5 font-aai-mono text-[12.5px]",
-					style: {
-						borderColor: theme.border,
-						background: SURFACE_TINT,
-						...style
-					},
-					...rest,
-					children
-				});
+	const components = useMemo(() => ({
+		p: (props) => /* @__PURE__ */ jsx("p", {
+			className: "my-1.5 first:mt-0 last:mb-0",
+			...props
+		}),
+		ul: (props) => /* @__PURE__ */ jsx("ul", {
+			className: "my-1.5 list-disc pl-5",
+			...props
+		}),
+		ol: (props) => /* @__PURE__ */ jsx("ol", {
+			className: "my-1.5 list-decimal pl-5",
+			...props
+		}),
+		li: (props) => /* @__PURE__ */ jsx("li", {
+			className: "my-0.5",
+			...props
+		}),
+		h1: (props) => /* @__PURE__ */ jsx("h1", {
+			className: "mt-3 mb-1.5 text-[17px] font-semibold",
+			...props
+		}),
+		h2: (props) => /* @__PURE__ */ jsx("h2", {
+			className: "mt-3 mb-1.5 text-[16px] font-semibold",
+			...props
+		}),
+		h3: (props) => /* @__PURE__ */ jsx("h3", {
+			className: "mt-3 mb-1.5 text-[15px] font-semibold",
+			...props
+		}),
+		a: ({ style, ...props }) => /* @__PURE__ */ jsx("a", {
+			className: "underline underline-offset-2",
+			style: {
+				color: theme.primary,
+				...style
 			},
-			pre: ({ style, ...props }) => /* @__PURE__ */ jsx("pre", {
-				className: "my-1.5 overflow-x-auto rounded-md border p-2.5 whitespace-pre-wrap wrap-break-word",
+			target: "_blank",
+			rel: "noreferrer noopener",
+			...props
+		}),
+		code: ({ className, style, children, ...rest }) => {
+			return /language-/.test(className ?? "") ? /* @__PURE__ */ jsx("code", {
+				className: "font-aai-mono text-[12.5px]",
+				...rest,
+				children
+			}) : /* @__PURE__ */ jsx("code", {
+				className: "rounded-sm border px-1 py-0.5 font-aai-mono text-[12.5px]",
 				style: {
 					borderColor: theme.border,
 					background: SURFACE_TINT,
 					...style
 				},
-				...props
-			}),
-			blockquote: ({ style, ...props }) => /* @__PURE__ */ jsx("blockquote", {
-				className: "my-1.5 border-l-2 pl-3",
-				style: {
-					borderColor: theme.border,
-					color: TEXT_MUTED,
-					...style
-				},
-				...props
-			}),
-			table: (props) => /* @__PURE__ */ jsx("table", {
-				className: "my-1.5 w-full border-collapse text-sm",
-				...props
-			}),
-			th: ({ style, ...props }) => /* @__PURE__ */ jsx("th", {
-				className: "border px-2 py-1 text-left font-medium",
-				style: {
-					borderColor: theme.border,
-					...style
-				},
-				...props
-			}),
-			td: ({ style, ...props }) => /* @__PURE__ */ jsx("td", {
-				className: "border px-2 py-1",
-				style: {
-					borderColor: theme.border,
-					...style
-				},
-				...props
-			}),
-			hr: ({ style, ...props }) => /* @__PURE__ */ jsx("hr", {
-				className: "my-2.5 border-t",
-				style: {
-					borderColor: theme.border,
-					...style
-				},
-				...props
-			})
+				...rest,
+				children
+			});
 		},
+		pre: ({ style, ...props }) => /* @__PURE__ */ jsx("pre", {
+			className: "my-1.5 overflow-x-auto rounded-md border p-2.5 whitespace-pre-wrap wrap-break-word",
+			style: {
+				borderColor: theme.border,
+				background: SURFACE_TINT,
+				...style
+			},
+			...props
+		}),
+		blockquote: ({ style, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+			className: "my-1.5 border-l-2 pl-3",
+			style: {
+				borderColor: theme.border,
+				color: TEXT_MUTED,
+				...style
+			},
+			...props
+		}),
+		table: (props) => /* @__PURE__ */ jsx("table", {
+			className: "my-1.5 w-full border-collapse text-sm",
+			...props
+		}),
+		th: ({ style, ...props }) => /* @__PURE__ */ jsx("th", {
+			className: "border px-2 py-1 text-left font-medium",
+			style: {
+				borderColor: theme.border,
+				...style
+			},
+			...props
+		}),
+		td: ({ style, ...props }) => /* @__PURE__ */ jsx("td", {
+			className: "border px-2 py-1",
+			style: {
+				borderColor: theme.border,
+				...style
+			},
+			...props
+		}),
+		hr: ({ style, ...props }) => /* @__PURE__ */ jsx("hr", {
+			className: "my-2.5 border-t",
+			style: {
+				borderColor: theme.border,
+				...style
+			},
+			...props
+		})
+	}), [theme]);
+	return /* @__PURE__ */ jsx(ReactMarkdown, {
+		remarkPlugins: [remarkGfm],
+		components,
 		children: escapeBareListMarkers(text)
 	});
 });
@@ -342,6 +343,10 @@ const MessageList = memo(function MessageList({ className }) {
 		messages
 	]);
 	const { anchorRef, onScroll } = useAutoScroll(contentVersion, userTranscript !== null);
+	const streamingMessage = useMemo(() => agentTranscript ? {
+		role: "assistant",
+		content: agentTranscript
+	} : null, [agentTranscript]);
 	const items = useMemo(() => interleave(messages, toolCalls, (msg) => /* @__PURE__ */ jsx(MessageBubble, {
 		message: msg,
 		theme
@@ -359,11 +364,8 @@ const MessageList = memo(function MessageList({ className }) {
 			className: "flex flex-col gap-4 p-7",
 			children: [
 				items,
-				agentTranscript && /* @__PURE__ */ jsx(MessageBubble, {
-					message: {
-						role: "assistant",
-						content: agentTranscript
-					},
+				streamingMessage && /* @__PURE__ */ jsx(MessageBubble, {
+					message: streamingMessage,
 					theme
 				}),
 				userTranscript !== null && /* @__PURE__ */ jsx(UserBubble, {

package/dist/{session-core-CwCaFzL8.js → session-core-Bvga6tUS.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { MIC_SEND_MAX_BUFFERED_BYTES } from "./types.js";
 import { CLIENT_CONFIG_PATH, ClientConfigResponseSchema, ServerMessageSchema, lenientParse } from "@alexkroman1/aai/protocol";
-import { DEFAULT_MAX_HISTORY, WS_OPEN, createEpoch, errorMessage, safeJsonParse } from "@alexkroman1/aai";
+import { DEFAULT_MAX_HISTORY, WS_OPEN, createEpoch, errorMessage, safeJsonParse, toArgsRecord } from "@alexkroman1/aai";
 import ReconnectingWebSocket from "partysocket/ws";
 //#region client-config.ts
 /**
@@ -61,6 +61,24 @@ async function fetchClientConfig(platformUrl, fetchFn) {
 * staleness/failure handling), while `session-core.ts` owns the state store
 * and connection lifecycle.
 */
+let audioModulesPromise = null;
+/**
+* Load the audio module and worklet sources, memoized so a prefetch at
+* `connect()` time overlaps the chunk fetch with the WebSocket handshake
+* instead of serializing it behind the server's `config` frame. A failed
+* load clears the memo so the next attempt retries the import.
+*/
+function loadAudioModules() {
+	audioModulesPromise ??= Promise.all([
+		import("./audio.js"),
+		import("./worklets/capture-processor.js").then((m) => m.default),
+		import("./worklets/playback-processor.js").then((m) => m.default)
+	]).catch((err) => {
+		audioModulesPromise = null;
+		throw err;
+	});
+	return audioModulesPromise;
+}
 /**
 * Initialize audio capture and playback after the server sends a ready config.
 *
@@ -94,11 +112,7 @@ async function initAudioCapture(conn, msg, deps) {
 		});
 	};
 	try {
-		const [{ createVoiceIO }, captureWorklet, playbackWorklet] = await Promise.all([
-			import("./audio.js"),
-			import("./worklets/capture-processor.js").then((m) => m.default),
-			import("./worklets/playback-processor.js").then((m) => m.default)
-		]);
+		const [{ createVoiceIO }, captureWorklet, playbackWorklet] = await loadAudioModules();
 		const io = await createVoiceIO({
 			sttSampleRate: msg.sampleRate,
 			ttsSampleRate: msg.ttsSampleRate,
@@ -106,17 +120,11 @@ async function initAudioCapture(conn, msg, deps) {
 			playbackWorkletSrc: playbackWorklet,
 			onMicData: (pcm16) => {
 				try {
-					deps.sendAudio(new Uint8Array(pcm16));
+					deps.sendAudio(pcm16);
 				} catch {
 					console.debug("[aai-ui] sendAudio dropped: connection closed");
 				}
 			},
-			onPlaybackStats: (stats) => {
-				console.warn("[aai-ui] playback concealed a gap in this turn", stats);
-			},
-			onMicSilent: () => {
-				console.warn("[aai-ui] microphone is delivering only silence — check the selected input device");
-			},
 			onError: (err) => {
 				if (!conn.generation.isCurrent(gen)) return;
 				reportAudioFailure(err.message);
@@ -129,7 +137,7 @@ async function initAudioCapture(conn, msg, deps) {
 		conn.voiceIO?.close().catch(() => {});
 		conn.voiceIO = io;
 		if (conn.preInitAudio.length > 0) {
-			for (const chunk of conn.preInitAudio) io.enqueue(chunk.buffer);
+			for (const chunk of conn.preInitAudio) io.enqueue(chunk);
 			conn.preInitAudio = [];
 		}
 		deps.sendJson({ type: "audio_ready" });
@@ -305,7 +313,7 @@ function createMessageHandlers(deps) {
 				updateState({ toolCalls: appendCapped(getSnapshot().toolCalls, {
 					callId: e.toolCallId,
 					name: e.toolName,
-					args: e.args ?? {},
+					args: toArgsRecord(e.args),
 					status: "pending",
 					seq: ++toolCallSeq,
 					afterMessageId: getSnapshot().messages.at(-1)?.id ?? -1
@@ -364,7 +372,7 @@ function createMessageHandlers(deps) {
 		const snap = getSnapshot();
 		if (snap.state === "error" || snap.state === "disconnected" && snap.error !== null) return;
 		if (snap.state !== "speaking") updateState({ state: "speaking" });
-		if (conn.voiceIO) conn.voiceIO.enqueue(chunk.buffer);
+		if (conn.voiceIO) conn.voiceIO.enqueue(chunk);
 		else if (conn.preInitAudio.length < MAX_PREINIT_AUDIO_CHUNKS) conn.preInitAudio.push(chunk);
 	}
 	/** See {@link MessageHandlers.settleWhenAudioDrained}. Captures
@@ -394,7 +402,7 @@ function createMessageHandlers(deps) {
 	}
 	function handleMessage(data) {
 		if (data instanceof ArrayBuffer) {
-			playAudioChunk(new Uint8Array(data));
+			playAudioChunk(data);
 			return;
 		}
 		if (typeof data !== "string") {
@@ -469,7 +477,7 @@ function reconnectPending(socket) {
 //#region session-core-url.ts
 /** Build the session WebSocket URL from the platform URL and resume state. */
 function buildWsUrl(platformUrl, resume, sessionId) {
-	return applyResumeParams(new URL("websocket", platformUrl.endsWith("/") ? platformUrl : `${platformUrl}/`), resume, sessionId);
+	return applyResumeParams(buildAgentUrl(platformUrl, "websocket"), resume, sessionId);
 }
 /**
 * Turn a broker-provided session URL (`sessionUrl` from `GET client-config`
@@ -677,6 +685,7 @@ function createSessionCore(options) {
 			state: "connecting",
 			error: null
 		});
+		loadAudioModules().catch(() => {});
 		teardownConnection();
 		conn.generation.bump();
 		const controller = new AbortController();

package/dist/session-core-audio-setup.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import type { ConnState, SessionSnapshot } from "./session-core-types.ts";
 /** Dependencies `initAudioCapture` needs from the owning session core. */
 export type AudioSetupDeps = {
     sendJson: (msg: ClientMessage) => void;
-    sendAudio: (bytes: Uint8Array) => void;
+    sendAudio: (bytes: ArrayBuffer) => void;
     updateState: (partial: Partial<SessionSnapshot>) => void;
     /** Turn-boundary-guarded drain from the message handlers — replays a
      *  buffered `audio_done` without stomping a barge-in's state. */
@@ -12,6 +12,14 @@ export type AudioSetupDeps = {
     /** Release the mic/VoiceIO (used when the audio path dies non-fatally). */
     cleanupAudio: () => void;
 };
+type AudioModules = [typeof import("./audio.ts"), string, string];
+/**
+ * Load the audio module and worklet sources, memoized so a prefetch at
+ * `connect()` time overlaps the chunk fetch with the WebSocket handshake
+ * instead of serializing it behind the server's `config` frame. A failed
+ * load clears the memo so the next attempt retries the import.
+ */
+export declare function loadAudioModules(): Promise<AudioModules>;
 /**
  * Initialize audio capture and playback after the server sends a ready config.
  *
@@ -31,3 +39,4 @@ export declare function initAudioCapture(conn: ConnState, msg: {
     sampleRate: number;
     ttsSampleRate: number;
 }, deps: AudioSetupDeps): Promise<void>;
+export {};

package/dist/session-core-types.d.ts CHANGED Viewed

@@ -116,7 +116,7 @@ export type ConnState = {
      *  the playback worklet once init completes. Closes the race between the
      *  server starting greeting audio (immediately on S2S connect) and the
      *  client awaiting mic permission + worklet registration. */
-    preInitAudio: Uint8Array[];
+    preInitAudio: ArrayBuffer[];
     /** True if `audio_done` arrived before `voiceIO` was initialized. The done
      *  signal must be replayed after draining preInitAudio, or a short greeting
      *  buffered during mic-permission never finishes playing. */

package/dist/session-core.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as createSessionCore } from "./session-core-CwCaFzL8.js";
+import { t as createSessionCore } from "./session-core-Bvga6tUS.js";
 export { createSessionCore };

package/dist/{tool-call-block-DIxpG8GM.js → tool-call-block-O9vLqoyU.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { useTheme } from "./context.js";
-import { r as TEXT_FAINT } from "./_colors-DYX7XRTr.js";
+import { r as TEXT_FAINT } from "./_colors-Bfh3-BVE.js";
 import { t as Eyebrow } from "./eyebrow-C6ZFuiz6.js";
-import { n as tryParseJSON, t as truncate } from "./_utils-CN1yVgYS.js";
+import { n as truncate, r as tryParseJSON } from "./_utils-CsqbIVGI.js";
 import clsx from "clsx";
 import { createContext, memo, useContext, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@alexkroman1/aai-ui",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "type": "module",
   "files": [
     "dist",
@@ -22,7 +22,7 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "use-sync-external-store": "^1.6.0",
-    "@alexkroman1/aai": "5.1.0"
+    "@alexkroman1/aai": "5.2.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",