@agent-native/agentkit 0.3.2-nightly-20260927082735 → 0.4.0

package/dist/react/components.js

@@ -1,13 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ActionButton, AgentSuggestionBar, IconButton, MessageQueueDrawer, PromptComposer, Surface, TextField, agentSuggestionPrompt, splitMarkdownBlocks, writeClipboardText, } from "@agent-native/toolkit/agentkit";
-import { IconActivity, IconAlertCircle, IconArrowFork, IconBook2, IconBrain, IconChevronRight, IconCircleCheck, IconCode, IconCopy, IconDotsVertical, IconFile, IconGitBranch, IconId, IconMessage, IconPlugConnected, IconPlayerPause, IconPlayerPlay, IconSearch, IconTerminal2, IconChecklist, IconThumbDown, IconThumbUp, IconTool, IconX, } from "@tabler/icons-react";
-import { Component, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { Dialog, Popover, TextArea } from "@agent-native/toolkit/design-system";
+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 { createAgentKitComposerSubmission, snapshotComposerValue, } from "./composer-submission.js";
 import { inferAgentActivityKind, } from "../protocol/index.js";
 import { useAgentCapability, useAgentConnection, useAgentKit, useAgentKitControl, useAgentKitMutation, useAgentThread, } from "./context.js";
 import { AgentStreamingText } from "./streaming-text.js";
+/** Isolates custom renderers so one extension cannot take down the chat. */
 export class AgentKitErrorBoundary extends Component {
     state = {
         resetKey: this.props.resetKey,
@@ -55,6 +57,7 @@ function AgentKitRegionSlot({ slot: Slot, threadId, 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;
@@ -113,6 +116,7 @@ function escapeIncompleteStrongMarkdown(text) {
         .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;
@@ -140,6 +144,7 @@ function AgentMarkdown({ 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;
@@ -458,6 +463,17 @@ export function AgentActivityGroup({ runId, afterSequence, throughSequence, excl
         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] ?? slots.tool)
+            : undefined;
+        return tool && Renderer && tool.status !== "running"
+            ? [{ tool, Renderer }]
+            : [];
+    });
+    const durableToolResultIds = new Set(durableToolResults.map(({ tool }) => tool.id));
+    const activityItems = items.filter((activity) => !durableToolResultIds.has(activity.id));
     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 }));
@@ -507,7 +523,7 @@ export function AgentActivityGroup({ runId, afterSequence, throughSequence, excl
     if (items.length === 0)
         return null;
     const displayGroups = [];
-    for (const activity of items) {
+    for (const activity of activityItems) {
         const sourceTool = toolMap.get(activity.id);
         const hasCustomToolRenderer = Boolean(sourceTool &&
             !activityMap.has(activity.id) &&
@@ -525,7 +541,7 @@ export function AgentActivityGroup({ runId, afterSequence, throughSequence, excl
             displayGroups.push([activity]);
         }
     }
-    const labelsSummary = Array.from(new Set(items.map((item) => item.label.trim()).filter(Boolean)));
+    const labelsSummary = Array.from(new Set(activityItems.map((item) => item.label.trim()).filter(Boolean)));
     const remaining = Math.max(0, labelsSummary.length - 2);
     const summary = `${labelsSummary.slice(0, 2).join(", ")}${remaining ? ` +${remaining}` : ""}`;
     const formatDuration = (ms) => formatAgentKitDuration(ms, {
@@ -542,26 +558,26 @@ export function AgentActivityGroup({ runId, afterSequence, throughSequence, excl
                 ? labels.workedFor.replace("{{duration}}", formatDuration(durationMs))
                 : labels.worked
             : summary || labels.activities;
-    return (_jsxs("details", { className: "agentkit-activities", "data-running": visiblyRunning ? "true" : undefined, open: open, children: [_jsxs("summary", { className: "agentkit-activities-summary", onClick: (event) => {
-                    event.preventDefault();
-                    setOpen((current) => !current);
-                }, children: [_jsx(IconActivity, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { className: "agentkit-activities-label", children: summaryLabel }), !completedRunSummary ? (_jsx("span", { className: "agentkit-activities-count", children: items.length })) : null, _jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-summary-chevron" })] }), _jsx("div", { className: "agentkit-activities-list", children: displayGroups.map((activities) => {
-                    const activity = activities[0];
-                    if (activities.length > 1) {
-                        return (_jsx(RepeatedActivityCluster, { activities: activities, threadId: threadId }, `cluster:${activity.id}`));
-                    }
-                    const sourceTool = toolMap.get(activity.id);
-                    const ToolRenderer = sourceTool
-                        ? (registry.tools?.[sourceTool.name] ?? slots.tool)
-                        : undefined;
-                    if (sourceTool && ToolRenderer && !activityMap.has(activity.id)) {
-                        return (_jsx(ToolRenderer, { value: sourceTool, threadId: threadId }, sourceTool.id));
-                    }
-                    const Renderer = registry.activities?.[activity.kind] ??
-                        slots.activity ??
-                        AgentActivityItem;
-                    return (_jsx(Renderer, { value: activity, threadId: threadId }, activity.id));
-                }) })] }));
+    return (_jsxs(_Fragment, { children: [durableToolResults.length ? (_jsx("div", { "data-agentkit-tool-results": "true", children: durableToolResults.map(({ tool, Renderer }) => (_jsx(Renderer, { value: tool, threadId: threadId }, tool.id))) })) : null, displayGroups.length ? (_jsxs("details", { className: "agentkit-activities", "data-running": visiblyRunning ? "true" : undefined, open: open, children: [_jsxs("summary", { className: "agentkit-activities-summary", onClick: (event) => {
+                            event.preventDefault();
+                            setOpen((current) => !current);
+                        }, children: [_jsx(IconActivity, { "aria-hidden": "true", className: "agentkit-icon" }), _jsx("span", { className: "agentkit-activities-label", children: summaryLabel }), !completedRunSummary ? (_jsx("span", { className: "agentkit-activities-count", children: activityItems.length })) : null, _jsx(IconChevronRight, { "aria-hidden": "true", className: "agentkit-icon agentkit-summary-chevron" })] }), _jsx("div", { className: "agentkit-activities-list", children: displayGroups.map((activities) => {
+                            const activity = activities[0];
+                            if (activities.length > 1) {
+                                return (_jsx(RepeatedActivityCluster, { activities: activities, threadId: threadId }, `cluster:${activity.id}`));
+                            }
+                            const sourceTool = toolMap.get(activity.id);
+                            const ToolRenderer = sourceTool
+                                ? (registry.tools?.[sourceTool.name] ?? slots.tool)
+                                : undefined;
+                            if (sourceTool && ToolRenderer && !activityMap.has(activity.id)) {
+                                return (_jsx(ToolRenderer, { value: sourceTool, threadId: threadId }, sourceTool.id));
+                            }
+                            const Renderer = registry.activities?.[activity.kind] ??
+                                slots.activity ??
+                                AgentActivityItem;
+                            return (_jsx(Renderer, { value: activity, threadId: threadId }, activity.id));
+                        }) })] })) : null] }));
 }
 export function AgentCollaborationFeed({ runId, afterSequence, throughSequence, }) {
     const { threadId, slots, registry, labels } = useAgentKit();
@@ -770,7 +786,91 @@ export function AgentWidgetView({ value: widget, threadId, }) {
     const titleId = `${widget.id}-title`;
     return (_jsx("section", { className: "agentkit-widget-shell", "data-widget-kind": widget.kind, "aria-labelledby": widget.title ? titleId : undefined, children: _jsxs(Surface, { className: "agentkit-widget", elevation: "low", padding: "none", children: [widget.title ? _jsx("h3", { id: titleId, children: widget.title }) : null, typeof widget.data === "string" ? _jsx("p", { children: widget.data }) : null, widget.actions?.length ? (_jsx("div", { className: "agentkit-widget-actions", children: widget.actions.map((action) => (_jsx(AgentWidgetActionButton, { widget: widget, action: action, threadId: threadId }, action.id))) })) : null] }) }));
 }
-export function AgentMessagePartView({ value: part, threadId, active = false, resetKey = `${threadId}:${part.type}`, }) {
+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();
     const RegisteredRenderer = registry.messageParts?.[part.type];
     if (RegisteredRenderer) {
@@ -778,8 +878,8 @@ export function AgentMessagePartView({ value: part, threadId, active = false, re
     }
     switch (part.type) {
         case "text": {
-            const Renderer = slots.text;
-            return Renderer ? (_jsx(Renderer, { value: part, threadId: threadId, active: active, resetKey: resetKey })) : part.format === "markdown" ? (_jsx(AgentStreamingText, { text: part.text, active: active, resetKey: resetKey, children: (visibleText) => _jsx(AgentMarkdown, { text: visibleText }) })) : (_jsx("p", { "data-format": "plain", children: _jsx(AgentStreamingText, { text: part.text, active: active, resetKey: resetKey }) }));
+            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;
@@ -804,6 +904,12 @@ export function AgentMessagePartView({ value: part, threadId, active = false, re
             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": {
@@ -818,6 +924,7 @@ export function AgentMessagePartView({ value: part, threadId, active = false, re
             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]) {
@@ -840,24 +947,111 @@ export function resolveAgentMessageRequestId(message, events) {
     }
     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 { labels, onThreadForked } = useAgentKit();
+    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 text = message.parts
-        .filter((part) => part.type === "text")
-        .map((part) => part.text)
-        .join("\n");
+    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 [actionModeOpen, setActionModeOpen] = useState(false);
-    const actionPanelId = useId();
+    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);
@@ -865,7 +1059,8 @@ export function AgentMessageActions({ value: message, threadId, }) {
             clearTimeout(requestIdCopiedTimer.current);
     }, [message.id]);
     const copyAction = useAgentKitMutation(async () => {
-        if (!(await writeClipboardText(text))) {
+        const handled = await onCopyMessage?.({ message, text });
+        if (!handled && !(await writeClipboardText(text))) {
             throw new Error(labels.copyUnavailable);
         }
         setCopied(true);
@@ -873,7 +1068,22 @@ export function AgentMessageActions({ value: message, threadId, }) {
             clearTimeout(copiedTimer.current);
         copiedTimer.current = setTimeout(() => setCopied(false), 1_400);
     }, `${threadId}:${message.id}:copy`);
-    const feedbackAction = useAgentKitMutation((value) => control.submitFeedback(message.id, value), `${threadId}:${message.id}:feedback`);
+    const 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);
@@ -891,41 +1101,106 @@ export function AgentMessageActions({ value: message, threadId, }) {
         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);
+            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;
-    return (_jsxs("div", { className: "agentkit-message-actions", "data-action-mode": actionModeOpen ? "expanded" : "default", children: [message.role === "assistant" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "agentkit-message-action-swap", id: actionPanelId, "aria-live": "polite", children: [_jsxs("div", { className: "agentkit-message-action-group agentkit-message-action-group--default", "aria-hidden": actionModeOpen, 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, disabled: actionModeOpen, 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: actionModeOpen ||
-                                                    feedbackAction.pending ||
-                                                    !feedbackCapability.enabled, title: feedbackCapability.reason, onPress: () => void updateFeedback("positive") }), _jsx(IconButton, { label: labels.negativeFeedback, icon: _jsx(IconThumbDown, { "aria-hidden": "true" }), size: "compact", "aria-pressed": feedback === "negative", pending: feedbackAction.pending && feedback === "negative", disabled: actionModeOpen ||
-                                                    feedbackAction.pending ||
-                                                    !feedbackCapability.enabled, title: feedbackCapability.reason, onPress: () => void updateFeedback("negative") })] })) : null] }), _jsxs("div", { className: "agentkit-message-action-group agentkit-message-action-group--request-id", "aria-hidden": !actionModeOpen, children: [_jsx(IconButton, { label: requestIdCopied ? labels.copied : labels.copyRequestId, icon: requestIdCopied ? (_jsx(IconCircleCheck, { "aria-hidden": "true" })) : (_jsx(IconId, { "aria-hidden": "true" })), size: "compact", pending: requestIdAction.pending, disabled: !actionModeOpen || !requestId || requestIdAction.pending, title: requestId
-                                            ? requestIdCopied
-                                                ? labels.copied
-                                                : labels.copyRequestId
-                                            : labels.requestIdUnavailable, onPress: () => void requestIdAction.execute().catch(() => undefined) }), forkingCapability.visible && onThreadForked ? (_jsx(IconButton, { label: labels.fork, icon: _jsx(IconGitBranch, { "aria-hidden": "true" }), size: "compact", pending: forkAction.pending, disabled: !actionModeOpen || !forkingCapability.enabled, title: forkingCapability.reason, onPress: () => void forkAction.execute().catch(() => undefined) })) : null] })] }), _jsx(IconButton, { label: labels.messageActions, icon: _jsx(IconDotsVertical, { "aria-hidden": "true" }), size: "compact", "aria-expanded": actionModeOpen, "aria-controls": actionPanelId, title: labels.messageActions, onPress: () => {
-                            setActionModeOpen((open) => {
-                                const next = !open;
-                                if (!next)
-                                    setRequestIdCopied(false);
-                                return next;
-                            });
-                        } })] })) : (_jsx(IconButton, { label: copied ? labels.copied : labels.copy, icon: copied ? (_jsx(IconCircleCheck, { "aria-hidden": "true" })) : (_jsx(IconCopy, { "aria-hidden": "true" })), size: "compact", pending: copyAction.pending, onPress: () => void copyAction.execute().catch(() => undefined) })), message.createdAt ? (_jsx("time", { dateTime: message.createdAt, children: new Date(message.createdAt).toLocaleTimeString([], {
-                    hour: "numeric",
-                    minute: "2-digit",
-                }) })) : null, actionError ? (_jsx("span", { className: "agentkit-command-error", role: "alert", children: actionError.message })) : null] }));
+        forkAction.error ??
+        regenerateAction.error;
+    return (_jsxs("div", { className: "agentkit-message-actions", 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 ||
+                                    thread.activeRunIds.length > 0 ||
+                                    !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(Popover, { open: actionsMenuOpen, onOpenChange: (open) => {
+                                    setActionsMenuOpen(open);
+                                    if (!open)
+                                        setRequestIdCopied(false);
+                                }, placement: "bottom", align: "end", className: "agentkit-message-menu", trigger: _jsx(IconButton, { label: labels.messageActions, icon: _jsx(IconDotsVertical, { "aria-hidden": "true" }), size: "compact", "aria-expanded": actionsMenuOpen, title: labels.messageActions }), children: _jsxs("div", { className: "agentkit-message-menu-items", role: "menu", children: [_jsxs("button", { type: "button", role: "menuitem", className: "agentkit-message-menu-item", disabled: !requestId || requestIdAction.pending, title: requestId
+                                                ? requestIdCopied
+                                                    ? labels.copied
+                                                    : labels.copyRequestId
+                                                : labels.requestIdUnavailable, onClick: () => {
+                                                setActionsMenuOpen(false);
+                                                void requestIdAction.execute().catch(() => undefined);
+                                            }, children: [requestIdCopied ? (_jsx(IconCircleCheck, { "aria-hidden": "true" })) : (_jsx(IconId, { "aria-hidden": "true" })), _jsx("span", { children: requestIdCopied
+                                                        ? labels.copied
+                                                        : requestId
+                                                            ? labels.copyRequestId
+                                                            : labels.requestIdUnavailable })] }), forkingCapability.visible && onThreadForked ? (_jsxs("button", { type: "button", role: "menuitem", className: "agentkit-message-menu-item", disabled: !forkingCapability.enabled || forkAction.pending, title: forkingCapability.reason, onClick: () => {
+                                                setActionsMenuOpen(false);
+                                                void forkAction.execute().catch(() => undefined);
+                                            }, children: [_jsx(IconGitBranch, { "aria-hidden": "true" }), _jsx("span", { children: labels.fork })] })) : null] }) })] })] })) : (_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: thread.activeRunIds.length > 0 || !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();
@@ -938,7 +1213,7 @@ export function AgentMessageView({ value: message, threadId, }) {
         !embeddedWidgetIds.has(widget.id));
     const attachedAnnotations = Object.values(thread.annotations).filter((annotation) => thread.annotationMessageIds[annotation.id] === message.id &&
         !embeddedAnnotationIds.has(annotation.id));
-    return (_jsxs("article", { className: "agentkit-message", "data-role": message.role, "data-message-id": message.id, "aria-label": message.role === "user" ? labels.you : labels.assistant, "aria-busy": message.status === "streaming", children: [_jsxs("div", { className: "agentkit-message-content", children: [message.parts.map((part, index) => (_jsx(AgentMessagePartView, { value: part, threadId: threadId, active: message.status === "streaming", resetKey: `${threadId}:${message.id}:${index}` }, `${message.id}-${index}`))), attachedWidgets.map((widget) => (_jsx(AgentMessagePartView, { value: { type: "widget", widget }, threadId: threadId }, widget.id))), attachedAnnotations.length ? (_jsx("div", { className: "agentkit-annotations", children: attachedAnnotations.map((annotation) => (_jsx(AgentMessagePartView, { value: { type: "annotation", annotation }, threadId: threadId }, annotation.id))) })) : null, Supplement ? _jsx(Supplement, { value: message, threadId: threadId }) : null] }), _jsx(Actions, { value: message, threadId: threadId })] }));
+    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();
@@ -948,15 +1223,20 @@ export function AgentConnectionErrorView({ error, threadId, recover, recovering,
     const { labels } = useAgentKit();
     return (_jsxs("div", { className: "agentkit-error", "data-error-code": error.code, "data-thread-id": threadId, role: "alert", children: [_jsx("strong", { children: labels.error }), _jsx("span", { children: error.message }), error.retryable ? (_jsx("div", { className: "agentkit-error-actions", children: _jsx(ActionButton, { emphasis: "outline", size: "compact", pending: recovering, onPress: () => void recover().catch(() => undefined), children: labels.reconnect }) })) : null, recoveryError ? (_jsx("span", { className: "agentkit-command-error", children: recoveryError.message })) : null] }));
 }
-export function AgentKitComposer({ threadId: requestedThreadId, className, queueWhileRunning = true, showModelSelector = true, slashCommands, slashSkills, includeDefaultSlashCommands, includeDefaultSlashSkills, onSlashCommand, plusMenuMode, voiceEnabled = false, autoFocus = true, mode, defaultMode = "act", onModeChange, contextItems, onRemoveContextItem, onInspectContextItem, onRetryContextItem, contextMenuItems, attachmentAdapter, inlineTextAttachments, beforeSend, }) {
-    const { threadId: contextThreadId, labels, registerComposerFocus, slots, } = useAgentKit();
+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, onDisabledClick, placeholder, initialText, initialTextKey, layoutVariant, availableModels, modelListLoading, selectedModel, selectedEngine, selectedEffort, onConnectProvider, onConnectLocalRuntime, imageModelMenu, onModelChange, onEffortChange, availableAgents, selectedAgent, agentOnly, onAgentChange, onModelSelectorOpenChange, modelStatusChecksEnabled, attachmentsEnabled, onAttachmentRequest, contextButtonTooltipDisabled, onTextChange, 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 queueCapability = useAgentCapability("messageQueue");
     const suggestionsCapability = useAgentCapability("suggestions");
     const uploadsCapability = useAgentCapability("uploads");
     const modelSelectionCapability = useAgentCapability("modelSelection");
     const canQueue = queueCapability.enabled;
-    const canUpload = uploadsCapability.enabled;
+    const canUpload = uploadsCapability.enabled && attachmentsEnabled !== false;
+    // 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);
@@ -964,8 +1244,15 @@ export function AgentKitComposer({ threadId: requestedThreadId, className, queue
     const command = useAgentKitMutation((execute) => execute(), threadId);
     const composerRef = useRef(null);
     const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
+    const [attachmentError, setAttachmentError] = useState(null);
     const executionMode = mode ?? uncontrolledMode;
     const active = thread.activeRunIds.length > 0;
+    const composerInitialText = editingMessage
+        ? messageText(editingMessage)
+        : initialText;
+    const composerInitialTextKey = editingMessage
+        ? `edit:${editingMessage.id}`
+        : initialTextKey;
     const focusComposer = useCallback(() => {
         if (!autoFocus)
             return;
@@ -974,84 +1261,224 @@ export function AgentKitComposer({ threadId: requestedThreadId, className, queue
             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]);
-    const submitPrompt = async (text, files, references, options) => {
-        const submission = command.execute(async () => {
-            const effort = options.effort;
+    // 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) => {
+        const effort = options.effort;
+        const contextItemsForSubmission = options.contextItems ?? contextItems;
+        const metadata = {
+            ...(editingMessage?.metadata ?? {}),
+            ...(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);
+            onThreadForked(forkedThread);
+            const uploadedAttachments = uploadFiles.length && canUpload
+                ? await controller.uploadFiles(forkedThread.id, uploadFiles)
+                : [];
+            const previousAttachments = editingMessage.parts.filter((part) => part.type === "file");
             const draft = createAgentKitComposerSubmission({
-                threadId,
-                intent: canQueue &&
-                    (options.intent === "queued" || (active && queueWhileRunning))
-                    ? "queued"
-                    : "immediate",
+                threadId: forkedThread.id,
+                intent: "immediate",
                 text,
-                contextItems: options.contextItems,
+                contextItems: contextItemsForSubmission,
                 references,
-                options: {
-                    model: options.model,
-                    mode: executionMode,
-                    reasoningEffort: effort && !["auto", "max"].includes(effort)
-                        ? effort
-                        : undefined,
-                },
+                options: runOptions,
             });
-            const attachments = files.length && canUpload
-                ? await control.uploadFiles(files.map((file) => ({
-                    name: file.name,
-                    mediaType: file.type || "application/octet-stream",
-                    size: file.size,
-                    body: file,
-                })))
-                : [];
             const payload = Object.freeze({
                 ...draft,
-                attachments: snapshotComposerValue(attachments),
+                attachments: snapshotComposerValue([
+                    ...previousAttachments,
+                    ...uploadedAttachments,
+                ]),
             });
             await beforeSend?.(payload);
-            const metadata = payload.references.length || payload.contextItems !== undefined
-                ? {
-                    ...(payload.references.length
-                        ? { references: payload.references }
-                        : {}),
-                    ...(payload.contextItems === undefined
-                        ? {}
-                        : { contextItems: payload.contextItems }),
-                }
-                : undefined;
-            const message = {
+            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,
-            };
-            if (payload.intent === "queued") {
-                await control.queueMessage(message);
-            }
-            else {
-                await control.sendMessage(message);
-            }
+                metadata: sendMetadata,
+            });
+            editContext?.setMessage(null);
+            return;
+        }
+        if (onSubmitOverride) {
+            await onSubmitOverride(text, files, references, options);
+            return;
+        }
+        const draft = createAgentKitComposerSubmission({
+            threadId,
+            intent: canQueue &&
+                (options.intent === "queued" || (active && queueWhileRunning))
+                ? "queued"
+                : "immediate",
+            text,
+            contextItems: contextItemsForSubmission,
+            references,
+            options: runOptions,
+        });
+        const attachments = uploadFiles.length && canUpload
+            ? await control.uploadFiles(uploadFiles)
+            : [];
+        const payload = Object.freeze({
+            ...draft,
+            attachments: snapshotComposerValue(attachments),
         });
-        focusComposer();
-        await submission.finally(focusComposer);
+        await beforeSend?.(payload);
+        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,
+        };
+        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 = !active
+    const steerQueued = !disabled
         ? (item) => void command
-            .execute(() => control.steerQueued(item.id))
+            .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) => void submitPrompt(agentSuggestionPrompt(suggestion), [], [], {
-        contextItems,
+    const selectSuggestion = (suggestion) => void command
+        .execute(async () => {
+        if (!(await prepareHostSubmit()))
+            return;
+        await submitMessage(agentSuggestionPrompt(suggestion), [], [], {
+            intent: active && queueWhileRunning && canQueue ? "queued" : "immediate",
+            contextItems,
+        });
     })
         .catch(() => undefined)
         .finally(focusComposer);
     const Queue = slots.queue;
     const Suggestions = slots.suggestions;
-    return (_jsxs("div", { className: `agentkit-composer-stack ${className ?? ""}`, children: [queueCapability.visible ? (Queue ? (_jsx(Queue, { items: thread.queuedMessages, threadId: threadId, active: active, pending: command.pending, onSteer: steerQueued, onRemove: removeQueued })) : (_jsx(MessageQueueDrawer, { variant: "recessed", items: thread.queuedMessages, disabled: command.pending, onSteer: steerQueued
+    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)
@@ -1067,15 +1494,42 @@ export function AgentKitComposer({ threadId: requestedThreadId, className, queue
                     steerHint: labels.queueSteerHint,
                     remove: labels.queueRemove,
                     moreActions: labels.queueMore,
-                } }))) : null, suggestionsCapability.visible && thread.suggestions.length ? (Suggestions ? (_jsx(Suggestions, { suggestions: thread.suggestions, threadId: threadId, pending: command.pending, onSelect: selectSuggestion })) : (_jsx(AgentSuggestionBar, { suggestions: thread.suggestions.map((suggestion) => ({
+                }, 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.visible && thread.suggestions.length ? (Suggestions ? (_jsx(Suggestions, { suggestions: thread.suggestions, threadId: threadId, pending: command.pending, onSelect: selectSuggestion })) : (_jsx(AgentSuggestionBar, { suggestions: thread.suggestions.map((suggestion) => ({
                     ...suggestion,
-                    disabled: command.pending,
-                })), ariaLabel: labels.suggestions, onSelect: selectSuggestion, className: "agentkit-suggestions" }))) : null, _jsx(PromptComposer, { contextItems: contextItems, onRemoveContextItem: onRemoveContextItem, onInspectContextItem: onInspectContextItem, onRetryContextItem: onRetryContextItem, contextMenuItems: contextMenuItems, attachmentAdapter: attachmentAdapter, inlineTextAttachments: inlineTextAttachments, rootClassName: "agentkit-composer", layoutVariant: "default", draftScope: `agentkit:${threadId}`, ariaLabel: labels.composerLabel, placeholder: labels.composerPlaceholder, autoFocus: autoFocus, composerRef: composerRef, submitting: command.pending, willQueue: active && queueWhileRunning && canQueue, showModelSelector: showModelSelector && canSelectModel, attachmentsEnabled: canUpload, slashCommands: slashCommands, slashSkills: slashSkills, includeDefaultSlashCommands: includeDefaultSlashCommands ?? false, includeDefaultSlashSkills: includeDefaultSlashSkills ?? false, onSlashCommand: onSlashCommand, plusMenuMode: plusMenuMode ?? (canUpload ? "upload-only" : "hidden"), voiceEnabled: voiceEnabled, execMode: executionMode === "plan" ? "plan" : "build", onExecModeChange: (nextMode) => {
+                    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, onDisabledClick: onDisabledClick, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, imageModelMenu: imageModelMenu, autoFocus: autoFocus, composerRef: composerRef, submitting: command.pending, 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, layoutVariant: layoutVariant, toolbarSlot: composerToolbarSlot, initialText: composerInitialText, initialTextKey: composerInitialTextKey, onTextChange: onTextChange, extraActionButton: extraActionButton, onBeforeSubmit: onBeforeSubmit, 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: submitPrompt }), 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] }));
+                }, onSubmit: async (text, files, references, options) => {
+                    if (disabled) {
+                        onDisabledClick?.();
+                        return;
+                    }
+                    focusComposer();
+                    try {
+                        await command.execute(async () => {
+                            await submitMessage(text, files, references, options);
+                        });
+                    }
+                    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;
@@ -1092,11 +1546,23 @@ export function isAgentKitTranscriptNearBottom(element, threshold = AGENTKIT_TRA
     return (element.scrollHeight - element.clientHeight - element.scrollTop <= threshold);
 }
 export function AgentKitChat({ title, toolbar, composer = true, composerProps, emptyComposerPlacement = "center", autoScroll = true, className, }) {
-    const { threadId, slots, labels } = useAgentKit();
+    const { 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;
     const Message = slots.message ?? AgentMessageView;
     const EmptyState = slots.emptyState;
@@ -1113,6 +1579,7 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, e
     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);
@@ -1120,9 +1587,59 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, e
     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;
@@ -1159,6 +1676,15 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, e
             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;
@@ -1188,6 +1714,7 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, e
             transcriptThreadIdRef.current = threadId;
             previousLastMessageIdRef.current = undefined;
             followsTranscriptRef.current = true;
+            setTranscriptAwayFromBottom(false);
             hideTranscriptScrollbar();
         }
         const previousLastMessageId = previousLastMessageIdRef.current;
@@ -1235,13 +1762,15 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, e
         const transcript = transcriptRef.current;
         if (!transcript)
             return;
-        if (autoScroll && transcriptScrollbarInteractionRef.current) {
-            followsTranscriptRef.current = isAgentKitTranscriptNearBottom(transcript);
+        const nearBottom = isAgentKitTranscriptNearBottom(transcript);
+        if (nearBottom || transcriptScrollbarInteractionRef.current) {
+            followsTranscriptRef.current = nearBottom;
         }
+        setTranscriptAwayFromBottom(!nearBottom);
         if (transcriptScrollbarInteractionRef.current) {
             scheduleTranscriptScrollbarHide();
         }
-    }, [autoScroll, 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));
@@ -1267,7 +1796,8 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, e
         return result;
     }, [thread.events]);
     const messageBoundarySequences = useMemo(() => {
-        const result = new Map();
+        const firstVisibleSequence = new Map();
+        const lastTextDeltaSequence = new Map();
         const assistantMessageIds = new Set(thread.messages
             .filter((message) => message.role === "assistant")
             .map((message) => message.id));
@@ -1282,7 +1812,16 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, e
                     : undefined;
             if (!messageId)
                 continue;
-            result.set(messageId, Math.min(result.get(messageId) ?? Infinity, event.sequence));
+            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]);
@@ -1370,6 +1909,6 @@ export function AgentKitChat({ title, toolbar, composer = true, composerProps, e
         }
         transcriptItems.push(_jsx(AgentKitSurfaceBoundary, { surface: "activity", resetKey: `${runId}:${thread.events.length}`, children: renderRunFailure(runId) }, `run-failure:${runId}`));
     }
-    return (_jsxs("section", { "aria-label": typeof title === "string" ? title : labels.conversation, className: `agentkit-chat ${className ?? ""}`, "data-empty": !hasConversation, "data-empty-composer-placement": emptyComposerPlacement, children: [hasConversation && (title || toolbar) ? (_jsx(AgentKitSurfaceBoundary, { surface: "header", resetKey: threadId, children: _jsx(AgentKitRegionSlot, { slot: Header, threadId: threadId, children: _jsxs("header", { className: "agentkit-chat-header", children: [_jsx("div", { className: "agentkit-chat-title", children: title }), _jsx(AgentKitRegionSlot, { slot: Toolbar, threadId: threadId, children: _jsx("div", { className: "agentkit-chat-toolbar", children: toolbar }) })] }) }) })) : null, _jsx("div", { ref: transcriptRef, className: "agentkit-transcript", "aria-live": "off", "data-scrollbar-visible": transcriptScrollbarVisible, onKeyDown: handleTranscriptKeyDown, onPointerDown: handleTranscriptPointerDown, onScroll: handleTranscriptScroll, onTouchMove: revealTranscriptScrollbar, onWheel: revealTranscriptScrollbar, children: _jsx("div", { ref: transcriptContentRef, className: "agentkit-transcript-content", children: _jsxs(AgentKitRegionSlot, { slot: Transcript, threadId: threadId, children: [!hasConversation && EmptyState ? (_jsx(EmptyState, { threadId: threadId })) : null, transcriptItems, approvalEntries.map(([approvalId, request]) => (_jsx(AgentKitSurfaceBoundary, { surface: "approval", resetKey: `${approvalId}:${thread.events.length}`, children: Approval ? (_jsx(Approval, { value: request, threadId: threadId, runId: thread.approvalRunIds[approvalId] ?? "" })) : (_jsx(AgentApprovalPrompt, { request: request, runId: thread.approvalRunIds[approvalId] ?? "" })) }, approvalId))), connectionRequestEntries.map(([requestId, request]) => (_jsx(AgentKitSurfaceBoundary, { surface: "connection-request", resetKey: `${requestId}:${request.status}`, children: ConnectionRequest ? (_jsx(ConnectionRequest, { value: request, threadId: threadId, runId: thread.connectionRequestRunIds[requestId] ?? "" })) : (_jsx(AgentConnectionRequestCard, { request: request, runId: thread.connectionRequestRunIds[requestId] ?? "" })) }, requestId))), connectionError ? (_jsx(AgentKitSurfaceBoundary, { surface: "connection-error", resetKey: `${threadId}:${connectionError.code}`, children: _jsx(ErrorState, { error: connectionError, threadId: threadId, recover: recovery.execute, recovering: recovery.pending, recoveryError: recovery.error }) })) : null] }) }) }), composer ? (_jsx("footer", { className: "agentkit-chat-footer", children: _jsx(AgentKitSurfaceBoundary, { surface: "composer", resetKey: threadId, children: _jsx(AgentKitRegionSlot, { slot: Footer, threadId: threadId, children: slots.composer ? (_jsx(Composer, { threadId: threadId })) : (_jsx(AgentKitComposer, { ...composerProps, threadId: threadId })) }) }) })) : null] }));
+    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": 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] ?? "" })) }, approvalId))), connectionRequestEntries.map(([requestId, request]) => (_jsx(AgentKitSurfaceBoundary, { surface: "connection-request", resetKey: `${requestId}:${request.status}`, children: ConnectionRequest ? (_jsx(ConnectionRequest, { value: request, threadId: threadId, runId: thread.connectionRequestRunIds[requestId] ?? "" })) : (_jsx(AgentConnectionRequestCard, { request: request, runId: thread.connectionRequestRunIds[requestId] ?? "" })) }, requestId))), connectionError ? (_jsx(AgentKitSurfaceBoundary, { surface: "connection-error", resetKey: `${threadId}:${connectionError.code}`, children: _jsx(ErrorState, { error: connectionError, threadId: threadId, recover: recovery.execute, recovering: recovery.pending, recoveryError: recovery.error }) })) : null] }) }), 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