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

@@ -1,50 +0,0 @@
-import type * as preact from "preact";
-/**
- * Visual style of a {@link Button}.
- *
- * - `"default"` — Primary filled button (accent background).
- * - `"secondary"` — Muted surface background with border.
- * - `"ghost"` — Transparent background with border.
- *
- * @public
- */
-export type ButtonVariant = "default" | "secondary" | "ghost";
-/**
- * Size preset for a {@link Button}.
- *
- * - `"default"` — Compact (height 2rem / 32 px).
- * - `"lg"` — Large with generous padding, suitable for primary CTAs.
- *
- * @public
- */
-export type ButtonSize = "default" | "lg";
-/**
- * A styled button with variant and size presets.
- *
- * Accepts all standard `<button>` HTML attributes in addition to the props
- * listed below.
- *
- * @example
- * ```tsx
- * <Button variant="secondary" onClick={handleClick}>
- *   Stop
- * </Button>
- *
- * <Button size="lg" className="w-full">
- *   Start Conversation
- * </Button>
- * ```
- *
- * @param variant - Visual style (`"default"` | `"secondary"` | `"ghost"`). Defaults to `"default"`.
- * @param size - Size preset (`"default"` | `"lg"`). Defaults to `"default"`.
- * @param className - Additional CSS class names.
- * @param children - Button label / content.
- *
- * @public
- */
-export declare function Button({ variant, size, className, children, ...rest }: {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    className?: string;
-    children?: preact.ComponentChildren;
-} & Omit<preact.JSX.HTMLAttributes<HTMLButtonElement>, "className">): preact.JSX.Element;

package/dist/_components/button.js

@@ -1,46 +0,0 @@
-import clsx from "clsx";
-import { jsx } from "preact/jsx-runtime";
-//#region _components/button.tsx
-const LG_STYLE = {
-	display: "grid",
-	placeItems: "center",
-	appearance: "none",
-	margin: 0,
-	padding: "12px 32px",
-	lineHeight: 1
-};
-/**
-* A styled button with variant and size presets.
-*
-* Accepts all standard `<button>` HTML attributes in addition to the props
-* listed below.
-*
-* @example
-* ```tsx
-* <Button variant="secondary" onClick={handleClick}>
-*   Stop
-* </Button>
-*
-* <Button size="lg" className="w-full">
-*   Start Conversation
-* </Button>
-* ```
-*
-* @param variant - Visual style (`"default"` | `"secondary"` | `"ghost"`). Defaults to `"default"`.
-* @param size - Size preset (`"default"` | `"lg"`). Defaults to `"default"`.
-* @param className - Additional CSS class names.
-* @param children - Button label / content.
-*
-* @public
-*/
-function Button({ variant = "default", size = "default", className, children, ...rest }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		style: size === "lg" ? LG_STYLE : void 0,
-		class: clsx(size !== "lg" && "flex items-center justify-center appearance-none m-0 h-8 px-3 py-1.5 w-fit leading-none", "rounded-aai text-sm font-medium cursor-pointer border outline-none", variant === "secondary" && "bg-aai-surface-hover text-aai-text-secondary border-aai-border", variant === "ghost" && "bg-transparent text-aai-text-secondary border-aai-border", variant === "default" && "bg-aai-primary text-white border-transparent", className),
-		...rest,
-		children
-	});
-}
-//#endregion
-export { Button };

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

@@ -1,18 +0,0 @@
-/**
- * Session control buttons: **Stop / Resume** and **New Conversation**.
- *
- * Reads session state from {@link useSession}. Must be rendered inside a
- * {@link SessionProvider}.
- *
- * @example
- * ```tsx
- * <Controls className="justify-end" />
- * ```
- *
- * @param className - Additional CSS class names applied to the container.
- *
- * @public
- */
-export declare function Controls({ className }: {
-    className?: string;
-}): import("preact").JSX.Element;

package/dist/_components/controls.js

@@ -1,37 +0,0 @@
-import { useSession } from "../signals.js";
-import { Button } from "./button.js";
-import clsx from "clsx";
-import { jsx, jsxs } from "preact/jsx-runtime";
-//#region _components/controls.tsx
-/**
-* Session control buttons: **Stop / Resume** and **New Conversation**.
-*
-* Reads session state from {@link useSession}. Must be rendered inside a
-* {@link SessionProvider}.
-*
-* @example
-* ```tsx
-* <Controls className="justify-end" />
-* ```
-*
-* @param className - Additional CSS class names applied to the container.
-*
-* @public
-*/
-function Controls({ className }) {
-	const { running, toggle, reset } = useSession();
-	return /* @__PURE__ */ jsxs("div", {
-		class: clsx("flex gap-2 px-4 py-3 border-t border-aai-border shrink-0", className),
-		children: [/* @__PURE__ */ jsx(Button, {
-			variant: "secondary",
-			onClick: toggle,
-			children: running.value ? "Stop" : "Resume"
-		}), /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			onClick: reset,
-			children: "New Conversation"
-		})]
-	});
-}
-//#endregion
-export { Controls };

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

@@ -1,21 +0,0 @@
-/**
- * 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
- */
-export declare function MessageList({ className }: {
-    className?: string;
-}): import("preact").JSX.Element;