@agent-native/core 0.82.0 → 0.84.0

package/dist/client/AssistantChat.js

@@ -15,7 +15,7 @@ import { AGENT_CHAT_VIEW_TRANSITION_PREPARE_EVENT } from "./chat-view-transition
 import { DownscalingImageAttachmentAdapter, BinaryDocumentAttachmentAdapter, MAX_ESTIMATED_BODY_BYTES, AGGRESSIVE_MAX_IMAGE_DIMENSION, AGGRESSIVE_JPEG_QUALITY, transcodeImageToDataURL, createAgentImageAttachments, serializeQueuedAttachments, estimateAttachmentBodyBytes, } from "./chat/attachment-adapters.js";
 import { TextStreamingContext } from "./chat/markdown-renderer.js";
 import { CheckpointContext, MessageActionsContext, UserMessage, AssistantMessage, SelectionAttachedPill, RunningActivityStatus, } from "./chat/message-components.js";
-import { repoHasAssistantMessage, getRepoMessages, getRepoMessage, shouldImportServerThreadData, dedupeRepoMessagesById, } from "./chat/repo-helpers.js";
+import { repoHasAssistantMessage, getRepoMessages, getRepoMessage, shouldImportServerThreadData, dedupeRepoMessagesById, dropEmptyAssistantMessages, } from "./chat/repo-helpers.js";
 import { BuilderSetupCard, LoopLimitContinueCard, RunErrorRecoveryCard, PlanModeCallout, getLoopLimitMetadata, getRunErrorMetadata, getRequestModeMetadata, } from "./chat/run-recovery.js";
 import { createAgentChatRuntimeAdapter, } from "./chat/runtime.js";
 import { ChatRunningContext, ApprovalContext, ReconnectStreamMessage, } from "./chat/tool-call-display.js";
@@ -347,7 +347,7 @@ function ensureMessageMetadata(repo) {
     // throws "performOp/link: A message with the same id already exists in the
     // parent tree" (Sentry AGENT-NATIVE-BROWSER-2Q) when fed repeated ids. No-op
     // for the normal no-duplicate case. See dedupeRepoMessagesById.
-    repo = dedupeRepoMessagesById(repo);
+    repo = dropEmptyAssistantMessages(dedupeRepoMessagesById(repo));
     if (!repo?.messages || !Array.isArray(repo.messages))
         return repo;
     for (const entry of repo.messages) {
@@ -709,6 +709,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     // True during the 250ms continuation window and startup of the next chunk
     // (adapter's auto-continue delay before POSTing the next chunk).
     const [isAutoResuming, setIsAutoResuming] = useState(false);
+    const [optimisticRunning, setOptimisticRunning] = useState(false);
     const [runningActivityLabel, setRunningActivityLabel] = useState(null);
     // Delayed-reveal state for the activity label (see ACTIVITY_LABEL_REVEAL_DELAY_MS).
     // `latest` holds the most recent activity label; `surfaced` flips true once the
@@ -739,7 +740,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     // Real running state — drives submission/queue gating. Treat reconnecting
     // to an active run the same as running, UNLESS the user has explicitly
     // clicked stop (forceStopped).
-    const isRunning = !forceStopped && (isRuntimeRunning || isReconnecting);
+    const isRunning = !forceStopped && (isRuntimeRunning || isReconnecting || optimisticRunning);
     const textStreaming = isRunning || externalStreaming;
     // UI-only running state — drives the stop button and thinking indicator.
     const showRunningInUI = isRunning;
@@ -761,6 +762,14 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     // Stable ref to the "stop active run" action so addToQueue can abort
     // a running turn without adding many unstable closure deps to its dep list.
     const stopActiveRunRef = useRef(() => { });
+    const markOptimisticRunning = useCallback(() => {
+        setOptimisticRunning(true);
+        if (typeof window === "undefined")
+            return;
+        window.dispatchEvent(new CustomEvent("agentNative.chatRunning", {
+            detail: { isRunning: true, tabId: tabId || threadId },
+        }));
+    }, [tabId, threadId]);
     useEffect(() => {
         if (lastBroadcastRunningRef.current === isRunning)
             return;
@@ -769,6 +778,21 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
             detail: { isRunning, tabId: tabId || threadId },
         }));
     }, [isRunning, tabId, threadId]);
+    useEffect(() => {
+        if (!optimisticRunning)
+            return;
+        if (!forceStopped && !isRuntimeRunning && !isReconnecting)
+            return;
+        setOptimisticRunning(false);
+    }, [forceStopped, isReconnecting, isRuntimeRunning, optimisticRunning]);
+    useEffect(() => {
+        if (!optimisticRunning)
+            return;
+        const timer = window.setTimeout(() => {
+            setOptimisticRunning(false);
+        }, 15_000);
+        return () => window.clearTimeout(timer);
+    }, [optimisticRunning]);
     // ─── Chat persistence ──────────────────────────────────────────────
     const hasRestoredRef = useRef(false);
     const [initialCachedThreadSnapshot] = useState(() => readCachedThreadSnapshot(apiUrl, threadId));
@@ -814,6 +838,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         // re-evaluates against the runtime exactly as before instead of
         // short-circuiting to the rejected repo.
         let settled = true;
+        let settledRepo = repo;
         if (repo?.messages?.length > 0) {
             let shouldImport = true;
             try {
@@ -826,7 +851,9 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                 if (options?.markTitleGenerated) {
                     titleGeneratedRef.current = true;
                 }
-                threadRuntime.import(ensureMessageMetadata(repo));
+                const importRepo = ensureMessageMetadata(repo);
+                threadRuntime.import(importRepo);
+                settledRepo = importRepo;
             }
             else {
                 settled = false;
@@ -846,7 +873,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         }
         if (settled && signature !== null) {
             lastImportedSignatureRef.current = signature;
-            lastImportedRepoRef.current = repo;
+            lastImportedRepoRef.current = settledRepo;
         }
         return repo;
     }, [threadRuntime]);
@@ -1858,6 +1885,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     // all the stop-related state in its own dep array.
     const stopActiveRun = useCallback(() => {
         setForceStopped(true);
+        setOptimisticRunning(false);
         const activeRun = getActiveRun();
         const runIdToAbort = reconnectRunIdRef.current ?? activeRun?.runId;
         userStoppedRunRef.current = {
@@ -2054,14 +2082,21 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
             ]);
         }
         else {
-            appendThreadMessage({
-                role: "user",
-                content: [{ type: "text", text: submittedText }],
-                ...(messageAttachments.length > 0
-                    ? { attachments: messageAttachments }
-                    : {}),
-                ...createUserMessageRunConfig(references, effectiveRequestMode, recoveryAction, trackInRunsTray),
-            });
+            markOptimisticRunning();
+            try {
+                appendThreadMessage({
+                    role: "user",
+                    content: [{ type: "text", text: submittedText }],
+                    ...(messageAttachments.length > 0
+                        ? { attachments: messageAttachments }
+                        : {}),
+                    ...createUserMessageRunConfig(references, effectiveRequestMode, recoveryAction, trackInRunsTray),
+                });
+            }
+            catch (error) {
+                setOptimisticRunning(false);
+                throw error;
+            }
         }
         if (submitted.includesContext) {
             updateComposerContextItems(() => []);
@@ -2073,6 +2108,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         execMode,
         isRunning,
         materializeFrozenReconnectContent,
+        markOptimisticRunning,
         appendThreadMessage,
         updateComposerContextItems,
     ]);
@@ -2102,7 +2138,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
             addToQueue(text, images);
         },
         isRunning() {
-            return thread.isRunning;
+            return isRunning;
         },
         focusComposer() {
             tiptapRef.current?.focus();
@@ -2122,9 +2158,9 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     }), [
         addToQueue,
         exportCleanThreadRepo,
+        isRunning,
         messages.length,
         stageComposerContextItem,
-        thread.isRunning,
     ]);
     const autoscrollFollowKey = useMemo(() => [
         messages.map(messageFollowKey).join(";"),
@@ -2251,6 +2287,11 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         hasThreadFooterSlot;
     const showCenteredEmptyThreadFooterSlot = centeredEmptyState && !isRestoring && hasThreadFooterSlot;
     const showComposerSlot = Boolean(composerSlot) && (!centerComposerWhenEmpty || centeredEmptyState);
+    const compactMissingKeyEmptyState = missingApiKeySetupAboveComposer &&
+        missingApiKey &&
+        !authError &&
+        showEmptyState &&
+        !isRestoring;
     // Clarifying-question surface: the `ask-question` action writes a
     // GuidedQuestionPayload to application_state under "guided-questions". The
     // hook polls that key, and on submit/skip composes the answer as a normal
@@ -2267,6 +2308,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     // queued messages (no hand-written fetch).
     const approvalCtx = useMemo(() => ({
         onApprove: (approvalKey) => {
+            markOptimisticRunning();
             appendThreadMessage({
                 role: "user",
                 content: [
@@ -2282,8 +2324,12 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                         : undefined, undefined, undefined, [approvalKey]),
             });
         },
-    }), [appendThreadMessage, execMode]);
-    return (_jsx(CheckpointContext.Provider, { value: checkpointCtx, children: _jsx(MessageActionsContext.Provider, { value: messageActionsCtx, children: _jsx(ApprovalContext.Provider, { value: approvalCtx, children: _jsx(ChatRunningContext.Provider, { value: isRunning, children: _jsx(TextStreamingContext.Provider, { value: textStreaming, children: _jsxs("div", { "data-agent-empty-state": centeredEmptyState ? "centered" : undefined, className: cn("relative flex flex-1 flex-col h-full min-h-0 text-foreground", className), onDragEnter: handleChatDragEnter, onDragOver: handleChatDragOver, onDragLeave: handleChatDragLeave, onDropCapture: handleChatDropCapture, onDrop: handleChatDrop, children: [dropActive && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-50 flex items-center justify-center rounded-md border-2 border-dashed border-primary/70 bg-primary/5 backdrop-blur-[1px]", children: _jsx("span", { className: "rounded-md bg-background/90 px-3 py-1.5 text-xs font-medium text-foreground shadow-sm", children: "Drop to attach" }) })), showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-[13px] font-medium text-muted-foreground", children: "Agent" }), _jsx("div", { className: "flex items-center gap-1", children: onSwitchToCli && (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: onSwitchToCli, "aria-label": "Switch to CLI", className: "flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", children: [_jsx(IconTerminal, { className: "h-3.5 w-3.5" }), "CLI"] }) }), _jsx(TooltipContent, { children: "Switch to CLI" })] }) })) })] })), _jsx("div", { ref: scrollRef, className: "agent-chat-scroll flex-1 overflow-y-auto overflow-x-hidden min-h-0", children: authError ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: authSessionAvailable ? (_jsx(IconRefresh, { className: "h-5 w-5 text-muted-foreground" })) : (_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground" })) }), _jsxs("div", { className: "text-center max-w-[280px]", children: [_jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: authSessionAvailable
+    }), [appendThreadMessage, execMode, markOptimisticRunning]);
+    return (_jsx(CheckpointContext.Provider, { value: checkpointCtx, children: _jsx(MessageActionsContext.Provider, { value: messageActionsCtx, children: _jsx(ApprovalContext.Provider, { value: approvalCtx, children: _jsx(ChatRunningContext.Provider, { value: isRunning, children: _jsx(TextStreamingContext.Provider, { value: textStreaming, children: _jsxs("div", { "data-agent-empty-state": centeredEmptyState
+                                ? "centered"
+                                : compactMissingKeyEmptyState
+                                    ? "compact-setup"
+                                    : undefined, className: cn("relative flex flex-1 flex-col h-full min-h-0 text-foreground", className), onDragEnter: handleChatDragEnter, onDragOver: handleChatDragOver, onDragLeave: handleChatDragLeave, onDropCapture: handleChatDropCapture, onDrop: handleChatDrop, children: [dropActive && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 z-50 flex items-center justify-center rounded-md border-2 border-dashed border-primary/70 bg-primary/5 backdrop-blur-[1px]", children: _jsx("span", { className: "rounded-md bg-background/90 px-3 py-1.5 text-xs font-medium text-foreground shadow-sm", children: "Drop to attach" }) })), showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-[13px] font-medium text-muted-foreground", children: "Agent" }), _jsx("div", { className: "flex items-center gap-1", children: onSwitchToCli && (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { onClick: onSwitchToCli, "aria-label": "Switch to CLI", className: "flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", children: [_jsx(IconTerminal, { className: "h-3.5 w-3.5" }), "CLI"] }) }), _jsx(TooltipContent, { children: "Switch to CLI" })] }) })) })] })), _jsx("div", { ref: scrollRef, className: "agent-chat-scroll flex-1 overflow-y-auto overflow-x-hidden min-h-0", children: authError ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: authSessionAvailable ? (_jsx(IconRefresh, { className: "h-5 w-5 text-muted-foreground" })) : (_jsx(IconMessage, { className: "h-5 w-5 text-muted-foreground" })) }), _jsxs("div", { className: "text-center max-w-[280px]", children: [_jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: authSessionAvailable
                                                             ? "Chat session needs refresh"
                                                             : authError.sessionExpired
                                                                 ? "Session expired"
@@ -2350,15 +2396,15 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                     .replace(/<context>[\s\S]*?<\/context>\n?/g, "")
                                                     .trim();
                                                 return (_jsxs("div", { className: "group flex items-start justify-end gap-1.5", children: [_jsx("button", { type: "button", onClick: () => applyLocalQueuedMessages((prev) => prev.filter((m) => m.id !== msg.id)), "aria-label": "Remove from queue", className: "mt-1.5 flex h-5 w-5 items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-sm transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100", children: _jsx(IconX, { className: "h-3 w-3" }) }), _jsxs("div", { className: "max-w-[85%] rounded-lg bg-accent/50 px-3 py-2 text-sm leading-relaxed text-foreground/60 whitespace-pre-wrap break-words", children: [displayText, msg.images && msg.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 mt-1.5", children: msg.images.map((img, j) => (_jsx("img", { src: img, alt: "", className: "h-12 w-12 rounded object-cover border border-border/50" }, j))) }))] })] }, msg.id));
-                                            }), resolvedThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot", children: resolvedThreadFooterSlot })) : null] })) }), showScrollToBottom && (_jsx("div", { className: "shrink-0 flex justify-center -mb-1", children: _jsx("button", { type: "button", onClick: scrollToBottom, className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent", "aria-label": "Scroll to bottom", children: _jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) }) })), showComposerSlot ? composerSlot : null, showCenteredEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--centered-empty", children: resolvedThreadFooterSlot })) : null, guidedQuestions && guidedQuestions.length > 0 && (_jsx("div", { className: "shrink-0 px-3 pb-2 pt-1", children: _jsx("div", { className: "rounded-lg border border-border bg-card/60 shadow-sm", children: _jsx(GuidedQuestionFlow, { questions: guidedQuestions, onSubmit: handleGuidedQuestionsSubmit, onSkip: handleGuidedQuestionsSkip, ...(guidedQuestionsTitle
-                                                ? { title: guidedQuestionsTitle }
-                                                : {}), ...(guidedQuestionsDescription
-                                                ? { description: guidedQuestionsDescription }
-                                                : {}), ...(guidedQuestionsSkipLabel
-                                                ? { skipLabel: guidedQuestionsSkipLabel }
-                                                : {}), ...(guidedQuestionsSubmitLabel
-                                                ? { submitLabel: guidedQuestionsSubmitLabel }
-                                                : {}), className: "h-auto items-stretch justify-stretch bg-transparent" }) }) })), showPlanModeCallout && (_jsx(PlanModeCallout, { canImplementPlan: canImplementPlan, onImplementPlan: handleImplementPlan, onSwitchToAct: handleSwitchToAct })), _jsx(SelectionAttachedPill, {}), composerError && (_jsxs("div", { role: "alert", className: "shrink-0 mx-3 mb-1.5 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [_jsx(IconAlertTriangle, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), _jsx("span", { className: "flex-1 leading-snug", children: composerError }), _jsx("button", { type: "button", "aria-label": "Dismiss error", onClick: () => setComposerError(null), className: "shrink-0 opacity-70 hover:opacity-100", children: _jsx(IconX, { className: "h-3 w-3" }) })] })), missingApiKey &&
+                                            }), resolvedThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot", children: resolvedThreadFooterSlot })) : null] })) }), showScrollToBottom && (_jsx("div", { className: "shrink-0 flex justify-center -mb-1", children: _jsx("button", { type: "button", onClick: scrollToBottom, className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent", "aria-label": "Scroll to bottom", children: _jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) }) })), showComposerSlot ? composerSlot : null, showCenteredEmptyThreadFooterSlot ? (_jsx("div", { className: "agent-thread-footer-slot agent-thread-footer-slot--centered-empty", children: resolvedThreadFooterSlot })) : null, guidedQuestions && guidedQuestions.length > 0 && (_jsx("div", { className: "shrink-0 px-3 pb-2", children: _jsx(GuidedQuestionFlow, { questions: guidedQuestions, onSubmit: handleGuidedQuestionsSubmit, onSkip: handleGuidedQuestionsSkip, ...(guidedQuestionsTitle
+                                            ? { title: guidedQuestionsTitle }
+                                            : {}), ...(guidedQuestionsDescription
+                                            ? { description: guidedQuestionsDescription }
+                                            : {}), ...(guidedQuestionsSkipLabel
+                                            ? { skipLabel: guidedQuestionsSkipLabel }
+                                            : {}), ...(guidedQuestionsSubmitLabel
+                                            ? { submitLabel: guidedQuestionsSubmitLabel }
+                                            : {}), className: "h-auto items-stretch justify-stretch bg-transparent" }) })), showPlanModeCallout && (_jsx(PlanModeCallout, { canImplementPlan: canImplementPlan, onImplementPlan: handleImplementPlan, onSwitchToAct: handleSwitchToAct })), _jsx(SelectionAttachedPill, {}), composerError && (_jsxs("div", { role: "alert", className: "shrink-0 mx-3 mb-1.5 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: [_jsx(IconAlertTriangle, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), _jsx("span", { className: "flex-1 leading-snug", children: composerError }), _jsx("button", { type: "button", "aria-label": "Dismiss error", onClick: () => setComposerError(null), className: "shrink-0 opacity-70 hover:opacity-100", children: _jsx(IconX, { className: "h-3 w-3" }) })] })), missingApiKey &&
                                     !authError &&
                                     missingApiKeySetupAboveComposer ? (_jsx(BuilderSetupCard, { onConnected: handleBuilderConnected, bouncePulse: missingKeyBouncePulse, layout: missingApiKeySetupLayout })) : null, _jsxs(AgentComposerFrame, { layoutVariant: composerLayoutVariant, className: cn(composerAreaClassName, missingApiKey && "cursor-pointer", isComposerDisabled && "opacity-70"), onClick: missingApiKey
                                         ? () => setMissingKeyBouncePulse((p) => p + 1)