From ee31ca087e5b1ce73231d314b1e498136bc67186 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Sun, 5 Apr 2026 19:59:49 -0700
Subject: [PATCH] fix: minor UI enhancements.

---
 src/components/chat/AssistantMessage.tsx | 6 +++---
 src/hooks/useStreamProcessor.ts          | 7 ++++---
 src/utils/chatMessageUtils.ts            | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/AssistantMessage.tsx b/src/components/chat/AssistantMessage.tsx
index 4afadef..522ae4a 100644
--- a/src/components/chat/AssistantMessage.tsx
+++ b/src/components/chat/AssistantMessage.tsx
@@ -34,18 +34,18 @@ const AssistantMessage: React.FC<AssistantMessageProps> = ({ content, isStreamin
   const renderContent = () => {
     // Handle special abort link for streaming messages
     if (isStreaming && onAbort && content.includes('click here to abort')) {
-      const hasProcessingWave = content.includes('<span class="processing-wave">Processing...</span>');
+      const hasProcessingWave = content.includes('<span class="processing-wave">Thinking...</span>');
 
       if (hasProcessingWave) {
         const parts = content.split('click here to abort');
         const beforeAbort = parts[0].replace(
-          '<span class="processing-wave">Processing...</span>',
+          '<span class="processing-wave">Thinking...</span>',
           ''
         );
 
         return (
           <span>
-            <span className="processing-wave">Processing...</span>
+            <span className="processing-wave">Thinking...</span>
             {beforeAbort}
             <button onClick={onAbort} className="abort-link">
               click here to abort
diff --git a/src/hooks/useStreamProcessor.ts b/src/hooks/useStreamProcessor.ts
index 1bdde83..31f6011 100644
--- a/src/hooks/useStreamProcessor.ts
+++ b/src/hooks/useStreamProcessor.ts
@@ -29,8 +29,9 @@ export const useStreamProcessor = (options: StreamProcessorOptions): StreamProce
     setAbortController(controller);
 
     // Track the current streaming message ID (mutable)
-    let currentStreamingId = createStreamingMessage().id;
-    onMessageAdd({ id: currentStreamingId, role: 'assistant', content: '', isStreaming: true, tokenCount: 0 } as ChatMessage);
+    const initialStreamingMsg = createStreamingMessage();
+    let currentStreamingId = initialStreamingMsg.id;
+    onMessageAdd(initialStreamingMsg);
 
     try {
       const agentCore = AgentCore.instance();
@@ -54,7 +55,7 @@ export const useStreamProcessor = (options: StreamProcessorOptions): StreamProce
 
           onMessageUpdate(currentStreamingId, (msg) => ({
             ...msg,
-            content: `<span class="processing-wave">Processing...</span> ${tokenCount} tokens received. click here to abort.`,
+            content: `<span class="processing-wave">Thinking...</span>${tokenCount > 0 ? ` ${tokenCount} tokens received.` : ''} click here to abort.`,
             tokenCount
           }));
         } else if (chunk.type === 'tool_call' && chunk.toolCall) {
diff --git a/src/utils/chatMessageUtils.ts b/src/utils/chatMessageUtils.ts
index 393f05a..34cb199 100644
--- a/src/utils/chatMessageUtils.ts
+++ b/src/utils/chatMessageUtils.ts
@@ -13,7 +13,7 @@ export const createMessage = (role: 'user' | 'assistant', content: string): Chat
   };
 };
 
-export const createStreamingMessage = (content: string = '<span class="processing-wave">Processing...</span> 0 tokens received. click here to abort.'): ChatMessage => {
+export const createStreamingMessage = (content: string = '<span class="processing-wave">Thinking...</span> click here to abort.'): ChatMessage => {
   return {
     id: generateMessageId(),
     role: 'assistant',