From 058af56d47d363d94a0bf53218df94c8cdeff7b2 Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Sun, 15 Feb 2026 03:13:18 +0800
Subject: [PATCH] fix(ui): show generating indicator while agent is processing
 (#191)

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>
---
 packages/ui/src/components/chat-view.tsx            |  9 +++++++++
 .../src/components/markdown/StreamingMarkdown.tsx   | 13 +++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/chat-view.tsx b/packages/ui/src/components/chat-view.tsx
index 79d95ef9..5a1c92df 100644
--- a/packages/ui/src/components/chat-view.tsx
+++ b/packages/ui/src/components/chat-view.tsx
@@ -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) => (
diff --git a/packages/ui/src/components/markdown/StreamingMarkdown.tsx b/packages/ui/src/components/markdown/StreamingMarkdown.tsx
index 86e2b72b..282ca65a 100644
--- a/packages/ui/src/components/markdown/StreamingMarkdown.tsx
+++ b/packages/ui/src/components/markdown/StreamingMarkdown.tsx
@@ -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) => {