@alexkroman1/aai-ui 0.12.2 → 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/_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/chat-view.d.ts

@@ -1,29 +0,0 @@
-import type * as preact from "preact";
-/**
- * The main chat interface for a voice agent session.
- * Displays a header (with title and {@link StateIndicator}), an
- * {@link ErrorBanner}, the {@link MessageList}, and session {@link Controls}.
- *
- * Must be rendered inside a {@link SessionProvider}.
- *
- * @example
- * ```tsx
- * <StartScreen icon="🍕" title="Pizza Palace">
- *   <ChatView />
- * </StartScreen>
- * ```
- *
- * @example Pair with a sidebar
- * ```tsx
- * <SidebarLayout sidebar={<RecipeCard />}>
- *   <ChatView className="border-l" />
- * </SidebarLayout>
- * ```
- *
- * @param className - Additional CSS class names applied to the root element.
- *
- * @public
- */
-export declare function ChatView({ className }: {
-    className?: string;
-}): preact.JSX.Element;

package/dist/_components/chat-view.js

@@ -1,61 +0,0 @@
-import { useClientConfig } from "../client-context.js";
-import { useSession } from "../signals.js";
-import { Controls } from "./controls.js";
-import { ErrorBanner } from "./error-banner.js";
-import { MessageList } from "./message-list.js";
-import { StateIndicator } from "./state-indicator.js";
-import clsx from "clsx";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region _components/chat-view.tsx
-/**
-* The main chat interface for a voice agent session.
-* Displays a header (with title and {@link StateIndicator}), an
-* {@link ErrorBanner}, the {@link MessageList}, and session {@link Controls}.
-*
-* Must be rendered inside a {@link SessionProvider}.
-*
-* @example
-* ```tsx
-* <StartScreen icon="🍕" title="Pizza Palace">
-*   <ChatView />
-* </StartScreen>
-* ```
-*
-* @example Pair with a sidebar
-* ```tsx
-* <SidebarLayout sidebar={<RecipeCard />}>
-*   <ChatView className="border-l" />
-* </SidebarLayout>
-* ```
-*
-* @param className - Additional CSS class names applied to the root element.
-*
-* @public
-*/
-function ChatView({ className }) {
-	const { session } = useSession();
-	const { title } = useClientConfig();
-	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("flex flex-col h-screen max-w-130 mx-auto bg-aai-bg text-aai-text font-aai text-sm", className),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				class: "flex items-center gap-3 px-4 py-3 border-b border-aai-border shrink-0",
-				children: [title ? /* @__PURE__ */ jsx("span", {
-					class: "text-sm font-semibold text-aai-primary",
-					children: title
-				}) : /* @__PURE__ */ jsx("pre", {
-					class: "font-aai-mono text-[10px] leading-[1.1] font-bold text-aai-primary m-0",
-					children: "▄▀█ ▄▀█ █\n█▀█ █▀█ █"
-				}), /* @__PURE__ */ jsx("div", {
-					class: "ml-auto",
-					children: /* @__PURE__ */ jsx(StateIndicator, { state: session.state })
-				})]
-			}),
-			/* @__PURE__ */ jsx(ErrorBanner, { error: session.error }),
-			/* @__PURE__ */ jsx(MessageList, {}),
-			/* @__PURE__ */ jsx(Controls, {})
-		]
-	});
-}
-//#endregion
-export { ChatView };

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/message-list.js

@@ -1,76 +0,0 @@
-import { useAutoScroll, useSession } from "../signals.js";
-import { MessageBubble } from "./message-bubble.js";
-import { ThinkingIndicator } from "./thinking-indicator.js";
-import { ToolCallBlock } from "./tool-call-block.js";
-import { Transcript } from "./transcript.js";
-import clsx from "clsx";
-import { useComputed } from "@preact/signals";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region _components/message-list.tsx
-/**
-* Scrollable list of all chat messages, tool-call blocks, live transcript,
-* streaming agent utterance, and a thinking indicator.
-*
-* Messages and tool calls are interleaved in the correct order. The list
-* auto-scrolls to the latest content via {@link useAutoScroll}.
-*
-* Must be rendered inside a {@link SessionProvider}.
-*
-* @example
-* ```tsx
-* <MessageList className="flex-1" />
-* ```
-*
-* @param className - Additional CSS class names applied to the scroll container.
-*
-* @public
-*/
-function MessageList({ className }) {
-	const { session } = useSession();
-	const scrollRef = useAutoScroll();
-	const showThinking = useComputed(() => {
-		if (session.state.value !== "thinking") return false;
-		const last = session.toolCalls.value.at(-1);
-		if (last?.status === "pending") return false;
-		const lastMsg = session.messages.value.at(-1);
-		return !lastMsg || lastMsg.role === "user" || Boolean(last);
-	});
-	const messages = session.messages.value;
-	const toolCalls = session.toolCalls.value;
-	const items = [];
-	let tci = 0;
-	for (const [i, msg] of messages.entries()) {
-		items.push(/* @__PURE__ */ jsx(MessageBubble, { message: msg }, `msg-${i}`));
-		let tc = toolCalls[tci];
-		while (tc && tc.afterMessageIndex <= i) {
-			items.push(/* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.toolCallId));
-			tci++;
-			tc = toolCalls[tci];
-		}
-	}
-	let tc = toolCalls[tci];
-	while (tc) {
-		items.push(/* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.toolCallId));
-		tci++;
-		tc = toolCalls[tci];
-	}
-	return /* @__PURE__ */ jsx("div", {
-		role: "log",
-		class: clsx("flex-1 overflow-y-auto [scrollbar-width:none] bg-aai-surface", className),
-		children: /* @__PURE__ */ jsxs("div", {
-			class: "flex flex-col gap-4.5 p-4",
-			children: [
-				items,
-				session.agentUtterance.value && /* @__PURE__ */ jsx(MessageBubble, { message: {
-					role: "assistant",
-					content: session.agentUtterance.value
-				} }),
-				/* @__PURE__ */ jsx(Transcript, { userUtterance: session.userUtterance }),
-				showThinking.value && /* @__PURE__ */ jsx(ThinkingIndicator, {}),
-				/* @__PURE__ */ jsx("div", { ref: scrollRef })
-			]
-		})
-	});
-}
-//#endregion
-export { MessageList };

package/dist/_components/sidebar-layout.d.ts

@@ -1,21 +0,0 @@
-import type { ComponentChildren } from "preact";
-/**
- * A two-column layout with a fixed-width sidebar and a flexible main area.
- * Commonly used to pair a custom sidebar (cart, dashboard) with `<ChatView />`.
- *
- * @example
- * ```tsx
- * <SidebarLayout sidebar={<OrderPanel />}>
- *   <ChatView />
- * </SidebarLayout>
- * ```
- *
- * @public
- */
-export declare function SidebarLayout({ sidebar, children, width, side, className, }: {
-    sidebar: ComponentChildren;
-    children: ComponentChildren;
-    width?: string | undefined;
-    side?: "left" | "right" | undefined;
-    className?: string;
-}): import("preact").JSX.Element;

package/dist/_components/sidebar-layout.js

@@ -1,36 +0,0 @@
-import clsx from "clsx";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region _components/sidebar-layout.tsx
-/**
-* A two-column layout with a fixed-width sidebar and a flexible main area.
-* Commonly used to pair a custom sidebar (cart, dashboard) with `<ChatView />`.
-*
-* @example
-* ```tsx
-* <SidebarLayout sidebar={<OrderPanel />}>
-*   <ChatView />
-* </SidebarLayout>
-* ```
-*
-* @public
-*/
-function SidebarLayout({ sidebar, children, width = "20rem", side = "left", className }) {
-	const sidebarEl = /* @__PURE__ */ jsx("div", {
-		class: clsx("flex-shrink-0 flex flex-col overflow-y-auto", side === "left" ? "border-r border-aai-border" : "border-l border-aai-border"),
-		style: { width },
-		children: sidebar
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("flex h-screen bg-aai-bg", className),
-		children: [
-			side === "left" && sidebarEl,
-			/* @__PURE__ */ jsx("div", {
-				class: "flex-1 min-w-0",
-				children
-			}),
-			side === "right" && sidebarEl
-		]
-	});
-}
-//#endregion
-export { SidebarLayout };

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