fix: remove queue message button and clear localStorage draft on submit (#22615)

Fixes two bugs in the agents chat input:

1. **Remove queue message button next to stop button** — The send button
(which showed a ListPlusIcon during streaming) is now hidden when
streaming and not editing a queued message. Messages are still queued
via Enter key; only the visual button is removed. The stop button
remains.

2. **Clear localStorage draft on submit** — The `agents.empty-input`
localStorage key is now cleared synchronously in `handleSend` before the
async `onCreateChat` call. Previously, the draft was only cleared inside
the async `handleCreateChat` after `mutateAsync` resolved, allowing
Lexical editor change events to re-persist the draft during the async
gap.
This commit is contained in:
Kyle Carberry
2026-03-04 16:30:37 +00:00
committed by GitHub
parent 474e80b646
commit 9db39fb358
2 changed files with 22 additions and 25 deletions
+18 -25
View File
@@ -13,13 +13,7 @@ import {
TooltipContent,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import {
ArrowUpIcon,
ListPlusIcon,
Loader2Icon,
Square,
XIcon,
} from "lucide-react";
import { ArrowUpIcon, Loader2Icon, Square, XIcon } from "lucide-react";
import { memo, type ReactNode, useCallback, useRef, useState } from "react";
import { cn } from "utils/cn";
import { formatProviderLabel } from "./modelOptions";
@@ -317,8 +311,7 @@ export const AgentChatInput = memo<AgentChatInputProps>(
}
};
const sendButtonLabel =
isStreaming && editingQueuedMessageID === null ? "Queue message" : "Send";
const sendButtonLabel = editingQueuedMessageID !== null ? "Save" : "Send";
const content = (
<div className="mx-auto w-full max-w-3xl pb-4">
@@ -430,22 +423,22 @@ export const AgentChatInput = memo<AgentChatInputProps>(
<span className="sr-only">Stop</span>
</Button>
)}
<Button
size="icon"
variant="default"
className="size-7 rounded-full transition-colors [&>svg]:!size-6 flex items-center justify-center"
onClick={handleSubmit}
disabled={!canSend}
>
{isLoading ? (
<Loader2Icon className="animate-spin" />
) : isStreaming && editingQueuedMessageID === null ? (
<ListPlusIcon />
) : (
<ArrowUpIcon />
)}
<span className="sr-only">{sendButtonLabel}</span>
</Button>
{!(isStreaming && editingQueuedMessageID === null) && (
<Button
size="icon"
variant="default"
className="size-7 rounded-full transition-colors [&>svg]:!size-6 flex items-center justify-center"
onClick={handleSubmit}
disabled={!canSend}
>
{isLoading ? (
<Loader2Icon className="animate-spin" />
) : (
<ArrowUpIcon />
)}
<span className="sr-only">{sendButtonLabel}</span>
</Button>
)}
</div>
</div>
{inputStatusText && (
+4
View File
@@ -814,6 +814,10 @@ export const AgentsEmptyState: FC<AgentsEmptyStateProps> = ({
const handleSend = useCallback(
(message: string) => {
// Clear the draft synchronously before the async
// onCreateChat call so that editor change events
// firing during the async gap cannot re-persist it.
localStorage.removeItem(emptyInputStorageKey);
void onCreateChat({
message,
workspaceId: selectedWorkspaceIdRef.current ?? undefined,