@tangle-network/ui 11.10.0 → 11.11.1

package/dist/chat-D4jAfEmj.js

@@ -0,0 +1,667 @@
+import { i as focusRing } from "./focus-BcE_SHqz.js";
+import { t as cn } from "./utils-C_uf36nf.js";
+import { r as getToolDisplayMetadata } from "./tool-display-BAuAVa43.js";
+import { n as useRunCollapseState, r as useRunGroups, t as useAutoScroll } from "./use-auto-scroll-C5Pjeqon.js";
+import { n as ToolCallStep, t as ToolCallGroup } from "./tool-call-step-DNebqhmX.js";
+import { t as Markdown } from "./markdown-BGqicV82.js";
+import { n as InlineThinkingItem, t as RunGroup } from "./run-group-BACLbCFl.js";
+import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DrU1AdVk.js";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, ArrowDown, CheckCircle2, CircleDot, FileText, Info } from "lucide-react";
+//#region src/chat/user-message.tsx
+function formatTime$1(date) {
+	return date.toLocaleTimeString(void 0, {
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
+/**
+* The single user message bubble — a quiet, right-aligned fill on the muted
+* surface (no border, no loud fill, no uppercase label). The timestamp sits
+* beside the bubble and appears on hover, so it costs no height. Used by both
+* the run/message list (session-model `parts`) and AgentTimeline (direct
+* `content`/`timestamp`).
+*/
+const UserMessage = memo(({ message: _message, parts, content, timestamp, actions }) => {
+	const text = content ?? (parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join("\n");
+	if (!text.trim()) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-end",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "group flex max-w-[78%] flex-col items-end gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "relative w-full rounded-2xl bg-muted/50 px-4 py-3",
+				children: [timestamp ? /* @__PURE__ */ jsx("span", {
+					"data-user-message-time": "",
+					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+					children: formatTime$1(timestamp)
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground",
+					children: text
+				})]
+			}), actions ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground",
+				children: actions
+			}) : null]
+		})
+	});
+});
+UserMessage.displayName = "UserMessage";
+//#endregion
+//#region src/chat/message-list.tsx
+/**
+* Maps GroupedMessage[] to UserMessage and RunGroup components.
+* This is the main render list for the chat view.
+*/
+const MessageList = memo(({ groups, partMap, isCollapsed, onToggleCollapse, branding, renderToolDetail, renderRunActions, renderUserMessageActions, renderToolActions }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-4",
+		children: groups.map((group) => {
+			if (group.type === "user") {
+				const messageParts = partMap[group.message.id] ?? [];
+				return /* @__PURE__ */ jsx(UserMessage, {
+					message: group.message,
+					parts: messageParts,
+					actions: renderUserMessageActions?.(group.message, messageParts)
+				}, group.message.id);
+			}
+			return /* @__PURE__ */ jsx(RunGroup, {
+				run: group.run,
+				partMap,
+				collapsed: isCollapsed(group.run.id),
+				onToggle: () => onToggleCollapse(group.run.id),
+				branding,
+				renderToolDetail,
+				headerActions: renderRunActions?.(group.run),
+				renderToolActions
+			}, group.run.id);
+		})
+	});
+});
+MessageList.displayName = "MessageList";
+//#endregion
+//#region src/chat/thinking-indicator.tsx
+function ThinkingIndicator({ className }) {
+	const [elapsed, setElapsed] = useState(0);
+	useEffect(() => {
+		const interval = window.setInterval(() => setElapsed((current) => current + 1), 1e3);
+		return () => window.clearInterval(interval);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-label": "Agent is thinking",
+		className: cn("flex items-center gap-2 px-3 py-1.5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-[3px]",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]",
+					style: { animationDelay: "0ms" }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]",
+					style: { animationDelay: "150ms" }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]",
+					style: { animationDelay: "300ms" }
+				})
+			]
+		}), elapsed > 3 && /* @__PURE__ */ jsxs("span", {
+			className: "text-[var(--font-size-xs)] tabular-nums text-muted-foreground",
+			children: [elapsed, "s"]
+		})]
+	});
+}
+//#endregion
+//#region src/chat/agent-timeline.tsx
+const TONE_STYLES = {
+	default: {
+		card: "border-border bg-card",
+		text: "text-foreground",
+		icon: CircleDot
+	},
+	info: {
+		card: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]",
+		text: "text-[var(--surface-info-text)]",
+		icon: Info
+	},
+	success: {
+		card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
+		text: "text-[var(--surface-success-text)]",
+		icon: CheckCircle2
+	},
+	warning: {
+		card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
+		text: "text-[var(--surface-warning-text)]",
+		icon: AlertTriangle
+	},
+	error: {
+		card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
+		text: "text-[var(--surface-danger-text)]",
+		icon: AlertTriangle
+	}
+};
+function stepKind(item) {
+	if (item.kind === "message") return item.role === "user" ? "user" : "prose";
+	if (item.kind === "status" || item.kind === "artifact") return "card";
+	return "tool";
+}
+function spacingBefore(prev, next) {
+	if (prev === void 0) return "";
+	if (prev === "user" || next === "user") return "mt-4";
+	if (prev === "card" || next === "card") return "mt-2";
+	if (prev === "tool" || next === "tool") return "mt-1";
+	return "mt-3";
+}
+const ROW_BLEED = "-mx-3";
+function AssistantMessage({ item }) {
+	return /* @__PURE__ */ jsxs("div", { children: [
+		item.content && /* @__PURE__ */ jsx(Markdown, {
+			className: "tangle-prose text-[var(--font-size-base)] leading-[1.5]",
+			children: item.content
+		}),
+		item.isStreaming && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			"data-streaming-caret": "",
+			className: "ml-0.5 inline-block h-[1em] w-0.5 animate-pulse rounded-full bg-muted-foreground align-text-bottom"
+		}),
+		item.toolCalls && /* @__PURE__ */ jsx("div", {
+			className: "mt-1",
+			children: item.toolCalls
+		}),
+		item.after && /* @__PURE__ */ jsx("div", {
+			className: "mt-3 border-t border-border pt-3",
+			children: item.after
+		})
+	] });
+}
+function StatusCard({ item }) {
+	const tone = TONE_STYLES[item.tone ?? "default"];
+	const Icon = tone.icon;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-[var(--radius-lg)] border px-4 py-3", tone.card),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsx(Icon, { className: cn("mt-0.5 h-4 w-4 shrink-0", tone.text) }), /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("text-sm font-medium", tone.text),
+					children: item.label
+				}), item.detail && /* @__PURE__ */ jsx("div", {
+					className: "mt-0.5 text-sm text-muted-foreground",
+					children: item.detail
+				})]
+			})]
+		})
+	});
+}
+function ArtifactCard({ item }) {
+	const tone = TONE_STYLES[item.tone ?? "default"];
+	const content = /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-[var(--radius-lg)] border px-4 py-3", tone.card),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-0.5 flex h-[var(--avatar-size)] w-[var(--avatar-size)] shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-muted/50 text-foreground",
+					children: item.icon ?? /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "text-sm font-medium text-foreground",
+							children: item.title
+						}),
+						item.description && /* @__PURE__ */ jsx("div", {
+							className: "mt-1 text-sm text-muted-foreground",
+							children: item.description
+						}),
+						item.meta && /* @__PURE__ */ jsx("div", {
+							className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
+							children: item.meta
+						})
+					]
+				}),
+				item.action && /* @__PURE__ */ jsx("div", {
+					className: "shrink-0",
+					children: item.action
+				})
+			]
+		})
+	});
+	if (!item.onClick) return content;
+	return /* @__PURE__ */ jsx("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: item.onClick,
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				item.onClick?.();
+			}
+		},
+		className: cn("block w-full rounded-[var(--radius-lg)] text-left transition-transform hover:-translate-y-0.5", focusRing),
+		children: content
+	});
+}
+/**
+* AgentTimeline — unified mixed-content transcript for agent-backed sandbox
+* sessions. Renders messages, tool rows, status cards, and artifact handoffs
+* as one plain column: prose at the reading size, tool calls as quiet
+* one-liners between the paragraphs, no connector chrome.
+*/
+function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter }) {
+	const [expanded, setExpanded] = useState(false);
+	if (items.length === 0 && !isThinking) return emptyState ? /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-full items-center justify-center p-4", className),
+		children: emptyState
+	}) : null;
+	const renderedItems = isThinking ? [...items, {
+		id: "__thinking__",
+		kind: "custom",
+		content: /* @__PURE__ */ jsx(ThinkingIndicator, {})
+	}] : items;
+	const isUserMessage = (item) => item.kind === "message" && item.role === "user";
+	const stepItems = renderedItems.filter((item) => !isUserMessage(item));
+	const limit = collapseAfter ?? Infinity;
+	const collapsible = stepItems.length > limit;
+	const collapsed = collapsible && !expanded;
+	let renderList = renderedItems;
+	let hiddenCount = 0;
+	if (collapsed) {
+		const visible = [];
+		let stepCount = 0;
+		for (const item of renderedItems) {
+			if (stepCount >= limit) break;
+			visible.push(item);
+			if (!isUserMessage(item)) stepCount += 1;
+		}
+		renderList = visible;
+		hiddenCount = stepItems.length - limit;
+	}
+	const renderItem = (item) => {
+		if (item.kind === "message") return item.role === "user" ? /* @__PURE__ */ jsx(UserMessage, {
+			content: item.content,
+			timestamp: item.timestamp
+		}) : /* @__PURE__ */ jsx(AssistantMessage, { item });
+		if (item.kind === "tool") return /* @__PURE__ */ jsx(ToolCallStep, {
+			type: item.call.type,
+			label: item.call.label,
+			status: item.call.status,
+			detail: item.call.detail,
+			output: item.call.output,
+			duration: item.call.duration,
+			part: item.part,
+			actions: item.part ? renderToolActions?.(item.part) : void 0
+		});
+		if (item.kind === "tool_group") return /* @__PURE__ */ jsx(ToolCallGroup, {
+			title: item.title,
+			children: item.calls.map((call, callIndex) => {
+				const part = item.parts?.[callIndex];
+				return /* @__PURE__ */ jsx(ToolCallStep, {
+					type: call.type,
+					label: call.label,
+					status: call.status,
+					detail: call.detail,
+					output: call.output,
+					duration: call.duration,
+					part,
+					actions: part ? renderToolActions?.(part) : void 0
+				}, call.id);
+			})
+		});
+		if (item.kind === "status") return /* @__PURE__ */ jsx(StatusCard, { item });
+		if (item.kind === "artifact") return /* @__PURE__ */ jsx(ArtifactCard, { item });
+		return item.content;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className),
+		children: [renderList.map((item, index) => {
+			const kind = stepKind(item);
+			const prev = index > 0 ? stepKind(renderList[index - 1]) : void 0;
+			return /* @__PURE__ */ jsx("div", {
+				"data-timeline-step": kind,
+				className: cn(spacingBefore(prev, kind), kind === "tool" && ROW_BLEED),
+				children: renderItem(item)
+			}, item.id);
+		}), collapsible ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setExpanded((value) => !value),
+			className: "mt-2 self-start text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+			children: collapsed ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}` : "Show less"
+		}) : null]
+	});
+}
+//#endregion
+//#region src/chat/chat-container.tsx
+const OPENUI_NODE_TYPES = /* @__PURE__ */ new Set([
+	"heading",
+	"text",
+	"badge",
+	"stat",
+	"key_value",
+	"code",
+	"markdown",
+	"table",
+	"actions",
+	"separator",
+	"stack",
+	"grid",
+	"card"
+]);
+function isOpenUINode(value) {
+	return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string" && OPENUI_NODE_TYPES.has(value.type);
+}
+function extractOpenUISchema(output) {
+	if (output == null) return null;
+	if (isOpenUINode(output)) return [output];
+	if (Array.isArray(output) && output.length > 0 && output.every(isOpenUINode)) return output;
+	if (typeof output === "object" && !Array.isArray(output)) {
+		const obj = output;
+		for (const key of [
+			"openui",
+			"schema",
+			"ui"
+		]) if (obj[key]) {
+			const inner = obj[key];
+			if (isOpenUINode(inner)) return [inner];
+			if (Array.isArray(inner) && inner.length > 0 && inner.every(isOpenUINode)) return inner;
+		}
+	}
+	if (typeof output === "string") try {
+		return extractOpenUISchema(JSON.parse(output));
+	} catch {
+		return null;
+	}
+	return null;
+}
+function formatUnknown(value) {
+	if (value == null) return void 0;
+	if (typeof value === "string") return value;
+	try {
+		return JSON.stringify(value, null, 2);
+	} catch {
+		return String(value);
+	}
+}
+function createdAtFromMessage(message) {
+	return message.time?.created ? new Date(message.time.created) : void 0;
+}
+function mapToolPartToTimelineType(part) {
+	switch (part.tool.toLowerCase().replace(/^tool:/, "")) {
+		case "bash":
+		case "shell":
+		case "command":
+		case "execute": return "bash";
+		case "write":
+		case "write_file":
+		case "create_file": return "write";
+		case "read":
+		case "read_file":
+		case "cat": return "read";
+		case "edit":
+		case "patch":
+		case "sed": return "edit";
+		case "glob":
+		case "find": return "glob";
+		case "ls": return "list";
+		case "grep":
+		case "search":
+		case "rg": return "grep";
+		case "inspect": return "inspect";
+		default: return "unknown";
+	}
+}
+function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enableOpenUI = true) {
+	const items = [];
+	let latestUserIndex = -1;
+	for (let index = messages.length - 1; index >= 0; index -= 1) if (messages[index].role === "user") {
+		latestUserIndex = index;
+		break;
+	}
+	const lastAssistantMessage = [...latestUserIndex >= 0 ? messages.slice(latestUserIndex + 1) : messages].reverse().find((message) => message.role === "assistant");
+	const toToolCall = (part) => {
+		const meta = getToolDisplayMetadata(part);
+		const start = part.state.time?.start;
+		const end = part.state.time?.end;
+		return {
+			id: part.id,
+			type: mapToolPartToTimelineType(part),
+			label: meta.title,
+			status: part.state.status === "completed" ? "success" : part.state.status === "error" ? "error" : "running",
+			detail: meta.commandSnippet ?? meta.targetPath ?? meta.description,
+			output: formatUnknown(part.state.output),
+			duration: start && end ? end - start : void 0
+		};
+	};
+	for (const message of messages) {
+		const parts = partMap[message.id] ?? [];
+		if (message.role === "user") {
+			const content = parts.filter((part) => part.type === "text").map((part) => part.text).join("\n").trim();
+			if (!content) continue;
+			items.push({
+				id: message.id,
+				kind: "message",
+				role: "user",
+				content,
+				timestamp: createdAtFromMessage(message)
+			});
+			continue;
+		}
+		const toolBuffer = [];
+		const flushToolBuffer = (index) => {
+			if (toolBuffer.length === 0) return;
+			if (toolBuffer.length === 1) items.push({
+				id: `${message.id}-tool-${toolBuffer[0].id}`,
+				kind: "tool",
+				call: toToolCall(toolBuffer[0]),
+				part: toolBuffer[0]
+			});
+			else items.push({
+				id: `${message.id}-tool-group-${index}`,
+				kind: "tool_group",
+				title: "Tool activity",
+				parts: [...toolBuffer],
+				calls: toolBuffer.map((part) => toToolCall(part))
+			});
+			if (enableOpenUI) for (const part of toolBuffer) {
+				if (part.state.status !== "completed" || !part.state.output) continue;
+				const schema = extractOpenUISchema(part.state.output);
+				if (!schema) continue;
+				items.push({
+					id: `${message.id}-openui-${part.id}`,
+					kind: "custom",
+					content: /* @__PURE__ */ jsx("div", {
+						className: "my-2 rounded-[var(--radius-lg)] border border-border bg-card p-4 shadow-[var(--shadow-card)]",
+						children: /* @__PURE__ */ jsx(OpenUIArtifactRenderer, {
+							schema,
+							onAction: onOpenUIAction
+						})
+					})
+				});
+			}
+			toolBuffer.length = 0;
+		};
+		parts.forEach((part, index) => {
+			const itemId = `${message.id}-${index}`;
+			if (part.type === "tool") {
+				toolBuffer.push(part);
+				return;
+			}
+			flushToolBuffer(index);
+			if (part.type === "text" && !part.synthetic && part.text.trim()) {
+				if (enableOpenUI) {
+					const jsonMatch = part.text.match(/```(?:json)?\s*\n([\s\S]*?)\n```/);
+					if (jsonMatch) {
+						const schema = extractOpenUISchema(jsonMatch[1]);
+						if (schema) {
+							const beforeJson = part.text.slice(0, part.text.indexOf("```")).trim();
+							if (beforeJson) items.push({
+								id: `${itemId}-text`,
+								kind: "message",
+								role: "assistant",
+								content: beforeJson,
+								timestamp: createdAtFromMessage(message)
+							});
+							items.push({
+								id: `${itemId}-openui`,
+								kind: "custom",
+								content: /* @__PURE__ */ jsx("div", {
+									className: "my-2 rounded-[var(--radius-lg)] border border-border bg-card p-4 shadow-[var(--shadow-card)]",
+									children: /* @__PURE__ */ jsx(OpenUIArtifactRenderer, {
+										schema,
+										onAction: onOpenUIAction
+									})
+								})
+							});
+							const afterJson = part.text.slice(part.text.lastIndexOf("```") + 3).trim();
+							if (afterJson) items.push({
+								id: `${itemId}-after`,
+								kind: "message",
+								role: "assistant",
+								content: afterJson,
+								timestamp: createdAtFromMessage(message)
+							});
+							return;
+						}
+					}
+				}
+				items.push({
+					id: itemId,
+					kind: "message",
+					role: "assistant",
+					content: part.text,
+					timestamp: createdAtFromMessage(message),
+					isStreaming: isStreaming && lastAssistantMessage?.id === message.id && index === parts.length - 1
+				});
+				return;
+			}
+			if (part.type === "reasoning") {
+				items.push({
+					id: itemId,
+					kind: "custom",
+					content: /* @__PURE__ */ jsx(InlineThinkingItem, {
+						part,
+						defaultOpen: isStreaming && lastAssistantMessage?.id === message.id
+					})
+				});
+				return;
+			}
+		});
+		flushToolBuffer(parts.length);
+	}
+	return {
+		items,
+		showThinking: isStreaming && latestUserIndex >= 0 && (lastAssistantMessage == null || !items.some((item) => item.kind === "message" && item.role === "assistant" && item.id.startsWith(lastAssistantMessage.id)))
+	};
+}
+/**
+* Chat transcript container: message list + auto-scroll.
+* Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
+*/
+const ChatContainer = memo(({ messages, partMap, isStreaming, branding, className, renderToolDetail, presentation = "runs", onOpenUIAction, enableOpenUI = true, renderRunActions, renderUserMessageActions, renderToolActions, renderTimelineToolActions, collapseTimelineAfter }) => {
+	const scrollRef = useRef(null);
+	const groups = useRunGroups({
+		messages,
+		partMap,
+		isStreaming
+	});
+	const runs = groups.filter((g) => g.type === "run").map((g) => g.run);
+	const { isCollapsed, toggleCollapse } = useRunCollapseState(runs);
+	const { isAtBottom, scrollToBottom } = useAutoScroll(scrollRef, [
+		messages,
+		partMap,
+		isStreaming
+	]);
+	const timeline = useMemo(() => buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enableOpenUI), [
+		messages,
+		partMap,
+		isStreaming,
+		onOpenUIAction,
+		enableOpenUI
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full flex-col", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
+			className: "flex-1 overflow-y-auto [scrollbar-gutter:stable]",
+			children: messages.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "flex h-full items-center justify-center",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "max-w-md text-center",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "text-sm font-medium text-muted-foreground",
+						children: "Start a conversation."
+					})
+				})
+			}) : presentation === "timeline" ? /* @__PURE__ */ jsx("div", {
+				className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end",
+				children: /* @__PURE__ */ jsx(AgentTimeline, {
+					items: timeline.items,
+					isThinking: timeline.showThinking,
+					renderToolActions: renderTimelineToolActions,
+					collapseAfter: collapseTimelineAfter
+				})
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end",
+				children: /* @__PURE__ */ jsx(MessageList, {
+					groups,
+					partMap,
+					isCollapsed,
+					onToggleCollapse: toggleCollapse,
+					branding,
+					renderToolDetail,
+					renderRunActions,
+					renderUserMessageActions,
+					renderToolActions
+				})
+			})
+		}), !isAtBottom && /* @__PURE__ */ jsx("div", {
+			className: "relative z-10 -mt-10 flex justify-center",
+			children: /* @__PURE__ */ jsxs("button", {
+				onClick: scrollToBottom,
+				className: cn("flex items-center gap-1.5 px-3 py-1.5 rounded-full", "border border-border bg-card shadow-[0_6px_16px_rgba(15,23,42,0.08)]", "text-xs text-foreground transition-colors hover:bg-accent", focusRing),
+				children: [/* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" }), "Scroll to bottom"]
+			})
+		})]
+	});
+});
+ChatContainer.displayName = "ChatContainer";
+//#endregion
+//#region src/chat/chat-message.tsx
+function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel = "You", assistantLabel = "Agent", hideRoleLabel }) {
+	const isUser = role === "user";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1", isUser ? "items-end" : "items-start", className),
+		children: [!hideRoleLabel && /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground text-xs",
+				children: isUser ? userLabel : assistantLabel
+			}), timestamp && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: formatTime(timestamp)
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border", "px-[var(--chat-message-px)] py-[var(--chat-message-py)]", isUser ? "border-border bg-muted/50" : "border-border bg-card"),
+			children: [isUser ? /* @__PURE__ */ jsx("div", {
+				className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground",
+				children: content
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [content && /* @__PURE__ */ jsx(Markdown, {
+				className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]",
+				children: content
+			}), isStreaming && /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" })] }), toolCalls]
+		})]
+	});
+}
+function formatTime(date) {
+	return date.toLocaleTimeString(void 0, {
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
+//#endregion
+export { MessageList as a, ThinkingIndicator as i, ChatContainer as n, UserMessage as o, AgentTimeline as r, ChatMessage as t };