@alexkroman1/aai-ui 0.12.2 → 1.0.2

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

@@ -1,118 +0,0 @@
-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
-export { ToolCallBlock };

package/dist/_components/tool-icons.d.ts

@@ -1,17 +0,0 @@
-import type * as preact from "preact";
-type IconProps = {
-    class?: string;
-};
-/** Magnifying glass icon for web_search. */
-export declare function SearchIcon(props: IconProps): preact.JSX.Element;
-/** External link icon for visit_webpage. */
-export declare function ExternalLinkIcon(props: IconProps): preact.JSX.Element;
-/** Terminal icon for run_code. */
-export declare function TerminalIcon(props: IconProps): preact.JSX.Element;
-/** Download icon for fetch_json. */
-export declare function DownloadIcon(props: IconProps): preact.JSX.Element;
-/** Chat bubble icon for user_input. */
-export declare function ChatBubbleIcon(props: IconProps): preact.JSX.Element;
-/** Bolt/lightning icon for default/unknown tools. */
-export declare function BoltIcon(props: IconProps): preact.JSX.Element;
-export {};

package/dist/_components/tool-icons.js

@@ -1,128 +0,0 @@
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region _components/tool-icons.tsx
-/** Magnifying glass icon for web_search. */
-function SearchIcon(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5",
-		class: props.class,
-		children: [/* @__PURE__ */ jsx("circle", {
-			cx: "7",
-			cy: "7",
-			r: "4.5"
-		}), /* @__PURE__ */ jsx("path", {
-			d: "M10.5 10.5L14 14",
-			"stroke-linecap": "round"
-		})]
-	});
-}
-/** External link icon for visit_webpage. */
-function ExternalLinkIcon(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5",
-		class: props.class,
-		children: [
-			/* @__PURE__ */ jsx("path", {
-				d: "M6 2H3a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1v-3",
-				"stroke-linecap": "round"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M9 2h5v5",
-				"stroke-linecap": "round",
-				"stroke-linejoin": "round"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M14 2L7 9",
-				"stroke-linecap": "round"
-			})
-		]
-	});
-}
-/** Terminal icon for run_code. */
-function TerminalIcon(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5",
-		class: props.class,
-		children: [
-			/* @__PURE__ */ jsx("rect", {
-				x: "1",
-				y: "2",
-				width: "14",
-				height: "12",
-				rx: "1.5"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M4 6l3 2.5L4 11",
-				"stroke-linecap": "round",
-				"stroke-linejoin": "round"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M9 11h3",
-				"stroke-linecap": "round"
-			})
-		]
-	});
-}
-/** Download icon for fetch_json. */
-function DownloadIcon(props) {
-	return /* @__PURE__ */ jsxs("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5",
-		class: props.class,
-		children: [
-			/* @__PURE__ */ jsx("path", {
-				d: "M8 2v9",
-				"stroke-linecap": "round"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M4.5 8L8 11.5 11.5 8",
-				"stroke-linecap": "round",
-				"stroke-linejoin": "round"
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M2 13h12",
-				"stroke-linecap": "round"
-			})
-		]
-	});
-}
-/** Chat bubble icon for user_input. */
-function ChatBubbleIcon(props) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5",
-		class: props.class,
-		children: /* @__PURE__ */ jsx("path", {
-			d: "M2 3a1 1 0 011-1h10a1 1 0 011 1v7a1 1 0 01-1 1H5l-3 3V3z",
-			"stroke-linejoin": "round"
-		})
-	});
-}
-/** Bolt/lightning icon for default/unknown tools. */
-function BoltIcon(props) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		"stroke-width": "1.5",
-		class: props.class,
-		children: /* @__PURE__ */ jsx("path", {
-			d: "M9 1L3 9h5l-1 6 6-8H8l1-6z",
-			"stroke-linejoin": "round"
-		})
-	});
-}
-//#endregion
-export { BoltIcon, ChatBubbleIcon, DownloadIcon, ExternalLinkIcon, SearchIcon, TerminalIcon };

package/dist/_components/transcript.d.ts

@@ -1,25 +0,0 @@
-import type * as preact from "preact";
-import type { Reactive } from "../types.ts";
-/**
- * Live speech-to-text transcript shown while the user is speaking.
- * Returns `null` when there is no active utterance.
- *
- * Displays a {@link ThinkingIndicator} while waiting for the first
- * transcription text (i.e., `userUtterance` is `""`).
- *
- * @example
- * ```tsx
- * const { session } = useSession();
- * <Transcript userUtterance={session.userUtterance} />
- * ```
- *
- * @param userUtterance - Reactive string (`null` when idle, `""` when
- *   listening but no text yet, or the transcript text).
- * @param className - Additional CSS class names.
- *
- * @public
- */
-export declare function Transcript({ userUtterance, className, }: {
-    userUtterance: Reactive<string | null>;
-    className?: string;
-}): preact.JSX.Element | null;

package/dist/_components/transcript.js

@@ -1,35 +0,0 @@
-import { ThinkingIndicator } from "./thinking-indicator.js";
-import clsx from "clsx";
-import { jsx } from "preact/jsx-runtime";
-//#region _components/transcript.tsx
-/**
-* Live speech-to-text transcript shown while the user is speaking.
-* Returns `null` when there is no active utterance.
-*
-* Displays a {@link ThinkingIndicator} while waiting for the first
-* transcription text (i.e., `userUtterance` is `""`).
-*
-* @example
-* ```tsx
-* const { session } = useSession();
-* <Transcript userUtterance={session.userUtterance} />
-* ```
-*
-* @param userUtterance - Reactive string (`null` when idle, `""` when
-*   listening but no text yet, or the transcript text).
-* @param className - Additional CSS class names.
-*
-* @public
-*/
-function Transcript({ userUtterance, className }) {
-	if (userUtterance.value === null) return null;
-	return /* @__PURE__ */ jsx("div", {
-		class: clsx("flex flex-col items-end w-full", className),
-		children: /* @__PURE__ */ jsx("div", {
-			class: "max-w-[min(82%,64ch)] whitespace-pre-wrap wrap-break-word text-sm leading-[150%] text-aai-text-muted bg-aai-surface-faint border border-aai-border px-3 py-2 rounded-aai ml-auto",
-			children: userUtterance.value || /* @__PURE__ */ jsx(ThinkingIndicator, {})
-		})
-	});
-}
-//#endregion
-export { Transcript };

package/dist/client-context.d.ts

@@ -1,33 +0,0 @@
-/**
- * Theme overrides for the default UI. Applied as CSS custom properties.
- *
- * @public
- */
-export type ClientTheme = {
-    /** Background color. Default: `#101010`. */
-    bg?: string;
-    /** Primary accent color. Default: `#fab283`. */
-    primary?: string;
-    /** Main text color. */
-    text?: string;
-    /** Surface/card color. */
-    surface?: string;
-    /** Border color. */
-    border?: string;
-};
-/**
- * Resolved client-level configuration available to default UI components.
- *
- * @public
- */
-export type ClientConfig = {
-    title?: string | undefined;
-    theme?: ClientTheme | undefined;
-};
-export declare const ClientConfigProvider: import("preact").Provider<ClientConfig>;
-/**
- * Read client config (title, theme) from the nearest provider.
- *
- * @public
- */
-export declare function useClientConfig(): ClientConfig;

package/dist/client-context.js

@@ -1,15 +0,0 @@
-import { createContext } from "preact";
-import { useContext } from "preact/hooks";
-//#region client-context.ts
-const Ctx = createContext({});
-const ClientConfigProvider = Ctx.Provider;
-/**
-* Read client config (title, theme) from the nearest provider.
-*
-* @public
-*/
-function useClientConfig() {
-	return useContext(Ctx);
-}
-//#endregion
-export { ClientConfigProvider, useClientConfig };

package/dist/client-handler.d.ts

@@ -1,43 +0,0 @@
-import type { ReadyConfig } from "@alexkroman1/aai/protocol";
-import type { VoiceIO } from "./audio.ts";
-import type { AgentState, ChatMessage, Reactive, SessionError, ToolCallInfo } from "./types.ts";
-type BatchFn = (fn: () => void) => void;
-/**
- * Handles server→client messages and updates reactive Preact signals
- * accordingly (state transitions, transcripts, messages, audio playback).
- *
- * @internal Exported for testing only.
- */
-export declare class ClientHandler {
-    #private;
-    constructor(opts: {
-        state: Reactive<AgentState>;
-        messages: Reactive<ChatMessage[]>;
-        toolCalls: Reactive<ToolCallInfo[]>;
-        userUtterance: Reactive<string | null>;
-        agentUtterance: Reactive<string | null>;
-        error: Reactive<SessionError | null>;
-        voiceIO: () => VoiceIO | null;
-        batch: BatchFn;
-    });
-    /** Single entry point for all server→client session events. */
-    event(e: import("@alexkroman1/aai/protocol").ClientEvent): void;
-    /** Enqueue a PCM16 audio chunk for playback. Transitions state to `"speaking"` on the first chunk. */
-    playAudioChunk(chunk: Uint8Array): void;
-    /**
-     * Signal that the server has finished sending audio for this turn.
-     * Waits for the audio queue to drain, then transitions state to `"listening"`.
-     * Uses the `#generation` counter to discard stale completions from interrupted turns.
-     */
-    playAudioDone(): void;
-    /**
-     * Dispatch an incoming WebSocket message (text or binary).
-     *
-     * Returns the parsed config if the message is a `config` message,
-     * otherwise `null`.
-     */
-    handleMessage(data: string | ArrayBuffer): (ReadyConfig & {
-        sessionId?: string;
-    }) | null;
-}
-export {};