indifferentketchup/boocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): morphing send/stop/queue composer button

Browse Source 
The composer's primary button now reflects generation state: Send when idle,
Stop while generating with an empty draft, and Queue while generating with a
draft typed (submitting queues it via the existing queue path). Stop is
click-only so a stray Enter never interrupts a run. ChatInput gains generating
+ onStop props.

BooChat: removes the separate centered "Stop generating" pill and wires
generating={streaming} + onStop={handleStop}. BooCoder: generating now keys on
sending || activeTaskId (the dispatch POST is too brief on its own), which also
fixes the queue gates that previously fired mid-run; onStop cancels the active
task via the new api.coder.cancelTask, and the input is no longer disabled while
a task runs so follow-ups can be queued.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
indifferentketchup
2026-05-31 02:15:14 +00:00
parent 2fd7e5bf97
commit 08d6a8fa40
3 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/web/src/components/ChatInput.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent, type KeyboardEvent } from 'react';
import { Check, Plus, Send } from 'lucide-react';
import { Check, ListPlus, Plus, Send, Square } from 'lucide-react';
import { toast } from 'sonner';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
@@ -51,6 +51,11 @@ interface Props {
webSearchEnabled?: boolean | null;
onSend: (content: string) => void | Promise<void>;
onForceSend?: (content: string) => void | Promise<void>;
// When the assistant/agent is generating, the send button morphs: empty draft
// → Stop (calls onStop); non-empty draft → Queue (submits, which the caller
// queues while busy). Omitting onStop falls back to a (disabled) Send button.
generating?: boolean;
onStop?: () => void | Promise<void>;
// Batch 9.6: slash-command dispatch. When the input parses to a known skill,
// ChatInput calls this with the skill name + the post-name args (possibly
// empty). Callers wire this to api.chats.skillInvoke. Omitting the prop
@@ -78,7 +83,7 @@ interface Props {
modelContextLimit?: number | null;
}
export function ChatInput({ disabled, projectId, agentId, onAgentChange, sessionId, webSearchEnabled, onSend, onForceSend, onSlashCommand, slashGroups, chatId, chatLabel, messages, modelContextLimit }: Props) {
export function ChatInput({ disabled, projectId, agentId, onAgentChange, sessionId, webSearchEnabled, onSend, onForceSend, generating, onStop, onSlashCommand, slashGroups, chatId, chatLabel, messages, modelContextLimit }: Props) {
const { isMobile } = useViewport();
const [value, setValue] = useState('');
const [busy, setBusy] = useState(false);
@@ -651,14 +656,38 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
rows={3}
className="resize-none min-h-[68px] max-h-[240px]"
/>
{(() => {
const hasContent = value.trim().length > 0 || attachments.length > 0;
// While generating with an empty draft, the button stops generation.
if (generating && onStop && !hasContent) {
return (
<Button
onClick={() => void onStop()}
size="icon-lg"
variant="outline"
aria-label="Stop generating"
title="Stop generating"
>
<Square className="fill-current size-3.5" />
</Button>
);
}
// With a draft, submit. While generating the caller queues it, so the
// button reads as Queue; otherwise it's a normal Send.
const queueing = !!generating && hasContent;
return (
<Button
onClick={() => void submit()}
disabled={disabled || busy || (!value.trim() && attachments.length === 0)}
disabled={disabled || busy || !hasContent}
size="icon-lg"
aria-label="Send"
variant={queueing ? 'secondary' : 'default'}
aria-label={queueing ? 'Queue message' : 'Send'}
title={queueing ? 'Queue message' : 'Send'}
>
<Send />
{queueing ? <ListPlus /> : <Send />}
</Button>
);
})()}
</div>
</div>
<AttachmentPreviewModal

20
apps/web/src/components/panes/ChatPane.tsx
View File

@@ -1,5 +1,5 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { Pencil, Send, Square, X } from 'lucide-react';
import { Pencil, Send, X } from 'lucide-react';
import { toast } from 'sonner';
import { api } from '@/api/client';
import { useSessionStream } from '@/hooks/useSessionStream';
@@ -248,22 +248,6 @@ export function ChatPane({ sessionId, chatId, projectId, agentId, onAgentChange,
</div>
)}
{/* Stop button when streaming */}
{streaming && (
<div className="border-t py-1">
<div className="max-w-[1000px] mx-auto w-full flex justify-center">
<button
type="button"
onClick={() => void handleStop()}
className="flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border hover:bg-muted text-muted-foreground hover:text-foreground max-md:min-h-[44px] max-md:px-5"
>
<Square size={10} className="fill-current" />
Stop generating
</button>
</div>
</div>
)}
{stale && streamingId && (
<StaleStreamBanner
onRetry={() => void handleRetryStale()}
@@ -280,6 +264,8 @@ export function ChatPane({ sessionId, chatId, projectId, agentId, onAgentChange,
webSearchEnabled={webSearchEnabled}
onSend={handleSend}
onForceSend={streaming ? handleForceSend : undefined}
generating={streaming}
onStop={handleStop}
onSlashCommand={handleSlashCommand}
chatId={chatId}
chatLabel={sessionChats?.find((c) => c.id === chatId)?.name ?? 'Chat'}

29
apps/web/src/components/panes/CoderPane.tsx
View File

@@ -581,6 +581,10 @@ export function CoderPane({
const [queue, setQueue] = useState<string[]>([]);
const queueProcessing = useRef(false);
const inputRef = useRef<HTMLTextAreaElement>(null);
// The agent is "generating" during the dispatch POST (sending) AND while its
// task runs (activeTaskId). sending alone is too brief — it clears the moment
// dispatch returns — so queueing/stop must key on this combined signal.
const generating = sending || activeTaskId !== null;
// Refresh pending changes when a message_complete arrives
useEffect(() => {
@@ -760,24 +764,35 @@ export function CoderPane({
}
}, [sessionId, paneId, chatId, agentConfig, setMessages]);
// Drain queue when not busy
// Drain queue once the agent is idle (not just past the dispatch POST).
useEffect(() => {
if (sending || queue.length === 0 || queueProcessing.current) return;
if (generating || queue.length === 0 || queueProcessing.current) return;
queueProcessing.current = true;
const next = queue[0]!;
setQueue((prev) => prev.slice(1));
sendOneMessage(next).finally(() => { queueProcessing.current = false; });
}, [sending, queue, sendOneMessage]);
}, [generating, queue, sendOneMessage]);
const handleChatInputSend = useCallback(async (content: string) => {
const text = content.trim();
if (!text || !chatId) return;
if (sending) {
if (generating) {
setQueue((prev) => [...prev, text]);
return;
}
await sendOneMessage(text);
}, [sending, chatId, sendOneMessage]);
}, [generating, chatId, sendOneMessage]);
const handleStop = useCallback(async () => {
const taskId = activeTaskId;
if (!taskId) return;
try {
await api.coder.cancelTask(taskId);
setActiveTaskId(null); // optimistic; WS/poll terminal-state also clears it
} catch (err) {
toast.error(err instanceof Error ? err.message : 'stop failed');
}
}, [activeTaskId]);
const handleChatInputSlash = useCallback(async (skillName: string, userMessage: string) => {
if (!chatId) return;
@@ -867,9 +882,11 @@ export function CoderPane({
{/* Composer + input */}
<div className="shrink-0 border-t border-border">
<ChatInput
disabled={sending || !chatId || chatPending}
disabled={!chatId || chatPending}
projectId={projectPath ?? ''}
onSend={handleChatInputSend}
generating={generating}
onStop={handleStop}
onSlashCommand={handleChatInputSlash}
slashGroups={slashGroups}
chatId={chatId ?? undefined}