@alexkroman1/aai-ui 0.12.2 → 0.13.0

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/start-screen.d.ts

@@ -1,26 +0,0 @@
-import type { ComponentChildren } from "preact";
-/**
- * A centered start screen with icon, title, subtitle, and a start button.
- * Renders `children` (the main app) once the session has started.
- *
- * @example
- * ```tsx
- * function MyAgent() {
- *   return (
- *     <StartScreen icon="🍕" title="Pizza Palace" subtitle="Voice-powered ordering">
- *       <ChatView />
- *     </StartScreen>
- *   );
- * }
- * ```
- *
- * @public
- */
-export declare function StartScreen({ children, icon, title, subtitle, buttonText, className, }: {
-    children: ComponentChildren;
-    icon?: ComponentChildren | undefined;
-    title?: string | undefined;
-    subtitle?: string | undefined;
-    buttonText?: string | undefined;
-    className?: string | undefined;
-}): import("preact").JSX.Element;

package/dist/_components/start-screen.js

@@ -1,51 +0,0 @@
-import { useSession } from "../signals.js";
-import { Button } from "./button.js";
-import clsx from "clsx";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-//#region _components/start-screen.tsx
-/**
-* A centered start screen with icon, title, subtitle, and a start button.
-* Renders `children` (the main app) once the session has started.
-*
-* @example
-* ```tsx
-* function MyAgent() {
-*   return (
-*     <StartScreen icon="🍕" title="Pizza Palace" subtitle="Voice-powered ordering">
-*       <ChatView />
-*     </StartScreen>
-*   );
-* }
-* ```
-*
-* @public
-*/
-function StartScreen({ children, icon, title, subtitle, buttonText = "Start", className }) {
-	const { started, start } = useSession();
-	if (started.value) return /* @__PURE__ */ jsx(Fragment, { children });
-	return /* @__PURE__ */ jsx("div", {
-		class: clsx("flex items-center justify-center h-screen bg-aai-bg font-aai", className),
-		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",
-			children: [
-				icon,
-				title && /* @__PURE__ */ jsx("h1", {
-					class: "font-semibold text-aai-primary m-0",
-					children: title
-				}),
-				subtitle && /* @__PURE__ */ jsx("p", {
-					class: "text-sm text-aai-text-muted m-0",
-					children: subtitle
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					size: "lg",
-					className: "mt-2 w-full",
-					onClick: start,
-					children: buttonText
-				})
-			]
-		})
-	});
-}
-//#endregion
-export { StartScreen };

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-call-block.d.ts

@@ -1,27 +0,0 @@
-import type * as preact from "preact";
-import type { ToolCallInfo } from "../types.ts";
-/**
- * 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
- */
-export declare function ToolCallBlock({ toolCall, className, }: {
-    toolCall: ToolCallInfo;
-    className?: string;
-}): preact.JSX.Element;

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;