@agent-native/agentkit 0.1.0

package/dist/react/components.js

@@ -0,0 +1,1300 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionButton, AgentSuggestionBar, IconButton, MessageQueueDrawer, PromptComposer, Surface, TextField, agentSuggestionPrompt, splitMarkdownBlocks, writeClipboardText, } from "@agent-native/toolkit/agentkit";
+import { IconActivity, IconAlertCircle, IconArrowFork, IconBook2, IconBrain, IconChevronRight, IconCircleCheck, IconCode, IconCopy, IconFile, IconGitBranch, IconMessage, IconPlugConnected, IconPlayerPause, IconPlayerPlay, IconSearch, IconTerminal2, IconChecklist, IconThumbDown, IconThumbUp, IconTool, IconX, } from "@tabler/icons-react";
+import { Component, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { inferAgentActivityKind, } from "../protocol/index.js";
+import { useAgentCapability, useAgentConnection, useAgentKit, useAgentKitControl, useAgentKitMutation, useAgentThread, } from "./context.js";
+import { AgentStreamingText } from "./streaming-text.js";
+/** Isolates custom renderers so one extension cannot take down the chat. */
+export class AgentKitErrorBoundary extends Component {
+    state = {
+        resetKey: this.props.resetKey,
+    };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    static getDerivedStateFromProps(props, state) {
+        return props.resetKey !== state.resetKey
+            ? { error: undefined, resetKey: props.resetKey }
+            : null;
+    }
+    componentDidCatch(error, info) {
+        try {
+            this.props.onError?.(error, info);
+        }
+        catch (observerError) {
+            if (typeof globalThis.reportError === "function") {
+                globalThis.reportError(observerError);
+            }
+            else {
+                console.error("AgentKit render observer failed.", observerError);
+            }
+        }
+    }
+    render() {
+        if (!this.state.error)
+            return this.props.children;
+        return typeof this.props.fallback === "function"
+            ? this.props.fallback(this.state.error)
+            : this.props.fallback;
+    }
+}
+function AgentKitSurfaceBoundary({ surface, resetKey, children, }) {
+    const { labels, onRenderError, threadId } = useAgentKit();
+    return (_jsx(AgentKitErrorBoundary, { resetKey: resetKey, fallback: _jsxs("div", { className: "agentkit-error", "data-render-surface": surface, role: "alert", children: [_jsx(IconAlertCircle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: labels.renderError })] }), onError: (error, info) => onRenderError?.({
+            error,
+            surface,
+            threadId,
+            componentStack: info.componentStack ?? undefined,
+        }), children: children }));
+}
+function AgentKitRegionSlot({ slot: Slot, threadId, children, }) {
+    return Slot ? _jsx(Slot, { threadId: threadId, children: children }) : children;
+}
+const allowedAgentProtocols = new Set(["http:", "https:", "mailto:", "blob:"]);
+const allowedAgentImageProtocols = new Set(["http:", "https:", "blob:"]);
+/** Keeps an unfinished bold delimiter literal while a streamed message grows. */
+function escapeIncompleteStrongMarkdown(text) {
+    const delimiterPositions = new Map();
+    let inFence = false;
+    let fenceMarker = "";
+    let inlineCodeTicks = 0;
+    let offset = 0;
+    for (const line of text.split("\n")) {
+        const trimmed = line.trimStart();
+        if (!inFence) {
+            const fenceMatch = /^(?:`{3,}|~{3,})/.exec(trimmed);
+            if (fenceMatch) {
+                inFence = true;
+                fenceMarker = fenceMatch[0].charAt(0).repeat(fenceMatch[0].length);
+            }
+        }
+        if (!inFence) {
+            for (let index = 0; index < line.length; index += 1) {
+                if (line[index] === "\\") {
+                    index += 1;
+                    continue;
+                }
+                if (line[index] === "`") {
+                    let tickCount = 1;
+                    while (line[index + tickCount] === "`")
+                        tickCount += 1;
+                    inlineCodeTicks = inlineCodeTicks === 0 ? tickCount : 0;
+                    index += tickCount - 1;
+                    continue;
+                }
+                if (inlineCodeTicks !== 0)
+                    continue;
+                const delimiter = line.slice(index, index + 2);
+                if (delimiter !== "**" && delimiter !== "__")
+                    continue;
+                const positions = delimiterPositions.get(delimiter) ?? [];
+                positions.push(offset + index);
+                delimiterPositions.set(delimiter, positions);
+                index += 1;
+            }
+        }
+        else {
+            const closeMatch = /^(?:`{3,}|~{3,})\s*$/.exec(trimmed);
+            if (closeMatch &&
+                closeMatch[0].charAt(0) === fenceMarker.charAt(0) &&
+                closeMatch[0].trim().length >= fenceMarker.length) {
+                inFence = false;
+                fenceMarker = "";
+            }
+        }
+        offset += line.length + 1;
+    }
+    const unmatched = [...delimiterPositions.entries()].flatMap(([delimiter, positions]) => positions.length % 2 === 1
+        ? [{ delimiter, position: positions.at(-1) }]
+        : []);
+    return unmatched
+        .sort((left, right) => right.position - left.position)
+        .reduce((value, { delimiter, position }) => `${value.slice(0, position)}\\${delimiter[0]}\\${delimiter[1]}${value.slice(position + 2)}`, text);
+}
+/** Rejects executable and embedded-data URLs before they reach a default anchor. */
+export function safeAgentHref(href) {
+    if (!href)
+        return undefined;
+    try {
+        const parsed = new URL(href, "https://agentkit.invalid");
+        return allowedAgentProtocols.has(parsed.protocol) ? href : undefined;
+    }
+    catch (error) {
+        if (error instanceof TypeError)
+            return undefined;
+        throw error;
+    }
+}
+const AgentMarkdownBlock = memo(function AgentMarkdownBlock({ text, }) {
+    const safeText = escapeIncompleteStrongMarkdown(text);
+    return (_jsx(ReactMarkdown, { skipHtml: true, remarkPlugins: [remarkGfm], components: {
+            a: ({ children, href }) => {
+                const safeHref = safeAgentHref(href);
+                return safeHref ? (_jsx("a", { href: safeHref, children: children })) : (_jsx("span", { children: children }));
+            },
+        }, children: safeText }));
+});
+function AgentMarkdown({ text }) {
+    const { completedBlocks, tail } = useMemo(() => splitMarkdownBlocks(text), [text]);
+    const blocks = useMemo(() => (tail ? [...completedBlocks, tail] : completedBlocks), [completedBlocks, tail]);
+    return (_jsx("div", { className: "agentkit-markdown", "data-format": "markdown", children: blocks.map((block, index) => (_jsx(AgentMarkdownBlock, { text: block }, index))) }));
+}
+/** Keeps participant avatars on image-capable, non-executable URL schemes. */
+export function safeAgentImageSrc(src) {
+    if (!src)
+        return undefined;
+    try {
+        const parsed = new URL(src, "https://agentkit.invalid");
+        return allowedAgentImageProtocols.has(parsed.protocol) ? src : undefined;
+    }
+    catch (error) {
+        if (error instanceof TypeError)
+            return undefined;
+        throw error;
+    }
+}
+function createInvocationId(widgetId, actionId) {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+        return `${widgetId}:${actionId}:${crypto.randomUUID()}`;
+    }
+    return `${widgetId}:${actionId}:${Date.now().toString(36)}`;
+}
+function activityIcon(kind) {
+    const props = { "aria-hidden": true, className: "agentkit-icon" };
+    switch (kind) {
+        case "status":
+            return _jsx(IconActivity, { ...props });
+        case "reasoning":
+        case "model":
+            return _jsx(IconBrain, { ...props });
+        case "search":
+            return _jsx(IconSearch, { ...props });
+        case "read":
+            return _jsx(IconBook2, { ...props });
+        case "write":
+        case "edit":
+            return _jsx(IconCode, { ...props });
+        case "command":
+            return _jsx(IconTerminal2, { ...props });
+        case "check":
+            return _jsx(IconCircleCheck, { ...props });
+        case "mcp":
+        case "connection":
+            return _jsx(IconPlugConnected, { ...props });
+        case "navigation":
+            return _jsx(IconGitBranch, { ...props });
+        case "delegation":
+            return _jsx(IconArrowFork, { ...props });
+        case "approval":
+            return _jsx(IconChecklist, { ...props });
+        default:
+            return _jsx(IconTool, { ...props });
+    }
+}
+function interactionIcon(kind) {
+    const props = { "aria-hidden": true, className: "agentkit-icon" };
+    switch (kind) {
+        case "started":
+        case "resumed":
+            return _jsx(IconPlayerPlay, { ...props });
+        case "messaged":
+            return _jsx(IconMessage, { ...props });
+        case "delegated":
+            return _jsx(IconArrowFork, { ...props });
+        case "paused":
+            return _jsx(IconPlayerPause, { ...props });
+        case "completed":
+            return _jsx(IconCircleCheck, { ...props });
+        case "failed":
+            return _jsx(IconAlertCircle, { ...props });
+        case "closed":
+            return _jsx(IconX, { ...props });
+        default:
+            return _jsx(IconActivity, { ...props });
+    }
+}
+export function AgentObjectReferenceView({ value: object, }) {
+    const { onOpenObject } = useAgentKit();
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: "agentkit-object-label", children: object.label }), typeof object.metadata?.added === "number" ? (_jsxs("span", { className: "agentkit-diff-added", children: ["+", object.metadata.added] })) : null, typeof object.metadata?.removed === "number" ? (_jsxs("span", { className: "agentkit-diff-removed", children: ["\u2212", object.metadata.removed] })) : null] }));
+    return onOpenObject ? (_jsx("button", { type: "button", className: "agentkit-object", onClick: () => onOpenObject(object), children: content })) : (_jsx("span", { className: "agentkit-object", children: content }));
+}
+export function AgentParticipantView({ value: agent, }) {
+    return (_jsx(AgentIdentityChip, { id: agent.id, name: agent.name, kind: agent.kind, status: agent.status }));
+}
+function AgentIdentityChip({ id, name, kind, status, }) {
+    return (_jsx("span", { className: "agentkit-agent", "data-agent-id": id, "data-agent-kind": kind, "data-status": status, children: _jsx("span", { className: "agentkit-agent-name", children: name }) }));
+}
+function defaultInteractionLabel(interaction, labels) {
+    if (interaction.label)
+        return interaction.label;
+    switch (interaction.kind) {
+        case "started":
+            return labels.agentStarted;
+        case "resumed":
+            return labels.agentResumed;
+        case "messaged":
+            return labels.agentMessaged;
+        case "delegated":
+            return labels.agentDelegated;
+        case "paused":
+            return labels.agentPaused;
+        case "completed":
+            return labels.agentCompleted;
+        case "failed":
+            return labels.agentFailed;
+        case "closed":
+            return labels.agentClosed;
+        default:
+            return interaction.kind;
+    }
+}
+export function AgentInteractionItem({ value: interaction, threadId, }) {
+    const { slots, registry, labels } = useAgentKit();
+    const thread = useAgentThread(threadId);
+    const agent = thread.agents[interaction.agentId];
+    const target = interaction.targetAgentId
+        ? thread.agents[interaction.targetAgentId]
+        : undefined;
+    const AgentRenderer = agent
+        ? (registry.agents?.[agent.kind ?? ""] ??
+            slots.agent ??
+            AgentParticipantView)
+        : undefined;
+    const TargetRenderer = target
+        ? (registry.agents?.[target.kind ?? ""] ??
+            slots.agent ??
+            AgentParticipantView)
+        : undefined;
+    const ObjectRenderer = slots.object ?? AgentObjectReferenceView;
+    const object = interaction.object ?? interaction.source;
+    return (_jsxs("div", { className: "agentkit-agent-interaction", "data-kind": interaction.kind, "data-scope": interaction.scope, children: [interactionIcon(interaction.kind), agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : (_jsx(AgentIdentityChip, { id: interaction.agentId, name: interaction.agentId })), _jsx("span", { className: "agentkit-agent-interaction-label", children: defaultInteractionLabel(interaction, labels) }), target && TargetRenderer ? (_jsx(TargetRenderer, { value: target, threadId: threadId })) : interaction.targetAgentId ? (_jsx(AgentIdentityChip, { id: interaction.targetAgentId, name: interaction.targetAgentId })) : null, object ? (_jsx(ObjectRenderer, { value: object, threadId: threadId })) : interaction.detail ? (_jsx("span", { className: "agentkit-agent-interaction-detail", children: interaction.detail })) : null] }));
+}
+export function AgentActivityItem({ value: activity, threadId, }) {
+    const { slots, registry, labels } = useAgentKit();
+    const thread = useAgentThread();
+    const [open, setOpen] = useState(false);
+    const expandable = Boolean(activity.summary?.length);
+    const agent = activity.agentId ? thread.agents[activity.agentId] : undefined;
+    const AgentRenderer = agent
+        ? (registry.agents?.[agent.kind ?? ""] ??
+            slots.agent ??
+            AgentParticipantView)
+        : undefined;
+    const ObjectRenderer = slots.object ?? AgentObjectReferenceView;
+    return (_jsxs("div", { className: "agentkit-activity-item", "data-activity-kind": activity.kind, "data-status": activity.status, children: [_jsxs("div", { className: "agentkit-activity-row", children: [activityIcon(activity.kind), agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : activity.agentId ? (_jsx(AgentIdentityChip, { id: activity.agentId, name: activity.agentId })) : null, _jsx("span", { className: "agentkit-activity-label", children: activity.label }), activity.object ? (_jsx(ObjectRenderer, { value: activity.object, threadId: threadId })) : null, !activity.object && activity.source ? (_jsx(ObjectRenderer, { value: activity.source, threadId: threadId })) : !activity.object && activity.detail ? (_jsx("span", { className: "agentkit-activity-detail", children: activity.detail })) : null, expandable ? (_jsx("button", { type: "button", className: "agentkit-activity-disclosure", "aria-expanded": open, "aria-label": open ? labels.collapseActivity : labels.expandActivity, onClick: () => setOpen((current) => !current), children: _jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-disclosure-icon", "data-open": open ? "true" : "false" }) })) : null] }), open ? (_jsx("div", { className: "agentkit-activity-summary", children: activity.summary?.map((part, index) => (_jsx(AgentMessagePartView, { value: part, threadId: threadId }, `${activity.id}-summary-${index}`))) })) : null] }));
+}
+function objectReferenceIdentity(object) {
+    return object
+        ? [object.kind, object.id, object.uri ?? ""].join("\u0000")
+        : "";
+}
+function activityClusterIdentity(activity) {
+    return [
+        activity.kind,
+        activity.label.trim(),
+        activity.status,
+        activity.agentId ?? "",
+        objectReferenceIdentity(activity.object),
+        objectReferenceIdentity(activity.source),
+    ].join("\u0001");
+}
+function RepeatedActivityCluster({ activities, threadId, }) {
+    const { slots, registry } = useAgentKit();
+    const thread = useAgentThread();
+    const [open, setOpen] = useState(false);
+    const activity = activities[0];
+    if (!activity)
+        return null;
+    const agent = activity.agentId ? thread.agents[activity.agentId] : undefined;
+    const AgentRenderer = agent
+        ? (registry.agents?.[agent.kind ?? ""] ??
+            slots.agent ??
+            AgentParticipantView)
+        : undefined;
+    const ObjectRenderer = slots.object ?? AgentObjectReferenceView;
+    return (_jsxs("details", { className: "agentkit-activity-cluster", "data-activity-kind": activity.kind, open: open, children: [_jsxs("summary", { className: "agentkit-activity-row", onClick: (event) => {
+                    event.preventDefault();
+                    setOpen((current) => !current);
+                }, children: [activityIcon(activity.kind), agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : activity.agentId ? (_jsx(AgentIdentityChip, { id: activity.agentId, name: activity.agentId })) : null, _jsx("span", { className: "agentkit-activity-label", children: activity.label }), activity.object ? (_jsx(ObjectRenderer, { value: activity.object, threadId: threadId })) : null, !activity.object && activity.source ? (_jsx(ObjectRenderer, { value: activity.source, threadId: threadId })) : null, _jsxs("span", { className: "agentkit-activity-cluster-count", children: ["\u00D7", activities.length] }), _jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-disclosure-icon", "data-open": open ? "true" : "false" })] }), _jsx("div", { className: "agentkit-activity-cluster-items", children: activities.map((item) => (_jsx(AgentActivityItem, { value: item, threadId: threadId }, item.id))) })] }));
+}
+function toolToActivity(tool) {
+    return {
+        id: tool.id,
+        kind: inferAgentActivityKind(tool.name),
+        label: tool.name,
+        status: tool.status === "completed"
+            ? "completed"
+            : tool.status === "running"
+                ? "running"
+                : tool.status,
+        detail: typeof tool.output === "string"
+            ? tool.output
+            : typeof tool.input === "string"
+                ? tool.input
+                : undefined,
+    };
+}
+function sequenceInRange(sequence, { afterSequence, throughSequence }) {
+    return ((afterSequence === undefined || sequence > afterSequence) &&
+        (throughSequence === undefined || sequence <= throughSequence));
+}
+export function formatAgentKitDuration(ms, units = {}) {
+    const hour = units.hour ?? "h";
+    const minute = units.minute ?? "m";
+    const second = units.second ?? "s";
+    const totalSeconds = Math.max(0, Math.round(ms / 1_000));
+    if (totalSeconds < 60)
+        return `${Math.max(1, totalSeconds)}${second}`;
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    if (minutes < 60) {
+        return seconds === 0
+            ? `${minutes}${minute}`
+            : `${minutes}${minute} ${seconds}${second}`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    return remainingMinutes === 0
+        ? `${hours}${hour}`
+        : `${hours}${hour} ${remainingMinutes}${minute}`;
+}
+function workEventIdentity(event) {
+    if (event.type === "activity.started" ||
+        event.type === "activity.updated" ||
+        event.type === "activity.completed") {
+        return `activity:${event.activity.id}`;
+    }
+    if (event.type === "tool.started" || event.type === "tool.updated") {
+        return `tool:${event.toolCall.id}`;
+    }
+    if (event.type === "tool.delta")
+        return `tool:${event.toolCallId}`;
+    if (event.type === "agent.interaction") {
+        return `interaction:${event.interaction.id}`;
+    }
+    if (event.type === "task.created" ||
+        event.type === "task.updated" ||
+        event.type === "task.completed") {
+        return `task:${event.task.id}`;
+    }
+    return undefined;
+}
+function firstWorkEvents(events) {
+    const seen = new Set();
+    return events.filter((event) => {
+        const identity = workEventIdentity(event);
+        if (!identity)
+            return false;
+        const scopedIdentity = `${event.runId}:${identity}`;
+        if (seen.has(scopedIdentity))
+            return false;
+        seen.add(scopedIdentity);
+        return true;
+    });
+}
+function messageEventHasVisibleAssistantOutput(event, assistantMessageIds) {
+    if (event.type === "message.delta") {
+        return (event.text.trim().length > 0 && assistantMessageIds.has(event.messageId));
+    }
+    if (event.type !== "message.created" && event.type !== "message.completed") {
+        return false;
+    }
+    return (event.message.role === "assistant" &&
+        event.message.parts.some((part) => {
+            if (part.type === "reasoning")
+                return false;
+            if (part.type === "text")
+                return part.text.trim().length > 0;
+            return true;
+        }));
+}
+export function AgentActivityGroup({ runId, afterSequence, throughSequence, excludeAgentActivities = false, }) {
+    const { threadId, slots, registry, labels } = useAgentKit();
+    const thread = useAgentThread();
+    const runEvents = runId
+        ? thread.events.filter((event) => event.runId === runId)
+        : thread.events;
+    const activityMap = new Map();
+    const toolMap = new Map();
+    const firstSequence = new Map();
+    const itemOrder = [];
+    const seenItems = new Set();
+    const remember = (id, sequence) => {
+        if (seenItems.has(id))
+            return;
+        seenItems.add(id);
+        itemOrder.push(id);
+        firstSequence.set(id, sequence);
+    };
+    for (const event of runEvents) {
+        if (event.type === "activity.started" ||
+            event.type === "activity.updated" ||
+            event.type === "activity.completed") {
+            if (excludeAgentActivities && event.activity.agentId)
+                continue;
+            activityMap.set(event.activity.id, event.activity);
+            remember(event.activity.id, event.sequence);
+        }
+        if (event.type === "tool.started" || event.type === "tool.updated") {
+            toolMap.set(event.toolCall.id, event.toolCall);
+            remember(event.toolCall.id, event.sequence);
+        }
+        if (event.type === "tool.delta") {
+            const tool = thread.tools[event.toolCallId];
+            if (tool)
+                toolMap.set(tool.id, tool);
+            remember(event.toolCallId, event.sequence);
+        }
+    }
+    const items = itemOrder.flatMap((id) => {
+        const sequence = firstSequence.get(id);
+        if (sequence === undefined ||
+            !sequenceInRange(sequence, { afterSequence, throughSequence })) {
+            return [];
+        }
+        const activity = activityMap.get(id);
+        if (activity)
+            return [activity];
+        const tool = toolMap.get(id);
+        return tool ? [toolToActivity(tool)] : [];
+    });
+    const running = items.some((item) => item.status === "running");
+    const run = runId ? thread.runs[runId] : undefined;
+    const segmentStartedEvent = firstWorkEvents(runEvents).find((event) => sequenceInRange(event.sequence, { afterSequence, throughSequence }));
+    const startedAt = afterSequence === undefined && run?.startedAt
+        ? Date.parse(run.startedAt)
+        : segmentStartedEvent
+            ? Date.parse(segmentStartedEvent.occurredAt)
+            : Number.NaN;
+    const responseStartedEvent = throughSequence === undefined
+        ? undefined
+        : runEvents.find((event) => event.sequence === throughSequence);
+    const completedAt = responseStartedEvent
+        ? Date.parse(responseStartedEvent.occurredAt)
+        : run?.completedAt
+            ? Date.parse(run.completedAt)
+            : Number.NaN;
+    const durationMs = Number.isFinite(startedAt) && Number.isFinite(completedAt)
+        ? Math.max(0, completedAt - startedAt)
+        : undefined;
+    const activelyWorking = throughSequence === undefined &&
+        run !== undefined &&
+        run.status === "running";
+    const visiblyRunning = throughSequence === undefined && running;
+    const [elapsedAt, setElapsedAt] = useState();
+    useEffect(() => {
+        if (!activelyWorking || !Number.isFinite(startedAt))
+            return;
+        const update = () => setElapsedAt(Date.now());
+        update();
+        const interval = globalThis.setInterval(update, 1_000);
+        return () => globalThis.clearInterval(interval);
+    }, [activelyWorking, startedAt]);
+    const activeDurationMs = activelyWorking && elapsedAt !== undefined && Number.isFinite(startedAt)
+        ? Math.max(0, elapsedAt - startedAt)
+        : undefined;
+    const completedRunSummary = throughSequence !== undefined ||
+        (afterSequence === undefined &&
+            !running &&
+            run !== undefined &&
+            ["completed", "failed", "cancelled"].includes(run.status));
+    const [open, setOpen] = useState(visiblyRunning);
+    const previousRunningRef = useRef(visiblyRunning);
+    useEffect(() => {
+        if (previousRunningRef.current === visiblyRunning)
+            return;
+        previousRunningRef.current = visiblyRunning;
+        setOpen(visiblyRunning);
+    }, [visiblyRunning]);
+    if (items.length === 0)
+        return null;
+    const displayGroups = [];
+    for (const activity of items) {
+        const sourceTool = toolMap.get(activity.id);
+        const hasCustomToolRenderer = Boolean(sourceTool &&
+            !activityMap.has(activity.id) &&
+            (registry.tools?.[sourceTool.name] ?? slots.tool));
+        const hasCustomActivityRenderer = Boolean(registry.activities?.[activity.kind] ?? slots.activity);
+        const previous = displayGroups.at(-1);
+        if (!hasCustomToolRenderer &&
+            !hasCustomActivityRenderer &&
+            previous &&
+            activityClusterIdentity(previous[0]) ===
+                activityClusterIdentity(activity)) {
+            previous.push(activity);
+        }
+        else {
+            displayGroups.push([activity]);
+        }
+    }
+    const labelsSummary = Array.from(new Set(items.map((item) => item.label.trim()).filter(Boolean)));
+    const remaining = Math.max(0, labelsSummary.length - 2);
+    const summary = `${labelsSummary.slice(0, 2).join(", ")}${remaining ? ` +${remaining}` : ""}`;
+    const formatDuration = (ms) => formatAgentKitDuration(ms, {
+        hour: labels.durationHourShort,
+        minute: labels.durationMinuteShort,
+        second: labels.durationSecondShort,
+    });
+    const summaryLabel = activelyWorking
+        ? activeDurationMs !== undefined && activeDurationMs >= 1_000
+            ? labels.workingFor.replace("{{duration}}", formatDuration(activeDurationMs))
+            : labels.working
+        : completedRunSummary
+            ? durationMs !== undefined && durationMs >= 1_000
+                ? labels.workedFor.replace("{{duration}}", formatDuration(durationMs))
+                : labels.worked
+            : summary || labels.activities;
+    return (_jsxs("details", { className: "agentkit-activities", "data-running": visiblyRunning ? "true" : undefined, open: open, children: [_jsxs("summary", { className: "agentkit-activities-summary", onClick: (event) => {
+                    event.preventDefault();
+                    setOpen((current) => !current);
+                }, children: [_jsx(IconActivity, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { className: "agentkit-activities-label", children: summaryLabel }), !completedRunSummary ? (_jsx("span", { className: "agentkit-activities-count", children: items.length })) : null, _jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-summary-chevron" })] }), _jsx("div", { className: "agentkit-activities-list", children: displayGroups.map((activities) => {
+                    const activity = activities[0];
+                    if (activities.length > 1) {
+                        return (_jsx(RepeatedActivityCluster, { activities: activities, threadId: threadId }, `cluster:${activity.id}`));
+                    }
+                    const sourceTool = toolMap.get(activity.id);
+                    const ToolRenderer = sourceTool
+                        ? (registry.tools?.[sourceTool.name] ?? slots.tool)
+                        : undefined;
+                    if (sourceTool && ToolRenderer && !activityMap.has(activity.id)) {
+                        return (_jsx(ToolRenderer, { value: sourceTool, threadId: threadId }, sourceTool.id));
+                    }
+                    const Renderer = registry.activities?.[activity.kind] ??
+                        slots.activity ??
+                        AgentActivityItem;
+                    return (_jsx(Renderer, { value: activity, threadId: threadId }, activity.id));
+                }) })] }));
+}
+export function AgentCollaborationFeed({ runId, afterSequence, throughSequence, }) {
+    const { threadId, slots, registry, labels } = useAgentKit();
+    const thread = useAgentThread();
+    const entries = new Map();
+    const firstSequence = new Map();
+    const order = [];
+    const remember = (key, sequence, entry) => {
+        if (!entries.has(key)) {
+            order.push(key);
+            firstSequence.set(key, sequence);
+        }
+        entries.set(key, entry);
+    };
+    for (const event of thread.events) {
+        if (runId && event.runId !== runId)
+            continue;
+        if (event.type === "agent.interaction") {
+            remember(`interaction:${event.interaction.id}`, event.sequence, {
+                type: "interaction",
+                value: event.interaction,
+            });
+        }
+        if ((event.type === "activity.started" ||
+            event.type === "activity.updated" ||
+            event.type === "activity.completed") &&
+            event.activity.agentId) {
+            remember(`activity:${event.activity.id}`, event.sequence, {
+                type: "activity",
+                value: event.activity,
+            });
+        }
+    }
+    const selectedOrder = order.filter((key) => {
+        const sequence = firstSequence.get(key);
+        return (sequence !== undefined &&
+            sequenceInRange(sequence, { afterSequence, throughSequence }));
+    });
+    if (selectedOrder.length === 0)
+        return null;
+    return (_jsx("section", { className: "agentkit-agent-feed", "aria-label": labels.agents, "data-agent-collaboration-feed": "true", children: selectedOrder.map((key) => {
+            const entry = entries.get(key);
+            if (!entry)
+                return null;
+            if (entry.type === "interaction") {
+                const Renderer = registry.agentInteractions?.[entry.value.kind] ??
+                    slots.agentInteraction ??
+                    AgentInteractionItem;
+                return _jsx(Renderer, { value: entry.value, threadId: threadId }, key);
+            }
+            const Renderer = registry.activities?.[entry.value.kind] ??
+                slots.activity ??
+                AgentActivityItem;
+            return _jsx(Renderer, { value: entry.value, threadId: threadId }, key);
+        }) }));
+}
+export function AgentTaskItem({ value: task, threadId, }) {
+    const { slots, registry } = useAgentKit();
+    const thread = useAgentThread();
+    const ObjectRenderer = slots.object ?? AgentObjectReferenceView;
+    const agent = task.assignedAgentId
+        ? thread.agents[task.assignedAgentId]
+        : undefined;
+    const AgentRenderer = agent
+        ? (registry.agents?.[agent.kind ?? ""] ??
+            slots.agent ??
+            AgentParticipantView)
+        : undefined;
+    const progress = task.progress
+        ? `${task.progress.completed}/${task.progress.total}`
+        : undefined;
+    return (_jsxs("div", { className: "agentkit-task-row", "data-status": task.status, children: [_jsx(IconChecklist, { "aria-hidden": "true", className: "agentkit-icon" }), agent && AgentRenderer ? (_jsx(AgentRenderer, { value: agent, threadId: threadId })) : task.assignedAgentId ? (_jsx(AgentIdentityChip, { id: task.assignedAgentId, name: task.assignedAgentId })) : null, _jsx("span", { className: "agentkit-task-title", children: task.title }), task.object ? (_jsx(ObjectRenderer, { value: task.object, threadId: threadId })) : null, !task.object && task.source ? (_jsx(ObjectRenderer, { value: task.source, threadId: threadId })) : !task.object && task.detail ? (_jsx("span", { className: "agentkit-task-detail", children: task.detail })) : null, progress ? (_jsx("span", { className: "agentkit-task-progress", children: progress })) : null] }));
+}
+export function AgentTaskGroup({ runId, afterSequence, throughSequence, }) {
+    const { threadId, slots, registry, labels } = useAgentKit();
+    const thread = useAgentThread();
+    const ids = [];
+    const tasks = new Map();
+    const firstSequence = new Map();
+    for (const event of thread.events) {
+        if (runId && event.runId !== runId)
+            continue;
+        if (event.type !== "task.created" &&
+            event.type !== "task.updated" &&
+            event.type !== "task.completed") {
+            continue;
+        }
+        if (!tasks.has(event.task.id)) {
+            ids.push(event.task.id);
+            firstSequence.set(event.task.id, event.sequence);
+        }
+        tasks.set(event.task.id, event.task);
+    }
+    const selectedIds = ids.filter((id) => {
+        const sequence = firstSequence.get(id);
+        return (sequence !== undefined &&
+            sequenceInRange(sequence, { afterSequence, throughSequence }));
+    });
+    if (selectedIds.length === 0)
+        return null;
+    return (_jsxs("details", { className: "agentkit-tasks", children: [_jsxs("summary", { className: "agentkit-tasks-summary", children: [_jsx(IconChecklist, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: labels.tasks }), _jsx("span", { className: "agentkit-tasks-count", children: selectedIds.length }), _jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-summary-chevron" })] }), _jsx("div", { className: "agentkit-tasks-list", children: selectedIds.map((id) => {
+                    const task = tasks.get(id);
+                    if (!task)
+                        return null;
+                    const Renderer = registry.tasks?.[task.kind ?? task.status] ??
+                        slots.task ??
+                        AgentTaskItem;
+                    return _jsx(Renderer, { value: task, threadId: threadId }, id);
+                }) })] }));
+}
+export function AgentApprovalPrompt({ request, runId, }) {
+    const { labels, requestComposerFocus, threadId } = useAgentKit();
+    const control = useAgentKitControl();
+    const [selected, setSelected] = useState([]);
+    const [input, setInput] = useState("");
+    const [otherSelected, setOtherSelected] = useState(false);
+    const [other, setOther] = useState("");
+    const resolution = useAgentKitMutation((response) => control.resolveApproval(runId, request.id, response));
+    const options = request.options ?? [];
+    const choice = request.kind === "choice" || options.length > 0;
+    const allowOther = choice && request.allowOther !== false;
+    const simpleApproval = !choice && options.length === 0 && !request.input;
+    const toggle = (id) => {
+        if (!request.allowMultiple)
+            setOtherSelected(false);
+        setSelected((current) => request.allowMultiple
+            ? current.includes(id)
+                ? current.filter((item) => item !== id)
+                : [...current, id]
+            : [id]);
+    };
+    const toggleOther = () => {
+        setOtherSelected((current) => !current);
+        if (!request.allowMultiple)
+            setSelected([]);
+    };
+    const resolve = (response) => void resolution
+        .execute(response)
+        .catch(() => undefined)
+        .finally(() => requestComposerFocus(threadId));
+    return (_jsxs(Surface, { as: "section", className: "agentkit-approval", elevation: "low", padding: "none", "aria-labelledby": `${request.id}-title`, children: [_jsxs("div", { className: "agentkit-approval-copy", children: [_jsx("h3", { id: `${request.id}-title`, children: request.title }), request.description ? _jsx("p", { children: request.description }) : null] }), options.length || allowOther ? (_jsxs("div", { className: "agentkit-approval-options", children: [options.map((option) => (_jsxs("button", { type: "button", "aria-pressed": selected.includes(option.id), "data-kind": option.kind, disabled: resolution.pending, onClick: () => toggle(option.id), children: [_jsx("span", { children: option.label }), option.description ? _jsx("small", { children: option.description }) : null] }, option.id))), allowOther ? (_jsx("button", { type: "button", "aria-pressed": otherSelected, "data-kind": "other", disabled: resolution.pending, onClick: toggleOther, children: _jsx("span", { children: labels.approvalOther }) })) : null] })) : null, allowOther && otherSelected ? (_jsx(TextField, { autoFocus: true, className: "agentkit-approval-input", label: labels.approvalOther, disabled: resolution.pending, placeholder: labels.approvalOtherPlaceholder, value: other, onChange: setOther })) : null, request.input ? (_jsx(TextField, { className: "agentkit-approval-input", label: request.input.label, type: request.input.type === "url" ? "url" : "text", inputMode: request.input.type === "number" ? "decimal" : undefined, required: request.input.required, disabled: resolution.pending, placeholder: request.input.placeholder, value: input, onChange: setInput })) : null, _jsx("div", { className: "agentkit-approval-footer", children: simpleApproval ? (_jsxs(_Fragment, { children: [_jsx(ActionButton, { emphasis: "outline", size: "compact", disabled: resolution.pending, onPress: () => resolve({ decision: "deny", optionIds: ["deny"] }), children: labels.approvalDeny }), _jsx(ActionButton, { className: "agentkit-primary-button", intent: "primary", size: "compact", disabled: resolution.pending, pending: resolution.pending, onPress: () => resolve({ decision: "approve", optionIds: ["approve"] }), children: labels.approvalApprove })] })) : (_jsx(ActionButton, { className: "agentkit-primary-button", intent: "primary", size: "compact", disabled: (selected.length === 0 && !otherSelected && !request.input) ||
+                        (otherSelected && other.trim().length === 0) ||
+                        (request.input?.required && input.trim().length === 0) ||
+                        resolution.pending, pending: resolution.pending, onPress: () => resolve({
+                        decision: "approve",
+                        optionIds: selected.length ? selected : undefined,
+                        other: otherSelected ? other.trim() : undefined,
+                        input: request.input
+                            ? { [request.input.id]: input }
+                            : undefined,
+                    }), children: labels.approvalSubmit })) }), resolution.error ? (_jsx("p", { className: "agentkit-command-error", role: "alert", children: resolution.error.message })) : null] }));
+}
+export function AgentConnectionRequestCard({ request, runId, }) {
+    const { labels, onConnectionRequest, requestComposerFocus, threadId } = useAgentKit();
+    const control = useAgentKitControl();
+    const resolution = useAgentKitMutation(async (decision) => {
+        const response = decision === "decline"
+            ? { status: "declined" }
+            : await onConnectionRequest?.(request);
+        if (!response) {
+            throw new Error(labels.connectionFailed);
+        }
+        await control.resolveConnectionRequest(runId, request.id, response);
+        return response;
+    });
+    const resolve = (decision) => void resolution
+        .execute(decision)
+        .catch(() => undefined)
+        .finally(() => requestComposerFocus(threadId));
+    const terminal = request.status === "connected" ||
+        request.status === "declined" ||
+        request.status === "failed";
+    const title = request.status === "connected"
+        ? labels.connectionConnected
+        : request.status === "failed"
+            ? labels.connectionFailed
+            : request.reason === "admin_required"
+                ? labels.connectionAdminRequired
+                : `${labels.connectionConnect} ${request.provider}`;
+    return (_jsxs(Surface, { as: "section", className: "agentkit-connection-request", elevation: "low", padding: "none", "data-status": request.status, "aria-labelledby": `${request.id}-title`, children: [_jsxs("div", { className: "agentkit-connection-request-copy", children: [_jsx(IconPlugConnected, { "aria-hidden": "true", className: "agentkit-icon" }), _jsxs("div", { children: [_jsx("h3", { id: `${request.id}-title`, children: title }), request.detail ? _jsx("p", { children: request.detail }) : null] })] }), !terminal && request.reason !== "admin_required" ? (_jsxs("div", { className: "agentkit-connection-request-actions", children: [_jsx(ActionButton, { emphasis: "outline", size: "compact", disabled: resolution.pending, onPress: () => resolve("decline"), children: labels.connectionNotNow }), _jsx(ActionButton, { className: "agentkit-primary-button", intent: "primary", size: "compact", disabled: resolution.pending || !onConnectionRequest, pending: resolution.pending, onPress: () => resolve("connect"), children: resolution.pending
+                            ? labels.connectionConnecting
+                            : labels.connectionConnect })] })) : request.status === "failed" && onConnectionRequest ? (_jsx("div", { className: "agentkit-connection-request-actions", children: _jsx(ActionButton, { emphasis: "outline", size: "compact", disabled: resolution.pending, pending: resolution.pending, onPress: () => resolve("connect"), children: labels.connectionRetry }) })) : null, resolution.error ? (_jsxs("div", { className: "agentkit-command-error", role: "alert", children: [_jsx(IconAlertCircle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: resolution.error.message })] })) : null] }));
+}
+function AgentWidgetActionButton({ widget, action, threadId, }) {
+    const control = useAgentKitControl(threadId);
+    const invocation = useAgentKitMutation(() => control.invokeAction({
+        id: createInvocationId(widget.id, action.id),
+        action: action.action ?? "",
+        threadId,
+        widgetId: widget.id,
+        itemId: action.id,
+        payload: action.payload,
+    }), threadId);
+    return (_jsxs("div", { className: "agentkit-widget-action", children: [_jsx(ActionButton, { className: "agentkit-widget-action-button", intent: action.kind === "primary"
+                    ? "primary"
+                    : action.kind === "danger"
+                        ? "danger"
+                        : "neutral", emphasis: action.kind === "primary" ? "solid" : "outline", size: "compact", disabled: action.disabled || !action.action || invocation.pending, pending: invocation.pending, onPress: () => void invocation.execute().catch(() => undefined), children: action.label }), invocation.error ? (_jsx("span", { className: "agentkit-command-error", role: "alert", children: invocation.error.message })) : null] }));
+}
+export function AgentWidgetView({ value: widget, threadId, }) {
+    if (!widget.title &&
+        typeof widget.data !== "string" &&
+        !widget.actions?.length) {
+        return null;
+    }
+    const titleId = `${widget.id}-title`;
+    return (_jsx("section", { className: "agentkit-widget-shell", "data-widget-kind": widget.kind, "aria-labelledby": widget.title ? titleId : undefined, children: _jsxs(Surface, { className: "agentkit-widget", elevation: "low", padding: "none", children: [widget.title ? _jsx("h3", { id: titleId, children: widget.title }) : null, typeof widget.data === "string" ? _jsx("p", { children: widget.data }) : null, widget.actions?.length ? (_jsx("div", { className: "agentkit-widget-actions", children: widget.actions.map((action) => (_jsx(AgentWidgetActionButton, { widget: widget, action: action, threadId: threadId }, action.id))) })) : null] }) }));
+}
+export function AgentMessagePartView({ value: part, threadId, active = false, resetKey = `${threadId}:${part.type}`, }) {
+    const { labels, slots, registry } = useAgentKit();
+    const RegisteredRenderer = registry.messageParts?.[part.type];
+    if (RegisteredRenderer) {
+        return (_jsx(RegisteredRenderer, { value: part, threadId: threadId, active: active, resetKey: resetKey }));
+    }
+    switch (part.type) {
+        case "text": {
+            const Renderer = slots.text;
+            return Renderer ? (_jsx(Renderer, { value: part, threadId: threadId, active: active, resetKey: resetKey })) : part.format === "markdown" ? (_jsx(AgentStreamingText, { text: part.text, active: active, resetKey: resetKey, children: (visibleText) => _jsx(AgentMarkdown, { text: visibleText }) })) : (_jsx("p", { "data-format": "plain", children: _jsx(AgentStreamingText, { text: part.text, active: active, resetKey: resetKey }) }));
+        }
+        case "reasoning": {
+            const Renderer = slots.reasoning;
+            return Renderer ? (_jsx(Renderer, { value: part, threadId: threadId })) : part.visibility === "hidden" ? null : (_jsxs("details", { className: "agentkit-reasoning", "data-active": active ? "true" : undefined, children: [_jsxs("summary", { className: "agentkit-reasoning-summary", children: [activityIcon("reasoning"), _jsx("span", { className: "agentkit-reasoning-label", children: part.label ?? labels.reasoning }), _jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-reasoning-chevron" })] }), _jsx("div", { className: "agentkit-reasoning-content", children: _jsx("p", { children: _jsx(AgentStreamingText, { text: part.text, active: active, resetKey: resetKey }) }) })] }));
+        }
+        case "citation": {
+            const Renderer = slots.citation;
+            if (Renderer)
+                return _jsx(Renderer, { value: part, threadId: threadId });
+            const href = safeAgentHref(part.url);
+            return href ? _jsx("a", { href: href, children: part.title }) : _jsx("span", { children: part.title });
+        }
+        case "annotation": {
+            const Renderer = slots.annotation;
+            if (Renderer)
+                return _jsx(Renderer, { value: part, threadId: threadId });
+            const href = safeAgentHref(part.annotation.url);
+            return href ? (_jsx("a", { href: href, children: part.annotation.label })) : (_jsx("span", { children: part.annotation.label }));
+        }
+        case "file": {
+            const Renderer = slots.file;
+            if (Renderer)
+                return _jsx(Renderer, { value: part, threadId: threadId });
+            const href = safeAgentHref(part.url);
+            return href ? (_jsxs("a", { className: "agentkit-file", href: href, download: part.name, children: [_jsx(IconFile, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: part.name })] })) : (_jsxs("span", { className: "agentkit-file", children: [_jsx(IconFile, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: part.name })] }));
+        }
+        case "widget": {
+            const Renderer = registry.widgets?.[part.widget.kind] ?? slots.widget ?? AgentWidgetView;
+            return _jsx(Renderer, { value: part.widget, threadId: threadId });
+        }
+        case "data": {
+            const Renderer = slots.data;
+            return Renderer ? _jsx(Renderer, { value: part, threadId: threadId }) : null;
+        }
+        default:
+            return null;
+    }
+}
+export function AgentMessageActions({ value: message, threadId, }) {
+    const { labels, onThreadForked } = useAgentKit();
+    const feedbackCapability = useAgentCapability("feedback");
+    const forkingCapability = useAgentCapability("threadForking");
+    const control = useAgentKitControl(threadId);
+    const text = message.parts
+        .filter((part) => part.type === "text")
+        .map((part) => part.text)
+        .join("\n");
+    const [copied, setCopied] = useState(false);
+    const [feedback, setFeedback] = useState(null);
+    const copiedTimer = useRef(null);
+    useEffect(() => () => {
+        if (copiedTimer.current)
+            clearTimeout(copiedTimer.current);
+    }, [message.id]);
+    const copyAction = useAgentKitMutation(async () => {
+        if (!(await writeClipboardText(text))) {
+            throw new Error(labels.copyUnavailable);
+        }
+        setCopied(true);
+        if (copiedTimer.current)
+            clearTimeout(copiedTimer.current);
+        copiedTimer.current = setTimeout(() => setCopied(false), 1_400);
+    }, `${threadId}:${message.id}:copy`);
+    const feedbackAction = useAgentKitMutation((value) => control.submitFeedback(message.id, value), `${threadId}:${message.id}:feedback`);
+    const forkAction = useAgentKitMutation(async () => {
+        const thread = await control.fork(message.id);
+        onThreadForked?.(thread);
+    }, `${threadId}:${message.id}:fork`);
+    const updateFeedback = async (value) => {
+        const previous = feedback;
+        if (previous === value)
+            return;
+        setFeedback(value);
+        try {
+            await feedbackAction.execute(value);
+        }
+        catch {
+            setFeedback(previous);
+        }
+    };
+    const actionError = copyAction.error ?? feedbackAction.error ?? forkAction.error;
+    return (_jsxs("div", { className: "agentkit-message-actions", children: [_jsx(IconButton, { label: copied ? labels.copied : labels.copy, icon: copied ? (_jsx(IconCircleCheck, { "aria-hidden": "true" })) : (_jsx(IconCopy, { "aria-hidden": "true" })), size: "compact", pending: copyAction.pending, onPress: () => void copyAction.execute().catch(() => undefined) }), message.role === "assistant" && feedbackCapability.visible ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: labels.positiveFeedback, icon: _jsx(IconThumbUp, { "aria-hidden": "true" }), size: "compact", "aria-pressed": feedback === "positive", pending: feedbackAction.pending && feedback === "positive", disabled: feedbackAction.pending || !feedbackCapability.enabled, title: feedbackCapability.reason, onPress: () => void updateFeedback("positive") }), _jsx(IconButton, { label: labels.negativeFeedback, icon: _jsx(IconThumbDown, { "aria-hidden": "true" }), size: "compact", "aria-pressed": feedback === "negative", pending: feedbackAction.pending && feedback === "negative", disabled: feedbackAction.pending || !feedbackCapability.enabled, title: feedbackCapability.reason, onPress: () => void updateFeedback("negative") })] })) : null, message.role === "assistant" &&
+                forkingCapability.visible &&
+                onThreadForked ? (_jsx(_Fragment, { children: _jsx(IconButton, { label: labels.fork, icon: _jsx(IconGitBranch, { "aria-hidden": "true" }), size: "compact", pending: forkAction.pending, disabled: !forkingCapability.enabled, title: forkingCapability.reason, onPress: () => void forkAction.execute().catch(() => undefined) }) })) : null, message.createdAt ? (_jsx("time", { dateTime: message.createdAt, children: new Date(message.createdAt).toLocaleTimeString([], {
+                    hour: "numeric",
+                    minute: "2-digit",
+                }) })) : null, actionError ? (_jsx("span", { className: "agentkit-command-error", role: "alert", children: actionError.message })) : null] }));
+}
+export function AgentMessageView({ value: message, threadId, }) {
+    const { labels, slots } = useAgentKit();
+    const thread = useAgentThread(threadId);
+    const Supplement = slots.messageSupplement;
+    const Actions = slots.messageActions ?? AgentMessageActions;
+    const embeddedWidgetIds = new Set(message.parts.flatMap((part) => part.type === "widget" ? [part.widget.id] : []));
+    const embeddedAnnotationIds = new Set(message.parts.flatMap((part) => part.type === "annotation" ? [part.annotation.id] : []));
+    const attachedWidgets = Object.values(thread.widgets).filter((widget) => thread.widgetMessageIds[widget.id] === message.id &&
+        !embeddedWidgetIds.has(widget.id));
+    const attachedAnnotations = Object.values(thread.annotations).filter((annotation) => thread.annotationMessageIds[annotation.id] === message.id &&
+        !embeddedAnnotationIds.has(annotation.id));
+    return (_jsxs("article", { className: "agentkit-message", "data-role": message.role, "data-message-id": message.id, "aria-label": message.role === "user" ? labels.you : labels.assistant, "aria-busy": message.status === "streaming", children: [_jsxs("div", { className: "agentkit-message-content", children: [message.parts.map((part, index) => (_jsx(AgentMessagePartView, { value: part, threadId: threadId, active: message.status === "streaming", resetKey: `${threadId}:${message.id}:${index}` }, `${message.id}-${index}`))), attachedWidgets.map((widget) => (_jsx(AgentMessagePartView, { value: { type: "widget", widget }, threadId: threadId }, widget.id))), attachedAnnotations.length ? (_jsx("div", { className: "agentkit-annotations", children: attachedAnnotations.map((annotation) => (_jsx(AgentMessagePartView, { value: { type: "annotation", annotation }, threadId: threadId }, annotation.id))) })) : null, Supplement ? _jsx(Supplement, { value: message, threadId: threadId }) : null] }), _jsx(Actions, { value: message, threadId: threadId })] }));
+}
+export function AgentRunFailure({ error, runId, threadId, }) {
+    const { labels } = useAgentKit();
+    return (_jsxs("div", { className: "agentkit-run-failure", "data-error-code": error.code, "data-run-id": runId, "data-thread-id": threadId, role: "alert", children: [_jsx(IconAlertCircle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsxs("div", { className: "agentkit-run-failure-copy", children: [_jsx("strong", { children: labels.runFailed }), _jsx("span", { children: error.message })] })] }));
+}
+export function AgentConnectionErrorView({ error, threadId, recover, recovering, recoveryError, }) {
+    const { labels } = useAgentKit();
+    return (_jsxs("div", { className: "agentkit-error", "data-error-code": error.code, "data-thread-id": threadId, role: "alert", children: [_jsx("strong", { children: labels.error }), _jsx("span", { children: error.message }), error.retryable ? (_jsx("div", { className: "agentkit-error-actions", children: _jsx(ActionButton, { emphasis: "outline", size: "compact", pending: recovering, onPress: () => void recover().catch(() => undefined), children: labels.reconnect }) })) : null, recoveryError ? (_jsx("span", { className: "agentkit-command-error", children: recoveryError.message })) : null] }));
+}
+export function AgentKitComposer({ threadId: requestedThreadId, className, queueWhileRunning = true, showModelSelector = true, slashCommands, slashSkills, includeDefaultSlashCommands, includeDefaultSlashSkills, onSlashCommand, plusMenuMode, voiceEnabled = false, autoFocus = true, mode, defaultMode = "act", onModeChange, }) {
+    const { threadId: contextThreadId, labels, registerComposerFocus, slots, } = useAgentKit();
+    const threadId = requestedThreadId ?? contextThreadId;
+    const queueCapability = useAgentCapability("messageQueue");
+    const suggestionsCapability = useAgentCapability("suggestions");
+    const uploadsCapability = useAgentCapability("uploads");
+    const modelSelectionCapability = useAgentCapability("modelSelection");
+    const canQueue = queueCapability.enabled;
+    const canUpload = uploadsCapability.enabled;
+    // The host opts in through showModelSelector, so a capability the backend
+    // never reported keeps the selector instead of silently removing a control
+    // the host asked for. Only an explicit denial or outage takes it away.
+    const canSelectModel = modelSelectionCapability.state === "unknown" ||
+        modelSelectionCapability.enabled;
+    const control = useAgentKitControl(threadId);
+    const thread = useAgentThread(threadId);
+    const command = useAgentKitMutation((execute) => execute(), threadId);
+    const composerRef = useRef(null);
+    const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
+    const executionMode = mode ?? uncontrolledMode;
+    const active = thread.activeRunIds.length > 0;
+    const focusComposer = useCallback(() => {
+        if (!autoFocus)
+            return;
+        composerRef.current?.focus();
+        if (typeof globalThis.requestAnimationFrame === "function") {
+            globalThis.requestAnimationFrame(() => composerRef.current?.focus());
+        }
+    }, [autoFocus]);
+    useEffect(() => registerComposerFocus(threadId, focusComposer), [focusComposer, registerComposerFocus, threadId]);
+    const submitText = (text) => active && queueWhileRunning && canQueue
+        ? control.queue(text)
+        : control.send(text);
+    const steerQueued = !active
+        ? (item) => void command
+            .execute(() => control.steerQueued(item.id))
+            .catch(() => undefined)
+            .finally(focusComposer)
+        : undefined;
+    const removeQueued = (item) => void command
+        .execute(() => control.removeQueued(item.id))
+        .catch(() => undefined)
+        .finally(focusComposer);
+    const selectSuggestion = (suggestion) => void command
+        .execute(() => submitText(agentSuggestionPrompt(suggestion)))
+        .catch(() => undefined)
+        .finally(focusComposer);
+    const Queue = slots.queue;
+    const Suggestions = slots.suggestions;
+    return (_jsxs("div", { className: `agentkit-composer-stack ${className ?? ""}`, children: [queueCapability.visible ? (Queue ? (_jsx(Queue, { items: thread.queuedMessages, threadId: threadId, active: active, pending: command.pending, onSteer: steerQueued, onRemove: removeQueued })) : (_jsx(MessageQueueDrawer, { variant: "recessed", items: thread.queuedMessages, disabled: command.pending, onSteer: steerQueued
+                    ? (item) => {
+                        const message = thread.queuedMessages.find((candidate) => candidate.id === item.id);
+                        if (message)
+                            steerQueued(message);
+                    }
+                    : undefined, onRemove: (item) => {
+                    const message = thread.queuedMessages.find((candidate) => candidate.id === item.id);
+                    if (message)
+                        removeQueued(message);
+                }, labels: {
+                    region: labels.queue,
+                    steer: labels.queueSteer,
+                    steerHint: labels.queueSteerHint,
+                    remove: labels.queueRemove,
+                    moreActions: labels.queueMore,
+                } }))) : null, suggestionsCapability.visible && thread.suggestions.length ? (Suggestions ? (_jsx(Suggestions, { suggestions: thread.suggestions, threadId: threadId, pending: command.pending, onSelect: selectSuggestion })) : (_jsx(AgentSuggestionBar, { suggestions: thread.suggestions.map((suggestion) => ({
+                    ...suggestion,
+                    disabled: command.pending,
+                })), ariaLabel: labels.suggestions, onSelect: selectSuggestion, className: "agentkit-suggestions" }))) : null, _jsx(PromptComposer, { rootClassName: "agentkit-composer", layoutVariant: "default", draftScope: `agentkit:${threadId}`, ariaLabel: labels.composerLabel, placeholder: labels.composerPlaceholder, autoFocus: autoFocus, composerRef: composerRef, submitting: command.pending, willQueue: active && queueWhileRunning && canQueue, showModelSelector: showModelSelector && canSelectModel, attachmentsEnabled: canUpload, slashCommands: slashCommands, slashSkills: slashSkills, includeDefaultSlashCommands: includeDefaultSlashCommands ?? false, includeDefaultSlashSkills: includeDefaultSlashSkills ?? false, onSlashCommand: onSlashCommand, plusMenuMode: plusMenuMode ?? (canUpload ? "upload-only" : "hidden"), voiceEnabled: voiceEnabled, execMode: executionMode === "plan" ? "plan" : "build", onExecModeChange: (nextMode) => {
+                    const next = nextMode === "plan" ? "plan" : "act";
+                    if (mode === undefined)
+                        setUncontrolledMode(next);
+                    onModeChange?.(next);
+                }, onSubmit: (text, files, references, options) => {
+                    const submission = command.execute(async () => {
+                        const attachments = files.length && canUpload
+                            ? await control.uploadFiles(files.map((file) => ({
+                                name: file.name,
+                                mediaType: file.type || "application/octet-stream",
+                                size: file.size,
+                                body: file,
+                            })))
+                            : [];
+                        const effort = options.effort;
+                        const runOptions = {
+                            model: options.model,
+                            mode: executionMode,
+                            reasoningEffort: effort && !["auto", "max"].includes(effort)
+                                ? effort
+                                : undefined,
+                        };
+                        const metadata = references.length ? { references } : undefined;
+                        if (active && queueWhileRunning && canQueue) {
+                            await control.queueMessage({ text, attachments, metadata });
+                        }
+                        else {
+                            await control.sendMessage({
+                                text,
+                                attachments,
+                                options: runOptions,
+                                metadata,
+                            });
+                        }
+                    });
+                    focusComposer();
+                    void submission.catch(() => undefined).finally(focusComposer);
+                } }), command.error ? (_jsxs("div", { className: "agentkit-composer-error", role: "alert", children: [_jsx(IconAlertCircle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: command.error.message })] })) : null] }));
+}
+const AGENTKIT_TRANSCRIPT_BOTTOM_THRESHOLD = 24;
+const AGENTKIT_TRANSCRIPT_SCROLLBAR_IDLE_MS = 900;
+const AGENTKIT_TRANSCRIPT_SCROLL_KEYS = new Set([
+    "ArrowDown",
+    "ArrowUp",
+    "End",
+    "Home",
+    "PageDown",
+    "PageUp",
+    " ",
+]);
+export function isAgentKitTranscriptNearBottom(element, threshold = AGENTKIT_TRANSCRIPT_BOTTOM_THRESHOLD) {
+    return (element.scrollHeight - element.clientHeight - element.scrollTop <= threshold);
+}
+export function AgentKitChat({ title, toolbar, composer = true, composerProps, emptyComposerPlacement = "center", autoScroll = true, className, }) {
+    const { threadId, slots, labels } = useAgentKit();
+    const connection = useAgentConnection();
+    const control = useAgentKitControl(threadId);
+    const recovery = useAgentKitMutation(() => control.load(), threadId);
+    const thread = useAgentThread(threadId);
+    const hasConversation = thread.messages.length > 0;
+    const Message = slots.message ?? AgentMessageView;
+    const EmptyState = slots.emptyState;
+    const Composer = slots.composer ?? AgentKitComposer;
+    const approvalEntries = Object.entries(thread.approvals);
+    const connectionRequestEntries = Object.entries(thread.connectionRequests ?? {});
+    const ErrorState = slots.connectionError ?? AgentConnectionErrorView;
+    const RunFailure = slots.runFailure ?? AgentRunFailure;
+    const Approval = slots.approval;
+    const ConnectionRequest = slots.connectionRequest;
+    const Header = slots.header;
+    const Toolbar = slots.toolbar;
+    const Transcript = slots.transcript;
+    const Footer = slots.footer;
+    const transcriptRef = useRef(null);
+    const transcriptContentRef = useRef(null);
+    const followsTranscriptRef = useRef(true);
+    const transcriptThreadIdRef = useRef(threadId);
+    const previousLastMessageIdRef = useRef(undefined);
+    const transcriptFollowFrameRef = useRef(undefined);
+    const transcriptScrollbarInteractionRef = useRef(false);
+    const transcriptScrollbarTimeoutRef = useRef(undefined);
+    const [transcriptScrollbarVisible, setTranscriptScrollbarVisible] = useState(false);
+    const lastMessage = thread.messages.at(-1);
+    const lastEventId = thread.events.at(-1)?.id;
+    const connectionError = connection.status === "error" ? connection.error : undefined;
+    const clearTranscriptScrollbarTimeout = useCallback(() => {
+        if (transcriptScrollbarTimeoutRef.current === undefined)
+            return;
+        clearTimeout(transcriptScrollbarTimeoutRef.current);
+        transcriptScrollbarTimeoutRef.current = undefined;
+    }, []);
+    const hideTranscriptScrollbar = useCallback(() => {
+        clearTranscriptScrollbarTimeout();
+        transcriptScrollbarInteractionRef.current = false;
+        setTranscriptScrollbarVisible(false);
+    }, [clearTranscriptScrollbarTimeout]);
+    const scheduleTranscriptScrollbarHide = useCallback(() => {
+        clearTranscriptScrollbarTimeout();
+        transcriptScrollbarTimeoutRef.current = setTimeout(() => {
+            transcriptScrollbarTimeoutRef.current = undefined;
+            transcriptScrollbarInteractionRef.current = false;
+            setTranscriptScrollbarVisible(false);
+        }, AGENTKIT_TRANSCRIPT_SCROLLBAR_IDLE_MS);
+    }, [clearTranscriptScrollbarTimeout]);
+    const revealTranscriptScrollbar = useCallback(() => {
+        const transcript = transcriptRef.current;
+        if (!transcript || transcript.scrollHeight <= transcript.clientHeight)
+            return;
+        transcriptScrollbarInteractionRef.current = true;
+        setTranscriptScrollbarVisible(true);
+        scheduleTranscriptScrollbarHide();
+    }, [scheduleTranscriptScrollbarHide]);
+    const scrollTranscriptToBottom = useCallback(() => {
+        const transcript = transcriptRef.current;
+        if (!autoScroll || !transcript || !followsTranscriptRef.current)
+            return;
+        const nextScrollTop = Math.max(0, transcript.scrollHeight - transcript.clientHeight);
+        if (Math.abs(transcript.scrollTop - nextScrollTop) <= 1)
+            return;
+        transcript.scrollTop = nextScrollTop;
+    }, [autoScroll]);
+    const cancelScheduledTranscriptFollow = useCallback(() => {
+        if (transcriptFollowFrameRef.current === undefined)
+            return;
+        if (typeof globalThis.cancelAnimationFrame === "function") {
+            globalThis.cancelAnimationFrame(transcriptFollowFrameRef.current);
+        }
+        transcriptFollowFrameRef.current = undefined;
+    }, []);
+    const scheduleTranscriptFollow = useCallback(() => {
+        if (!autoScroll || transcriptFollowFrameRef.current !== undefined)
+            return;
+        if (typeof globalThis.requestAnimationFrame !== "function") {
+            scrollTranscriptToBottom();
+            return;
+        }
+        transcriptFollowFrameRef.current = globalThis.requestAnimationFrame(() => {
+            transcriptFollowFrameRef.current = undefined;
+            scrollTranscriptToBottom();
+        });
+    }, [autoScroll, scrollTranscriptToBottom]);
+    useEffect(() => () => {
+        clearTranscriptScrollbarTimeout();
+        cancelScheduledTranscriptFollow();
+    }, [cancelScheduledTranscriptFollow, clearTranscriptScrollbarTimeout]);
+    useLayoutEffect(() => {
+        if (transcriptThreadIdRef.current !== threadId) {
+            transcriptThreadIdRef.current = threadId;
+            previousLastMessageIdRef.current = undefined;
+            followsTranscriptRef.current = true;
+            hideTranscriptScrollbar();
+        }
+        const previousLastMessageId = previousLastMessageIdRef.current;
+        previousLastMessageIdRef.current = lastMessage?.id;
+        if (!autoScroll)
+            return;
+        if (lastMessage?.role === "user" &&
+            lastMessage.id !== previousLastMessageId) {
+            followsTranscriptRef.current = true;
+            hideTranscriptScrollbar();
+        }
+        scrollTranscriptToBottom();
+    }, [
+        autoScroll,
+        hideTranscriptScrollbar,
+        lastEventId,
+        lastMessage?.id,
+        lastMessage?.role,
+        scrollTranscriptToBottom,
+        threadId,
+    ]);
+    useLayoutEffect(() => {
+        const transcript = transcriptRef.current;
+        const content = transcriptContentRef.current;
+        if (!autoScroll ||
+            !transcript ||
+            !content ||
+            typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const observer = new ResizeObserver(scheduleTranscriptFollow);
+        observer.observe(transcript);
+        observer.observe(content);
+        return () => {
+            observer.disconnect();
+            cancelScheduledTranscriptFollow();
+        };
+    }, [
+        autoScroll,
+        cancelScheduledTranscriptFollow,
+        scheduleTranscriptFollow,
+        threadId,
+    ]);
+    const handleTranscriptScroll = useCallback(() => {
+        const transcript = transcriptRef.current;
+        if (!transcript)
+            return;
+        if (autoScroll && transcriptScrollbarInteractionRef.current) {
+            followsTranscriptRef.current = isAgentKitTranscriptNearBottom(transcript);
+        }
+        if (transcriptScrollbarInteractionRef.current) {
+            scheduleTranscriptScrollbarHide();
+        }
+    }, [autoScroll, scheduleTranscriptScrollbarHide]);
+    const handleTranscriptPointerDown = useCallback((event) => {
+        const bounds = event.currentTarget.getBoundingClientRect();
+        const edgeDistance = Math.min(Math.abs(event.clientX - bounds.left), Math.abs(bounds.right - event.clientX));
+        if (edgeDistance <= 12)
+            revealTranscriptScrollbar();
+    }, [revealTranscriptScrollbar]);
+    const handleTranscriptKeyDown = useCallback((event) => {
+        if (AGENTKIT_TRANSCRIPT_SCROLL_KEYS.has(event.key)) {
+            revealTranscriptScrollbar();
+        }
+    }, [revealTranscriptScrollbar]);
+    const messageRunIds = useMemo(() => {
+        const result = new Map();
+        for (const event of thread.events) {
+            if (event.type === "message.created" ||
+                event.type === "message.completed") {
+                result.set(event.message.id, event.runId);
+            }
+            if (event.type === "message.delta" || event.type === "reasoning.delta") {
+                result.set(event.messageId, event.runId);
+            }
+        }
+        return result;
+    }, [thread.events]);
+    const messageBoundarySequences = useMemo(() => {
+        const result = new Map();
+        const assistantMessageIds = new Set(thread.messages
+            .filter((message) => message.role === "assistant")
+            .map((message) => message.id));
+        for (const event of thread.events) {
+            if (!messageEventHasVisibleAssistantOutput(event, assistantMessageIds)) {
+                continue;
+            }
+            const messageId = event.type === "message.created" || event.type === "message.completed"
+                ? event.message.id
+                : event.type === "message.delta"
+                    ? event.messageId
+                    : undefined;
+            if (!messageId)
+                continue;
+            result.set(messageId, Math.min(result.get(messageId) ?? Infinity, event.sequence));
+        }
+        return result;
+    }, [thread.events, thread.messages]);
+    const lastAssistantMessagesByRun = useMemo(() => {
+        const result = new Map();
+        for (const message of thread.messages) {
+            const runId = messageRunIds.get(message.id);
+            const sequence = messageBoundarySequences.get(message.id);
+            if (runId && message.role === "assistant" && sequence !== undefined) {
+                result.set(runId, { id: message.id, sequence });
+            }
+        }
+        return result;
+    }, [messageBoundarySequences, messageRunIds, thread.messages]);
+    const failedRuns = useMemo(() => {
+        const result = new Map();
+        for (const run of Object.values(thread.runs)) {
+            if (run.status === "failed" && run.error) {
+                result.set(run.id, run.error);
+            }
+        }
+        return result;
+    }, [thread.runs]);
+    const runWorkStarts = useMemo(() => firstWorkEvents(thread.events), [thread.events]);
+    const hasRunWork = (runId, afterSequence, throughSequence) => runWorkStarts.some((event) => event.runId === runId &&
+        sequenceInRange(event.sequence, { afterSequence, throughSequence }));
+    const pendingRunIds = Array.from(new Set(runWorkStarts
+        .filter((event) => {
+        const boundary = lastAssistantMessagesByRun.get(event.runId);
+        return boundary === undefined || event.sequence > boundary.sequence;
+    })
+        .map((event) => event.runId)));
+    const pendingRuns = new Set(pendingRunIds);
+    const renderRunFailure = (runId) => {
+        const error = failedRuns.get(runId);
+        return error ? (_jsx(RunFailure, { error: error, runId: runId, threadId: threadId })) : null;
+    };
+    const renderRunWork = ({ runId, anchor, afterSequence, throughSequence, }) => (_jsxs(AgentKitSurfaceBoundary, { surface: "activity", resetKey: `${runId}:${anchor}:${thread.events.length}`, children: [_jsx(AgentCollaborationFeed, { runId: runId, afterSequence: afterSequence, throughSequence: throughSequence }), _jsx(AgentTaskGroup, { runId: runId, afterSequence: afterSequence, throughSequence: throughSequence }), _jsx(AgentActivityGroup, { runId: runId, afterSequence: afterSequence, throughSequence: throughSequence, excludeAgentActivities: true })] }, `run-work:${runId}:${anchor}`));
+    const transcriptItems = [];
+    const previousAssistantByRun = new Map();
+    for (const message of thread.messages) {
+        const runId = messageRunIds.get(message.id);
+        const sequence = messageBoundarySequences.get(message.id);
+        const isAssistantBoundary = message.role === "assistant" &&
+            runId !== undefined &&
+            sequence !== undefined;
+        const previousAssistant = isAssistantBoundary && runId
+            ? previousAssistantByRun.get(runId)
+            : undefined;
+        if (isAssistantBoundary &&
+            runId &&
+            hasRunWork(runId, previousAssistant?.sequence, sequence)) {
+            transcriptItems.push(renderRunWork({
+                runId,
+                anchor: previousAssistant?.id ?? "start",
+                afterSequence: previousAssistant?.sequence,
+                throughSequence: sequence,
+            }));
+        }
+        transcriptItems.push(_jsx(AgentKitSurfaceBoundary, { surface: "message", resetKey: `${message.id}:${thread.events.length}`, children: _jsx(Message, { value: message, threadId: threadId }) }, `message:${message.id}`));
+        if (isAssistantBoundary && runId) {
+            previousAssistantByRun.set(runId, { id: message.id, sequence });
+        }
+        const concludesRun = isAssistantBoundary &&
+            runId !== undefined &&
+            lastAssistantMessagesByRun.get(runId)?.id === message.id;
+        if (concludesRun && !pendingRuns.has(runId) && failedRuns.has(runId)) {
+            transcriptItems.push(_jsx(AgentKitSurfaceBoundary, { surface: "activity", resetKey: `${runId}:${thread.events.length}`, children: renderRunFailure(runId) }, `run-failure:${runId}`));
+        }
+    }
+    for (const runId of pendingRunIds) {
+        const boundary = lastAssistantMessagesByRun.get(runId);
+        transcriptItems.push(renderRunWork({
+            runId,
+            anchor: boundary?.id ?? "start",
+            afterSequence: boundary?.sequence,
+        }));
+        if (failedRuns.has(runId)) {
+            transcriptItems.push(_jsx(AgentKitSurfaceBoundary, { surface: "activity", resetKey: `${runId}:${thread.events.length}`, children: renderRunFailure(runId) }, `run-failure:${runId}`));
+        }
+    }
+    for (const [runId] of failedRuns) {
+        if (lastAssistantMessagesByRun.has(runId) || pendingRuns.has(runId)) {
+            continue;
+        }
+        transcriptItems.push(_jsx(AgentKitSurfaceBoundary, { surface: "activity", resetKey: `${runId}:${thread.events.length}`, children: renderRunFailure(runId) }, `run-failure:${runId}`));
+    }
+    return (_jsxs("section", { "aria-label": typeof title === "string" ? title : labels.conversation, className: `agentkit-chat ${className ?? ""}`, "data-empty": !hasConversation, "data-empty-composer-placement": emptyComposerPlacement, children: [hasConversation && (title || toolbar) ? (_jsx(AgentKitSurfaceBoundary, { surface: "header", resetKey: threadId, children: _jsx(AgentKitRegionSlot, { slot: Header, threadId: threadId, children: _jsxs("header", { className: "agentkit-chat-header", children: [_jsx("div", { className: "agentkit-chat-title", children: title }), _jsx(AgentKitRegionSlot, { slot: Toolbar, threadId: threadId, children: _jsx("div", { className: "agentkit-chat-toolbar", children: toolbar }) })] }) }) })) : null, _jsx("div", { ref: transcriptRef, className: "agentkit-transcript", "aria-live": "off", "data-scrollbar-visible": transcriptScrollbarVisible, onKeyDown: handleTranscriptKeyDown, onPointerDown: handleTranscriptPointerDown, onScroll: handleTranscriptScroll, onTouchMove: revealTranscriptScrollbar, onWheel: revealTranscriptScrollbar, children: _jsx("div", { ref: transcriptContentRef, className: "agentkit-transcript-content", children: _jsxs(AgentKitRegionSlot, { slot: Transcript, threadId: threadId, children: [!hasConversation && EmptyState ? (_jsx(EmptyState, { threadId: threadId })) : null, transcriptItems, approvalEntries.map(([approvalId, request]) => (_jsx(AgentKitSurfaceBoundary, { surface: "approval", resetKey: `${approvalId}:${thread.events.length}`, children: Approval ? (_jsx(Approval, { value: request, threadId: threadId, runId: thread.approvalRunIds[approvalId] ?? "" })) : (_jsx(AgentApprovalPrompt, { request: request, runId: thread.approvalRunIds[approvalId] ?? "" })) }, approvalId))), connectionRequestEntries.map(([requestId, request]) => (_jsx(AgentKitSurfaceBoundary, { surface: "connection-request", resetKey: `${requestId}:${request.status}`, children: ConnectionRequest ? (_jsx(ConnectionRequest, { value: request, threadId: threadId, runId: thread.connectionRequestRunIds[requestId] ?? "" })) : (_jsx(AgentConnectionRequestCard, { request: request, runId: thread.connectionRequestRunIds[requestId] ?? "" })) }, requestId))), connectionError ? (_jsx(AgentKitSurfaceBoundary, { surface: "connection-error", resetKey: `${threadId}:${connectionError.code}`, children: _jsx(ErrorState, { error: connectionError, threadId: threadId, recover: recovery.execute, recovering: recovery.pending, recoveryError: recovery.error }) })) : null] }) }) }), composer ? (_jsx("footer", { className: "agentkit-chat-footer", children: _jsx(AgentKitSurfaceBoundary, { surface: "composer", resetKey: threadId, children: _jsx(AgentKitRegionSlot, { slot: Footer, threadId: threadId, children: slots.composer ? (_jsx(Composer, { threadId: threadId })) : (_jsx(AgentKitComposer, { ...composerProps, threadId: threadId })) }) }) })) : null] }));
+}
+//# sourceMappingURL=components.js.map