@agent-native/toolkit 0.23.1 → 0.198.1

package/dist/app/agentkit/react/components.js

@@ -0,0 +1,2138 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconActivity, IconAlertCircle, IconArrowDown, IconArrowFork, IconArrowUp, IconBook2, IconBrain, IconChevronLeft, IconChevronRight, IconCircleCheck, IconCode, IconCopy, IconDotsVertical, IconFile, IconFolder, IconFileText, IconCheckbox, IconMail, IconUser, IconPresentation, IconStack2, IconMessageChatbot, IconGitBranch, IconId, IconMessage, IconPlugConnected, IconPlayerPause, IconPlayerPlay, IconPencil, IconRefresh, IconSearch, IconTerminal2, IconChecklist, IconThumbDown, IconThumbUp, IconTool, IconX, } from "@tabler/icons-react";
+import { createContext, Component, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { ActionButton, AgentSuggestionBar, IconButton, MessageQueueDrawer, PromptComposer, Surface, TextField, agentSuggestionPrompt, splitMarkdownBlocks, writeClipboardText, } from "../../../agentkit.js";
+import { Dialog, Menu, Popover, TextArea, } from "../../../design-system/index.js";
+import { createAgentKitComposerSubmission, snapshotComposerValue, } from "./composer-submission.js";
+import { AgentKitCapabilityError, hasActiveAgentRuns, isCurrentAgentSuggestion, selectAgentSuggestions, } from "@agent-native/agentkit/client";
+import { inferAgentActivityKind, } from "@agent-native/agentkit/protocol";
+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: [_jsx(ActivitySourceIcon, { activity: activity, threadId: threadId }), 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 ActivitySourceIcon({ activity, threadId, compact = false, }) {
+    const { registry } = useAgentKit();
+    const thread = useAgentThread(threadId);
+    const tool = thread.tools[activity.id];
+    const source = tool ? registry.toolSource?.(tool) : undefined;
+    return source ? source.icon : compact ? null : activityIcon(activity.kind);
+}
+function activityClusterIdentity(activity, sourceId) {
+    return [
+        sourceId ?? "",
+        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: [_jsx(ActivitySourceIcon, { activity: activity, threadId: threadId }), 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 reasoningMessageId(event) {
+    if (event.type === "reasoning.delta" && event.text.trim()) {
+        return event.messageId;
+    }
+    if ((event.type === "message.created" || event.type === "message.completed") &&
+        event.message.role === "assistant" &&
+        event.message.parts.some((part) => part.type === "reasoning" && part.text.trim())) {
+        return event.message.id;
+    }
+    return undefined;
+}
+function workEventIdentity(event) {
+    const messageId = reasoningMessageId(event);
+    if (messageId)
+        return `reasoning:${messageId}`;
+    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 reasoningMap = new Map();
+    const messagesById = new Map(thread.messages.map((message) => [message.id, message]));
+    const firstSequence = new Map();
+    const latestSequence = 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) {
+        const messageId = reasoningMessageId(event);
+        const message = messageId ? messagesById.get(messageId) : undefined;
+        if (message?.role === "assistant" &&
+            message.parts.some((part) => part.type === "reasoning" &&
+                part.visibility !== "hidden" &&
+                part.text.trim())) {
+            const id = `reasoning:${message.id}`;
+            reasoningMap.set(id, message);
+            activityMap.set(id, {
+                id,
+                kind: "reasoning",
+                label: labels.reasoning,
+                status: message.status === "streaming" ? "running" : "completed",
+            });
+            remember(id, event.sequence);
+            latestSequence.set(id, event.sequence);
+        }
+        if (event.type === "activity.started" ||
+            event.type === "activity.updated" ||
+            event.type === "activity.completed") {
+            if (excludeAgentActivities && event.activity.agentId)
+                continue;
+            activityMap.set(event.activity.id, thread.activities[event.activity.id] ?? event.activity);
+            remember(event.activity.id, event.sequence);
+            latestSequence.set(event.activity.id, event.sequence);
+        }
+        if (event.type === "tool.started" || event.type === "tool.updated") {
+            toolMap.set(event.toolCall.id, thread.tools[event.toolCall.id] ?? event.toolCall);
+            remember(event.toolCall.id, event.sequence);
+            latestSequence.set(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);
+            latestSequence.set(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 durableToolResults = items.flatMap((activity) => {
+        const tool = toolMap.get(activity.id);
+        const Renderer = tool ? registry.tools?.[tool.name] : undefined;
+        if (!tool || tool.status === "running")
+            return [];
+        if (Renderer)
+            return [{ tool, Renderer }];
+        if (tool.metadata?.chatUI || tool.metadata?.mcpApp) {
+            return slots.tool ? [{ tool, Renderer: slots.tool }] : [];
+        }
+        return [];
+    });
+    const durableToolResultIds = new Set(durableToolResults.map(({ tool }) => tool.id));
+    const activityItems = items.filter((activity) => !durableToolResultIds.has(activity.id));
+    const latestActivity = activityItems.reduce((current, activity) => {
+        if (activity.status !== "running")
+            return current;
+        if (!current)
+            return activity;
+        return (latestSequence.get(activity.id) ?? -1) >=
+            (latestSequence.get(current.id) ?? -1)
+            ? activity
+            : current;
+    }, undefined);
+    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 ? running : run.status === "running");
+    const currentActivity = activelyWorking ? latestActivity : undefined;
+    const visiblyRunning = throughSequence === undefined && activelyWorking && 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 ||
+        (items.length > 0 && !running) ||
+        runEvents.some((event) => event.runId === runId &&
+            (event.type === "run.completed" ||
+                event.type === "run.failed" ||
+                event.type === "run.cancelled")) ||
+        (afterSequence === undefined &&
+            run !== undefined &&
+            ["completed", "failed", "cancelled"].includes(run.status));
+    if (items.length === 0)
+        return null;
+    const displayGroups = new Map(ACTIVITY_BUCKET_ORDER.map((bucket) => [bucket, []]));
+    const clusterIdentity = (activity) => {
+        const tool = toolMap.get(activity.id);
+        return activityClusterIdentity(activity, tool ? registry.toolSource?.(tool)?.id : undefined);
+    };
+    for (const activity of activityItems) {
+        const sourceTool = toolMap.get(activity.id);
+        const hasCustomToolRenderer = Boolean(sourceTool && registry.tools?.[sourceTool.name]);
+        const hasCustomActivityRenderer = Boolean(registry.activities?.[activity.kind] ?? slots.activity);
+        const bucket = activityBucketForKind(activity.kind);
+        const bucketGroups = displayGroups.get(bucket);
+        const previous = bucketGroups.at(-1);
+        if (!hasCustomToolRenderer &&
+            !hasCustomActivityRenderer &&
+            !reasoningMap.has(activity.id) &&
+            previous &&
+            !reasoningMap.has(previous[0].id) &&
+            clusterIdentity(previous[0]) ===
+                clusterIdentity(activity)) {
+            previous.push(activity);
+        }
+        else {
+            bucketGroups.push([activity]);
+        }
+    }
+    const hasExpandableActivity = ACTIVITY_BUCKET_ORDER.some((bucket) => displayGroups.get(bucket).length > 0);
+    const activityBucketLabels = {
+        thinking: "Thinking",
+        research: "Research",
+        actions: "Actions",
+        other: "Other",
+        ...labels.activityBuckets,
+    };
+    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
+            : labels.activities;
+    return (_jsxs(_Fragment, { children: [items
+                .filter((activity) => activity.status === "failed")
+                .map((activity) => (_jsxs("div", { className: "agentkit-run-failure", role: "alert", children: [_jsx(IconAlertCircle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsxs("div", { className: "agentkit-run-failure-copy", children: [_jsx("strong", { children: activity.label }), _jsx("span", { children: toolMap.get(activity.id)?.error?.message ??
+                                    activity.detail ??
+                                    labels.error })] })] }, activity.id))), durableToolResults.length ? (_jsx("div", { "data-agentkit-tool-results": "true", children: durableToolResults.map(({ tool, Renderer }) => (_jsx(Renderer, { value: tool, threadId: threadId }, tool.id))) })) : null, hasExpandableActivity ? (_jsx(AgentWorkDisclosure, { label: summaryLabel, running: visiblyRunning, current: currentActivity ? (_jsxs("span", { className: "agentkit-activities-current", "data-running": "true", "data-agentkit-current-activity": "true", "aria-live": "polite", children: [_jsx(ActivitySourceIcon, { activity: currentActivity, threadId: threadId, compact: true }), _jsx("span", { className: "agentkit-activities-current-label", children: currentActivity.label })] })) : null, children: _jsx("div", { className: "agentkit-activities-list", children: ACTIVITY_BUCKET_ORDER.map((bucket) => {
+                        const groups = displayGroups.get(bucket);
+                        if (groups.length === 0)
+                            return null;
+                        return (_jsxs("section", { className: "agentkit-activity-bucket", "data-activity-bucket": bucket, "aria-label": activityBucketLabels[bucket], children: [_jsx("h3", { className: "agentkit-activity-bucket-title", children: activityBucketLabels[bucket] }), _jsx("div", { className: "agentkit-activity-bucket-items", children: groups.map((activities) => {
+                                        const activity = activities[0];
+                                        const reasoningMessage = reasoningMap.get(activity.id);
+                                        if (reasoningMessage) {
+                                            return (_jsx(AgentReasoningParts, { message: reasoningMessage, threadId: threadId, active: activelyWorking &&
+                                                    currentActivity?.id === activity.id }, activity.id));
+                                        }
+                                        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) {
+                                            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));
+                                    }) })] }, bucket));
+                    }) }) })) : (_jsxs("div", { className: "agentkit-activities-static", children: [_jsx("span", { className: "agentkit-activities-label", children: summaryLabel }), currentActivity ? (_jsxs("span", { className: "agentkit-activities-current", "data-running": "true", "data-agentkit-current-activity": "true", "aria-live": "polite", children: [_jsx(ActivitySourceIcon, { activity: currentActivity, threadId: threadId, compact: true }), _jsx("span", { className: "agentkit-activities-current-label", children: currentActivity.label })] })) : null] }))] }));
+}
+function AgentWorkDisclosure({ label, running, current, children, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("details", { className: "agentkit-activities", "data-running": running ? "true" : undefined, open: open, children: [_jsxs("summary", { className: "agentkit-activities-summary", onClick: (event) => {
+                    event.preventDefault();
+                    setOpen((value) => !value);
+                }, children: [_jsxs("span", { className: "agentkit-activities-heading", children: [_jsx("span", { className: "agentkit-activities-label", children: label }), _jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-summary-chevron" })] }), current] }), children] }));
+}
+function AgentReasoningParts({ message, threadId, active, }) {
+    return message.parts.map((part, index) => part.type === "reasoning" &&
+        part.visibility !== "hidden" &&
+        part.text.trim() ? (_jsx(AgentMessagePartView, { value: part, threadId: threadId, active: active, resetKey: `${threadId}:${message.id}:${index}` }, index)) : null);
+}
+const ACTIVITY_BUCKET_ORDER = [
+    "thinking",
+    "research",
+    "actions",
+    "other",
+];
+function activityBucketForKind(kind) {
+    if (kind === "reasoning" || kind === "model" || kind === "status") {
+        return "thinking";
+    }
+    if (kind === "search" || kind === "read")
+        return "research";
+    if (kind === "write" ||
+        kind === "edit" ||
+        kind === "command" ||
+        kind === "check") {
+        return "actions";
+    }
+    return "other";
+}
+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, thread.tasks[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] }) }));
+}
+function AgentMentionIcon({ icon }) {
+    const props = { size: 14, className: "agentkit-mention-icon" };
+    switch (icon) {
+        case "folder":
+            return _jsx(IconFolder, { ...props });
+        case "document":
+            return _jsx(IconFileText, { ...props });
+        case "form":
+            return _jsx(IconCheckbox, { ...props });
+        case "email":
+            return _jsx(IconMail, { ...props });
+        case "user":
+            return _jsx(IconUser, { ...props });
+        case "deck":
+            return _jsx(IconPresentation, { ...props });
+        case "agent":
+            return _jsx(IconMessageChatbot, { ...props });
+        case "file":
+            return _jsx(IconFile, { ...props });
+        default:
+            return _jsx(IconStack2, { ...props });
+    }
+}
+function renderUserMessageText(text) {
+    const richMatches = Array.from(text.matchAll(/@\[([^\]|]+)\|([^\]]+)\]/g));
+    if (richMatches.length) {
+        const parts = [];
+        let lastIndex = 0;
+        richMatches.forEach((match, index) => {
+            const start = match.index ?? 0;
+            if (start > lastIndex)
+                parts.push(text.slice(lastIndex, start));
+            const label = match[1] ?? "";
+            parts.push(_jsxs("span", { className: "agentkit-mention", "data-mention-label": label, children: [_jsx(AgentMentionIcon, { icon: match[2] ?? "" }), _jsx("span", { className: "agentkit-mention-label", children: label })] }, `rich-mention:${start}:${index}`));
+            lastIndex = start + match[0].length;
+        });
+        if (lastIndex < text.length)
+            parts.push(text.slice(lastIndex));
+        return parts;
+    }
+    const plainMatches = Array.from(text.matchAll(/(^|\s)@(\w+)/g));
+    if (!plainMatches.length)
+        return [text];
+    const parts = [];
+    let lastIndex = 0;
+    plainMatches.forEach((match, index) => {
+        const matchIndex = match.index ?? 0;
+        const start = matchIndex + (match[1]?.length ?? 0);
+        const end = matchIndex + match[0].length;
+        if (start > lastIndex)
+            parts.push(text.slice(lastIndex, start));
+        const label = match[2] ?? "";
+        parts.push(_jsxs("span", { className: "agentkit-mention agentkit-mention--plain", "data-mention-label": label, children: ["@", label] }, `plain-mention:${start}:${index}`));
+        lastIndex = end;
+    });
+    if (lastIndex < text.length)
+        parts.push(text.slice(lastIndex));
+    return parts;
+}
+function AgentUserMessageText({ text }) {
+    const { labels } = useAgentKit();
+    const [expanded, setExpanded] = useState(false);
+    const [expandable, setExpandable] = useState(false);
+    const contentRef = useRef(null);
+    const content = useMemo(() => renderUserMessageText(text), [text]);
+    useLayoutEffect(() => {
+        const element = contentRef.current;
+        if (!element)
+            return;
+        const measure = () => setExpandable(element.scrollHeight > 200);
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [content]);
+    return (_jsxs("div", { className: "agentkit-user-message-text", children: [_jsx("div", { className: "agentkit-user-message-text-clip", "data-clamped": !expanded && expandable ? "true" : undefined, children: _jsx("div", { ref: contentRef, className: "agentkit-user-message-text-content", children: content }) }), expandable ? (_jsx("button", { type: "button", className: "agentkit-message-expand", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: expanded ? labels.collapseMessage : labels.expandMessage })) : null] }));
+}
+function AgentImageAttachmentPreview({ src, alt, }) {
+    const { labels } = useAgentKit();
+    const [open, setOpen] = useState(false);
+    return (_jsx(Dialog, { open: open, onOpenChange: setOpen, title: alt || labels.imagePreview, closeLabel: labels.closePreview, size: "fullscreen", trigger: _jsx("button", { type: "button", className: "agentkit-image-attachment-trigger", "aria-label": labels.previewAttachment.replace("{{name}}", alt), title: alt, children: _jsx("img", { src: src, alt: alt }) }), children: _jsx("div", { className: "agentkit-image-preview", children: _jsx("img", { src: src, alt: alt, draggable: false }) }) }));
+}
+export function AgentMessagePartView({ value: part, threadId, active = false, resetKey = `${threadId}:${part.type}`, userMessage = false, }) {
+    const { labels, slots, registry } = useAgentKit();
+    if (part.type === "reasoning" && part.visibility === "hidden")
+        return null;
+    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 = userMessage ? undefined : slots.text;
+            return Renderer ? (_jsx(Renderer, { value: part, threadId: threadId, active: active, resetKey: resetKey })) : userMessage ? (_jsx(AgentUserMessageText, { text: part.text })) : 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, active: active, resetKey: resetKey })) : (_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);
+            if (userMessage && part.mediaType?.startsWith("image/") && href) {
+                return _jsx(AgentImageAttachmentPreview, { src: href, alt: part.name });
+            }
+            if (userMessage && part.name.startsWith("pasted-text-")) {
+                return href ? (_jsxs("a", { className: "agentkit-file agentkit-file--pasted-text", href: href, download: part.name, title: part.name, children: [_jsx(IconFileText, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: labels.pastedText })] })) : (_jsxs("span", { className: "agentkit-file agentkit-file--pasted-text", children: [_jsx(IconFileText, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: labels.pastedText })] }));
+            }
+            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;
+    }
+}
+/** Resolves the stable server request identity without exposing local UI ids. */
+export function resolveAgentMessageRequestId(message, events) {
+    const metadata = message.metadata;
+    for (const source of [metadata?.custom, metadata]) {
+        for (const key of ["requestId", "runId"]) {
+            const value = source?.[key];
+            if (typeof value === "string" && value)
+                return value;
+        }
+    }
+    for (let index = events.length - 1; index >= 0; index -= 1) {
+        const event = events[index];
+        const matches = (event.type === "message.created" ||
+            event.type === "message.completed") &&
+            event.message.id === message.id;
+        if (matches ||
+            ((event.type === "message.delta" || event.type === "reasoning.delta") &&
+                event.messageId === message.id)) {
+            return event.runId;
+        }
+    }
+    return undefined;
+}
+function resolveAgentMessageRunId(message, events) {
+    const metadata = message.metadata;
+    for (const source of [metadata?.custom, metadata]) {
+        const value = source?.runId;
+        if (typeof value === "string" && value)
+            return value;
+    }
+    for (let index = events.length - 1; index >= 0; index -= 1) {
+        const event = events[index];
+        if (((event.type === "message.created" ||
+            event.type === "message.completed") &&
+            event.message.id === message.id) ||
+            ((event.type === "message.delta" || event.type === "reasoning.delta") &&
+                event.messageId === message.id)) {
+            return event.runId;
+        }
+    }
+    return undefined;
+}
+const AgentMessageEditContext = createContext(null);
+function messageText(message) {
+    return message.parts
+        .filter((part) => part.type === "text")
+        .map((part) => part.text)
+        .join("\n");
+}
+function messageRunOptions(message) {
+    const metadata = message.metadata ?? {};
+    const effort = metadata.reasoningEffort ?? metadata.effort;
+    const reasoningEffort = [
+        "none",
+        "minimal",
+        "low",
+        "medium",
+        "high",
+        "xhigh",
+    ].includes(String(effort))
+        ? String(effort)
+        : undefined;
+    return {
+        ...(typeof metadata.agentId === "string"
+            ? { agentId: metadata.agentId }
+            : {}),
+        ...(typeof metadata.model === "string" ? { model: metadata.model } : {}),
+        ...(typeof (metadata.requestMode ?? metadata.mode) === "string"
+            ? { mode: String(metadata.requestMode ?? metadata.mode) }
+            : {}),
+        ...(reasoningEffort ? { reasoningEffort } : {}),
+        metadata,
+    };
+}
+function findPreviousMessage(messages, messageId) {
+    const index = messages.findIndex((message) => message.id === messageId);
+    return index < 0 ? null : messages[index - 1];
+}
+function findPreviousUserMessage(messages, messageId) {
+    const index = messages.findIndex((message) => message.id === messageId);
+    if (index < 0)
+        return undefined;
+    for (let previous = index - 1; previous >= 0; previous -= 1) {
+        const message = messages[previous];
+        if (message?.role === "user")
+            return message;
+    }
+    return undefined;
+}
+async function forkAndResubmitMessage({ controller, threadId, messages, sourceMessage, text, attachments, options, metadata, onThreadForked, messageUnavailable, }) {
+    const previousMessage = findPreviousMessage(messages, sourceMessage.id);
+    if (previousMessage === null) {
+        throw new Error(messageUnavailable);
+    }
+    const forkedThread = await controller.forkThread(threadId, previousMessage?.id);
+    onThreadForked?.(forkedThread);
+    await controller.sendMessage({
+        threadId: forkedThread.id,
+        text,
+        attachments,
+        options,
+        metadata,
+    });
+}
+export function AgentMessageActions({ value: message, threadId, }) {
+    const { controller, labels, slots, onThreadForked, onCopyMessage, branchNavigation, } = useAgentKit();
+    const thread = useAgentThread(threadId);
+    const feedbackCapability = useAgentCapability("feedback");
+    const forkingCapability = useAgentCapability("threadForking");
+    const control = useAgentKitControl(threadId);
+    const editContext = useContext(AgentMessageEditContext);
+    const text = messageText(message);
+    const previousUserMessage = message.role === "assistant"
+        ? findPreviousUserMessage(thread.messages, message.id)
+        : undefined;
+    const isLastAssistantMessage = message.role === "assistant" && thread.messages.at(-1)?.id === message.id;
+    const [copied, setCopied] = useState(false);
+    const [feedback, setFeedback] = useState(null);
+    const [feedbackReason, setFeedbackReason] = useState("");
+    const [feedbackReasonOpen, setFeedbackReasonOpen] = useState(false);
+    const [feedbackReasonSubmitted, setFeedbackReasonSubmitted] = useState(false);
+    const copiedTimer = useRef(null);
+    const [requestIdCopied, setRequestIdCopied] = useState(false);
+    const [actionsMenuOpen, setActionsMenuOpen] = useState(false);
+    const requestIdCopiedTimer = useRef(null);
+    const requestId = useMemo(() => resolveAgentMessageRequestId(message, thread.events), [message, thread.events]);
+    const runId = useMemo(() => resolveAgentMessageRunId(message, thread.events), [message, thread.events]);
+    const messageSeq = thread.messages.findIndex((item) => item.id === message.id);
+    useEffect(() => () => {
+        if (copiedTimer.current)
+            clearTimeout(copiedTimer.current);
+        if (requestIdCopiedTimer.current)
+            clearTimeout(requestIdCopiedTimer.current);
+    }, [message.id]);
+    const copyAction = useAgentKitMutation(async () => {
+        const handled = await onCopyMessage?.({ message, text });
+        if (!handled && !(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, reason, }) => {
+        const options = {
+            ...(runId ? { runId } : {}),
+            ...(messageSeq >= 0 ? { messageSeq } : {}),
+            ...(reason ? { reason } : {}),
+        };
+        return Object.keys(options).length
+            ? control.submitFeedback(message.id, value, options)
+            : control.submitFeedback(message.id, value);
+    }, `${threadId}:${message.id}:feedback`);
+    const branchNavigationAction = useAgentKitMutation(async (direction) => {
+        if (direction === "previous")
+            await branchNavigation?.onPrevious();
+        else
+            await branchNavigation?.onNext();
+    }, `${threadId}:${message.id}:branch-navigation`);
+    const requestIdAction = useAgentKitMutation(async () => {
+        if (!requestId)
+            throw new Error(labels.requestIdUnavailable);
+        if (!(await writeClipboardText(requestId))) {
+            throw new Error(labels.copyUnavailable);
+        }
+        setRequestIdCopied(true);
+        if (requestIdCopiedTimer.current)
+            clearTimeout(requestIdCopiedTimer.current);
+        requestIdCopiedTimer.current = setTimeout(() => {
+            setRequestIdCopied(false);
+        }, 1_400);
+    }, `${threadId}:${message.id}:request-id:${requestId ?? "unavailable"}`);
+    const forkAction = useAgentKitMutation(async () => {
+        const thread = await control.fork(message.id);
+        onThreadForked?.(thread);
+    }, `${threadId}:${message.id}:fork`);
+    const regenerateAction = useAgentKitMutation(async () => {
+        if (!previousUserMessage)
+            return;
+        await forkAndResubmitMessage({
+            controller,
+            threadId,
+            messages: thread.messages,
+            sourceMessage: previousUserMessage,
+            text: messageText(previousUserMessage),
+            attachments: previousUserMessage.parts.filter((part) => part.type === "file"),
+            options: messageRunOptions(previousUserMessage),
+            metadata: previousUserMessage.metadata,
+            onThreadForked,
+            messageUnavailable: labels.messageUnavailable,
+        });
+    }, `${threadId}:${message.id}:regenerate`);
+    const updateFeedback = async (value) => {
+        const previous = feedback;
+        if (previous === value)
+            return;
+        setFeedback(value);
+        try {
+            await feedbackAction.execute({ value });
+        }
+        catch {
+            setFeedback(previous);
+        }
+    };
+    const submitFeedbackReason = async (event) => {
+        event.preventDefault();
+        const reason = feedbackReason.trim();
+        if (!reason)
+            return;
+        try {
+            await feedbackAction.execute({ value: "negative", reason });
+            setFeedbackReason("");
+            setFeedbackReasonSubmitted(true);
+            setFeedbackReasonOpen(false);
+        }
+        catch {
+            // coercion-ok: feedbackAction.error is rendered below and the draft stays available for retry.
+        }
+    };
+    const actionError = copyAction.error ??
+        feedbackAction.error ??
+        branchNavigationAction.error ??
+        requestIdAction.error ??
+        forkAction.error ??
+        regenerateAction.error;
+    return (_jsxs("div", { className: "agentkit-message-actions", "data-role": message.role, children: [message.role === "assistant" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "agentkit-message-actions-leading", 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) }), 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(Popover, { open: feedbackReasonOpen, onOpenChange: (open) => {
+                                            setFeedbackReasonOpen(open);
+                                            if (open)
+                                                setFeedbackReasonSubmitted(false);
+                                        }, placement: "bottom", align: "start", className: "agentkit-feedback-popover", trigger: _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") }), children: _jsxs("form", { className: "agentkit-feedback-form", onSubmit: submitFeedbackReason, children: [_jsx(TextArea, { label: labels.feedbackWhatWentWrong, value: feedbackReason, onChange: setFeedbackReason, placeholder: labels.feedbackPlaceholder, rows: 3, maxLength: 2_000, disabled: feedbackAction.pending, className: "agentkit-feedback-textarea" }), _jsxs("div", { className: "agentkit-feedback-footer", children: [_jsx("span", { children: labels.feedbackKeyboardHint.replace("{{shortcut}}", typeof navigator !== "undefined" &&
+                                                                /Mac|iPhone|iPad/.test(navigator.userAgent)
+                                                                ? "⌘"
+                                                                : "Ctrl") }), _jsx(ActionButton, { type: "submit", intent: "primary", size: "compact", pending: feedbackAction.pending, disabled: feedbackAction.pending || !feedbackReason.trim(), children: labels.feedbackSubmit })] })] }) }), feedbackReasonSubmitted ? (_jsx("span", { className: "agentkit-visually-hidden", "aria-live": "polite", children: labels.feedbackSubmitted })) : null] })) : null] }), _jsxs("div", { className: "agentkit-message-actions-trailing", children: [isLastAssistantMessage &&
+                                previousUserMessage &&
+                                forkingCapability.visible &&
+                                onThreadForked ? (_jsx(IconButton, { label: labels.regenerateResponse, icon: _jsx(IconRefresh, { "aria-hidden": "true" }), size: "compact", pending: regenerateAction.pending, disabled: regenerateAction.pending ||
+                                    hasActiveAgentRuns(thread) ||
+                                    !forkingCapability.enabled, title: forkingCapability.reason, onPress: () => void regenerateAction.execute().catch(() => undefined) })) : null, branchNavigation && branchNavigation.count > 1 ? (_jsxs("div", { className: "agentkit-branch-navigation", "aria-label": labels.branchPosition
+                                    .replace("{{index}}", String(branchNavigation.index))
+                                    .replace("{{count}}", String(branchNavigation.count)), children: [_jsx(IconButton, { label: labels.previousBranch, icon: _jsx(IconChevronLeft, { "aria-hidden": "true" }), size: "compact", disabled: branchNavigation.index <= 1 ||
+                                            branchNavigationAction.pending, pending: branchNavigationAction.pending, onPress: () => void branchNavigationAction
+                                            .execute("previous")
+                                            .catch(() => undefined) }), _jsx("span", { "aria-live": "polite", children: labels.branchPosition
+                                            .replace("{{index}}", String(branchNavigation.index))
+                                            .replace("{{count}}", String(branchNavigation.count)) }), _jsx(IconButton, { label: labels.nextBranch, icon: _jsx(IconChevronRight, { "aria-hidden": "true" }), size: "compact", disabled: branchNavigation.index >= branchNavigation.count ||
+                                            branchNavigationAction.pending, pending: branchNavigationAction.pending, onPress: () => void branchNavigationAction
+                                            .execute("next")
+                                            .catch(() => undefined) })] })) : null, message.createdAt ? (_jsx("time", { dateTime: message.createdAt, children: labels.formatTimestamp?.(message.createdAt) ??
+                                    new Date(message.createdAt).toLocaleTimeString([], {
+                                        hour: "numeric",
+                                        minute: "2-digit",
+                                    }) })) : null, slots.messageActionsTrailing ? (_jsx(slots.messageActionsTrailing, { value: message, threadId: threadId })) : null, _jsx(Menu, { open: actionsMenuOpen, onOpenChange: (open) => {
+                                    setActionsMenuOpen(open);
+                                    if (!open)
+                                        setRequestIdCopied(false);
+                                }, placement: "bottom", align: "end", className: "agentkit-message-menu w-48", trigger: _jsx(IconButton, { label: labels.messageActions, icon: _jsx(IconDotsVertical, { "aria-hidden": "true" }), size: "compact", "aria-expanded": actionsMenuOpen, title: labels.messageActions }), items: [
+                                    {
+                                        id: "copy-request-id",
+                                        label: requestIdCopied
+                                            ? labels.copied
+                                            : requestId
+                                                ? labels.copyRequestId
+                                                : labels.requestIdUnavailable,
+                                        icon: requestIdCopied ? (_jsx(IconCircleCheck, { size: 14, "aria-hidden": "true" })) : (_jsx(IconId, { size: 14, "aria-hidden": "true" })),
+                                        disabled: !requestId || requestIdAction.pending,
+                                    },
+                                    ...(forkingCapability.visible && onThreadForked
+                                        ? [
+                                            {
+                                                id: "fork-chat",
+                                                label: (_jsx("span", { title: forkingCapability.reason, children: labels.fork })),
+                                                icon: _jsx(IconGitBranch, { size: 14, "aria-hidden": "true" }),
+                                                disabled: !forkingCapability.enabled || forkAction.pending,
+                                            },
+                                        ]
+                                        : []),
+                                ], onAction: (id) => {
+                                    if (id === "copy-request-id") {
+                                        void requestIdAction.execute().catch(() => undefined);
+                                    }
+                                    else if (id === "fork-chat") {
+                                        void forkAction.execute().catch(() => undefined);
+                                    }
+                                } })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "agentkit-message-actions-leading", 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) }), editContext?.enabled &&
+                                forkingCapability.visible &&
+                                text.trim() ? (_jsx(IconButton, { label: labels.editMessage, icon: _jsx(IconPencil, { "aria-hidden": "true" }), size: "compact", disabled: hasActiveAgentRuns(thread) || !forkingCapability.enabled, title: forkingCapability.reason, "aria-pressed": editContext.message?.id === message.id, onPress: () => editContext.setMessage(message) })) : null] }), _jsx("div", { className: "agentkit-message-actions-trailing", children: message.createdAt ? (_jsx("time", { dateTime: message.createdAt, children: labels.formatTimestamp?.(message.createdAt) ??
+                                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));
+    if (!message.parts.length &&
+        !attachedWidgets.length &&
+        !attachedAnnotations.length) {
+        return Supplement ? (_jsx(Supplement, { value: message, threadId: threadId })) : null;
+    }
+    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}`, userMessage: message.role === "user" }, `${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] }));
+}
+function hasActiveRuns(thread) {
+    return hasActiveAgentRuns(thread);
+}
+export function AgentKitComposer({ threadId: requestedThreadId, className, queueWhileRunning = true, showModelSelector = true, slashCommands, slashSkills, includeDefaultSlashCommands, includeDefaultSlashSkills, onSlashCommand, plusMenuMode, voiceEnabled = false, autoFocus = true, mode, defaultMode = "act", onModeChange, toolbarSlot, disabled, submissionDisabled, onDisabledClick, placeholder, initialText, initialTextKey, layoutVariant, availableModels, modelListLoading, selectedModel, selectedEngine, selectedEffort, onConnectProvider, onConnectLocalRuntime, imageModelMenu, onModelChange, onEffortChange, availableAgents, selectedAgent, agentOnly, onAgentChange, onModelSelectorOpenChange, modelStatusChecksEnabled, requireAgentEngine, attachmentsEnabled, onAttachmentRequest, contextButtonTooltipDisabled, onTextChange, composerRef: hostComposerRef, contextItems, onRemoveContextItem, extraActionButton, onSubmit: onSubmitOverride, onBeforeSubmit, onAttachmentError, interceptBuildRequestsForBuilder, planModeDisabled, planModeDisabledReason, stopButton, onInspectContextItem, onRetryContextItem, contextMenuItems, attachmentAdapter, inlineTextAttachments, beforeSend, }) {
+    const { threadId: contextThreadId, controller, labels, onThreadForked, registerComposerFocus, slots, } = useAgentKit();
+    const editContext = useContext(AgentMessageEditContext);
+    const editingMessage = editContext?.message ?? null;
+    const threadId = requestedThreadId ?? contextThreadId;
+    const submitFailureDraftScopeRef = useRef(null);
+    const getSubmitFailureDraftScope = useCallback(() => {
+        const scope = submitFailureDraftScopeRef.current;
+        submitFailureDraftScopeRef.current = null;
+        return scope;
+    }, []);
+    const queueCapability = useAgentCapability("messageQueue");
+    const suggestionsCapability = useAgentCapability("suggestions");
+    const uploadsCapability = useAgentCapability("uploads");
+    const modelSelectionCapability = useAgentCapability("modelSelection");
+    const canQueue = queueCapability.enabled;
+    const canUpload = uploadsCapability.enabled && attachmentsEnabled !== false;
+    const uploadGateRef = useRef({
+        enabled: canUpload,
+        reason: uploadsCapability.reason,
+    });
+    uploadGateRef.current = {
+        enabled: canUpload,
+        reason: uploadsCapability.reason,
+    };
+    // 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 localComposerRef = useRef(null);
+    const composerRef = hostComposerRef ?? localComposerRef;
+    const selectedSuggestionRef = useRef(undefined);
+    const suggestionScope = useRef({ threadId, enabled: false, mounted: true });
+    suggestionScope.current = {
+        ...suggestionScope.current,
+        threadId,
+        enabled: !disabled && suggestionsCapability.enabled && !editingMessage,
+    };
+    useEffect(() => {
+        suggestionScope.current.mounted = true;
+        return () => {
+            suggestionScope.current.mounted = false;
+        };
+    }, []);
+    const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
+    const [attachmentError, setAttachmentError] = useState(null);
+    const executionMode = mode ?? uncontrolledMode;
+    const active = hasActiveRuns(thread);
+    const composerInitialText = editingMessage
+        ? messageText(editingMessage)
+        : initialText;
+    const composerInitialTextKey = editingMessage
+        ? `edit:${editingMessage.id}`
+        : initialTextKey;
+    const focusComposer = useCallback(() => {
+        if (!autoFocus)
+            return;
+        composerRef.current?.focus();
+        if (typeof globalThis.requestAnimationFrame === "function") {
+            globalThis.requestAnimationFrame(() => composerRef.current?.focus());
+        }
+    }, [autoFocus]);
+    const reportAttachmentError = useCallback((message) => {
+        if (onAttachmentError)
+            onAttachmentError(message);
+        else
+            setAttachmentError(message);
+    }, [onAttachmentError]);
+    const addDroppedAttachment = useCallback(async (file) => {
+        try {
+            const composer = composerRef.current;
+            if (!composer)
+                throw new Error(labels.error);
+            await composer.addAttachment(file);
+            setAttachmentError(null);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : labels.error;
+            reportAttachmentError(message);
+            throw error;
+        }
+    }, [labels.error, reportAttachmentError]);
+    useEffect(() => {
+        const receiveAttachments = (event) => {
+            const detail = event.detail;
+            if (detail?.threadId !== threadId || !canUpload)
+                return;
+            void Promise.all(detail.files.map((file) => addDroppedAttachment(file))).catch(() => undefined);
+        };
+        window.addEventListener("agentkit:attach-files", receiveAttachments);
+        return () => window.removeEventListener("agentkit:attach-files", receiveAttachments);
+    }, [addDroppedAttachment, canUpload, threadId]);
+    const composerToolbarSlot = editingMessage ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: labels.cancelEditing, icon: _jsx(IconX, { "aria-hidden": "true" }), size: "compact", onPress: () => {
+                    composerRef.current?.setText(initialText ?? "");
+                    editContext?.setMessage(null);
+                    focusComposer();
+                } }), toolbarSlot] })) : (toolbarSlot);
+    useEffect(() => registerComposerFocus(threadId, focusComposer), [focusComposer, registerComposerFocus, threadId]);
+    // i18n-ignore: These type-level callback property names are not visible copy.
+    const submitMessage = async (text, files, references, // i18n-ignore: Type-only callback tuple, not rendered copy.
+    options, suggestion) => {
+        submitFailureDraftScopeRef.current = null;
+        const assertSuggestionCurrent = () => {
+            if (suggestion &&
+                (!suggestionScope.current.enabled ||
+                    !suggestionScope.current.mounted ||
+                    suggestionScope.current.threadId !== threadId ||
+                    !isCurrentAgentSuggestion(controller.getThread(threadId), suggestion)))
+                throw new Error(labels.error);
+        };
+        assertSuggestionCurrent();
+        const onLocalSubmit = () => {
+            options.onLocalSubmit?.();
+        };
+        if (!editingMessage && onSubmitOverride) {
+            const submitOptions = {
+                ...(suggestion ? { ...options, suggestion } : options),
+                onLocalSubmit,
+            };
+            await onSubmitOverride(text, files, references, submitOptions);
+            return;
+        }
+        if (files.length && !uploadGateRef.current.enabled) {
+            throw new AgentKitCapabilityError("uploads", "unavailable", uploadGateRef.current.reason ?? labels.error);
+        }
+        const effort = options.effort;
+        const contextItemsForSubmission = options.contextItems ?? contextItems;
+        const metadata = {
+            ...(editingMessage?.metadata ?? {}),
+            ...(suggestion ? { suggestion } : {}),
+            ...(contextItemsForSubmission === undefined
+                ? {}
+                : { contextItems: contextItemsForSubmission }),
+            ...(references.length ? { references } : {}),
+            ...(options.engine ? { engine: options.engine } : {}),
+            ...(options.model ? { model: options.model } : {}),
+            ...(effort ? { effort } : {}),
+            ...(selectedAgent ? { agentId: selectedAgent } : {}),
+            mode: executionMode,
+            requestMode: executionMode,
+        };
+        const runOptions = {
+            ...(selectedAgent ? { agentId: selectedAgent } : {}),
+            model: options.model,
+            mode: executionMode,
+            reasoningEffort: effort && !["auto", "max"].includes(effort)
+                ? effort
+                : undefined,
+            metadata,
+        };
+        const uploadFiles = files.map((file) => ({
+            name: file.name,
+            mediaType: file.type || "application/octet-stream",
+            size: file.size,
+            body: file,
+        }));
+        if (editingMessage) {
+            if (!onThreadForked) {
+                throw new Error(labels.navigationUnavailable);
+            }
+            const previousMessage = findPreviousMessage(thread.messages, editingMessage.id);
+            if (previousMessage === null) {
+                throw new Error(labels.messageUnavailable);
+            }
+            const forkedThread = await controller.forkThread(threadId, previousMessage?.id);
+            submitFailureDraftScopeRef.current = `agentkit:${forkedThread.id}`;
+            onThreadForked(forkedThread);
+            const uploadedAttachments = uploadFiles.length
+                ? await controller.uploadFiles(forkedThread.id, uploadFiles)
+                : [];
+            const previousAttachments = editingMessage.parts.filter((part) => part.type === "file");
+            const draft = createAgentKitComposerSubmission({
+                threadId: forkedThread.id,
+                intent: "immediate",
+                text,
+                composerModeContext: options.composerModeContext,
+                contextItems: contextItemsForSubmission,
+                references,
+                options: runOptions,
+            });
+            const payload = Object.freeze({
+                ...draft,
+                attachments: snapshotComposerValue([
+                    ...previousAttachments,
+                    ...uploadedAttachments,
+                ]),
+            });
+            await beforeSend?.(payload);
+            const sendMetadata = {
+                ...payload.options.metadata,
+                ...(payload.references.length
+                    ? { references: payload.references }
+                    : {}),
+                ...(payload.contextItems === undefined
+                    ? {}
+                    : { contextItems: payload.contextItems }),
+            };
+            await controller.sendMessage({
+                threadId: forkedThread.id,
+                text: payload.text,
+                attachments: [...payload.attachments],
+                options: payload.options,
+                metadata: sendMetadata,
+                onLocalSubmit,
+            });
+            submitFailureDraftScopeRef.current = null;
+            editContext?.setMessage(null);
+            return;
+        }
+        const submissionThread = controller.getThread(threadId);
+        const activeAtSubmit = hasActiveRuns(submissionThread);
+        const draft = createAgentKitComposerSubmission({
+            threadId,
+            intent: canQueue &&
+                (options.intent === "queued" || (activeAtSubmit && queueWhileRunning))
+                ? "queued"
+                : "immediate",
+            text,
+            composerModeContext: options.composerModeContext,
+            contextItems: contextItemsForSubmission,
+            references,
+            options: runOptions,
+        });
+        const attachments = uploadFiles.length
+            ? await control.uploadFiles(uploadFiles)
+            : [];
+        const payload = Object.freeze({
+            ...draft,
+            attachments: snapshotComposerValue(attachments),
+        });
+        await beforeSend?.(payload);
+        assertSuggestionCurrent();
+        const sendMetadata = {
+            ...payload.options.metadata,
+            ...(payload.references.length ? { references: payload.references } : {}),
+            ...(payload.contextItems === undefined
+                ? {}
+                : { contextItems: payload.contextItems }),
+        };
+        const message = {
+            text: payload.text,
+            attachments: [...payload.attachments],
+            options: payload.options,
+            metadata: sendMetadata,
+            onLocalSubmit,
+        };
+        if (payload.intent === "queued") {
+            await control.queueMessage(message);
+        }
+        else {
+            await control.sendMessage(message);
+        }
+    };
+    const prepareHostSubmit = async () => {
+        if (disabled) {
+            onDisabledClick?.();
+            return false;
+        }
+        if (editingMessage)
+            return true;
+        return !onBeforeSubmit || (await onBeforeSubmit());
+    };
+    const steerQueued = !disabled
+        ? (item) => void command
+            .execute(async () => {
+            if (!(await prepareHostSubmit()))
+                return;
+            if (onSubmitOverride) {
+                await submitMessage(item.text, [], [], {
+                    intent: "immediate",
+                    attachments: item.attachments,
+                });
+                await control.removeQueued(item.id);
+            }
+            else {
+                await control.steerQueued(item.id);
+            }
+        })
+            .catch(() => undefined)
+            .finally(focusComposer)
+        : undefined;
+    const supportsQueueReordering = controller.supportsQueuedMessageReordering?.() ?? false;
+    const moveQueuedToTop = useAgentKitMutation((messageId) => control.moveQueuedMessageToTop(messageId), `${threadId}:move-queued-to-top`);
+    const removeQueued = (item) => void command
+        .execute(() => control.removeQueued(item.id))
+        .catch(() => undefined)
+        .finally(focusComposer);
+    const selectSuggestion = (suggestion) => {
+        if (disabled ||
+            !suggestionsCapability.enabled ||
+            selectedSuggestionRef.current ||
+            !isCurrentAgentSuggestion(controller.getThread(threadId), suggestion))
+            return;
+        const composer = composerRef.current;
+        if (!composer)
+            return;
+        selectedSuggestionRef.current = suggestion;
+        void composer
+            .submitWithText(agentSuggestionPrompt(suggestion))
+            .catch(() => undefined)
+            .finally(() => {
+            if (selectedSuggestionRef.current === suggestion)
+                selectedSuggestionRef.current = undefined;
+            focusComposer();
+        });
+    };
+    const Queue = slots.queue;
+    const Suggestions = slots.suggestions;
+    const suggestions = selectAgentSuggestions(thread);
+    return (_jsxs("div", { className: `agentkit-composer-stack ${className ?? ""}`, children: [queueCapability.visible ? (Queue ? (_jsx(Queue, { items: thread.queuedMessages, threadId: threadId, active: active, pending: command.pending || Boolean(disabled), onSteer: steerQueued, onRemove: removeQueued })) : (_jsx(MessageQueueDrawer, { variant: "recessed", items: thread.queuedMessages.map((message) => ({
+                    id: message.id,
+                    text: message.text,
+                    images: (message.attachments ?? []).flatMap((attachment) => {
+                        if (!attachment.mediaType?.startsWith("image/"))
+                            return [];
+                        const src = safeAgentImageSrc(attachment.url);
+                        return src ? [src] : [];
+                    }),
+                })), disabled: command.pending || Boolean(disabled), 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,
+                }, getItemActions: supportsQueueReordering
+                    ? (item) => [
+                        {
+                            id: "move-to-top",
+                            label: labels.queueMoveToTop,
+                            icon: _jsx(IconArrowUp, { "aria-hidden": "true", size: 14 }),
+                            disabled: item.id === thread.queuedMessages[0]?.id ||
+                                moveQueuedToTop.pending,
+                            onSelect: (selected) => void command
+                                .execute(() => moveQueuedToTop.execute(selected.id))
+                                .catch(() => undefined),
+                        },
+                    ]
+                    : undefined }))) : null, suggestionsCapability.enabled &&
+                !disabled &&
+                !editingMessage &&
+                suggestions.length ? (Suggestions ? (_jsx(Suggestions, { suggestions: suggestions, threadId: threadId, pending: command.pending, onSelect: selectSuggestion })) : (_jsx(AgentSuggestionBar, { suggestions: suggestions.map((suggestion) => ({
+                    ...suggestion,
+                    disabled: command.pending || Boolean(disabled),
+                })), ariaLabel: labels.suggestions, onSelect: selectSuggestion, className: "agentkit-suggestions" }))) : null, _jsx(PromptComposer, { contextItems: contextItems, onRemoveContextItem: onRemoveContextItem, onInspectContextItem: onInspectContextItem, onRetryContextItem: onRetryContextItem, contextMenuItems: contextMenuItems, attachmentAdapter: attachmentAdapter, inlineTextAttachments: inlineTextAttachments, rootClassName: "agentkit-composer", draftScope: `agentkit:${threadId}${editingMessage ? `:edit:${editingMessage.id}` : ""}`, ariaLabel: labels.composerLabel, placeholder: placeholder ?? labels.composerPlaceholder, disabled: disabled, submissionDisabled: submissionDisabled || command.pending, onDisabledClick: onDisabledClick, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, imageModelMenu: imageModelMenu, autoFocus: autoFocus, composerRef: composerRef, willQueue: active && queueWhileRunning && canQueue, showModelSelector: showModelSelector && canSelectModel, availableModels: availableModels, modelListLoading: modelListLoading, selectedModel: selectedModel, selectedEngine: selectedEngine, selectedEffort: selectedEffort, onModelChange: onModelChange, onEffortChange: onEffortChange, availableAgents: availableAgents, selectedAgent: selectedAgent, agentOnly: agentOnly, onAgentChange: onAgentChange, onModelSelectorOpenChange: onModelSelectorOpenChange, modelStatusChecksEnabled: modelStatusChecksEnabled, requireAgentEngine: requireAgentEngine, layoutVariant: layoutVariant, toolbarSlot: composerToolbarSlot, initialText: composerInitialText, initialTextKey: composerInitialTextKey, onTextChange: onTextChange, extraActionButton: extraActionButton, onBeforeSubmit: onBeforeSubmit, getSubmitFailureDraftScope: getSubmitFailureDraftScope, onAttachmentError: reportAttachmentError, interceptBuildRequestsForBuilder: interceptBuildRequestsForBuilder, planModeDisabled: planModeDisabled, planModeDisabledReason: planModeDisabledReason, stopButton: stopButton, attachmentsEnabled: canUpload, onAttachmentRequest: onAttachmentRequest, contextButtonTooltipDisabled: contextButtonTooltipDisabled, slashCommands: slashCommands, slashSkills: slashSkills, includeDefaultSlashCommands: includeDefaultSlashCommands ?? false, includeDefaultSlashSkills: includeDefaultSlashSkills ?? false, onSlashCommand: onSlashCommand, plusMenuMode: plusMenuMode ?? "full", voiceEnabled: voiceEnabled, execMode: executionMode === "plan" ? "plan" : "build", onExecModeChange: (nextMode) => {
+                    const next = nextMode === "plan" ? "plan" : "act";
+                    if (mode === undefined)
+                        setUncontrolledMode(next);
+                    onModeChange?.(next);
+                }, onSubmit: async (text, files, references, options) => {
+                    if (disabled) {
+                        onDisabledClick?.();
+                        return;
+                    }
+                    focusComposer();
+                    try {
+                        await command.execute(async () => {
+                            await submitMessage(text, files, references, options, selectedSuggestionRef.current);
+                        });
+                    }
+                    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, attachmentError ? (_jsxs("div", { className: "agentkit-composer-error", role: "alert", children: [_jsx(IconAlertCircle, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { children: attachmentError })] })) : 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, hasRenderedMessages = false, emptyComposerPlacement = "center", autoScroll = true, className, }) {
+    const { threadId, slots, labels, onThreadForked } = useAgentKit();
+    const connection = useAgentConnection();
+    const uploadsCapability = useAgentCapability("uploads");
+    const control = useAgentKitControl(threadId);
+    const recovery = useAgentKitMutation(() => control.load(), threadId);
+    const thread = useAgentThread(threadId);
+    const [pendingEdit, setPendingEdit] = useState(null);
+    const editingMessage = pendingEdit?.threadId === threadId ? pendingEdit.message : null;
+    const setEditingMessage = useCallback((message) => {
+        setPendingEdit(message ? { threadId, message } : null);
+    }, [threadId]);
+    const messageEditContext = {
+        enabled: composer && Boolean(onThreadForked),
+        message: editingMessage,
+        setMessage: setEditingMessage,
+    };
+    useEffect(() => setPendingEdit(null), [threadId]);
+    const hasConversation = thread.messages.length > 0 || hasRenderedMessages;
+    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 fileDragDepthRef = useRef(0);
+    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 [transcriptAwayFromBottom, setTranscriptAwayFromBottom] = useState(false);
+    const [fileDragActive, setFileDragActive] = useState(false);
+    const lastMessage = thread.messages.at(-1);
+    const lastEventId = thread.events.at(-1)?.id;
+    const connectionError = connection.status === "error" ? connection.error : undefined;
+    const canDropFiles = composer &&
+        uploadsCapability.enabled &&
+        composerProps?.attachmentsEnabled !== false;
+    const hasFiles = (event) => Array.from(event.dataTransfer.types).includes("Files");
+    const handleFileDragEnter = (event) => {
+        if (!canDropFiles || event.defaultPrevented || !hasFiles(event))
+            return;
+        if (event.relatedTarget instanceof Node &&
+            event.currentTarget.contains(event.relatedTarget)) {
+            return;
+        }
+        event.preventDefault();
+        fileDragDepthRef.current += 1;
+        setFileDragActive(true);
+    };
+    const handleFileDragOver = (event) => {
+        if (!canDropFiles || event.defaultPrevented || !hasFiles(event))
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+        setFileDragActive(true);
+    };
+    const handleFileDragLeave = (event) => {
+        if (!canDropFiles || !hasFiles(event))
+            return;
+        if (event.relatedTarget instanceof Node &&
+            event.currentTarget.contains(event.relatedTarget)) {
+            return;
+        }
+        fileDragDepthRef.current = Math.max(0, fileDragDepthRef.current - 1);
+        setFileDragActive(fileDragDepthRef.current > 0);
+    };
+    const handleFileDrop = (event) => {
+        if (!canDropFiles || !hasFiles(event))
+            return;
+        fileDragDepthRef.current = 0;
+        setFileDragActive(false);
+        if (event.defaultPrevented)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const files = Array.from(event.dataTransfer.files);
+        if (!files.length)
+            return;
+        window.dispatchEvent(new CustomEvent("agentkit:attach-files", {
+            detail: { threadId, files },
+        }));
+    };
+    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 returnTranscriptToBottom = useCallback(() => {
+        const transcript = transcriptRef.current;
+        if (!transcript)
+            return;
+        followsTranscriptRef.current = true;
+        const nextScrollTop = Math.max(0, transcript.scrollHeight - transcript.clientHeight);
+        transcript.scrollTop = nextScrollTop;
+        setTranscriptAwayFromBottom(false);
+    }, []);
+    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;
+            setTranscriptAwayFromBottom(false);
+            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;
+        const nearBottom = isAgentKitTranscriptNearBottom(transcript);
+        if (nearBottom || transcriptScrollbarInteractionRef.current) {
+            followsTranscriptRef.current = nearBottom;
+        }
+        setTranscriptAwayFromBottom(!nearBottom);
+        if (transcriptScrollbarInteractionRef.current) {
+            scheduleTranscriptScrollbarHide();
+        }
+    }, [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 firstVisibleSequence = new Map();
+        const lastTextDeltaSequence = 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;
+            if (!firstVisibleSequence.has(messageId)) {
+                firstVisibleSequence.set(messageId, event.sequence);
+            }
+            if (event.type === "message.delta") {
+                lastTextDeltaSequence.set(messageId, event.sequence);
+            }
+        }
+        const result = new Map();
+        for (const [messageId, sequence] of firstVisibleSequence) {
+            result.set(messageId, lastTextDeltaSequence.get(messageId) ?? 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 groupedReasoningMessageIds = new Set(runWorkStarts.flatMap((event) => {
+        const messageId = reasoningMessageId(event);
+        return messageId ? [messageId] : [];
+    }));
+    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:${threadId}:${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,
+            }));
+        }
+        const displayMessage = message.role === "assistant"
+            ? {
+                ...message,
+                parts: message.parts.filter((part) => part.type !== "reasoning" &&
+                    (part.type !== "text" || part.text.trim())),
+            }
+            : message;
+        if (message.role === "assistant" &&
+            !groupedReasoningMessageIds.has(message.id) &&
+            message.parts.some((part) => part.type === "reasoning" &&
+                part.visibility !== "hidden" &&
+                part.text.trim())) {
+            const active = message.status === "streaming" && displayMessage.parts.length === 0;
+            transcriptItems.push(_jsx(AgentWorkDisclosure, { label: active ? labels.working : labels.worked, running: active, children: _jsx("div", { className: "agentkit-activities-list", children: _jsx(AgentReasoningParts, { message: message, threadId: threadId, active: active }) }) }, `reasoning:${threadId}:${message.id}`));
+        }
+        transcriptItems.push(_jsx(AgentKitSurfaceBoundary, { surface: "message", resetKey: `${message.id}:${thread.events.length}`, children: _jsx(Message, { value: displayMessage, threadId: threadId }) }, `message:${threadId}:${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 (_jsx(AgentMessageEditContext.Provider, { value: messageEditContext, children: _jsxs("section", { "aria-label": typeof title === "string" ? title : labels.conversation, className: `agentkit-chat ${className ?? ""}`, "data-empty": !hasConversation, "data-empty-composer-placement": hasConversation ? "bottom" : emptyComposerPlacement, onDragEnter: handleFileDragEnter, onDragOver: handleFileDragOver, onDragLeave: handleFileDragLeave, onDrop: handleFileDrop, children: [fileDragActive ? (_jsx("div", { className: "agentkit-file-drop-overlay", role: "status", children: labels.dropFilesToAttach })) : null, 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, _jsxs("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] ?? "" })) }, `${threadId}:${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] ?? "" })) }, `${threadId}:${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] }) }), transcriptAwayFromBottom ? (_jsx("div", { className: "agentkit-scroll-to-bottom-control", children: _jsx(IconButton, { label: labels.scrollToBottom, icon: _jsx(IconArrowDown, { "aria-hidden": "true" }), size: "compact", onPress: returnTranscriptToBottom }) })) : 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