@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.0.0

package/dist/ai/compositions/transcript-viewer/to-thread-messages.js

@@ -0,0 +1,65 @@
+//#region src/ai/compositions/transcript-viewer/to-thread-messages.ts
+/** Milliseconds since the epoch, or undefined for a missing or unreadable timestamp. */
+function epoch(iso) {
+	if (iso === void 0) return void 0;
+	const value = Date.parse(iso);
+	return Number.isNaN(value) ? void 0 : value;
+}
+/** A tool call as an assistant-ui tool-call part. */
+function toToolCallPart(toolCall) {
+	const startedAt = epoch(toolCall.startedAt);
+	const completedAt = epoch(toolCall.endedAt);
+	return {
+		type: "tool-call",
+		toolCallId: toolCall.id,
+		toolName: toolCall.name,
+		args: toolCall.args,
+		argsText: JSON.stringify(toolCall.args, null, 2),
+		...toolCall.result !== void 0 ? { result: toolCall.result } : {},
+		...toolCall.status === "failed" ? { isError: true } : {},
+		...startedAt !== void 0 ? { timing: {
+			startedAt,
+			...completedAt !== void 0 ? { completedAt } : {}
+		} } : {}
+	};
+}
+/**
+* One stored message as an assistant-ui message. Parts follow the order an
+* agent produces them: reasoning, then tool calls, then the answer. A system
+* message carries its text only, as assistant-ui allows.
+*/
+function toThreadMessage(message) {
+	const createdAt = new Date(epoch(message.createdAt) ?? 0);
+	if (message.role === "system") return {
+		id: message.id,
+		role: "system",
+		createdAt,
+		content: message.text
+	};
+	const content = [];
+	if (message.role === "assistant" && message.reasoning) content.push({
+		type: "reasoning",
+		text: message.reasoning
+	});
+	if (message.role === "assistant") for (const toolCall of message.toolCalls ?? []) content.push(toToolCallPart(toolCall));
+	if (message.text !== "") content.push({
+		type: "text",
+		text: message.text
+	});
+	return {
+		id: message.id,
+		role: message.role,
+		createdAt,
+		content,
+		...message.role === "assistant" ? { status: {
+			type: "complete",
+			reason: "stop"
+		} } : {}
+	};
+}
+/** Every message, in order. */
+function toThreadMessages(messages) {
+	return messages.map(toThreadMessage);
+}
+//#endregion
+export { toThreadMessage, toThreadMessages, toToolCallPart };

package/dist/ai/compositions/transcript-viewer/transcript-viewer.d.ts

@@ -0,0 +1,63 @@
+import { TranscriptMessage } from "../../types.js";
+import * as React from "react";
+//#region src/ai/compositions/transcript-viewer/transcript-viewer.d.ts
+export interface TranscriptViewerProps extends Omit<React.ComponentProps<"section">, "children" | "onError"> {
+  /** The conversation, oldest first. */
+  messages: readonly TranscriptMessage[];
+  /** Accessible name of the transcript. */
+  label?: string;
+  /**
+   * The message or tool call to scroll to and highlight, by its record id
+   * (controlled). Set it from a deep link to open the transcript at that
+   * point.
+   */
+  highlightId?: string | null;
+  /** The message or tool call highlighted on mount (uncontrolled). */
+  defaultHighlightId?: string | null;
+  /**
+   * The owner followed a message's or tool call's anchor link. The id is the
+   * record's id; `transcriptAnchorId(id)` gives its DOM id, for a URL hash.
+   */
+  onAnchor?: (id: string) => void;
+  /** Prefix of every anchor's DOM id, to keep two transcripts on one page apart. */
+  anchorPrefix?: string;
+  /**
+   * Shows a star rating under each assistant message; called with the
+   * message id when the owner rates it (null when they clear it).
+   */
+  onRate?: (messageId: string, rating: number | null) => void;
+  /** The ratings the app recorded, by message id (controls the stars). */
+  ratings?: Readonly<Record<string, number | null>>;
+  /** Formats a message's ISO timestamp for display. Defaults to the local time, such as 09:02. */
+  formatTime?: (iso: string) => string;
+  /** Show placeholder messages while the conversation loads. */
+  isLoading?: boolean;
+  /**
+   * Plain-text error, such as a failed load or a run that stopped. It shows in
+   * place below the messages, which stay on screen; with no messages it shows
+   * alone.
+   */
+  error?: string | null;
+  /** Offers a Retry button with `error`. Retrying is the owner's action, never automatic. */
+  onRetry?: () => void;
+  /** Text shown for a conversation with no messages. */
+  emptyLabel?: string;
+}
+/** The DOM id of a message's or tool call's anchor, for links and URL hashes. */
+export declare function transcriptAnchorId(id: string, prefix?: string): string;
+/**
+ * A read-only past conversation, with no composer. It converts the
+ * `TranscriptMessage` props to assistant-ui messages internally and draws
+ * them with the registry's message rendering: markdown text, collapsible
+ * reasoning, and each tool call as a ToolCallChip that expands to the call's
+ * arguments and result (tool-fallback).
+ *
+ * It opens at the latest message, as a conversation does, so a run that
+ * ended in an error or mid-call shows its end. Every message and tool call
+ * has a stable anchor (`transcriptAnchorId`). Following one calls
+ * `onAnchor`; setting `highlightId` scrolls to that message or call (instead
+ * of the end) and highlights it. With `onRate`, each assistant message gets a
+ * star rating.
+ */
+export declare function TranscriptViewer(props: TranscriptViewerProps): React.JSX.Element;
+//#endregion

package/dist/ai/compositions/transcript-viewer/transcript-viewer.js

@@ -0,0 +1,471 @@
+import { Alert, AlertAction, AlertTitle } from "../../../components/ui/alert.js";
+import { Button } from "../../../components/ui/button.js";
+import { CollapsibleTrigger } from "../../../components/ui/collapsible.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../../../components/ui/empty.js";
+import { Skeleton } from "../../../components/ui/skeleton.js";
+import { StarRating } from "../../../motion/star-rating/star-rating.js";
+import { ToolCallChip } from "../../../motion/tool-call-chip/tool-call-chip.js";
+import { MarkdownText } from "../../../components/assistant-ui/elements/markdown-text.js";
+import { ToolFallback } from "../../../components/assistant-ui/elements/tool-fallback.aui.js";
+import { summarizeArgs } from "../tool-approval/json-args.js";
+import { ToolCallJson, formatToolValue, toolCallTriggerBaseClassName, toolCallTriggerClassName, useRevealOnOpen } from "../tool-call-row/tool-call-row.js";
+import { ReasoningContent, ReasoningText, ReasoningTrigger } from "../../../components/assistant-ui/elements/reasoning.js";
+import { ReasoningRoot } from "../../../components/assistant-ui/elements/reasoning.aui.js";
+import { toThreadMessages } from "./to-thread-messages.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { AlertCircleIcon, ChevronRightIcon, LinkIcon, RotateCwIcon } from "lucide-react";
+import { useControllableValue } from "ahooks";
+import { useReducedMotionConfig } from "motion/react";
+import { AssistantRuntimeProvider, MessagePrimitive, ThreadPrimitive, groupPartByType, useAuiState, useExternalStoreRuntime } from "@assistant-ui/react";
+//#region src/ai/compositions/transcript-viewer/transcript-viewer.tsx
+/** The DOM id of a message's or tool call's anchor, for links and URL hashes. */
+function transcriptAnchorId(id, prefix = "transcript-") {
+	return `${prefix}${id}`;
+}
+const timeFormat = new Intl.DateTimeFormat("en-GB", {
+	hour: "2-digit",
+	minute: "2-digit"
+});
+function defaultFormatTime(iso) {
+	const date = new Date(iso);
+	return Number.isNaN(date.getTime()) ? iso : timeFormat.format(date);
+}
+const DEFAULT_AUTHOR = {
+	user: "User",
+	assistant: "Assistant",
+	system: "System"
+};
+const TranscriptContext = React.createContext(null);
+function useTranscript() {
+	const context = React.useContext(TranscriptContext);
+	if (!context) throw new Error("TranscriptViewer parts must render inside TranscriptViewer");
+	return context;
+}
+/** A small "link to here" anchor, shown on hover or focus (always on touch screens). */
+function AnchorLink({ id, label }) {
+	const { anchorPrefix, follow } = useTranscript();
+	return /* @__PURE__ */ jsx("a", {
+		href: `#${transcriptAnchorId(id, anchorPrefix)}`,
+		"aria-label": label,
+		"data-slot": "transcript-anchor",
+		onClick: (event) => {
+			event.preventDefault();
+			follow(id);
+		},
+		className: "inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground opacity-0 outline-none transition-opacity group-hover/anchor:opacity-100 hover:text-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50 pointer-coarse:opacity-100",
+		children: /* @__PURE__ */ jsx(LinkIcon, {
+			"aria-hidden": "true",
+			className: "size-3"
+		})
+	});
+}
+/**
+* A deep-linked message or call: a quiet 1px outline at the ring tone, not
+* the heavy 2px ring that stacked with the chip's border and focus. Not a
+* fill: any tint under an error chip drops its muted text below 4.5:1.
+*/
+const HIGHLIGHT = "transition-shadow duration-300 data-highlighted:ring-1 data-highlighted:ring-ring/40";
+const CHIP_STATUS = {
+	running: "running",
+	"awaiting-approval": "running",
+	succeeded: "success",
+	failed: "error",
+	denied: "error",
+	cancelled: "error"
+};
+/**
+* How long a finished call took, from its record. A call without `endedAt`
+* has no duration: a transcript is history, so it never runs a live clock.
+*/
+function elapsedOf(toolCall) {
+	if (!toolCall.startedAt || !toolCall.endedAt) return void 0;
+	const ms = Date.parse(toolCall.endedAt) - Date.parse(toolCall.startedAt);
+	return Number.isNaN(ms) ? void 0 : ms;
+}
+function approvalLine(toolCall) {
+	const { approval, status } = toolCall;
+	if (status === "awaiting-approval") return "Waiting for approval";
+	if (!approval) return status === "denied" ? "Denied" : null;
+	const by = approval.decidedBy ? ` by ${approval.decidedBy}` : "";
+	if (approval.decision === "rejected") return `Denied${by}${approval.reason ? `: ${approval.reason}` : ""}`;
+	if (approval.byStandingPermission) return "Allowed by standing permission";
+	return `Approved${approval.amendedArgs ? " with edits" : ""}${by}`;
+}
+/**
+* One tool call: a ToolCallChip that expands to the call's arguments, result
+* or error, through the registry's tool-fallback parts. Any tool renders this
+* way; there is no per-tool UI in a transcript.
+*/
+function TranscriptToolCall({ toolCallId }) {
+	const { toolCalls, highlightId, anchorPrefix } = useTranscript();
+	const toolCall = toolCalls.get(toolCallId);
+	const highlighted = highlightId === toolCallId;
+	const [open, setOpen] = React.useState(highlighted);
+	const rowRef = useRevealOnOpen(open);
+	const [wasHighlighted, setWasHighlighted] = React.useState(highlighted);
+	if (highlighted !== wasHighlighted) {
+		setWasHighlighted(highlighted);
+		if (highlighted) setOpen(true);
+	}
+	if (!toolCall) return null;
+	const status = CHIP_STATUS[toolCall.status];
+	const elapsedMs = elapsedOf(toolCall);
+	const decision = approvalLine(toolCall);
+	const detail = toolCall.status === "succeeded" || toolCall.status === "failed" ? summarizeArgs(toolCall.args, 2) : toolCall.status.replace("-", " ");
+	return /* @__PURE__ */ jsx("div", {
+		ref: rowRef,
+		id: transcriptAnchorId(toolCall.id, anchorPrefix),
+		"data-slot": "transcript-tool-call",
+		"data-highlighted": highlighted || void 0,
+		className: cn("group/anchor -mx-1.5 max-w-[calc(100%+0.75rem)] scroll-my-4 rounded-lg px-1.5 py-0.5", HIGHLIGHT, "data-highlighted:has-[[data-slot=transcript-tool-call-trigger]:focus-visible]:ring-ring/80"),
+		children: /* @__PURE__ */ jsxs(ToolFallback.Root, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-1",
+				children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+					"data-slot": "transcript-tool-call-trigger",
+					"aria-label": `${toolCall.name}, ${toolCall.status.replace("-", " ")}`,
+					className: highlighted ? toolCallTriggerBaseClassName : toolCallTriggerClassName,
+					children: [/* @__PURE__ */ jsx(ToolCallChip, {
+						name: toolCall.name,
+						detail,
+						status,
+						elapsedMs: elapsedMs ?? 0,
+						className: cn("min-w-0", elapsedMs === void 0 && "[&>[data-slot=tool-call-chip-time]]:hidden")
+					}), /* @__PURE__ */ jsx(ChevronRightIcon, {
+						"aria-hidden": "true",
+						className: "size-3.5 shrink-0 transition-transform duration-200 group-data-panel-open/trigger:rotate-90 motion-reduce:transition-none"
+					})]
+				}), /* @__PURE__ */ jsx(AnchorLink, {
+					id: toolCall.id,
+					label: `Link to the ${toolCall.name} call`
+				})]
+			}), /* @__PURE__ */ jsxs(ToolFallback.Content, { children: [
+				decision ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: decision
+				}) : null,
+				toolCall.error ? /* @__PURE__ */ jsx(ToolFallback.Error, {
+					status: {
+						type: "incomplete",
+						reason: "error",
+						error: toolCall.error.message
+					},
+					className: "text-xs"
+				}) : null,
+				/* @__PURE__ */ jsx(ToolCallJson, { text: JSON.stringify(toolCall.args, null, 2) }),
+				toolCall.result !== void 0 ? /* @__PURE__ */ jsx(ToolCallJson, {
+					heading: "Result:",
+					text: formatToolValue(toolCall.result)
+				}) : null
+			] })]
+		})
+	});
+}
+const groupBy = groupPartByType({
+	reasoning: ["group-reasoning"],
+	"tool-call": ["group-tool"]
+});
+function AssistantParts() {
+	return /* @__PURE__ */ jsx(MessagePrimitive.GroupedParts, {
+		groupBy,
+		indicator: "never",
+		children: ({ part, children }) => {
+			switch (part.type) {
+				case "group-reasoning": return /* @__PURE__ */ jsxs(ReasoningRoot, {
+					variant: "ghost",
+					children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, {
+						className: "[&>[data-slot=reasoning-fade]]:hidden",
+						children: /* @__PURE__ */ jsx(ReasoningText, { children })
+					})]
+				});
+				case "group-tool": return /* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 flex-col items-start gap-0.5 pt-1 pb-5",
+					children
+				});
+				case "reasoning":
+				case "text": return /* @__PURE__ */ jsx(MarkdownText, {});
+				case "tool-call": return /* @__PURE__ */ jsx(TranscriptToolCall, { toolCallId: part.toolCallId });
+				default: return /* @__PURE__ */ jsx(Fragment$1, {});
+			}
+		}
+	});
+}
+function MessageView() {
+	const id = useAuiState((s) => s.message.id);
+	const { records, highlightId, anchorPrefix, formatTime, onRate, ratings } = useTranscript();
+	const record = records.get(id);
+	const headerId = React.useId();
+	if (!record) return null;
+	const highlighted = highlightId === id;
+	const author = record.author ?? DEFAULT_AUTHOR[record.role];
+	const time = formatTime(record.createdAt);
+	const header = /* @__PURE__ */ jsxs("div", {
+		id: headerId,
+		className: cn("flex items-center gap-1.5 text-xs text-muted-foreground", record.role === "user" && "flex-row-reverse"),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground",
+				children: author
+			}),
+			/* @__PURE__ */ jsx("time", {
+				dateTime: record.createdAt,
+				children: time
+			}),
+			/* @__PURE__ */ jsx(AnchorLink, {
+				id,
+				label: `Link to ${author}'s message at ${time}`
+			})
+		]
+	});
+	const shared = {
+		id: transcriptAnchorId(id, anchorPrefix),
+		role: "article",
+		"aria-labelledby": headerId,
+		"data-role": record.role,
+		"data-highlighted": highlighted || void 0
+	};
+	const highlight = cn("group/anchor scroll-mt-4 rounded-xl", HIGHLIGHT);
+	if (record.role === "system") return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
+		...shared,
+		className: cn(highlight, "flex flex-col items-center gap-1 px-3 py-2 text-center"),
+		children: [header, /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs",
+			children: record.text
+		})]
+	});
+	if (record.role === "user") return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
+		...shared,
+		className: cn(highlight, "-mx-2 flex flex-col items-end gap-1.5 p-2"),
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: "max-w-[85%] rounded-2xl bg-muted px-4 py-2 wrap-break-word text-foreground",
+			children: /* @__PURE__ */ jsx(MessagePrimitive.Parts, { components: { Text: MarkdownText } })
+		})]
+	});
+	return /* @__PURE__ */ jsxs(MessagePrimitive.Root, {
+		...shared,
+		className: cn(highlight, "-mx-2 flex flex-col gap-1 p-2"),
+		children: [
+			header,
+			/* @__PURE__ */ jsx("div", {
+				className: "leading-relaxed wrap-break-word text-foreground",
+				children: /* @__PURE__ */ jsx(AssistantParts, {})
+			}),
+			onRate ? /* @__PURE__ */ jsx(StarRating, {
+				size: "sm",
+				label: `Rate ${author}'s message at ${time}`,
+				clearable: true,
+				...ratings ? { value: ratings[id] ?? null } : {},
+				onValueChange: (value) => onRate(id, value),
+				className: "-ms-1 -mt-4.5"
+			}) : null
+		]
+	});
+}
+function TranscriptSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: "flex flex-col gap-6",
+		"data-slot": "transcript-loading",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Loading conversation"
+			}),
+			/* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-9 w-2/5 rounded-2xl" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-11/12" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4/5" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/5" })
+				]
+			}),
+			/* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-9 w-1/3 rounded-2xl" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-10/12" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" })]
+			})
+		]
+	});
+}
+const noSend = async () => {};
+/**
+* How a scrolled edge fades: fully clear for the outer 0.75rem, then ramping
+* in by 2rem, past one text line (1.25rem). A line the scroll box cuts sits
+* in the clear band or the faint start of the ramp, so it dissolves instead
+* of reading as sliced against the pane's border. Only an edge with content
+* scrolled past it fades, so content at rest is never faded.
+*/
+const EDGE_CLEAR = "0.75rem";
+const EDGE_FADE = "2rem";
+function RetryButton({ onRetry }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		size: "xs",
+		className: "text-foreground",
+		onClick: () => onRetry(),
+		children: [/* @__PURE__ */ jsx(RotateCwIcon, { "aria-hidden": "true" }), "Retry"]
+	});
+}
+/**
+* A read-only past conversation, with no composer. It converts the
+* `TranscriptMessage` props to assistant-ui messages internally and draws
+* them with the registry's message rendering: markdown text, collapsible
+* reasoning, and each tool call as a ToolCallChip that expands to the call's
+* arguments and result (tool-fallback).
+*
+* It opens at the latest message, as a conversation does, so a run that
+* ended in an error or mid-call shows its end. Every message and tool call
+* has a stable anchor (`transcriptAnchorId`). Following one calls
+* `onAnchor`; setting `highlightId` scrolls to that message or call (instead
+* of the end) and highlights it. With `onRate`, each assistant message gets a
+* star rating.
+*/
+function TranscriptViewer(props) {
+	const { messages, label = "Transcript", highlightId: _highlightId, defaultHighlightId: _defaultHighlightId, onAnchor: _onAnchor, anchorPrefix = "transcript-", onRate, ratings, formatTime = defaultFormatTime, isLoading = false, error, onRetry, emptyLabel = "No messages in this conversation", className, ref, style, onScroll, ...rest } = props;
+	const sectionRef = React.useRef(null);
+	const reduced = useReducedMotionConfig() ?? false;
+	const controllable = {};
+	if (_highlightId !== void 0) controllable.highlightId = _highlightId;
+	if (_defaultHighlightId !== void 0) controllable.defaultHighlightId = _defaultHighlightId;
+	if (_onAnchor) controllable.onAnchor = _onAnchor;
+	const [highlightId, setHighlightId] = useControllableValue(controllable, {
+		valuePropName: "highlightId",
+		defaultValuePropName: "defaultHighlightId",
+		trigger: "onAnchor",
+		defaultValue: null
+	});
+	const threadMessages = React.useMemo(() => toThreadMessages(messages), [messages]);
+	const records = React.useMemo(() => new Map(messages.map((message) => [message.id, message])), [messages]);
+	const toolCalls = React.useMemo(() => new Map(messages.flatMap((message) => (message.toolCalls ?? []).map((toolCall) => [toolCall.id, toolCall]))), [messages]);
+	const runtime = useExternalStoreRuntime({
+		messages: threadMessages,
+		convertMessage: (message) => message,
+		isDisabled: true,
+		onNew: noSend
+	});
+	const openedAtEnd = React.useRef(false);
+	const hasMessages = messages.length > 0;
+	React.useLayoutEffect(() => {
+		if (openedAtEnd.current || !hasMessages || isLoading) return;
+		openedAtEnd.current = true;
+		const section = sectionRef.current;
+		if (!highlightId && section) section.scrollTop = section.scrollHeight;
+	}, [
+		hasMessages,
+		isLoading,
+		highlightId
+	]);
+	const [edges, setEdges] = React.useState({
+		top: false,
+		bottom: false
+	});
+	const measureEdges = React.useCallback(() => {
+		const section = sectionRef.current;
+		if (!section) return;
+		const top = section.scrollTop > 1;
+		const bottom = section.scrollTop + section.clientHeight < section.scrollHeight - 1;
+		setEdges((current) => current.top === top && current.bottom === bottom ? current : {
+			top,
+			bottom
+		});
+	}, []);
+	React.useLayoutEffect(measureEdges);
+	const edgeFade = edges.top || edges.bottom ? `linear-gradient(to bottom, ${edges.top ? `transparent ${EDGE_CLEAR}` : "#000"}, #000 ${EDGE_FADE}, #000 calc(100% - ${EDGE_FADE}), ${edges.bottom ? `transparent calc(100% - ${EDGE_CLEAR})` : "#000"})` : void 0;
+	React.useEffect(() => {
+		if (!highlightId || isLoading) return;
+		document.getElementById(transcriptAnchorId(highlightId, anchorPrefix))?.scrollIntoView({
+			block: "center",
+			behavior: reduced ? "auto" : "smooth"
+		});
+	}, [
+		highlightId,
+		anchorPrefix,
+		isLoading,
+		reduced
+	]);
+	const context = React.useMemo(() => ({
+		records,
+		toolCalls,
+		anchorPrefix,
+		highlightId: highlightId ?? null,
+		follow: (id) => setHighlightId(id),
+		formatTime,
+		onRate,
+		ratings
+	}), [
+		records,
+		toolCalls,
+		anchorPrefix,
+		highlightId,
+		setHighlightId,
+		formatTime,
+		onRate,
+		ratings
+	]);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		"aria-busy": isLoading || void 0,
+		"data-slot": "transcript-viewer",
+		className: cn("@container/transcript flex flex-col overflow-y-auto text-sm", className),
+		...rest,
+		style: edgeFade ? {
+			...style,
+			maskImage: edgeFade,
+			WebkitMaskImage: edgeFade
+		} : style,
+		onScroll: (event) => {
+			measureEdges();
+			onScroll?.(event);
+		},
+		ref: (element) => {
+			sectionRef.current = element;
+			if (typeof ref === "function") return ref(element);
+			if (ref) ref.current = element;
+		},
+		children: [messages.length === 0 && error ? /* @__PURE__ */ jsxs(Empty, {
+			"data-slot": "transcript-error",
+			role: "alert",
+			className: "border",
+			children: [/* @__PURE__ */ jsxs(EmptyHeader, { children: [/* @__PURE__ */ jsx(EmptyMedia, {
+				variant: "icon",
+				className: "bg-destructive/10 text-destructive",
+				children: /* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" })
+			}), /* @__PURE__ */ jsx(EmptyTitle, {
+				className: "wrap-break-word",
+				children: error
+			})] }), onRetry ? /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsx(RetryButton, { onRetry }) }) : null]
+		}) : isLoading && messages.length === 0 ? /* @__PURE__ */ jsx(TranscriptSkeleton, {}) : messages.length === 0 ? /* @__PURE__ */ jsx(Empty, {
+			"data-slot": "transcript-empty",
+			className: "border",
+			children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [/* @__PURE__ */ jsx(EmptyTitle, { children: emptyLabel }), /* @__PURE__ */ jsx(EmptyDescription, { children: "Messages show here once the conversation has any." })] })
+		}) : /* @__PURE__ */ jsx(TranscriptContext.Provider, {
+			value: context,
+			children: /* @__PURE__ */ jsx(AssistantRuntimeProvider, {
+				runtime,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-4",
+					children: /* @__PURE__ */ jsx(ThreadPrimitive.Messages, { children: () => /* @__PURE__ */ jsx(MessageView, {}) })
+				})
+			})
+		}), error && messages.length > 0 ? /* @__PURE__ */ jsxs(Alert, {
+			variant: "destructive",
+			"data-slot": "transcript-error",
+			className: "mt-4",
+			children: [
+				/* @__PURE__ */ jsx(AlertCircleIcon, { "aria-hidden": "true" }),
+				/* @__PURE__ */ jsx(AlertTitle, {
+					className: "min-w-0 wrap-break-word",
+					children: error
+				}),
+				onRetry ? /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsx(RetryButton, { onRetry }) }) : null
+			]
+		}) : null]
+	});
+}
+//#endregion
+export { TranscriptViewer, transcriptAnchorId };