@alexkroman1/aai-ui 0.12.3 → 1.0.2

package/dist/components/start-screen.js

@@ -1,8 +1,9 @@
-import { useSession } from "../signals.js";
+import { useSession, useTheme } from "../context.js";
 import { Button } from "./button.js";
 import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region components/start-screen.tsx
+/** @jsxImportSource react */
 /**
 * A centered start screen with icon, title, subtitle, and a start button.
 * Renders `children` (the main app) once the session has started.
@@ -22,19 +23,27 @@ import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 */
 function StartScreen({ children, icon, title, subtitle, buttonText = "Start", className }) {
 	const { started, start } = useSession();
-	if (started.value) return /* @__PURE__ */ jsx(Fragment, { children });
+	const theme = useTheme();
+	if (started) return children;
 	return /* @__PURE__ */ jsx("div", {
-		class: clsx("flex items-center justify-center h-screen bg-aai-bg font-aai", className),
+		className: clsx("flex items-center justify-center h-screen font-aai", className),
+		style: { background: theme.bg },
 		children: /* @__PURE__ */ jsxs("div", {
-			class: "flex flex-col items-center gap-4 bg-aai-surface border border-aai-border rounded-lg px-12 py-10 max-w-sm text-center",
+			className: "flex flex-col items-center gap-4 border rounded-lg px-12 py-10 max-w-sm text-center",
+			style: {
+				background: theme.surface,
+				borderColor: theme.border
+			},
 			children: [
 				icon,
 				title && /* @__PURE__ */ jsx("h1", {
-					class: "font-semibold text-aai-primary m-0",
+					className: "font-semibold m-0",
+					style: { color: theme.primary },
 					children: title
 				}),
 				subtitle && /* @__PURE__ */ jsx("p", {
-					class: "text-sm text-aai-text-muted m-0",
+					className: "text-sm m-0",
+					style: { color: "rgba(255,255,255,0.284)" },
 					children: subtitle
 				}),
 				/* @__PURE__ */ jsx(Button, {

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

@@ -1,12 +1,11 @@
-import type * as preact from "preact";
+import { type ReactNode } from "react";
 import type { ToolCallInfo } from "../types.ts";
 /**
- * Renders a tool invocation with an icon, title, subtitle, and a
+ * Renders a tool invocation with an optional icon/emoji, title, subtitle, and a
  * collapsible result viewer.
  *
- * Built-in tool types (`web_search`, `visit_webpage`, `run_code`,
- * `fetch_json`, `user_input`) get custom icons and labels. Unknown tools
- * fall back to a generic bolt icon.
+ * Tool display is configured via `ToolConfigContext`. If no config is found
+ * for a tool name, the raw tool name is shown as the title.
  *
  * While the tool call is pending a shimmer animation is shown. Once
  * complete, clicking the block expands the formatted JSON result.
@@ -24,4 +23,4 @@ import type { ToolCallInfo } from "../types.ts";
 export declare function ToolCallBlock({ toolCall, className, }: {
     toolCall: ToolCallInfo;
     className?: string;
-}): preact.JSX.Element;
+}): ReactNode;

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

@@ -1,118 +1,3 @@
-import { BoltIcon, ChatBubbleIcon, DownloadIcon, ExternalLinkIcon, SearchIcon, TerminalIcon } from "./tool-icons.js";
-import clsx from "clsx";
-import { useComputed, useSignal } from "@preact/signals";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region components/tool-call-block.tsx
-const argField = (key) => (args) => String(args[key] ?? "");
-const TOOL_CONFIG = {
-	web_search: {
-		Icon: SearchIcon,
-		title: "Web Search",
-		subtitle: argField("query")
-	},
-	visit_webpage: {
-		Icon: ExternalLinkIcon,
-		title: "Visit Page",
-		subtitle: argField("url")
-	},
-	run_code: {
-		Icon: TerminalIcon,
-		title: "Run Code",
-		subtitle: (args) => {
-			const firstLine = String(args.code ?? "").split("\n")[0] ?? "";
-			return firstLine.length > 80 ? `${firstLine.slice(0, 80)}...` : firstLine;
-		}
-	},
-	fetch_json: {
-		Icon: DownloadIcon,
-		title: "Fetch JSON",
-		subtitle: argField("url")
-	},
-	user_input: {
-		Icon: ChatBubbleIcon,
-		title: "Asking User",
-		subtitle: argField("question")
-	}
-};
-const DEFAULT_CONFIG = {
-	Icon: BoltIcon,
-	title: "",
-	subtitle: (args) => {
-		const summary = JSON.stringify(args);
-		return summary.length > 80 ? `${summary.slice(0, 80)}...` : summary;
-	}
-};
-function formatResult(result) {
-	try {
-		return JSON.stringify(JSON.parse(result), null, 2);
-	} catch {
-		return result;
-	}
-}
-/**
-* Renders a tool invocation with an icon, title, subtitle, and a
-* collapsible result viewer.
-*
-* Built-in tool types (`web_search`, `visit_webpage`, `run_code`,
-* `fetch_json`, `user_input`) get custom icons and labels. Unknown tools
-* fall back to a generic bolt icon.
-*
-* While the tool call is pending a shimmer animation is shown. Once
-* complete, clicking the block expands the formatted JSON result.
-*
-* @example
-* ```tsx
-* <ToolCallBlock toolCall={toolCall} />
-* ```
-*
-* @param toolCall - The tool call to render (see {@link ToolCallInfo}).
-* @param className - Additional CSS class names.
-*
-* @public
-*/
-function ToolCallBlock({ toolCall, className }) {
-	const isOpen = useSignal(false);
-	const config = TOOL_CONFIG[toolCall.toolName] ?? DEFAULT_CONFIG;
-	const isPending = toolCall.status === "pending";
-	const title = config.title || toolCall.toolName;
-	const canExpand = !isPending && Boolean(toolCall.result);
-	const formatted = useComputed(() => toolCall.result ? formatResult(toolCall.result) : "");
-	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("flex flex-col", className),
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": canExpand ? isOpen.value : void 0,
-			disabled: isPending,
-			class: clsx("flex items-center gap-2 px-3 py-2 rounded-aai border border-aai-border bg-aai-surface-faint select-none text-left w-full", canExpand && "cursor-pointer"),
-			onClick: () => {
-				if (canExpand) isOpen.value = !isOpen.value;
-			},
-			children: [
-				/* @__PURE__ */ jsx(config.Icon, { class: "w-4 h-4 text-aai-text-dim shrink-0" }),
-				/* @__PURE__ */ jsx("span", {
-					class: clsx("text-sm font-medium text-aai-text", isPending && "tool-shimmer"),
-					children: title
-				}),
-				/* @__PURE__ */ jsx("span", {
-					class: "text-sm text-aai-text-dim truncate flex-1 min-w-0",
-					children: config.subtitle(toolCall.args)
-				}),
-				canExpand && /* @__PURE__ */ jsx("span", {
-					class: "text-xs text-aai-text-dim shrink-0",
-					children: isOpen.value ? "▾" : "▸"
-				})
-			]
-		}), isOpen.value && /* @__PURE__ */ jsxs("div", {
-			class: "border-x border-b border-aai-border rounded-b-aai bg-aai-surface max-h-64 overflow-auto",
-			children: [toolCall.toolName === "run_code" && toolCall.args.code && /* @__PURE__ */ jsx("pre", {
-				class: "text-xs text-aai-text p-2 whitespace-pre-wrap border-b border-aai-border font-mono",
-				children: String(toolCall.args.code)
-			}), formatted.value && /* @__PURE__ */ jsx("pre", {
-				class: "text-xs text-aai-text-dim p-2 whitespace-pre-wrap",
-				children: formatted.value
-			})]
-		})]
-	});
-}
-//#endregion
+import "../context.js";
+import { t as ToolCallBlock } from "../tool-call-block-CCuChsFm.js";
 export { ToolCallBlock };

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

@@ -0,0 +1,22 @@
+/**
+ * Display configuration for a tool call in the UI.
+ *
+ * @public
+ */
+export type ToolDisplayConfig = Record<string, {
+    icon?: string;
+    label?: string;
+}>;
+/**
+ * Context for tool display configuration.
+ * Provided by `client` or manually via `ToolConfigContext.Provider`.
+ *
+ * @public
+ */
+export declare const ToolConfigContext: import("react").Context<ToolDisplayConfig>;
+/**
+ * Read tool display configuration from the nearest `ToolConfigContext.Provider`.
+ *
+ * @internal
+ */
+export declare function useToolConfig(): ToolDisplayConfig;

package/dist/context.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import type { SessionCore, SessionSnapshot } from "./session-core.ts";
+import type { ClientTheme } from "./types.ts";
+declare const DEFAULT_THEME: Required<ClientTheme>;
+export declare function SessionProvider({ value, children }: {
+    value: SessionCore;
+    children?: ReactNode;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<SessionCore | null>>;
+export type Session = SessionSnapshot & {
+    start(): void;
+    cancel(): void;
+    resetState(): void;
+    reset(): void;
+    disconnect(): void;
+    toggle(): void;
+};
+export declare function useSession(): Session;
+export declare function ThemeProvider({ value, children }: {
+    value?: ClientTheme;
+    children?: ReactNode;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<Required<ClientTheme>>>;
+export declare function useTheme(): Required<ClientTheme>;
+export { DEFAULT_THEME };

package/dist/context.js

@@ -0,0 +1,39 @@
+import { createContext, createElement, useContext, useSyncExternalStore } from "react";
+//#region context.ts
+const DEFAULT_THEME = {
+	bg: "#101010",
+	primary: "#fab283",
+	text: "rgba(255, 255, 255, 0.94)",
+	surface: "#151515",
+	border: "#282828"
+};
+const SessionCtx = createContext(null);
+function SessionProvider({ value, children }) {
+	return createElement(SessionCtx.Provider, { value }, children);
+}
+function useSession() {
+	const core = useContext(SessionCtx);
+	if (!core) throw new Error("useSession must be used within <SessionProvider>");
+	return {
+		...useSyncExternalStore(core.subscribe, core.getSnapshot),
+		start: core.start,
+		cancel: core.cancel,
+		resetState: core.resetState,
+		reset: core.reset,
+		disconnect: core.disconnect,
+		toggle: core.toggle
+	};
+}
+const ThemeCtx = createContext(DEFAULT_THEME);
+function ThemeProvider({ value, children }) {
+	const merged = value ? {
+		...DEFAULT_THEME,
+		...value
+	} : DEFAULT_THEME;
+	return createElement(ThemeCtx.Provider, { value: merged }, children);
+}
+function useTheme() {
+	return useContext(ThemeCtx);
+}
+//#endregion
+export { DEFAULT_THEME, SessionProvider, ThemeProvider, useSession, useTheme };

package/dist/default-client/assets/audio-DH9LpexG.js

@@ -0,0 +1 @@
+var e=.1;async function t(t){let{sttSampleRate:n,ttsSampleRate:r,captureWorkletSrc:i,playbackWorkletSrc:a,onMicData:o}=t,s=r,c=new AudioContext({sampleRate:s,latencyHint:`playback`});await c.resume();let l=await navigator.mediaDevices.getUserMedia({audio:{sampleRate:s,echoCancellation:!0,noiseSuppression:!0,autoGainControl:!0}});try{await Promise.all([c.audioWorklet.addModule(i),c.audioWorklet.addModule(a)])}catch(e){for(let e of l.getTracks())e.stop();throw await c.close().catch(e=>{console.warn(`AudioContext close failed:`,e)}),e}let u=c.createMediaStreamSource(l),d=new AudioWorkletNode(c,`capture-processor`,{channelCount:1,channelCountMode:`explicit`,processorOptions:{contextRate:s,sttSampleRate:n}});u.connect(d);let f=Math.floor(n*e)*2,p=f*2,m=new Uint8Array(p),h=new Uint8Array(p),g=m,_=0;d.port.postMessage({event:`start`}),d.port.onmessage=e=>{if(e.data.event!==`chunk`)return;let t=new Uint8Array(e.data.buffer);g.set(t,_),_+=t.byteLength,_>=f&&(o(g.buffer.slice(0,_)),g=g===m?h:m,_=0)};let v=null,y=null,b=new AbortController,{onPlaybackProgress:x}=t;function S(){if(v)return v;let e=new AudioWorkletNode(c,`playback-processor`,{processorOptions:{sampleRate:s}});return e.connect(c.destination),e.port.onmessage=t=>{t.data.event===`stop`?(e.disconnect(),v===e&&(v=null),y?.(),y=null):t.data.event===`progress`&&x?.(t.data.readPos)},v=e,e}let C={enqueue(e){b.signal.aborted||e.byteLength!==0&&S().port.postMessage({event:`write`,buffer:new Uint8Array(e)},[e])},done(){return v?new Promise(e=>{y=e,v?.port.postMessage({event:`done`})}):Promise.resolve()},flush(){v&&v.port.postMessage({event:`interrupt`})},async close(){if(!b.signal.aborted){b.abort(),d.port.postMessage({event:`stop`}),u.disconnect(),d.disconnect(),v&&v.disconnect();for(let e of l.getTracks())e.stop();await c.close().catch(()=>{})}},async[Symbol.asyncDispose](){await C.close()}};return C}export{t as createVoiceIO};

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

@@ -0,0 +1,53 @@
+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;
+    this.port.onmessage = (e) => {
+      if (e.data.event === 'start') this.recording = true;
+      else if (e.data.event === 'stop') this.recording = false;
+    };
+  }
+
+  resample(input) {
+    const ratio = this.ratio;
+    const outLen = Math.ceil(input.length / ratio);
+    const out = new Float32Array(outLen);
+    for (let i = 0; i < outLen; i++) {
+      const srcIdx = i * ratio;
+      const idx = srcIdx | 0;
+      const frac = srcIdx - idx;
+      const a = input[idx];
+      const b = idx + 1 < input.length ? input[idx + 1] : a;
+      out[i] = a + frac * (b - a);
+    }
+    return out;
+  }
+
+  process(inputs) {
+    const input = inputs[0];
+    if (!input || !input[0] || !this.recording) return true;
+
+    const raw = input[0];
+    const samples = this.needsResample ? this.resample(raw) : raw;
+
+    // Convert Float32 -> Int16
+    const buffer = new ArrayBuffer(samples.length * 2);
+    const view = new DataView(buffer);
+    for (let i = 0; i < samples.length; i++) {
+      const s = Math.max(-1, Math.min(1, samples[i]));
+      view.setInt16(i * 2, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+    }
+
+    this.port.postMessage({ event: 'chunk', buffer }, [buffer]);
+    return true;
+  }
+}
+
+registerProcessor('capture-processor', CaptureProcessor);
+`],{type:`application/javascript`}),t=URL.createObjectURL(e);export{t as default};