From 9de5bed19f4672e0f6ed8acf1cb1d7fe6afe10e6 Mon Sep 17 00:00:00 2001
From: Haoqing Wang <78337154+hqhq1025@users.noreply.github.com>
Date: Mon, 23 Mar 2026 14:57:10 +0800
Subject: [PATCH] fix(web): add visual indicator for sending message status
 (#344)

---
 .../messages/MessageStatusIndicator.tsx         | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/web/src/components/AssistantChat/messages/MessageStatusIndicator.tsx b/web/src/components/AssistantChat/messages/MessageStatusIndicator.tsx
index 5b5385b4..693ab911 100644
--- a/web/src/components/AssistantChat/messages/MessageStatusIndicator.tsx
+++ b/web/src/components/AssistantChat/messages/MessageStatusIndicator.tsx
@@ -10,10 +10,27 @@ function ErrorIcon() {
     )
 }
 
+function SendingIcon() {
+    return (
+        <svg className="h-[14px] w-[14px] animate-spin" viewBox="0 0 16 16" fill="none">
+            <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5" opacity="0.3" />
+            <path d="M14 8a6 6 0 0 0-6-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+    )
+}
+
 export function MessageStatusIndicator(props: {
     status?: MessageStatus
     onRetry?: () => void
 }) {
+    if (props.status === 'sending') {
+        return (
+            <span className="inline-flex items-center text-[var(--app-fg-muted)]">
+                <SendingIcon />
+            </span>
+        )
+    }
+
     if (props.status !== 'failed') {
         return null
     }