@alexkroman1/aai-ui 0.12.3 → 1.0.2

package/styles.css

@@ -1,38 +1,13 @@
 @import "tailwindcss";
+
 @source "./";
 @source "../dist/ui/";
 
-@theme {
-  --color-aai-bg: #101010;
-  --color-aai-surface: #151515;
-  --color-aai-surface-faint: rgba(255, 255, 255, 0.031);
-  --color-aai-surface-hover: rgba(255, 255, 255, 0.059);
-  --color-aai-border: #282828;
-  --color-aai-primary: #fab283;
-  --color-aai-text: rgba(255, 255, 255, 0.936);
-  --color-aai-text-secondary: rgba(255, 255, 255, 0.618);
-  --color-aai-text-muted: rgba(255, 255, 255, 0.284);
-  --color-aai-text-dim: rgba(255, 255, 255, 0.422);
-  --color-aai-error: #e06c75;
-  --color-aai-ring: #56b6c2;
-  --color-aai-state-disconnected: rgba(255, 255, 255, 0.422);
-  --color-aai-state-connecting: rgba(255, 255, 255, 0.422);
-  --color-aai-state-ready: #7fd88f;
-  --color-aai-state-listening: #56b6c2;
-  --color-aai-state-thinking: #f5a742;
-  --color-aai-state-speaking: #e06c75;
-  --color-aai-state-error: #e06c75;
-  --radius-aai: 6px;
-  --font-aai: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-aai-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-}
-
 @layer base {
   html,
   body {
     margin: 0;
     padding: 0;
-    background: var(--color-aai-bg);
   }
 }
 
@@ -59,15 +34,10 @@
 }
 
 .tool-shimmer {
-  background: linear-gradient(
-    90deg,
-    var(--color-aai-text) 25%,
-    var(--color-aai-text-dim) 50%,
-    var(--color-aai-text) 75%
-  );
+  background: linear-gradient(90deg, currentColor 25%, transparent 50%, currentColor 75%);
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  animation: aai-shimmer 2s ease-in-out infinite;
+  animation: aai-shimmer 2s infinite;
 }

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 {};

package/dist/components/app.d.ts

@@ -1,23 +0,0 @@
-import type * as preact from "preact";
-/**
- * The default top-level UI component for an AAI voice agent.
- * Renders a {@link StartScreen} (with the AAI logo or a custom title from
- * {@link useClientConfig}) followed by a {@link ChatView} once the session starts.
- *
- * This is the component rendered by {@link defineClient} when no custom component is
- * provided.
- *
- * @example
- * ```tsx
- * import { App, defineClient } from "@aai/ui";
- *
- * defineClient(App, { target: "#app", title: "My Agent" });
- * ```
- *
- * @param className - Additional CSS class names applied to the root element.
- *
- * @public
- */
-export declare function App({ className }: {
-    className?: string;
-}): preact.JSX.Element;

package/dist/components/app.js

@@ -1,41 +0,0 @@
-import { useClientConfig } from "../client-context.js";
-import { ChatView } from "./chat-view.js";
-import { StartScreen } from "./start-screen.js";
-import { jsx } from "preact/jsx-runtime";
-//#region components/app.tsx
-function AnsiLogo() {
-	return /* @__PURE__ */ jsx("pre", {
-		class: "font-aai-mono text-lg leading-[1.1] font-bold text-aai-primary m-0",
-		children: "▄▀█ ▄▀█ █\n█▀█ █▀█ █"
-	});
-}
-/**
-* The default top-level UI component for an AAI voice agent.
-* Renders a {@link StartScreen} (with the AAI logo or a custom title from
-* {@link useClientConfig}) followed by a {@link ChatView} once the session starts.
-*
-* This is the component rendered by {@link defineClient} when no custom component is
-* provided.
-*
-* @example
-* ```tsx
-* import { App, defineClient } from "@aai/ui";
-*
-* defineClient(App, { target: "#app", title: "My Agent" });
-* ```
-*
-* @param className - Additional CSS class names applied to the root element.
-*
-* @public
-*/
-function App({ className }) {
-	const { title } = useClientConfig();
-	return /* @__PURE__ */ jsx(StartScreen, {
-		icon: title ? void 0 : /* @__PURE__ */ jsx(AnsiLogo, {}),
-		title,
-		className,
-		children: /* @__PURE__ */ jsx(ChatView, {})
-	});
-}
-//#endregion
-export { App };

package/dist/components/error-banner.d.ts

@@ -1,21 +0,0 @@
-import type * as preact from "preact";
-import type { Reactive, SessionError } from "../types.ts";
-/**
- * Displays a session error as a styled inline banner.
- * Returns `null` when there is no active error.
- *
- * @example
- * ```tsx
- * const { session } = useSession();
- * <ErrorBanner error={session.error} />
- * ```
- *
- * @param error - A reactive {@link SessionError} (or `null`).
- * @param className - Additional CSS class names.
- *
- * @public
- */
-export declare function ErrorBanner({ error, className, }: {
-    error: Reactive<SessionError | null>;
-    className?: string;
-}): preact.JSX.Element | null;

package/dist/components/error-banner.js

@@ -1,27 +0,0 @@
-import clsx from "clsx";
-import { jsx } from "preact/jsx-runtime";
-//#region components/error-banner.tsx
-/**
-* Displays a session error as a styled inline banner.
-* Returns `null` when there is no active error.
-*
-* @example
-* ```tsx
-* const { session } = useSession();
-* <ErrorBanner error={session.error} />
-* ```
-*
-* @param error - A reactive {@link SessionError} (or `null`).
-* @param className - Additional CSS class names.
-*
-* @public
-*/
-function ErrorBanner({ error, className }) {
-	if (!error.value) return null;
-	return /* @__PURE__ */ jsx("div", {
-		class: clsx("mx-4 mt-3 px-3 py-2 rounded-aai border border-aai-error/40 bg-aai-error/8 text-[13px] leading-[130%] text-aai-error", className),
-		children: error.value.message
-	});
-}
-//#endregion
-export { ErrorBanner };

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

@@ -1,23 +0,0 @@
-import type * as preact from "preact";
-import type { ChatMessage } from "../types.ts";
-/**
- * Renders a single chat message as a styled bubble.
- *
- * - **User** messages appear right-aligned with a faint surface background.
- * - **Assistant** messages appear left-aligned as plain text.
- *
- * @example
- * ```tsx
- * <MessageBubble message={{ role: "user", content: "Hello!" }} />
- * <MessageBubble message={{ role: "assistant", content: "Hi there!" }} />
- * ```
- *
- * @param message - The chat message to display (see {@link ChatMessage}).
- * @param className - Additional CSS class names applied to the root element.
- *
- * @public
- */
-export declare function MessageBubble({ message, className, }: {
-    message: ChatMessage;
-    className?: string;
-}): preact.JSX.Element;

package/dist/components/message-bubble.js

@@ -1,35 +0,0 @@
-import clsx from "clsx";
-import { jsx } from "preact/jsx-runtime";
-//#region components/message-bubble.tsx
-/**
-* Renders a single chat message as a styled bubble.
-*
-* - **User** messages appear right-aligned with a faint surface background.
-* - **Assistant** messages appear left-aligned as plain text.
-*
-* @example
-* ```tsx
-* <MessageBubble message={{ role: "user", content: "Hello!" }} />
-* <MessageBubble message={{ role: "assistant", content: "Hi there!" }} />
-* ```
-*
-* @param message - The chat message to display (see {@link ChatMessage}).
-* @param className - Additional CSS class names applied to the root element.
-*
-* @public
-*/
-function MessageBubble({ message, className }) {
-	if (message.role === "user") return /* @__PURE__ */ jsx("div", {
-		class: clsx("flex flex-col w-full items-end", className),
-		children: /* @__PURE__ */ jsx("div", {
-			class: "max-w-[min(82%,64ch)] bg-aai-surface-faint border border-aai-border px-3 py-2 rounded-aai whitespace-pre-wrap wrap-break-word text-sm font-normal leading-[150%] text-aai-text",
-			children: message.content
-		})
-	});
-	return /* @__PURE__ */ jsx("div", {
-		class: clsx("whitespace-pre-wrap wrap-break-word text-sm font-normal leading-[150%] text-aai-text", className),
-		children: message.content
-	});
-}
-//#endregion
-export { MessageBubble };

package/dist/components/state-indicator.d.ts

@@ -1,29 +0,0 @@
-import type * as preact from "preact";
-import type { AgentState, Reactive } from "../types.ts";
-/**
- * Colored dot + label showing the current {@link AgentState}.
- *
- * State-to-color mapping:
- * - `disconnected` — gray
- * - `connecting` — yellow
- * - `ready` — green
- * - `listening` — blue
- * - `thinking` — purple
- * - `speaking` — red
- * - `error` — red
- *
- * @example
- * ```tsx
- * const { session } = useSession();
- * <StateIndicator state={session.state} />
- * ```
- *
- * @param state - A reactive {@link AgentState} value.
- * @param className - Additional CSS class names.
- *
- * @public
- */
-export declare function StateIndicator({ state, className, }: {
-    state: Reactive<AgentState>;
-    className?: string;
-}): preact.JSX.Element;

package/dist/components/state-indicator.js

@@ -1,37 +0,0 @@
-import clsx from "clsx";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region components/state-indicator.tsx
-/**
-* Colored dot + label showing the current {@link AgentState}.
-*
-* State-to-color mapping:
-* - `disconnected` — gray
-* - `connecting` — yellow
-* - `ready` — green
-* - `listening` — blue
-* - `thinking` — purple
-* - `speaking` — red
-* - `error` — red
-*
-* @example
-* ```tsx
-* const { session } = useSession();
-* <StateIndicator state={session.state} />
-* ```
-*
-* @param state - A reactive {@link AgentState} value.
-* @param className - Additional CSS class names.
-*
-* @public
-*/
-function StateIndicator({ state, className }) {
-	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("inline-flex items-center justify-center gap-1.5 text-[13px] font-medium leading-[130%] text-aai-text-muted capitalize", className),
-		children: [/* @__PURE__ */ jsx("div", {
-			"data-state": state.value,
-			class: "w-2 h-2 rounded-full data-[state=disconnected]:bg-aai-state-disconnected data-[state=connecting]:bg-aai-state-connecting data-[state=ready]:bg-aai-state-ready data-[state=listening]:bg-aai-state-listening data-[state=thinking]:bg-aai-state-thinking data-[state=speaking]:bg-aai-state-speaking data-[state=error]:bg-aai-state-error"
-		}), state.value]
-	});
-}
-//#endregion
-export { StateIndicator };

package/dist/components/thinking-indicator.d.ts

@@ -1,16 +0,0 @@
-import type * as preact from "preact";
-/**
- * Animated three-dot "thinking" indicator shown while the agent is processing.
- *
- * @example
- * ```tsx
- * {isThinking && <ThinkingIndicator />}
- * ```
- *
- * @param className - Additional CSS class names.
- *
- * @public
- */
-export declare function ThinkingIndicator({ className }: {
-    className?: string;
-}): preact.JSX.Element;

package/dist/components/thinking-indicator.js

@@ -1,34 +0,0 @@
-import clsx from "clsx";
-import { jsx } from "preact/jsx-runtime";
-//#region components/thinking-indicator.tsx
-const DOT_STYLES = [
-	0,
-	.16,
-	.32
-].map((delay) => ({
-	animation: "aai-bounce 1.4s infinite ease-in-out both",
-	animationDelay: `${delay}s`
-}));
-/**
-* Animated three-dot "thinking" indicator shown while the agent is processing.
-*
-* @example
-* ```tsx
-* {isThinking && <ThinkingIndicator />}
-* ```
-*
-* @param className - Additional CSS class names.
-*
-* @public
-*/
-function ThinkingIndicator({ className }) {
-	return /* @__PURE__ */ jsx("div", {
-		class: clsx("flex items-center gap-2 text-aai-text-dim text-sm font-medium min-h-5", className),
-		children: DOT_STYLES.map((style, i) => /* @__PURE__ */ jsx("div", {
-			class: "w-1.5 h-1.5 rounded-full bg-aai-text-dim",
-			style
-		}, i))
-	});
-}
-//#endregion
-export { ThinkingIndicator };

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 };