@alexkroman1/aai-ui 3.2.0 → 5.0.0

package/dist/message-list-q2lTiFhF.js

@@ -0,0 +1,381 @@
+import { useSessionSelector, useTheme } from "./context.js";
+import { a as primaryTint, i as TEXT_MUTED, n as SURFACE_TINT, r as TEXT_FAINT } from "./_colors-DYX7XRTr.js";
+import { t as ToolCallBlock } from "./tool-call-block-DIxpG8GM.js";
+import clsx from "clsx";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+//#region 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");
+}
+/**
+* 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.
+* 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.
+*
+* @public
+*/
+const Markdown = memo(function Markdown({ text }) {
+	const theme = useTheme();
+	return /* @__PURE__ */ jsx(ReactMarkdown, {
+		remarkPlugins: [remarkGfm],
+		components: {
+			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: "mt-3 mb-1.5 text-[17px] font-semibold",
+				...props
+			}),
+			h2: (props) => /* @__PURE__ */ jsx("h2", {
+				className: "mt-3 mb-1.5 text-[16px] font-semibold",
+				...props
+			}),
+			h3: (props) => /* @__PURE__ */ jsx("h3", {
+				className: "mt-3 mb-1.5 text-[15px] font-semibold",
+				...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: "font-aai-mono text-[12.5px]",
+					...rest,
+					children
+				}) : /* @__PURE__ */ jsx("code", {
+					className: "rounded-sm border px-1 py-0.5 font-aai-mono text-[12.5px]",
+					style: {
+						borderColor: theme.border,
+						background: SURFACE_TINT,
+						...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: SURFACE_TINT,
+					...style
+				},
+				...props
+			}),
+			blockquote: ({ style, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+				className: "my-1.5 border-l-2 pl-3",
+				style: {
+					borderColor: theme.border,
+					color: TEXT_MUTED,
+					...style
+				},
+				...props
+			}),
+			table: (props) => /* @__PURE__ */ jsx("table", {
+				className: "my-1.5 w-full border-collapse text-sm",
+				...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
+			})
+		},
+		children: escapeBareListMarkers(text)
+	});
+});
+//#endregion
+//#region 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`
+}));
+/** Animated three-dot "thinking" indicator. @internal */
+function ThinkingDots() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-2 text-sm font-medium min-h-5",
+		style: { color: TEXT_MUTED },
+		children: DOT_STYLES.map((style, i) => /* @__PURE__ */ jsx("div", {
+			className: "w-1.5 h-1.5 rounded-full",
+			style: {
+				...style,
+				background: TEXT_MUTED
+			}
+		}, i))
+	});
+}
+/**
+* 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: TEXT_FAINT },
+			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 })
+		})]
+	});
+});
+/**
+* How close to the bottom (px) the container must be for auto-scroll to stay
+* engaged. Generous enough that an in-flight smooth scroll doesn't unpin.
+*/
+const NEAR_BOTTOM_PX = 96;
+/**
+* Smooth-scroll to the anchor whenever the content version advances — but
+* only while the container is pinned near the bottom. A user who scrolled up
+* to read history isn't yanked back down by streaming updates; scrolling back
+* to the bottom re-engages the auto-scroll.
+*
+* The scroll runs inside `requestAnimationFrame` and is deduped per frame:
+* several snapshot updates in one frame (transcript + message + tool call)
+* trigger a single scroll after layout instead of one forced layout each.
+*
+* While a partial transcript is streaming, updates arrive faster than a
+* smooth scroll finishes — each restart leaves the animation perpetually
+* mid-flight — so `streaming` switches to an instant jump; committed-content
+* updates keep the smooth animation.
+*/
+function useAutoScroll(contentVersion, streaming) {
+	const anchorRef = useRef(null);
+	const pinnedRef = useRef(true);
+	const scheduledRef = useRef(false);
+	const streamingRef = useRef(streaming);
+	streamingRef.current = streaming;
+	const onScroll = useCallback((event) => {
+		const el = event.currentTarget;
+		pinnedRef.current = el.scrollTop + el.clientHeight >= el.scrollHeight - NEAR_BOTTOM_PX;
+	}, []);
+	useEffect(() => {
+		if (contentVersion === 0 || scheduledRef.current || !pinnedRef.current) return;
+		scheduledRef.current = true;
+		requestAnimationFrame(() => {
+			scheduledRef.current = false;
+			if (!pinnedRef.current) return;
+			anchorRef.current?.scrollIntoView({
+				behavior: streamingRef.current ? "instant" : "smooth",
+				block: "end"
+			});
+		});
+	}, [contentVersion]);
+	return {
+		anchorRef,
+		onScroll
+	};
+}
+/**
+* Interleave messages and tool calls into render items, ordered by insertion
+* time. Each tool call renders immediately after its anchor message
+* (`afterMessageId`); tool calls whose anchor slid out of the retained window
+* (or that were inserted before any message existed) render first.
+*/
+function interleave(messages, toolCalls, renderMessage, renderToolCall) {
+	const items = [];
+	let tci = 0;
+	const pushToolCallsThrough = (maxAfterId) => {
+		let tc = toolCalls[tci];
+		while (tc && tc.afterMessageId <= maxAfterId) {
+			items.push(renderToolCall(tc));
+			tci++;
+			tc = toolCalls[tci];
+		}
+	};
+	const firstMessage = messages[0];
+	if (firstMessage) pushToolCallsThrough(firstMessage.id - 1);
+	for (const msg of messages) {
+		items.push(renderMessage(msg));
+		pushToolCallsThrough(msg.id);
+	}
+	pushToolCallsThrough(Number.POSITIVE_INFINITY);
+	return items;
+}
+/**
+* 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 {@link SessionProvider}.
+*
+* @example
+* ```tsx
+* <MessageList className="flex-1" />
+* ```
+*
+* @param className - Additional CSS class names applied to the scroll container.
+*
+* @public
+*/
+const MessageList = memo(function MessageList({ className }) {
+	const state = useSessionSelector((s) => s.state);
+	const messages = useSessionSelector((s) => s.messages);
+	const toolCalls = useSessionSelector((s) => s.toolCalls);
+	const userTranscript = useSessionSelector((s) => s.userTranscript);
+	const agentTranscript = useSessionSelector((s) => s.agentTranscript);
+	const contentVersion = useSessionSelector((s) => s.contentVersion);
+	const theme = useTheme();
+	const showThinking = useMemo(() => {
+		if (state !== "thinking") return false;
+		const last = toolCalls.at(-1);
+		if (last?.status === "pending") return false;
+		const lastMsg = messages.at(-1);
+		return !lastMsg || lastMsg.role === "user" || Boolean(last);
+	}, [
+		state,
+		toolCalls,
+		messages
+	]);
+	const { anchorRef, onScroll } = useAutoScroll(contentVersion, userTranscript !== null);
+	const items = useMemo(() => interleave(messages, toolCalls, (msg) => /* @__PURE__ */ jsx(MessageBubble, {
+		message: msg,
+		theme
+	}, msg.id), (tc) => /* @__PURE__ */ jsx(ToolCallBlock, { toolCall: tc }, tc.callId)), [
+		messages,
+		toolCalls,
+		theme
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		role: "log",
+		className: clsx("flex-1 overflow-y-auto [scrollbar-width:none]", className),
+		style: { background: theme.surface },
+		onScroll,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 p-7",
+			children: [
+				items,
+				agentTranscript && /* @__PURE__ */ jsx(MessageBubble, {
+					message: {
+						role: "assistant",
+						content: agentTranscript
+					},
+					theme
+				}),
+				userTranscript !== null && /* @__PURE__ */ jsx(UserBubble, {
+					theme,
+					color: "#6F6A60",
+					children: userTranscript ? userTranscript : /* @__PURE__ */ jsx(ThinkingDots, {})
+				}),
+				showThinking && /* @__PURE__ */ jsx(ThinkingDots, {}),
+				/* @__PURE__ */ jsx("div", { ref: anchorRef })
+			]
+		})
+	});
+});
+//#endregion
+export { Markdown as n, MessageList as t };