marketing-shibata50/multica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): show generating indicator while agent is processing (#191)

Browse source 
When the user sends a message and the agent hasn't started streaming
yet, the chat area showed no visual feedback. Now a "Generating..."
spinner appears between message send and the first streaming content,
matching the existing indicator style used in StreamingMarkdown.

Closes MUL-224

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jiayuan Zhang 2026-02-15 03:13:18 +08:00 • committed by GitHub
parent a131f3b7f5
commit 058af56d47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
packages/ui/src/components/chat-view.tsx
View file

@ -8,6 +8,7 @@ import { MessageList } from "@multica/ui/components/message-list";
import { MemoizedMarkdown } from "@multica/ui/components/markdown";
import { MulticaIcon } from "@multica/ui/components/multica-icon";
import { ExecApprovalItem } from "@multica/ui/components/exec-approval-item";
import { Spinner } from "@multica/ui/components/spinner";
import { useScrollFade } from "@multica/ui/hooks/use-scroll-fade";
import { useAutoScroll } from "@multica/ui/hooks/use-auto-scroll";
import type { Message } from "@multica/store";
@ -209,6 +210,14 @@ export function ChatView({
</div>
)}
<MessageList messages={messages} streamingIds={streamingIds} />
{isLoading && streamingIds.size === 0 && pendingApprovals.length === 0 && (
<div className="relative px-4 sm:px-10 max-w-4xl mx-auto">
<div className="flex items-center gap-2 py-1 px-2.5 text-muted-foreground">
<Spinner className="text-xs" />
<span className="text-xs">Generating...</span>
</div>
</div>
)}
{pendingApprovals.length > 0 && (
<div className="relative px-4 max-w-4xl mx-auto">
{pendingApprovals.map((approval) => (

13
packages/ui/src/components/markdown/StreamingMarkdown.tsx
View file

@ -192,6 +192,15 @@ export function StreamingMarkdown({
)
}
if (blocks.length === 0) {
return (
<div className="flex items-center gap-2 py-1 text-muted-foreground">
<Spinner className="text-xs" />
<span className="text-xs">Generating...</span>
</div>
)
}
const indicator = (
<div className="absolute bottom-1 left-6 flex items-center gap-2 py-1 text-muted-foreground">
<Spinner className="text-xs" />
@ -199,10 +208,6 @@ export function StreamingMarkdown({
</div>
)
if (blocks.length === 0) {
return indicator
}
return (
<>
{blocks.map((block, i) => {