ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-18 11:40:39 +09:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): show shimmer and icon on initial Working... state for new agent runs

Browse source 
Eliminates two visual glitches when a new agent run starts:
1. The initial "Working..." was rendered as plain text without the shimmer
   animation or agent icon — now matches the proper working state styling.
2. A brief blank flash occurred when transcript chunks arrived but hadn't
   produced parseable parts yet — fixed by deriving waitingText from parts
   availability instead of the hasOutput flag.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-04-08 07:52:06 -05:00
parent 28a28d1cb6
commit c5ccafbb80
2 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

13
ui/src/components/IssueChatThread.tsx
View file

@ -818,7 +818,7 @@ function IssueChatAssistantMessage() {
const runHref = runId && runAgentId ? `/agents/${runAgentId}/runs/${runId}` : null; const runHref = runId && runAgentId ? `/agents/${runAgentId}/runs/${runId}` : null;
const chainOfThoughtLabel = typeof custom.chainOfThoughtLabel === "string" ? custom.chainOfThoughtLabel : null; const chainOfThoughtLabel = typeof custom.chainOfThoughtLabel === "string" ? custom.chainOfThoughtLabel : null;
const hasCoT = message.content.some((p) => p.type === "reasoning" || p.type === "tool-call"); const hasCoT = message.content.some((p) => p.type === "reasoning" || p.type === "tool-call");
const isFoldable = !isRunning && hasCoT && !!chainOfThoughtLabel; const isFoldable = !isRunning && !!chainOfThoughtLabel;
const [folded, setFolded] = useState(isFoldable); const [folded, setFolded] = useState(isFoldable);
const [prevFoldKey, setPrevFoldKey] = useState({ messageId: message.id, isFoldable }); const [prevFoldKey, setPrevFoldKey] = useState({ messageId: message.id, isFoldable });
@ -900,8 +900,15 @@ function IssueChatAssistantMessage() {
}} }}
/> />
{message.content.length === 0 && waitingText ? ( {message.content.length === 0 && waitingText ? (
<div className="rounded-sm bg-accent/20 px-3 py-2 text-sm text-muted-foreground"> <div className="flex items-center gap-2.5 rounded-lg px-1 py-2">
{waitingText} <span className="inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
{agentIcon ? (
<AgentIcon icon={agentIcon} className="h-4 w-4 shrink-0" />
) : (
<Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
)}
<span className="shimmer-text">{waitingText}</span>
</span>
</div> </div>
) : null} ) : null}
{notices.length > 0 ? ( {notices.length > 0 ? (

12
ui/src/lib/issue-chat-messages.ts
View file

@ -593,22 +593,17 @@ function normalizeLiveRuns(
function createLiveRunMessage(args: { function createLiveRunMessage(args: {
run: LiveRunForIssue; run: LiveRunForIssue;
transcript: readonly IssueChatTranscriptEntry[]; transcript: readonly IssueChatTranscriptEntry[];
hasOutput: boolean;
}) { }) {
const { run, transcript, hasOutput } = args; const { run, transcript } = args;
const { parts, notices, segments } = buildAssistantPartsFromTranscript(transcript); const { parts, notices, segments } = buildAssistantPartsFromTranscript(transcript);
const waitingText = const waitingText =
run.status === "queued" run.status === "queued"
? "Queued..." ? "Queued..."
: hasOutput : parts.length > 0
? "" ? ""
: "Working..."; : "Working...";
const content = parts.length > 0 const content = parts;
? parts
: waitingText
? [{ type: "text", text: waitingText } satisfies TextMessagePart]
: [];
const message: ThreadAssistantMessage = { const message: ThreadAssistantMessage = {
id: `live-run:${run.id}`, id: `live-run:${run.id}`,
@ -712,7 +707,6 @@ export function buildIssueChatMessages(args: {
message: createLiveRunMessage({ message: createLiveRunMessage({
run, run,
transcript: transcriptsByRunId?.get(run.id) ?? [], transcript: transcriptsByRunId?.get(run.id) ?? [],
hasOutput: hasOutputForRun?.(run.id) ?? false,
}), }),
}); });
} }