@alexkroman1/aai-ui 0.12.3 → 0.14.0

package/dist/message-list-DHZcLhRA.js

@@ -0,0 +1,682 @@
+import { useSessionSelector, useTheme } from "./context.js";
+import { a as inkTint, o as primaryTint } from "./_colors-CpZO-88A.js";
+import { n as useUserTranscript } from "./use-user-transcript-uyHhzy4d.js";
+import { n as ToolCallRow, t as ToolCallBlock } from "./tool-call-block-uXtMOUWN.js";
+import { memo, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { StickToBottom } from "use-stick-to-bottom";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+//#region src/components/auto-scroll.tsx
+/** @jsxImportSource react */
+/**
+* A scroll container that stays pinned to the bottom as its content grows,
+* releases when the reader scrolls up, and re-engages once they return to the
+* bottom.
+*
+* For clients that render their own chat chrome instead of using
+* {@link MessageList} — a terminal, a dispatch board, a themed transcript.
+* `MessageList` already behaves this way; this is the same mechanism with no
+* opinion about what goes inside it.
+*
+* @remarks
+* The pattern this replaces is a `useEffect` that calls
+* `ref.current?.scrollIntoView()` on every message change. That version has
+* three faults, and they compound: it fights the reader, since scrolling up to
+* re-read is undone by the next transcript delta; it misses growth that is not
+* a new message, because a streamed reply, an expanding tool block or a
+* markdown reflow changes height without changing the dependency array; and it
+* needs a synthetic dependency (`messages.length + transcript.length`) to fire
+* at all, which is where the dead `if (version < 0) return;` line comes from.
+* A `ResizeObserver` on the content — what this uses — has none of those.
+*
+* @example
+* ```tsx
+* import { AutoScroll, useSession } from "@alexkroman1/aai-ui";
+*
+* function Transcript() {
+*   const session = useSession();
+*   return (
+*     <AutoScroll className="flex-1 min-h-0" contentClassName="flex flex-col gap-2 p-4">
+*       {session.messages.map((m) => (
+*         <div key={m.id}>{m.content}</div>
+*       ))}
+*     </AutoScroll>
+*   );
+* }
+* ```
+*
+* @param props - Scroll container props.
+*
+* @public
+*/
+function AutoScroll({ children, className, contentClassName, scrollClassName = "overflow-y-auto [scrollbar-width:none]", style, initial = "instant", resize = "smooth" }) {
+	return /* @__PURE__ */ jsx(StickToBottom, {
+		role: "log",
+		className: clsx("flex-1 min-h-0", className),
+		style,
+		initial,
+		resize,
+		children: /* @__PURE__ */ jsx(StickToBottom.Content, {
+			scrollClassName,
+			className: contentClassName,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/use-conversation.ts
+/**
+* `useConversation` — the exchange, already assembled, with nothing rendered.
+*
+* `<MessageList>` owns four decisions that are not obvious and are not
+* derivable from the snapshot by eye: the message/tool-call INTERLEAVE, the
+* streaming agent utterance, the live user transcript with its `null`-vs-`""`
+* protocol distinction, and the thinking indicator's suppression rule. Its only
+* prop is `className`, so the moment a client wants its own bubble markup it
+* drops all four at once — and the three hand-rolled chromes in the template
+* tree each shipped a strictly worse conversation for exactly that reason. One
+* of them runs fifteen tools and its operator sees none of them, because the
+* tool calls live in a second array nothing in that page ever reads.
+*
+* This is the headless half. `<MessageList>` is now a thin consumer of it —
+* which is the only way to know the hook is complete, since a hook that the
+* package's own list cannot be built from is a hook a custom chrome will find a
+* hole in.
+*
+* ## It subscribes NARROWLY, and that is half the value
+*
+* The three custom chromes also call whole-page `useSession()`, which re-renders
+* on *every* snapshot change — so a dispatch board re-renders at STT-partial
+* rate. `<ChatView>` deliberately avoids that with per-field
+* {@link useSessionSelector} calls, and so does this: a component that reads the
+* conversation gets the conversation's own update rate, not the session's.
+*/
+/**
+* Interleave messages and tool calls, ordered by insertion time.
+*
+* Each tool call belongs immediately after its anchor message
+* (`afterMessageId`); tool calls whose anchor slid out of the retained window —
+* or that were inserted before any message existed — come first, since there is
+* nothing left for them to follow.
+*/
+function interleave(messages, toolCalls) {
+	const items = [];
+	let tci = 0;
+	const pushToolCallsThrough = (maxAfterId) => {
+		let tc = toolCalls[tci];
+		while (tc && tc.afterMessageId <= maxAfterId) {
+			items.push({
+				kind: "tool",
+				toolCall: tc
+			});
+			tci++;
+			tc = toolCalls[tci];
+		}
+	};
+	const firstMessage = messages[0];
+	if (firstMessage) pushToolCallsThrough(firstMessage.id - 1);
+	for (const message of messages) {
+		items.push({
+			kind: "message",
+			message
+		});
+		pushToolCallsThrough(message.id);
+	}
+	pushToolCallsThrough(Number.POSITIVE_INFINITY);
+	return items;
+}
+/**
+* Whether the thinking indicator should show — see
+* {@link UseConversationResult.thinking} for the rule and the argument.
+*/
+function isThinking(state, messages, toolCalls) {
+	if (state !== "thinking") return false;
+	const last = toolCalls.at(-1);
+	if (last?.status === "pending") return false;
+	const lastMessage = messages.at(-1);
+	return !lastMessage || lastMessage.role === "user" || Boolean(last);
+}
+/**
+* Subscribe to the conversation: the interleaved exchange, the streaming
+* utterance, the live transcript and the thinking rule — with no markup.
+*
+* Must be used inside the provider `mountClient()` installs.
+*
+* @example A custom bubble, keeping every rule `<MessageList>` knows
+* ```tsx
+* import { useConversation } from "@alexkroman1/aai-ui";
+*
+* function Transcript() {
+*   const { items, streaming, transcript, thinking } = useConversation();
+*   return (
+*     <div>
+*       {items.map((item) =>
+*         item.kind === "message" ? (
+*           <p key={item.message.id} data-role={item.message.role}>
+*             {item.message.content}
+*           </p>
+*         ) : (
+*           <code key={item.toolCall.callId}>{item.toolCall.name}</code>
+*         ),
+*       )}
+*       {streaming !== null && <p data-role="assistant">{streaming}</p>}
+*       {transcript.speaking && <p data-role="user">{transcript.text}</p>}
+*       {thinking && <p>…</p>}
+*     </div>
+*   );
+* }
+* ```
+*
+* @returns See {@link UseConversationResult}.
+*
+* @public
+*/
+function useConversation() {
+	const state = useSessionSelector((s) => s.state);
+	const messages = useSessionSelector((s) => s.messages);
+	const toolCalls = useSessionSelector((s) => s.toolCalls);
+	const streaming = useSessionSelector((s) => s.agentTranscript);
+	const transcript = useUserTranscript();
+	const items = useMemo(() => interleave(messages, toolCalls), [messages, toolCalls]);
+	const thinking = useMemo(() => isThinking(state, messages, toolCalls), [
+		state,
+		messages,
+		toolCalls
+	]);
+	return useMemo(() => ({
+		items,
+		streaming,
+		transcript,
+		thinking
+	}), [
+		items,
+		streaming,
+		transcript,
+		thinking
+	]);
+}
+//#endregion
+//#region src/components/conversation-view.tsx
+/**
+* The id of the synthetic message the streaming row is rendered as. Real ids
+* are assigned from zero upward at append time, so a negative one cannot
+* collide with — or be mistaken for — a message in `items`.
+*/
+const STREAMING_MESSAGE_ID = -1;
+/** The id a `spoken` log entry is rendered with — negative for the same reason. */
+const SPOKEN_MESSAGE_ID = -2;
+function defaultTool(toolCall) {
+	return /* @__PURE__ */ jsx(ToolCallRow, {
+		title: toolCall.name,
+		pending: toolCall.status === "pending",
+		variant: "compact",
+		className: "self-start"
+	});
+}
+function defaultNote(entry) {
+	return /* @__PURE__ */ jsx("p", {
+		className: "text-xs text-center opacity-50",
+		children: entry.text
+	});
+}
+function defaultTranscript(transcript) {
+	return /* @__PURE__ */ jsx("p", {
+		className: "italic opacity-70",
+		children: transcript.text
+	});
+}
+const DEFAULT_INDICATOR = /* @__PURE__ */ jsx("span", {
+	style: { animation: "aai-pulse 1.2s ease-in-out infinite" },
+	children: "· · ·"
+});
+/**
+* The conversation's skeleton over {@link useConversation}, with every row a
+* render slot: a pinned scroll region holding the empty state, the interleaved
+* messages and tool calls, the streaming reply and the announced thinking row,
+* plus the live transcript — inside the scroll or pinned beneath it.
+*
+* `useConversation()` already made the DATA one thing: the interleave, the
+* streaming utterance, the `null`-vs-`""` transcript distinction and the
+* thinking-suppression rule. What three custom chromes then each wrote around
+* it was the same fifty lines of STRUCTURE: an `AutoScroll` with a bounded
+* height, an empty-state guard on `items.length === 0 && streaming === null`,
+* the map with its keys, the streaming row, the thinking row with its
+* `role="status"` and `aria-label` (and the same comment about screen readers
+* hearing punctuation), the transcript guarded on `speaking`. The bubbles are
+* the part each template exists to show, so those are slots; the order and the
+* accessibility contract are this component's.
+*
+* {@link MessageList} is this with the stock bubbles filled in.
+*
+* Must be rendered inside the providers `mountClient()` installs.
+*
+* @example A board's radio log: its own bubbles, the stock tool row, the transcript pinned below
+* ```tsx
+* import { ConversationView } from "@alexkroman1/aai-ui";
+*
+* function RadioLog() {
+*   return (
+*     <ConversationView
+*       contentClassName="p-4 flex flex-col gap-2"
+*       empty={<p className="text-center opacity-60">Standing by.</p>}
+*       renderMessage={({ role, content }) => (
+*         <div className={role === "assistant" ? "self-start" : "self-end"}>{content}</div>
+*       )}
+*       renderTranscript={({ text }) => <div className="px-4 py-2 italic">{text}</div>}
+*       transcriptPosition="below"
+*       thinkingLabel="Dispatch is thinking"
+*     />
+*   );
+* }
+* ```
+*
+* @param props - See {@link ConversationViewProps}.
+*
+* @public
+*/
+function ConversationView({ renderMessage, renderTool = defaultTool, renderStreaming, renderTranscript = defaultTranscript, transcriptPosition = "inline", log, renderNote = defaultNote, renderSessionHeader, empty, thinkingLabel = "Thinking", thinkingIndicator = DEFAULT_INDICATOR, thinkingClassName, className, contentClassName, scrollClassName, style }) {
+	const { items, streaming, transcript, thinking } = useConversation();
+	const liveItems = log ? void 0 : items;
+	const rows = useMemo(() => {
+		const renderItem = (item, key) => item.kind === "message" ? renderKeyed(`${key}m${item.message.id}`, renderMessage(item.message)) : renderKeyed(`${key}t${item.toolCall.callId}`, renderTool(item.toolCall));
+		if (!log) return (liveItems ?? []).map((item) => renderItem(item, ""));
+		return logRows(log, renderItem, renderMessage, renderNote, renderSessionHeader);
+	}, [
+		liveItems,
+		log,
+		renderMessage,
+		renderTool,
+		renderNote,
+		renderSessionHeader
+	]);
+	const streamingMessage = useMemo(() => streaming === null ? null : {
+		id: STREAMING_MESSAGE_ID,
+		role: "assistant",
+		content: streaming
+	}, [streaming]);
+	const transcriptRow = transcript.speaking ? renderTranscript(transcript) : null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(AutoScroll, {
+		className,
+		contentClassName,
+		scrollClassName,
+		style,
+		children: [
+			(log ?? items).length === 0 && streaming === null && empty,
+			rows,
+			streamingMessage !== null && (renderStreaming ? renderStreaming(streamingMessage.content) : renderMessage(streamingMessage)),
+			transcriptPosition === "inline" && transcriptRow,
+			thinking && /* @__PURE__ */ jsx("div", {
+				role: "status",
+				"aria-label": thinkingLabel,
+				className: thinkingClassName,
+				children: thinkingIndicator
+			})
+		]
+	}), transcriptPosition === "below" && transcriptRow] });
+}
+/**
+* A log's rows. Keys are the entry's own identity (kind, time, session and run)
+* plus a repeat count, not its index: the log is trimmed from the FRONT, and an
+* index key would remount every row on each trim. Items within a session entry
+* are keyed by position — a chain is append-only.
+*/
+function logRows(log, renderItem, renderMessage, renderNote, renderSessionHeader) {
+	const seen = /* @__PURE__ */ new Map();
+	return log.flatMap((entry) => {
+		const id = entry.kind === "session" ? `s${entry.at}:${entry.sessionId}:${entry.run}` : `${entry.kind}${entry.at}`;
+		const n = seen.get(id) ?? 0;
+		seen.set(id, n + 1);
+		const key = `${id}#${n}`;
+		if (entry.kind === "note") return [renderKeyed(key, renderNote(entry))];
+		if (entry.kind === "spoken") return [renderKeyed(key, renderMessage({
+			id: SPOKEN_MESSAGE_ID,
+			role: "assistant",
+			content: entry.text
+		}))];
+		return [renderKeyed(`${key}h`, renderSessionHeader?.(entry) ?? null), ...entry.items.map((item, i) => renderItem(item, `${key}/${i}`))];
+	});
+}
+/** Give a slot's output a key without asking the renderer to remember one. */
+function renderKeyed(key, node) {
+	return /* @__PURE__ */ jsx(RowSlot, { children: node }, key);
+}
+/**
+* A keyed wrapper that renders nothing of its own — a `Fragment` with a key
+* would do, but spelling it as a component keeps `renderKeyed` a plain call.
+*/
+function RowSlot({ children }) {
+	return children;
+}
+//#endregion
+//#region src/components/markdown.tsx
+/** @jsxImportSource react */
+const BARE_ORDERED_MARKER = /^(\s*)(\d{1,9})([.)])\s*$/;
+const BARE_BULLET_MARKER = /^(\s*)([-*+])\s*$/;
+const CODE_FENCE = /^\s*(```|~~~)/;
+/**
+* Escape list markers that have no content, so a terse reply renders as
+* text instead of vanishing. CommonMark parses a line that is only `42.`
+* as an *empty* ordered list starting at 42 — a voice agent answering
+* "what's 6 times 7?" with "42." would otherwise display nothing (and a
+* streaming transcript briefly ending on `1.` would blank the row).
+* Lines inside fenced code blocks are left alone.
+*/
+function escapeBareListMarkers(text) {
+	let inFence = false;
+	return text.split("\n").map((line) => {
+		if (CODE_FENCE.test(line)) {
+			inFence = !inFence;
+			return line;
+		}
+		if (inFence) return line;
+		const ordered = BARE_ORDERED_MARKER.exec(line);
+		if (ordered) return `${ordered[1]}${ordered[2]}\\${ordered[3]}`;
+		const bullet = BARE_BULLET_MARKER.exec(line);
+		if (bullet) return `${bullet[1]}\\${bullet[2]}`;
+		return line;
+	}).join("\n");
+}
+const SCALE_CLASSES = {
+	default: {
+		h1: "mt-3 mb-1.5 text-[17px] font-semibold",
+		h2: "mt-3 mb-1.5 text-[16px] font-semibold",
+		h3: "mt-3 mb-1.5 text-[15px] font-semibold",
+		code: "text-[12.5px]",
+		table: "my-1.5 w-full border-collapse text-sm"
+	},
+	compact: {
+		h1: "mt-3 mb-1.5 text-[15px] font-medium",
+		h2: "mt-3 mb-1.5 text-[14px] font-medium",
+		h3: "mt-3 mb-1.5 text-[13px] font-medium",
+		code: "text-[11px]",
+		table: "my-1.5 w-full border-collapse text-[12px]"
+	}
+};
+/**
+* Agent prose, rendered as Markdown.
+*
+* Pipeline and S2S models write emphasis, lists, `code`, and links; before
+* this they arrived as literal asterisks and backticks. Styling is
+* per-element (theme colors via inline styles, spacing via Tailwind) so it
+* stays on the default client's type scale and follows custom themes.
+* The optional `variant` selects the type scale (see
+* {@link MarkdownVariant}).
+* GFM is on for tables and strikethrough. react-markdown does not render
+* raw HTML unless rehype-raw is added — keep it that way, this text comes
+* from a model.
+*
+* Memoized alongside `MessageBubble`: message content is referentially
+* stable across snapshots, so only the streaming row re-parses.
+*
+* @example
+* ```tsx
+* import { Markdown, useSessionSelector } from "@alexkroman1/aai-ui";
+*
+* // The agent's reply as it streams, rendered rather than shown as literal
+* // asterisks and backticks.
+* function LiveReply() {
+*   const text = useSessionSelector((snapshot) => snapshot.agentTranscript);
+*   return text === null ? null : <Markdown text={text} variant="compact" />;
+* }
+* ```
+*
+* @public
+*/
+const Markdown = memo(function Markdown({ text, variant = "default" }) {
+	const theme = useTheme();
+	const scale = SCALE_CLASSES[variant];
+	const components = useMemo(() => ({
+		p: (props) => /* @__PURE__ */ jsx("p", {
+			className: "my-1.5 first:mt-0 last:mb-0",
+			...props
+		}),
+		ul: (props) => /* @__PURE__ */ jsx("ul", {
+			className: "my-1.5 list-disc pl-5",
+			...props
+		}),
+		ol: (props) => /* @__PURE__ */ jsx("ol", {
+			className: "my-1.5 list-decimal pl-5",
+			...props
+		}),
+		li: (props) => /* @__PURE__ */ jsx("li", {
+			className: "my-0.5",
+			...props
+		}),
+		h1: (props) => /* @__PURE__ */ jsx("h1", {
+			className: scale.h1,
+			...props
+		}),
+		h2: (props) => /* @__PURE__ */ jsx("h2", {
+			className: scale.h2,
+			...props
+		}),
+		h3: (props) => /* @__PURE__ */ jsx("h3", {
+			className: scale.h3,
+			...props
+		}),
+		a: ({ style, ...props }) => /* @__PURE__ */ jsx("a", {
+			className: "underline underline-offset-2",
+			style: {
+				color: theme.primary,
+				...style
+			},
+			target: "_blank",
+			rel: "noreferrer noopener",
+			...props
+		}),
+		code: ({ className, style, children, ...rest }) => {
+			return /language-/.test(className ?? "") ? /* @__PURE__ */ jsx("code", {
+				className: clsx("font-aai-mono", scale.code),
+				...rest,
+				children
+			}) : /* @__PURE__ */ jsx("code", {
+				className: clsx("rounded-sm border px-1 py-0.5 font-aai-mono", scale.code),
+				style: {
+					borderColor: theme.border,
+					background: inkTint(theme.text, theme.surface, 3),
+					...style
+				},
+				...rest,
+				children
+			});
+		},
+		pre: ({ style, ...props }) => /* @__PURE__ */ jsx("pre", {
+			className: "my-1.5 overflow-x-auto rounded-md border p-2.5 whitespace-pre-wrap wrap-break-word",
+			style: {
+				borderColor: theme.border,
+				background: inkTint(theme.text, theme.surface, 3),
+				...style
+			},
+			...props
+		}),
+		blockquote: ({ style, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+			className: "my-1.5 border-l-2 pl-3",
+			style: {
+				borderColor: theme.border,
+				color: inkTint(theme.text, theme.surface, 75),
+				...style
+			},
+			...props
+		}),
+		table: (props) => /* @__PURE__ */ jsx("table", {
+			className: scale.table,
+			...props
+		}),
+		th: ({ style, ...props }) => /* @__PURE__ */ jsx("th", {
+			className: "border px-2 py-1 text-left font-medium",
+			style: {
+				borderColor: theme.border,
+				...style
+			},
+			...props
+		}),
+		td: ({ style, ...props }) => /* @__PURE__ */ jsx("td", {
+			className: "border px-2 py-1",
+			style: {
+				borderColor: theme.border,
+				...style
+			},
+			...props
+		}),
+		hr: ({ style, ...props }) => /* @__PURE__ */ jsx("hr", {
+			className: "my-2.5 border-t",
+			style: {
+				borderColor: theme.border,
+				...style
+			},
+			...props
+		})
+	}), [theme, scale]);
+	return /* @__PURE__ */ jsx(ReactMarkdown, {
+		remarkPlugins: [remarkGfm],
+		components,
+		children: escapeBareListMarkers(text)
+	});
+});
+//#endregion
+//#region src/components/message-list.tsx
+/** @jsxImportSource react */
+const DOT_STYLES = [
+	0,
+	.16,
+	.32
+].map((delay) => ({
+	animation: "aai-bounce 1.4s infinite ease-in-out both",
+	animationDelay: `${delay}s`
+}));
+/** The three bouncing dots alone, with no row around them. */
+function Dots() {
+	const theme = useTheme();
+	const muted = inkTint(theme.text, theme.surface, 75);
+	return DOT_STYLES.map((style) => /* @__PURE__ */ jsx("div", {
+		className: "w-1.5 h-1.5 rounded-full",
+		style: {
+			...style,
+			background: muted
+		}
+	}, style.animationDelay));
+}
+/** The row the thinking indicator sits in — `ConversationView` renders this exact element around `Dots`. */
+const THINKING_ROW = "flex items-center gap-2 text-sm font-medium min-h-5";
+/**
+* Animated three-dot "thinking" indicator.
+*
+* `role="status"` with a label, for the same reason `ConsoleShell` announces
+* its error banner: three animated dots are the only signal that the agent is
+* working on a reply, and to a screen reader they are three empty `<div>`s.
+* It is also the indicator's semantic handle — a spec asserting its presence by
+* counting `.rounded-full` elements breaks when the three dots become a spinner
+* (correct behaviour, red test) and again when any sibling row gains a round
+* badge (wrong behaviour, green test).
+*
+* The trailing thinking row is `ConversationView`'s own `role="status"`
+* element, so this is only rendered INSIDE the live transcript bubble, where
+* speech has been detected and no words have come back yet.
+*
+* @internal
+*/
+function ThinkingDots() {
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-label": "Thinking",
+		className: THINKING_ROW,
+		children: /* @__PURE__ */ jsx(Dots, {})
+	});
+}
+/**
+* Right-aligned user bubble — a primary-tinted card (the design system's
+* indigo-50 fill with an indigo-100 edge, derived from the theme primary so
+* custom themes stay coherent). Shared by finalized messages and the live
+* transcript.
+*/
+function UserBubble({ theme, color, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col w-full items-end",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "max-w-[min(78%,64ch)] border px-3.5 py-2.5 rounded-md whitespace-pre-wrap wrap-break-word text-[15px] font-normal leading-[22px]",
+			style: {
+				background: primaryTint(theme.primary, theme.surface, 7),
+				borderColor: primaryTint(theme.primary, theme.surface, 16),
+				color
+			},
+			children
+		})
+	});
+}
+/**
+* Renders a single chat message: labeled agent prose, or a user bubble.
+*
+* Memoized so appending one message re-renders one row, not the whole capped
+* list: message objects and the theme are referentially stable across
+* snapshots, and rows are keyed on stable ids (`ChatMessage.id`) that survive
+* the sliding 200-message window.
+*/
+const MessageBubble = memo(function MessageBubble({ message, theme }) {
+	if (message.role === "user") return /* @__PURE__ */ jsx(UserBubble, {
+		theme,
+		color: theme.text,
+		children: message.content
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1 max-w-[82%]",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[10px] font-medium tracking-[1.2px] uppercase leading-none",
+			style: { color: inkTint(theme.text, theme.surface, 65) },
+			children: "Agent"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "wrap-break-word text-[15px] font-normal leading-[23px]",
+			style: { color: theme.text },
+			children: /* @__PURE__ */ jsx(Markdown, { text: message.content })
+		})]
+	});
+});
+/**
+* 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.
+*
+* Must be rendered inside a `SessionProvider`.
+*
+* @example
+* ```tsx
+* import { MessageList } from "@alexkroman1/aai-ui";
+*
+* function Conversation() {
+*   return <MessageList className="flex-1" />;
+* }
+* ```
+*
+* @param props - Container props.
+*
+* @public
+*/
+const MessageList = memo(function MessageList({ className, log }) {
+	const theme = useTheme();
+	const renderMessage = useCallback((message) => /* @__PURE__ */ jsx(MessageBubble, {
+		message,
+		theme
+	}), [theme]);
+	const renderTool = useCallback((toolCall) => /* @__PURE__ */ jsx(ToolCallBlock, { toolCall }), []);
+	const renderTranscript = useCallback((transcript) => /* @__PURE__ */ jsx(UserBubble, {
+		theme,
+		color: inkTint(theme.text, theme.surface, 65),
+		children: transcript.partial ? transcript.partial : /* @__PURE__ */ jsx(ThinkingDots, {})
+	}), [theme]);
+	return /* @__PURE__ */ jsx(ConversationView, {
+		className,
+		log,
+		style: { background: theme.surface },
+		contentClassName: "flex flex-col gap-4 p-7",
+		renderMessage,
+		renderTool,
+		renderTranscript,
+		thinkingClassName: THINKING_ROW,
+		thinkingIndicator: /* @__PURE__ */ jsx(Dots, {})
+	});
+});
+//#endregion
+export { useConversation as a, interleave as i, Markdown as n, AutoScroll as o, ConversationView as r, MessageList as t };