@alexkroman1/aai-ui 0.12.3 → 0.14.0

package/styles.css

@@ -1,30 +1,38 @@
 @import "tailwindcss";
+
 @source "./";
 @source "../dist/ui/";
 
+/*
+ * AssemblyAI design system ("website refresh") tokens.
+ * - font-aai: Monument Grotesk when the host page loads it, warm system
+ *   grotesque otherwise (the package ships no font binaries).
+ * - font-aai-serif: editorial serif for headings (Source Serif 4 stand-in,
+ *   graceful Georgia-class fallbacks).
+ * - font-aai-mono: JetBrains Mono stand-in for code/tool rows.
+ * - radius-aai: the refresh's squared-off 4px control radius.
+ * - color-aai-*: the five `ClientTheme` fields, so a Tailwind class can see
+ *   them. `ThemeProvider` writes `--aai-bg` … `--aai-primary` onto `:root`
+ *   from `client({ theme })`; these map them into Tailwind's `--color-*`
+ *   namespace, which is what makes `bg-aai-surface`, `text-aai-text`,
+ *   `border-aai-border` and `text-aai-primary` real utilities. The fallbacks
+ *   ARE the default theme, so the classes work on a page that mounts no
+ *   provider at all (a static page, a Storybook frame) instead of collapsing
+ *   to transparent — and they must be kept in step with `DEFAULT_THEME` in
+ *   `context.ts`, which `theme-css-vars.test.ts` asserts.
+ */
 @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;
+  --color-aai-bg: var(--aai-bg, #fbf8f2);
+  --color-aai-surface: var(--aai-surface, #ffffff);
+  --color-aai-text: var(--aai-text, #1b1a18);
+  --color-aai-border: var(--aai-border, #dcd7cc);
+  --color-aai-primary: var(--aai-primary, #3f2bc1);
+  --font-aai:
+    "Monument Grotesk", "ABC Monument Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-aai-serif:
+    "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, serif;
+  --font-aai-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --radius-aai: 4px;
 }
 
 @layer base {
@@ -32,7 +40,18 @@
   body {
     margin: 0;
     padding: 0;
-    background: var(--color-aai-bg);
+  }
+}
+
+@keyframes aai-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.82);
   }
 }
 
@@ -59,15 +78,118 @@
 }
 
 .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;
+}
+
+/*
+ * Reduced motion is honoured HERE, once, for everything this stylesheet reaches.
+ *
+ * Roughly nineteen INFINITE animations ship in an aai app and, until this block,
+ * not one of them asked: `prefers-reduced-motion` appeared zero times in the
+ * repository. `aai-pulse` on the console shell's live dot, `aai-bounce` on the
+ * thinking dots, `aai-shimmer` on every streaming tool row, Tailwind's
+ * `animate-pulse` on an indeterminate upload bar — all of them running for as
+ * long as the page is open. For a reader with a vestibular disorder that is not
+ * decoration, it is the reason they close the tab.
+ *
+ * **The universal selector is the leverage point, and it is the only thing that
+ * reaches the TEMPLATES.** Every template's `client.tsx` opens with
+ * `import "@alexkroman1/aai-ui/styles.css"`, and several then declare keyframes
+ * of their own in an inline `<style>` block: `dc-pulse`/`dc-slide-in`
+ * (emergency-dispatch-agent), `rt-pulse`/`rt-slide-in` (retail), `crisisPulse`
+ * (tabletop-rpg-agent), and `ic-flicker`/`ic-scanline`/`ic-pulse` (text-adventure-agent,
+ * which flickers the whole viewport's opacity and sweeps a scanline across the
+ * page — the worst thing in the repo for a motion-sensitive reader). Nothing in
+ * this package knows those names, and no per-component fix could: it would have
+ * to be written again in every template, by every author who copies one, and
+ * the author who forgets leaves no trace in a diff. A universal selector does
+ * not need to know the name of the animation it is stopping. That is also what
+ * makes this the right FILE rather than merely a convenient one — the published
+ * sheet is the single artifact every client already imports, so a template opts
+ * in by existing, and one written next year opts in before it is written.
+ *
+ * Four properties, because motion arrives four ways:
+ *
+ * - `animation-duration` and `animation-iteration-count` — the keyframe half.
+ *   The count carries its own weight: cut the duration alone and an `infinite`
+ *   animation is still infinite, merely very fast, which is worse than what it
+ *   replaced.
+ * - `transition-duration` — the property-change half, which no search for
+ *   `@keyframes` would ever turn up.
+ * - `scroll-behavior` — the CSS half of scrolling: a host page or template
+ *   declaring `scroll-behavior: smooth`, and any `scrollIntoView()` /
+ *   `scrollTo()` that left the behaviour to CSS. Note what it does NOT reach.
+ *   `AutoScroll`'s `resize: "smooth"` default is a requestAnimationFrame SPRING
+ *   inside `use-stick-to-bottom` (which reads no media query of its own, and
+ *   sets `scroll-behavior: auto` inline while it writes `scrollTop` anyway), so
+ *   silencing that one is a change in `components/auto-scroll.tsx` and is still
+ *   owed. Recording the gap beats letting the next reader assume it is covered.
+ *
+ * `0.01ms` rather than `0s` on both durations is deliberate: a zero-duration
+ * animation or transition fires no `animationend`/`transitionend`, so anything
+ * awaiting one — ours or a consumer's — waits forever. Effectively instant, and
+ * still an event.
+ *
+ * `!important`, and no `@layer`, is what lets this outrank the three ways motion
+ * is actually declared here: a Tailwind utility (`animate-pulse`), a template's
+ * own `<style>` block, and the inline `style={{ animation: … }}` that
+ * `ConsoleShell` and `MessageList` write — an author `!important` beats a normal
+ * inline declaration, which is the only reason those last two are covered. A
+ * reader who asked their OS for less motion outranks all three.
+ *
+ * Biome's `noImportantStyles` warns on all four declarations and the warnings
+ * STAY. The rule's argument — that `!important` reverses the cascade — is the
+ * property being used on purpose here, this block existing precisely to outrank
+ * a declaration written closer to the element. It is not suppressed either: a
+ * lint suppression is a counted escape hatch (`pnpm check:hatches`), so
+ * silencing a warning that is really a design note would spend four of them, and
+ * `biome check .` exits 0 on warnings, so nothing is gated on it.
+ *
+ * `src/styles-motion.test.ts` asserts this block against the stylesheet SOURCE,
+ * a spec having no way to render CSS.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/*
+ * `.aai-scroll` — the thin, quiet scrollbar every custom chrome had drawn.
+ *
+ * Four template clients each carried the same three `::-webkit-scrollbar`
+ * rules under their own class name, differing only in the thumb colour — which
+ * is this package's business to make a variable and not to choose. The thumb
+ * defaults to the theme's border token and the track to transparent; a chrome
+ * with its own scrollbar palette sets `--aai-scrollbar-thumb` and
+ * `--aai-scrollbar-track` on the element or an ancestor (in its own `<style>`
+ * block, or as an inline custom property) and keeps the six lines out of its
+ * file. `scrollbar-width`/`scrollbar-color` are the standard half and cover
+ * Firefox; the `::-webkit-` pseudo-elements are the half Chromium and WebKit
+ * still read.
+ */
+.aai-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--aai-scrollbar-thumb, var(--aai-border, #dcd7cc))
+    var(--aai-scrollbar-track, transparent);
+}
+.aai-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.aai-scroll::-webkit-scrollbar-track {
+  background: var(--aai-scrollbar-track, transparent);
+}
+.aai-scroll::-webkit-scrollbar-thumb {
+  background: var(--aai-scrollbar-thumb, var(--aai-border, #dcd7cc));
+  border-radius: 3px;
 }

package/dist/audio.d.ts

@@ -1,45 +0,0 @@
-/** Configuration for creating a {@link VoiceIO} instance. */
-export type VoiceIOOptions = {
-    /** Sample rate in Hz expected by the STT engine (e.g. 16000). */
-    sttSampleRate: number;
-    /** Sample rate in Hz used by the TTS engine (e.g. 22050). */
-    ttsSampleRate: number;
-    /** Source URL or data URI for the capture AudioWorklet processor. */
-    captureWorkletSrc: string;
-    /** Source URL or data URI for the playback AudioWorklet processor. */
-    playbackWorkletSrc: string;
-    /** Callback invoked with buffered PCM16 microphone data to send to the server. */
-    onMicData: (pcm16: ArrayBuffer) => void;
-    /** Callback invoked with the current playback position in samples. */
-    onPlaybackProgress?: (samplesPlayed: number) => void;
-};
-/**
- * Audio I/O interface for voice capture and playback.
- *
- * Manages microphone capture via an AudioWorklet, resampling to the STT
- * sample rate, and TTS audio playback through a second AudioWorklet. Implements
- * {@link AsyncDisposable} for resource cleanup.
- */
-export type VoiceIO = AsyncDisposable & {
-    /** Enqueue a PCM16 audio buffer for playback through the TTS pipeline. */
-    enqueue(pcm16Buffer: ArrayBuffer): void;
-    /** Signal that all TTS audio for the current turn has been enqueued.
-     *  Resolves when the worklet has finished playing all buffered audio. */
-    done(): Promise<void>;
-    /** Immediately stop playback and discard any buffered TTS audio. */
-    flush(): void;
-    /** Release all audio resources (microphone, AudioContext, worklets). */
-    close(): Promise<void>;
-};
-/**
- * Create a {@link VoiceIO} instance that captures microphone audio and
- * plays back TTS audio using the Web Audio API.
- *
- * The AudioContext runs at the TTS sample rate for playback fidelity.
- * Captured audio is resampled to the STT rate when the rates differ.
- *
- * @param opts - Voice I/O configuration options.
- * @returns A promise that resolves to a {@link VoiceIO} handle.
- * @throws If microphone access is denied or AudioWorklet registration fails.
- */
-export declare function createVoiceIO(opts: VoiceIOOptions): Promise<VoiceIO>;

package/dist/audio.js

@@ -1,121 +0,0 @@
-import { MIC_BUFFER_SECONDS } from "./types.js";
-//#region audio.ts
-/**
-* Create a {@link VoiceIO} instance that captures microphone audio and
-* plays back TTS audio using the Web Audio API.
-*
-* The AudioContext runs at the TTS sample rate for playback fidelity.
-* Captured audio is resampled to the STT rate when the rates differ.
-*
-* @param opts - Voice I/O configuration options.
-* @returns A promise that resolves to a {@link VoiceIO} handle.
-* @throws If microphone access is denied or AudioWorklet registration fails.
-*/
-async function createVoiceIO(opts) {
-	const { sttSampleRate, ttsSampleRate, captureWorkletSrc, playbackWorkletSrc, onMicData } = opts;
-	const contextRate = ttsSampleRate;
-	const ctx = new AudioContext({
-		sampleRate: contextRate,
-		latencyHint: "playback"
-	});
-	await ctx.resume();
-	const stream = await navigator.mediaDevices.getUserMedia({ audio: {
-		sampleRate: contextRate,
-		echoCancellation: true,
-		noiseSuppression: true,
-		autoGainControl: true
-	} });
-	try {
-		await Promise.all([ctx.audioWorklet.addModule(captureWorkletSrc), ctx.audioWorklet.addModule(playbackWorkletSrc)]);
-	} catch (err) {
-		for (const t of stream.getTracks()) t.stop();
-		await ctx.close().catch((err) => {
-			console.warn("AudioContext close failed:", err);
-		});
-		throw err;
-	}
-	const mic = ctx.createMediaStreamSource(stream);
-	const capNode = new AudioWorkletNode(ctx, "capture-processor", {
-		channelCount: 1,
-		channelCountMode: "explicit",
-		processorOptions: {
-			contextRate,
-			sttSampleRate
-		}
-	});
-	mic.connect(capNode);
-	const chunkSizeBytes = Math.floor(sttSampleRate * MIC_BUFFER_SECONDS) * 2;
-	const capBufA = new Uint8Array(chunkSizeBytes * 2);
-	const capBufB = new Uint8Array(chunkSizeBytes * 2);
-	let capBuf = capBufA;
-	let capOffset = 0;
-	capNode.port.postMessage({ event: "start" });
-	capNode.port.onmessage = (e) => {
-		if (e.data.event !== "chunk") return;
-		const chunk = new Uint8Array(e.data.buffer);
-		capBuf.set(chunk, capOffset);
-		capOffset += chunk.byteLength;
-		if (capOffset >= chunkSizeBytes) {
-			const sendBuf = capBuf;
-			const filled = capOffset;
-			capBuf = capBuf === capBufA ? capBufB : capBufA;
-			capOffset = 0;
-			onMicData(sendBuf.buffer.slice(0, filled));
-		}
-	};
-	let playNode = null;
-	let onPlaybackStop = null;
-	const lifecycle = new AbortController();
-	const { onPlaybackProgress } = opts;
-	function ensurePlayNode() {
-		if (playNode) return playNode;
-		const node = new AudioWorkletNode(ctx, "playback-processor", { processorOptions: { sampleRate: contextRate } });
-		node.connect(ctx.destination);
-		node.port.onmessage = (e) => {
-			if (e.data.event === "stop") {
-				node.disconnect();
-				if (playNode === node) playNode = null;
-				onPlaybackStop?.();
-				onPlaybackStop = null;
-			} else if (e.data.event === "progress") onPlaybackProgress?.(e.data.readPos);
-		};
-		playNode = node;
-		return node;
-	}
-	const io = {
-		enqueue(pcm16Buffer) {
-			if (lifecycle.signal.aborted) return;
-			if (pcm16Buffer.byteLength === 0) return;
-			ensurePlayNode().port.postMessage({
-				event: "write",
-				buffer: new Uint8Array(pcm16Buffer)
-			}, [pcm16Buffer]);
-		},
-		done() {
-			if (!playNode) return Promise.resolve();
-			return new Promise((resolve) => {
-				onPlaybackStop = resolve;
-				playNode?.port.postMessage({ event: "done" });
-			});
-		},
-		flush() {
-			if (playNode) playNode.port.postMessage({ event: "interrupt" });
-		},
-		async close() {
-			if (lifecycle.signal.aborted) return;
-			lifecycle.abort();
-			capNode.port.postMessage({ event: "stop" });
-			mic.disconnect();
-			capNode.disconnect();
-			if (playNode) playNode.disconnect();
-			for (const t of stream.getTracks()) t.stop();
-			await ctx.close().catch(() => {});
-		},
-		async [Symbol.asyncDispose]() {
-			await io.close();
-		}
-	};
-	return io;
-}
-//#endregion
-export { createVoiceIO };

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;