studio/frontend: show Generation stopped placeholder when cancelled mid-thinking (#5565)

* studio/frontend: show Generation stopped placeholder when cancelled mid-thinking

Closes #5563.

When the user clicks Stop before any visible content has streamed in,
the running indicator disappears but no Parts have rendered yet, leaving
just the AssistantActionBar floating below the user prompt. That looks
broken (and is the exact failure mode behind the 'tools work, but I
don't see anything happening' bucket of reports).

Add a sibling CancelledIndicator next to GeneratingIndicator that fires
when content is empty AND status is incomplete with reason cancelled,
rendering a muted 'Generation stopped.' italic. The terminal-state
label is consistent with tool-fallback's existing 'Cancelled tool'
treatment and with reasoning's 'Thought for N seconds' summary.

* studio/frontend: shorten CancelledIndicator comment

Trim the 3-line explanation to a single line describing what the
placeholder is for.

* studio/frontend: use 'Cancelled.' to match tool-fallback wording

---------

Co-authored-by: danielhanchen <michaelhan2050@gmail.com>
This commit is contained in:
Daniel Han 2026-05-19 06:57:14 -07:00 committed by GitHub
commit ebed6469a0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -996,6 +996,24 @@ const GeneratingIndicator: FC = () => {
return <span className="text-sm text-muted-foreground">Generating...</span>;
};
// Placeholder when stop fires before any visible content (e.g. mid-think).
const CancelledIndicator: FC = () => {
const show = useAuiState(
({ message }) =>
message.content.length === 0 &&
message.status?.type === "incomplete" &&
message.status?.reason === "cancelled",
);
if (!show) {
return null;
}
return (
<span className="aui-cancelled-indicator text-sm italic text-muted-foreground">
Cancelled.
</span>
);
};
const AssistantMessage: FC = () => {
return (
<MessagePrimitive.Root
@ -1004,6 +1022,7 @@ const AssistantMessage: FC = () => {
>
<div className="aui-assistant-message-content wrap-break-word min-w-0 text-[#0d0d0d] dark:text-foreground leading-relaxed">
<GeneratingIndicator />
<CancelledIndicator />
<MessagePrimitive.Parts
components={{
Text: MarkdownText,