@alexkroman1/aai-ui 1.8.2 → 1.9.0

package/dist/context.js

@@ -1,19 +1,32 @@
-import { createContext, createElement, useContext, useSyncExternalStore } from "react";
+import { createContext, createElement, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from "react";
 //#region context.ts
 const DEFAULT_THEME = {
-	bg: "#101010",
-	primary: "#fab283",
-	text: "rgba(255, 255, 255, 0.94)",
-	surface: "#151515",
-	border: "#282828"
+	bg: "#FBF8F2",
+	primary: "#3F2BC1",
+	text: "#1B1A18",
+	surface: "#FFFFFF",
+	border: "#DCD7CC"
 };
 const SessionCtx = createContext(null);
 function SessionProvider({ value, children }) {
 	return createElement(SessionCtx.Provider, { value }, children);
 }
-function useSession() {
+/**
+* Return the raw {@link SessionCore} from context without subscribing to
+* snapshot changes. Useful for accessing stable methods (`start`, `toggle`,
+* `reset`, …) from components that select narrow state via
+* {@link useSessionSelector}.
+*
+* Not part of the package's public export surface — internal to aai-ui
+* components.
+*/
+function useSessionCore() {
 	const core = useContext(SessionCtx);
-	if (!core) throw new Error("useSession must be used within <SessionProvider>");
+	if (!core) throw new Error("Session hooks must be used within <SessionProvider>");
+	return core;
+}
+function useSession() {
+	const core = useSessionCore();
 	return {
 		...useSyncExternalStore(core.subscribe, core.getSnapshot),
 		start: core.start,
@@ -21,19 +34,82 @@ function useSession() {
 		resetState: core.resetState,
 		reset: core.reset,
 		disconnect: core.disconnect,
-		toggle: core.toggle
+		toggle: core.toggle,
+		startRecording: core.startRecording,
+		stopRecording: core.stopRecording,
+		sendAudioFile: core.sendAudioFile
 	};
 }
+/**
+* Subscribe to a narrow slice of the session snapshot.
+*
+* Unlike {@link useSession} — which re-renders the component on *every*
+* snapshot change — this only triggers a re-render when the selected value
+* changes (per `isEqual`, default `Object.is`). Use it for components that
+* read a single field, e.g. `useSessionSelector((s) => s.running)`.
+*
+* The selector must be pure. It may run on every snapshot change, so keep it
+* cheap; when it returns a derived object, pass a custom `isEqual` to avoid
+* re-renders on referentially-new-but-equal results.
+*
+* @public
+*/
+function useSessionSelector(selector, isEqual = Object.is) {
+	const core = useSessionCore();
+	const selectorRef = useRef(selector);
+	selectorRef.current = selector;
+	const isEqualRef = useRef(isEqual);
+	isEqualRef.current = isEqual;
+	const cacheRef = useRef({ hasValue: false });
+	const getSelection = useCallback(() => {
+		const next = selectorRef.current(core.getSnapshot());
+		const cache = cacheRef.current;
+		if (cache.hasValue && isEqualRef.current(cache.value, next)) return cache.value;
+		cacheRef.current = {
+			hasValue: true,
+			value: next
+		};
+		return next;
+	}, [core]);
+	return useSyncExternalStore(core.subscribe, getSelection);
+}
 const ThemeCtx = createContext(DEFAULT_THEME);
 function ThemeProvider({ value, children }) {
 	const merged = value ? {
 		...DEFAULT_THEME,
 		...value
 	} : DEFAULT_THEME;
+	usePageBackground(merged.bg);
 	return createElement(ThemeCtx.Provider, { value: merged }, children);
 }
+/**
+* Paint `html`/`body` with the theme background.
+*
+* Components paint `theme.bg` on their own containers, but the page behind
+* them keeps whatever the static `<style>` in index.html set. Any viewport
+* wider (or taller) than the app column then shows that color as a border
+* around the UI — which is how a cream theme ended up letterboxed in black.
+* Driving it from the theme means a custom `client({ theme })` covers the
+* page too, instead of trading one hardcoded color for another.
+*/
+function usePageBackground(bg) {
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		const { body, documentElement: html } = document;
+		const previous = {
+			body: body.style.background,
+			html: html.style.background
+		};
+		body.style.background = bg;
+		html.style.background = bg;
+		return () => {
+			body.style.background = previous.body;
+			html.style.background = previous.html;
+		};
+	}, [bg]);
+}
 function useTheme() {
 	return useContext(ThemeCtx);
 }
 //#endregion
-export { DEFAULT_THEME, SessionProvider, ThemeProvider, useSession, useTheme };
+export { SessionProvider, ThemeProvider, useSession, useSessionCore, useSessionSelector, useTheme };

package/dist/controls-BngrPbOC.js

@@ -0,0 +1,135 @@
+import { useSessionCore, useSessionSelector, useTheme } from "./context.js";
+import { Button } from "./components/button.js";
+import { i as TEXT_MUTED, n as SURFACE_TINT, r as TEXT_FAINT } from "./_colors-DJUordGv.js";
+import clsx from "clsx";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/url-chips.tsx
+/** @jsxImportSource react */
+/** How long the "Copied" confirmation replaces the label after a click. */
+const COPIED_FEEDBACK_MS = 1500;
+/**
+* A compact labeled chip showing a URL. Click to copy.
+*
+* The label is what makes a pair of these readable — on its own a bare URL
+* leaves you guessing whether it's the page or the socket.
+*/
+function UrlChip({ label, url, hint, testId, className }) {
+	const theme = useTheme();
+	const [copied, setCopied] = useState(false);
+	function copy() {
+		navigator.clipboard?.writeText(url).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+		}).catch(() => {});
+	}
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: copy,
+		title: `${hint} (click to copy)\n${url}`,
+		className: `flex items-center gap-1.5 min-w-0 appearance-none m-0 px-2 py-1 rounded-aai border cursor-pointer outline-none text-[11px] leading-none font-aai-mono ${className ?? ""}`,
+		style: {
+			background: SURFACE_TINT,
+			borderColor: theme.border,
+			color: TEXT_FAINT
+		},
+		"data-testid": testId,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "uppercase tracking-wide shrink-0",
+			style: { color: TEXT_MUTED },
+			children: copied ? "Copied" : label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			"data-testid": `${testId}-url`,
+			children: url
+		})]
+	});
+}
+/** The page this UI is served from — what you'd send someone to talk to the agent. */
+function pageUrl() {
+	if (typeof window === "undefined") return "";
+	return `${window.location.origin}${window.location.pathname}`;
+}
+/**
+* The session's shareable UI URL.
+*
+* @public
+*/
+function UiUrlChip({ className }) {
+	return /* @__PURE__ */ jsx(UrlChip, {
+		label: "UI",
+		url: pageUrl(),
+		hint: "Shareable UI",
+		testId: "ui-url-chip",
+		...className !== void 0 && { className }
+	});
+}
+/**
+* The session's programmatic WebSocket endpoint — the URL a script or backend
+* can connect to directly instead of using this UI.
+*
+* @public
+*/
+function ApiUrlChip({ className }) {
+	return /* @__PURE__ */ jsx(UrlChip, {
+		label: "API",
+		url: useSessionSelector((s) => s.apiUrl),
+		hint: "API endpoint",
+		testId: "api-url-chip",
+		...className !== void 0 && { className }
+	});
+}
+/**
+* The UI and API URLs side by side. They answer the same question — "how do I
+* reach this agent?" — so they belong together and each needs its label to be
+* told apart. Rendered by the default shell in every session mode (S2S,
+* pipeline, text-only).
+*
+* @public
+*/
+function SessionUrlChips({ className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex items-center gap-1.5 min-w-0 ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx(UiUrlChip, { className: "min-w-0 flex-1" }), /* @__PURE__ */ jsx(ApiUrlChip, { className: "min-w-0 flex-1" })]
+	});
+}
+//#endregion
+//#region components/controls.tsx
+/** @jsxImportSource react */
+/**
+* Session control buttons: **Stop / Resume** and **New Conversation**.
+*
+* Reads session state from {@link useSession}. Must be rendered inside a
+* {@link SessionProvider}.
+*
+* @example
+* ```tsx
+* <Controls className="justify-end" />
+* ```
+*
+* @param className - Additional CSS class names applied to the container.
+*
+* @public
+*/
+function Controls({ className }) {
+	const running = useSessionSelector((s) => s.running);
+	const { toggle, reset } = useSessionCore();
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex items-center gap-3 shrink-0", className),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: toggle,
+				children: running ? "Stop" : "Resume"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				onClick: reset,
+				children: "New Conversation"
+			}),
+			/* @__PURE__ */ jsx(SessionUrlChips, { className: "ml-auto max-w-[60%]" })
+		]
+	});
+}
+//#endregion
+export { UiUrlChip as i, ApiUrlChip as n, SessionUrlChips as r, Controls as t };

package/dist/default-client/assets/audio-Cs-6t_Wd.js

@@ -0,0 +1 @@
+import{t as e}from"./index-Bf4ZTNcx.js";async function t(e,t){let n=await new OfflineAudioContext(1,1,t).decodeAudioData(e),r=Math.ceil(n.duration*t),i=new OfflineAudioContext(1,r,t),a=i.createBufferSource();a.buffer=n,a.connect(i.destination),a.start();let o=(await i.startRendering()).getChannelData(0),s=new Int16Array(o.length);for(let e=0;e<o.length;e++){let t=Math.max(-1,Math.min(1,o[e]??0));s[e]=t<0?t*32768:t*32767}return s}async function n(t){let{sttSampleRate:n,ttsSampleRate:r,captureWorkletSrc:i,playbackWorkletSrc:a,onMicData:o}=t,s=r,c=new AudioContext({sampleRate:s,latencyHint:`playback`}),l=navigator.mediaDevices.getUserMedia({audio:{deviceId:{ideal:`default`},echoCancellation:!0,noiseSuppression:!0,autoGainControl:!0,voiceIsolation:!0}}),u;try{[u]=await Promise.all([l,c.resume(),c.audioWorklet.addModule(i),c.audioWorklet.addModule(a)])}catch(e){throw l.then(e=>{for(let t of e.getTracks())t.stop()}).catch(()=>{}),await c.close().catch(e=>{console.warn(`AudioContext close failed:`,e)}),e}let d=c.createMediaStreamSource(u),f=new AudioWorkletNode(c,`capture-processor`,{channelCount:1,channelCountMode:`explicit`,processorOptions:{contextRate:s,sttSampleRate:n,bufferSeconds:e}});d.connect(f),f.port.postMessage({event:`start`}),f.port.onmessage=e=>{e.data.event===`chunk`&&o(e.data.buffer)};let p=null,m=null,h=new AbortController;function g(){if(p)return p;let e=new AudioWorkletNode(c,`playback-processor`,{processorOptions:{sampleRate:s}});return e.connect(c.destination),e.port.onmessage=e=>{e.data.event===`stop`&&(m?.(),m=null)},p=e,e}let _={enqueue(e){h.signal.aborted||e.byteLength!==0&&g().port.postMessage({event:`write`,buffer:new Uint8Array(e)},[e])},done(){return!p||c.state!==`running`?Promise.resolve():new Promise(e=>{m=e,p?.port.postMessage({event:`done`})})},flush(){p&&p.port.postMessage({event:`interrupt`})},async close(){if(!h.signal.aborted){h.abort(),f.port.postMessage({event:`stop`}),d.disconnect(),f.disconnect(),p&&p.disconnect();for(let e of u.getTracks())e.stop();await c.close().catch(()=>{})}},async[Symbol.asyncDispose](){await _.close()}};return _}export{n as createVoiceIO,t as decodeAudioToPcm16};

package/dist/default-client/assets/capture-processor-C19oBn4L.js

@@ -0,0 +1,105 @@
+var e=new Blob([`
+class CaptureProcessor extends AudioWorkletProcessor {
+  constructor(options) {
+    super();
+    this.recording = false;
+    const opts = options.processorOptions || {};
+    this.fromRate = opts.contextRate || sampleRate;
+    this.toRate = opts.sttSampleRate || sampleRate;
+    this.ratio = this.fromRate / this.toRate;
+    this.needsResample = this.fromRate !== this.toRate;
+    // Streaming-resampler state carried across process() blocks so the output
+    // clock doesn't drift and there's no discontinuity at 128-sample block
+    // boundaries. \`prev\` is the previous block's last input sample (used to
+    // interpolate across the boundary); \`pos\` is the fractional read position,
+    // in input samples, relative to an extended [prev, ...input] frame. Start
+    // at 1 so the first output is input[0] (not the bogus initial prev).
+    this.prev = 0;
+    this.pos = 1;
+    // Output buffer reused across process() calls -- the render quantum is a
+    // fixed size, so allocating per call would churn the realtime audio thread.
+    this.resampleBuf = null;
+    // Int16 accumulation buffer: flushed to the main thread as one transferred
+    // ArrayBuffer once ~bufferSeconds of output samples are batched. Sized 2x
+    // the flush target so a whole render quantum always fits before flushing.
+    this.targetSamples = Math.max(1, Math.round(this.toRate * (opts.bufferSeconds || 0.1)));
+    this.pending = new Int16Array(this.targetSamples * 2);
+    this.pendingLen = 0;
+    this.port.onmessage = (e) => {
+      if (e.data.event === 'start') this.recording = true;
+      else if (e.data.event === 'stop') {
+        // Final flush so the tail of speech isn't dropped on close.
+        this.flush();
+        this.recording = false;
+      }
+    };
+  }
+
+  resample(input) {
+    const ratio = this.ratio;
+    const n = input.length;
+    if (n === 0) return new Float32Array(0);
+    // At most ceil(n / ratio) + 1 outputs per block (pos starts in [0, ratio)).
+    const maxLen = Math.ceil(n / ratio) + 1;
+    if (this.resampleBuf === null || this.resampleBuf.length < maxLen) {
+      this.resampleBuf = new Float32Array(maxLen);
+    }
+    const out = this.resampleBuf;
+    // Extended frame: index 0 = prev (previous block's last sample),
+    // index k>=1 = input[k-1]. Interpolate at fractional positions stepping by
+    // ratio, carrying \`pos\` across calls to preserve the sample clock.
+    let count = 0;
+    let pos = this.pos;
+    while (pos < n) {
+      const idx = pos | 0;
+      const frac = pos - idx;
+      const a = idx === 0 ? this.prev : input[idx - 1];
+      const b = input[idx];
+      out[count++] = a + frac * (b - a);
+      pos += ratio;
+    }
+    // Shift the origin to this block's last sample for the next call.
+    this.prev = input[n - 1];
+    this.pos = pos - n;
+    return out.subarray(0, count);
+  }
+
+  // Convert Float32 -> Int16 and append to the pending batch. Writes through
+  // an Int16Array directly (assignment truncates like DataView.setInt16).
+  accumulate(samples) {
+    let buf = this.pending;
+    if (this.pendingLen + samples.length > buf.length) {
+      // Defensive: only reachable if a render quantum outproduces the 1x
+      // headroom above the flush target (never with 128-sample quanta).
+      const grown = new Int16Array((this.pendingLen + samples.length) * 2);
+      grown.set(buf.subarray(0, this.pendingLen));
+      this.pending = grown;
+      buf = grown;
+    }
+    for (let i = 0; i < samples.length; i++) {
+      const s = Math.max(-1, Math.min(1, samples[i]));
+      buf[this.pendingLen++] = s < 0 ? s * 0x8000 : s * 0x7fff;
+    }
+  }
+
+  // Post the batched samples as one transferred ArrayBuffer and reset.
+  flush() {
+    if (this.pendingLen === 0) return;
+    const buffer = this.pending.buffer.slice(0, this.pendingLen * 2);
+    this.pendingLen = 0;
+    this.port.postMessage({ event: 'chunk', buffer }, [buffer]);
+  }
+
+  process(inputs) {
+    const input = inputs[0];
+    if (!input || !input[0] || !this.recording) return true;
+
+    const samples = this.needsResample ? this.resample(input[0]) : input[0];
+    this.accumulate(samples);
+    if (this.pendingLen >= this.targetSamples) this.flush();
+    return true;
+  }
+}
+
+registerProcessor('capture-processor', CaptureProcessor);
+`],{type:`application/javascript`}),t=URL.createObjectURL(e);export{t as default};