cortena-ui 1.5.0 → 1.7.0

package/dist/components/agent-chat.js

@@ -9,10 +9,11 @@ import { Textarea } from "./textarea.js";
 import { Markdown } from "./markdown.js";
 import { A2UIErrorCard } from "../a2ui/views.js";
 import { A2UIRenderer } from "../a2ui/renderer.js";
+import { isGenericLabel, truncate } from "../agent-chat/step-label.js";
 import { isHiddenMessage } from "../agent-chat/session.js";
 import { useAgentChat } from "../agent-chat/store.js";
 import { sessionTitle } from "../agent-chat/types.js";
-import { ChevronDown, ChevronRight, MessageSquarePlus, Send, ShieldCheck, ShieldX, Sparkles, Square } from "lucide-react";
+import { Check, ChevronDown, ChevronRight, MessageSquarePlus, Send, ShieldCheck, ShieldX, Sparkles, Square, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/components/agent-chat.tsx
@@ -36,6 +37,13 @@ import * as React from "react";
 * and it replaces the card, return nothing and the default card is drawn.
 */
 /**
+* `useLayoutEffect` in a browser, `useEffect` on a server render, where React
+* warns about the former. The scroll restore after a prepend has to run
+* before the paint: an effect after it shows one frame at the old `scrollTop`,
+* with the page that just landed pushing the reader's place off the screen.
+*/
+const useLayoutEffectSafe = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+/**
 * Should the list jump back to the bottom after its content grew?
 *
 * Judged against the height BEFORE the growth. Measuring afterwards asks "is
@@ -74,6 +82,98 @@ function AgentThinking({ text, defaultOpen, streaming }) {
 	});
 }
 /**
+* How long a step runs before it starts saying how long it has been running.
+*
+* Under this, a timer is noise: every call takes a second or two and a number
+* ticking beside each one is a fidget spinner. Over it, the user has begun to
+* wonder whether anything is happening at all, and the number is the answer.
+*/
+const ELAPSED_AFTER_MS = 8e3;
+/**
+* `Date.now()`, re-read once a second while `active`.
+*
+* The interval only exists while something is running, so a finished chat sits
+* idle rather than re-rendering the whole transcript once a second for ever.
+*/
+function useTickingNow(active) {
+	const [now, setNow] = React.useState(() => Date.now());
+	React.useEffect(() => {
+		if (!active) return;
+		setNow(Date.now());
+		const id = setInterval(() => setNow(Date.now()), 1e3);
+		return () => clearInterval(id);
+	}, [active]);
+	return now;
+}
+/**
+* What the agent is doing, one plain sentence per tool call (SKILLS-9).
+*
+* This is the surface a person watches while they wait, and it is deliberately
+* not the tool strip: the strip is the record — names, arguments, output, the
+* MCP App seam — and reading it requires knowing what `broker_invoke` is. The
+* strip stays at the foot for anyone who wants the detail.
+*
+* NOT a live region of its own. The strip is drawn inside the transcript, and
+* the transcript is already `role="log" aria-live="polite"` — two nested live
+* regions is one announcement per change from the inner one and another from
+* the outer, which is how a screen reader ends up saying every step twice.
+* `aria-label` stays: it names the group for anyone who navigates to it.
+*/
+function AgentSteps({ steps }) {
+	const now = useTickingNow(steps.some((step) => step.status === "running"));
+	if (steps.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "agent-chat-steps",
+		"aria-label": "Progress",
+		className: "mt-1 flex flex-col gap-0.5",
+		children: steps.map((step) => {
+			const elapsed = step.status === "running" ? now - step.startedAt : 0;
+			const seconds = elapsed >= ELAPSED_AFTER_MS ? Math.floor(elapsed / 1e3) : 0;
+			const held = step.status === "running" && isGenericLabel(step.toolName, step.label);
+			return /* @__PURE__ */ jsxs("p", {
+				"data-slot": "agent-chat-step",
+				"data-status": step.status,
+				"data-tool": truncate(step.toolName, 80),
+				...held ? { "aria-hidden": true } : {},
+				className: cn("flex items-start gap-2 text-[length:var(--ds-text-caption-lg)]", step.status === "error" ? "text-[color:var(--ds-destructive)]" : "text-[color:var(--ds-muted-foreground)]"),
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "mt-0.5 inline-flex size-3.5 shrink-0 items-center justify-center",
+					children: step.status === "running" ? /* @__PURE__ */ jsx(Spinner, {
+						size: 12,
+						"aria-hidden": true
+					}) : step.status === "error" ? /* @__PURE__ */ jsx(X, { className: "size-3" }) : step.status === "stopped" ? /* @__PURE__ */ jsx(Square, { className: "size-2.5" }) : step.status === "paused" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-[color:var(--ds-muted-foreground)]" }) : /* @__PURE__ */ jsx(Check, { className: "size-3 text-[color:var(--ds-success)]" })
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "min-w-0",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"data-slot": "agent-chat-step-label",
+							children: step.label
+						}, step.label),
+						seconds > 0 ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							"data-slot": "agent-chat-step-elapsed",
+							children: ` · ${seconds}s`
+						}) : null,
+						step.status === "stopped" ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "agent-chat-step-note",
+							children: " — Stopped"
+						}) : null,
+						step.status === "paused" ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "agent-chat-step-note",
+							children: " — Waiting for your approval"
+						}) : null,
+						step.status === "error" && step.errorMessage ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "agent-chat-step-error",
+							children: ` — ${step.errorMessage}`
+						}) : null
+					]
+				})]
+			}, step.id);
+		})
+	});
+}
+/**
 * Every block of one message, in arrival order.
 *
 * A block carrying a transport `error` — an unclosed fence, a body that did not
@@ -162,7 +262,7 @@ function AgentMessageBubble({ message, agentName, streaming, onAction }) {
 * (`**bo`) looks worse than its raw form — so the streaming view is plain text
 * under `whitespace-pre-wrap` and `Markdown` takes over on `final`.
 */
-function AgentStreamingBubble({ agentName, text, thinkingText, a2ui }) {
+function AgentStreamingBubble({ agentName, text, thinkingText, a2ui, steps }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "agent-chat-streaming",
 		className: "flex w-full gap-3",
@@ -173,6 +273,7 @@ function AgentStreamingBubble({ agentName, text, thinkingText, a2ui }) {
 					className: cn("text-[length:var(--ds-text-caption)] font-semibold", "text-[color:var(--ds-foreground)]"),
 					children: agentName
 				}),
+				/* @__PURE__ */ jsx(AgentSteps, { steps: steps ?? [] }),
 				thinkingText ? /* @__PURE__ */ jsx(AgentThinking, {
 					text: thinkingText,
 					defaultOpen: true,
@@ -326,18 +427,68 @@ function AgentApprovalCard({ request, onResolve }) {
 		]
 	});
 }
-function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attachmentsSlot, renderToolCall, headerSlot, className, ...props }) {
+/**
+* Two ways in, one surface. The hook is called in a component of its own so
+* a host that hands over `chat` never calls it — and so a mount that switches
+* from one mode to the other remounts rather than changing its hook order.
+*/
+function AgentChat(props) {
+	if (props.chat) {
+		const { chat, client: _client, storageScope: _scope, ephemeral: _e, thinking: _t, ...rest } = props;
+		return /* @__PURE__ */ jsx(AgentChatSurface, {
+			...rest,
+			chat
+		});
+	}
+	return /* @__PURE__ */ jsx(AgentChatOwned, { ...props });
+}
+function AgentChatOwned({ client, storageScope, ephemeral, thinking, chat: _chat, ...rest }) {
 	const chat = useAgentChat({
 		client,
 		storageScope,
 		...ephemeral === void 0 ? {} : { ephemeral },
 		...thinking === void 0 ? {} : { thinking }
 	});
+	return /* @__PURE__ */ jsx(AgentChatSurface, {
+		...rest,
+		chat
+	});
+}
+/** The default at the top of the transcript: a button, when there is more. */
+function DefaultLoadOlder({ hasMore, loading, onLoad }) {
+	if (!hasMore) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center",
+		children: /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			"data-slot": "agent-chat-load-older",
+			disabled: loading,
+			onClick: onLoad,
+			children: loading ? "Loading…" : "Load older messages"
+		})
+	});
+}
+/** Distance from the bottom, in pixels, within which new content re-pins the view. */
+const NEAR_BOTTOM_PX = 100;
+function AgentChatSurface({ chat, agentName, attachmentsSlot, renderToolCall, headerSlot, hideHeader, components, classNames, autoLoadOlder = false, className, ...props }) {
 	const [drawerOpen, setDrawerOpen] = React.useState(false);
 	const [value, setValue] = React.useState("");
 	const scrollRef = React.useRef(null);
 	const contentRef = React.useRef(null);
+	const sentinelRef = React.useRef(null);
 	const prevHeightRef = React.useRef(0);
+	/** Whether the reader was at the bottom at the last scroll; the smooth re-pin reads it. */
+	const nearBottomRef = React.useRef(true);
+	/** The scroll height saved before a page of older history is prepended; 0 when none is in flight. */
+	const prependHeightRef = React.useRef(0);
+	/** Set by a prepend restore; the resize observer sits out the one notification the prepend produces. */
+	const holdRef = React.useRef(false);
+	const prevMessageCountRef = React.useRef(0);
+	const visible = chat.messages.filter((message) => !isHiddenMessage(message));
+	const Empty = components?.Empty;
+	const showEmpty = visible.length === 0 && !chat.streaming && !chat.error;
+	const showTranscript = !(showEmpty && Empty);
 	/**
 	* Re-pin to the bottom whenever the content grows or the viewport shrinks.
 	* A message keeps growing after it mounts — markdown settles, the tool strip
@@ -346,12 +497,21 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 	*
 	* Jumping rather than smooth-scrolling: this fires many times a second during
 	* streaming, and queued smooth animations fight each other and lose.
+	*
+	* Keyed on `showTranscript`: the scroller is unmounted while a host's Empty
+	* holds the region, and the observer has to attach to the one that mounts
+	* when the first message arrives.
 	*/
 	React.useEffect(() => {
 		const scrollEl = scrollRef.current;
 		const contentEl = contentRef.current;
 		if (!scrollEl || !contentEl || typeof ResizeObserver === "undefined") return;
 		const observer = new ResizeObserver(() => {
+			if (holdRef.current) {
+				holdRef.current = false;
+				prevHeightRef.current = scrollEl.scrollHeight;
+				return;
+			}
 			const { scrollTop, scrollHeight, clientHeight } = scrollEl;
 			const stick = shouldStickToBottom({
 				prevScrollHeight: prevHeightRef.current,
@@ -363,8 +523,84 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 		});
 		observer.observe(contentEl);
 		observer.observe(scrollEl);
+		const onScroll = () => {
+			nearBottomRef.current = scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < NEAR_BOTTOM_PX;
+		};
+		scrollEl.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			observer.disconnect();
+			scrollEl.removeEventListener("scroll", onScroll);
+		};
+	}, [showTranscript]);
+	/**
+	* Page older history as the reader reaches the top, not only on a click —
+	* when the host asks for it with `autoLoadOlder`. The sentinel is the first
+	* child of the transcript; when it scrolls into the viewport and there is
+	* more, the next page is asked for.
+	*/
+	const loadOlderChat = chat.loadOlder;
+	const loadOlder = React.useCallback(() => {
+		const height = scrollRef.current?.scrollHeight ?? 0;
+		if (loadOlderChat() === true && height > 0) prependHeightRef.current = height;
+	}, [loadOlderChat]);
+	React.useEffect(() => {
+		const sentinel = sentinelRef.current;
+		const scrollEl = scrollRef.current;
+		if (!autoLoadOlder || !sentinel || !scrollEl || typeof IntersectionObserver === "undefined") return;
+		const observer = new IntersectionObserver((entries) => {
+			if (!entries[0]?.isIntersecting) return;
+			if (scrollEl.scrollHeight <= scrollEl.clientHeight) return;
+			if (chat.hasMoreHistory && !chat.loadingHistory) loadOlder();
+		}, {
+			root: scrollEl,
+			threshold: .1
+		});
+		observer.observe(sentinel);
 		return () => observer.disconnect();
-	}, []);
+	}, [
+		autoLoadOlder,
+		chat.hasMoreHistory,
+		chat.loadingHistory,
+		loadOlder,
+		showTranscript
+	]);
+	/**
+	* After a prepend, put the reader back where they were; after an append,
+	* follow the newest message — smoothly, once per message rather than per
+	* resize, which is why this is separate from the observer above and why it
+	* is NOT keyed on the stream text: growth during a run is the observer's,
+	* and a smooth scroll queued per delta fought it and lost.
+	*
+	* A layout effect, so the restore lands before the paint; an effect after
+	* it drew one frame at the old `scrollTop` with the new page on top.
+	*/
+	useLayoutEffectSafe(() => {
+		const scrollEl = scrollRef.current;
+		if (!scrollEl) return;
+		const prevCount = prevMessageCountRef.current;
+		const count = chat.messages.length;
+		prevMessageCountRef.current = count;
+		const saved = prependHeightRef.current;
+		if (saved > 0 && !chat.loadingHistory) {
+			prependHeightRef.current = 0;
+			if (count > prevCount && prevCount > 0) {
+				const delta = scrollEl.scrollHeight - saved;
+				if (delta > 0) {
+					scrollEl.scrollTop += delta;
+					prevHeightRef.current = scrollEl.scrollHeight;
+					holdRef.current = true;
+					return;
+				}
+			}
+		}
+		if (count !== prevCount && nearBottomRef.current) {
+			if (typeof scrollEl.scrollTo === "function") scrollEl.scrollTo({
+				top: scrollEl.scrollHeight,
+				behavior: "smooth"
+			});
+			else scrollEl.scrollTop = scrollEl.scrollHeight;
+		}
+	}, [chat.messages, chat.loadingHistory]);
 	const submit = React.useCallback(() => {
 		const trimmed = value.trim();
 		if (!trimmed || chat.streaming) return;
@@ -385,15 +621,19 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 	}, [chat, submit]);
 	const toolEntries = chat.toolOrder.map((id) => chat.tools[id]).filter((entry) => entry !== void 0);
 	const showTools = toolEntries.length > 0 || chat.approvals.length > 0;
-	const visible = chat.messages.filter((message) => !isHiddenMessage(message));
+	const Message = components?.Message;
+	const Streaming = components?.Streaming;
+	const LoadOlder = components?.LoadOlder ?? DefaultLoadOlder;
+	const Tools = components?.Tools;
+	const Composer = components?.Composer;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "agent-chat",
 		className: cn("flex h-full min-h-0 w-full flex-col bg-[var(--ds-background)]", className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
+			hideHeader ? null : /* @__PURE__ */ jsxs("div", {
 				"data-slot": "agent-chat-header",
-				className: cn("flex shrink-0 items-center gap-2 border-b border-[var(--ds-border-subtle)] px-3 py-2"),
+				className: cn("flex shrink-0 items-center gap-2 border-b border-[var(--ds-border-subtle)] px-3 py-2", classNames?.header),
 				children: [
 					/* @__PURE__ */ jsx(Button, {
 						size: "sm",
@@ -423,7 +663,7 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 					})
 				]
 			}),
-			drawerOpen ? /* @__PURE__ */ jsx(AgentSessionDrawer, {
+			drawerOpen && !hideHeader ? /* @__PURE__ */ jsx(AgentSessionDrawer, {
 				sessions: chat.sessions,
 				current: chat.sessionKey,
 				loading: chat.loadingSessions,
@@ -432,30 +672,29 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 					setDrawerOpen(false);
 				}
 			}) : null,
-			/* @__PURE__ */ jsx("div", {
+			showTranscript ? /* @__PURE__ */ jsx("div", {
 				ref: scrollRef,
 				"data-slot": "agent-chat-scroll",
-				className: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto",
+				className: cn("min-h-0 flex-1 overflow-x-hidden overflow-y-auto [overflow-anchor:none]", classNames?.scroll),
 				children: /* @__PURE__ */ jsxs("div", {
 					ref: contentRef,
 					role: "log",
 					"aria-live": "polite",
 					"aria-label": `${agentName} chat`,
-					className: "flex min-w-0 flex-col gap-5 px-4 py-4",
+					className: cn("relative flex min-w-0 flex-col", classNames?.transcript ?? "gap-5 px-4 py-4"),
 					children: [
+						/* @__PURE__ */ jsx("div", {
+							ref: sentinelRef,
+							"data-slot": "agent-chat-sentinel",
+							className: classNames?.sentinel ?? "absolute inset-x-0 top-0 h-px"
+						}),
 						chat.error ? /* @__PURE__ */ jsx(ErrorBanner, { message: chat.error }) : null,
-						chat.hasMoreHistory ? /* @__PURE__ */ jsx("div", {
-							className: "flex justify-center",
-							children: /* @__PURE__ */ jsx(Button, {
-								size: "sm",
-								variant: "ghost",
-								"data-slot": "agent-chat-load-older",
-								disabled: chat.loadingHistory,
-								onClick: chat.loadOlder,
-								children: chat.loadingHistory ? "Loading…" : "Load older messages"
-							})
+						chat.hasMoreHistory || chat.loadingHistory ? /* @__PURE__ */ jsx(LoadOlder, {
+							hasMore: chat.hasMoreHistory,
+							loading: chat.loadingHistory,
+							onLoad: loadOlder
 						}) : null,
-						visible.length === 0 && !chat.streaming ? /* @__PURE__ */ jsxs("p", {
+						showEmpty ? /* @__PURE__ */ jsxs("p", {
 							"data-slot": "agent-chat-empty",
 							className: "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]",
 							children: [
@@ -464,24 +703,48 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 								" anything about this screen."
 							]
 						}) : null,
-						visible.map((message) => /* @__PURE__ */ jsx(AgentMessageBubble, {
+						visible.map((message, index) => Message ? /* @__PURE__ */ jsx(Message, {
+							message,
+							index,
+							messages: visible,
+							agentName,
+							sessionKey: chat.sessionKey,
+							streaming: chat.streaming,
+							onAction: chat.sendAction
+						}, message.id) : /* @__PURE__ */ jsx(AgentMessageBubble, {
 							message,
 							agentName,
 							streaming: chat.streaming,
 							onAction: chat.sendAction
 						}, message.id)),
-						chat.streaming ? /* @__PURE__ */ jsx(AgentStreamingBubble, {
+						chat.streaming ? Streaming ? /* @__PURE__ */ jsx(Streaming, {
 							agentName,
 							text: chat.streamText,
 							thinkingText: chat.streamThinkingText,
-							a2ui: chat.streamA2ui
-						}) : null
+							a2ui: chat.streamA2ui,
+							steps: chat.steps
+						}) : /* @__PURE__ */ jsx(AgentStreamingBubble, {
+							agentName,
+							text: chat.streamText,
+							thinkingText: chat.streamThinkingText,
+							a2ui: chat.streamA2ui,
+							steps: chat.steps
+						}) : chat.steps.length > 0 ? /* @__PURE__ */ jsx(AgentSteps, { steps: chat.steps }) : null
 					]
 				})
-			}),
-			showTools ? /* @__PURE__ */ jsxs("div", {
+			}) : Empty ? /* @__PURE__ */ jsx(Empty, {
+				agentName,
+				loadingHistory: chat.loadingHistory
+			}) : null,
+			Tools ? /* @__PURE__ */ jsx(Tools, {
+				entries: toolEntries,
+				approvals: chat.approvals,
+				streaming: chat.streaming,
+				renderToolCall,
+				onResolveApproval: chat.resolveApproval
+			}) : showTools ? /* @__PURE__ */ jsxs("div", {
 				"data-slot": "agent-chat-tools",
-				className: "flex shrink-0 flex-col gap-1.5 border-t border-[var(--ds-border-subtle)] px-3 py-2",
+				className: cn("flex shrink-0 flex-col gap-1.5 border-t border-[var(--ds-border-subtle)] px-3 py-2", classNames?.tools),
 				children: [
 					toolEntries.length > 0 ? /* @__PURE__ */ jsx(Badge, {
 						variant: "neutral",
@@ -506,9 +769,14 @@ function AgentChat({ client, agentName, storageScope, ephemeral, thinking, attac
 				className: "shrink-0 px-3",
 				children: attachmentsSlot
 			}) : null,
-			/* @__PURE__ */ jsxs("div", {
+			Composer ? /* @__PURE__ */ jsx(Composer, {
+				agentName,
+				streaming: chat.streaming,
+				send: chat.send,
+				abort: chat.abort
+			}) : /* @__PURE__ */ jsxs("div", {
 				"data-slot": "agent-chat-composer",
-				className: "flex shrink-0 items-end gap-2 border-t border-[var(--ds-border-subtle)] p-3",
+				className: cn("flex shrink-0 items-end gap-2 border-t border-[var(--ds-border-subtle)] p-3", classNames?.composer),
 				children: [/* @__PURE__ */ jsx(Textarea, {
 					"data-slot": "agent-chat-input",
 					"aria-label": `Message ${agentName}`,
@@ -573,6 +841,6 @@ function AgentSessionDrawer({ sessions, current, loading, onResume }) {
 	});
 }
 //#endregion
-export { AgentA2UIBlocks, AgentApprovalCard, AgentChat, AgentMessageBubble, AgentSessionDrawer, AgentStreamingBubble, AgentThinking, AgentToolCard, readMcpAppUri, shouldStickToBottom };
+export { AgentA2UIBlocks, AgentApprovalCard, AgentChat, AgentMessageBubble, AgentSessionDrawer, AgentSteps, AgentStreamingBubble, AgentThinking, AgentToolCard, readMcpAppUri, shouldStickToBottom };
 
 //# sourceMappingURL=agent-chat.js.map