From 0c8095022618bb1d91af77e539f4f121ef942299 Mon Sep 17 00:00:00 2001
From: Akarshan <akarshan@menlo.ai>
Date: Wed, 29 Oct 2025 19:35:42 +0530
Subject: [PATCH] feat: improve ThinkingBlock status messages and i18n
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add more descriptive loading and finished state labels for the ThinkingBlock component. The update:

- Uses new translation keys (`chat:calling_tool`, `chat:thought_and_tool_call`, etc.) for clearer tool‑call and reasoning messages.
- Handles `tool_call`, `tool_output`, and `reasoning` steps explicitly, providing a fallback when no active step is present.
- Adjusts the final label logic to use the new i18n keys and formats durations consistently.
- Adds missing locale entries for all new keys and a trailing newline to the JSON file.

These changes improve user feedback during chat interactions and make the messages easier to maintain and localize.
---
 web-app/src/containers/ThinkingBlock.tsx | 30 ++++++++++++++++--------
 web-app/src/locales/en/chat.json         | 11 +++++++--
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/web-app/src/containers/ThinkingBlock.tsx b/web-app/src/containers/ThinkingBlock.tsx
index 4f1e8bdeb..aa5aaff27 100644
--- a/web-app/src/containers/ThinkingBlock.tsx
+++ b/web-app/src/containers/ThinkingBlock.tsx
@@ -114,7 +114,7 @@ const ThinkingBlock = ({
         <div className="mb-4 rounded-lg bg-main-view-fg/4 border border-dashed border-main-view-fg/10 p-2 flex items-center gap-3">
           <Loader className="size-4 animate-spin text-main-view-fg/60" />
           <span className="font-medium text-main-view-fg/80">
-            {t('thinking')}...
+            {t('thinking')}
           </span>
         </div>
       </div>
@@ -253,26 +253,36 @@ const ThinkingBlock = ({
     const timeInSeconds = formatDuration(duration ?? 0)
 
     if (loading) {
-      // Check if the active step is a tool call
-      if (activeStep?.type === 'tool_call' || hasToolCalls) {
-        return 'Calling tool...'
-      } else {
-        return t('thinking')
+      // Logic for streaming (loading) state:
+      if (activeStep) {
+        if (
+          activeStep.type === 'tool_call' ||
+          activeStep.type === 'tool_output'
+        ) {
+          return `${t('calling_tool')}` // Use a specific translation key for tool
+        } else if (activeStep.type === 'reasoning') {
+          return `${t('chat:thinking')}` // Use the generic thinking key
+        }
       }
+
+      // Fallback if loading but no activeStep (isStreamingEmpty case, though handled before this memo)
+      return `${t('chat:thinking')}`
     }
 
+    // Logic for finalized (not loading) state:
     // Build label based on what steps occurred
     let label = ''
     if (hasReasoning && hasToolCalls) {
-      label = `${t('thought')}`
+      // Use a more descriptive label when both were involved
+      label = t('chat:thought_and_tool_call')
     } else if (hasToolCalls) {
-      label = 'Tool Called'
+      label = t('chat:tool_called')
     } else {
-      label = t('thought')
+      label = t('chat:thought')
     }
 
     if (timeInSeconds > 0) {
-      return `${label} ${t('for')} ${timeInSeconds} ${t('seconds')}`
+      return `${label} ${t('chat:for')} ${timeInSeconds} ${t('chat:seconds')}`
     }
     return label
   }, [loading, duration, t, activeStep, steps])
diff --git a/web-app/src/locales/en/chat.json b/web-app/src/locales/en/chat.json
index 5ca734fcc..05c053e71 100644
--- a/web-app/src/locales/en/chat.json
+++ b/web-app/src/locales/en/chat.json
@@ -8,5 +8,12 @@
   },
   "sendMessage": "Send Message",
   "newConversation": "New Conversation",
-  "clearHistory": "Clear History"
-}
\ No newline at end of file
+  "clearHistory": "Clear History",
+  "thought_and_tool_call": "Thought and called tools",
+  "tool_called": "Called tools",
+  "calling_tool": "Calling a tool",
+  "thinking": "Thinking",
+  "for": "for",
+  "seconds": "seconds"
+}
+