From 8029242ec2221632fec2f0601770bd5b274ff0e9 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Mon, 13 Apr 2026 15:35:46 -0300
Subject: [PATCH] feat: add thinking indicator for reasoning models

- Show thinking indicator while LLM is in reasoning mode
- Handle thinking and thinking_clear message types
- Add CSS styling for thinking indicator

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
---
 ui/suite/chat/chat.css  | 14 ++++++++++++++
 ui/suite/chat/chat.html | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/ui/suite/chat/chat.css b/ui/suite/chat/chat.css
index 7c9b555..d9ba6e8 100644
--- a/ui/suite/chat/chat.css
+++ b/ui/suite/chat/chat.css
@@ -1502,6 +1502,20 @@ form.input-container {
     display: inline-flex !important;
 }
 
+/* Thinking indicator - shown while LLM is reasoning */
+.thinking-text {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-secondary, #888);
+    font-style: italic;
+    animation: thinkingPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes thinkingPulse {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 1; }
+}
 
 /* Hide default quick action suggestions - only show bot suggestions */
 #quickActions,
diff --git a/ui/suite/chat/chat.html b/ui/suite/chat/chat.html
index 5d88125..9588398 100644
--- a/ui/suite/chat/chat.html
+++ b/ui/suite/chat/chat.html
@@ -770,6 +770,16 @@
         }
 
         function processMessage(data) {
+            // Handle thinking indicator from backend
+            if (data.type === "thinking") {
+                showThinkingIndicator();
+                return;
+            }
+            if (data.type === "thinking_clear") {
+                hideThinkingIndicator();
+                return;
+            }
+
             if (data.is_complete) {
                 if (isStreaming) {
                     finalizeStreaming();
@@ -805,6 +815,32 @@
             }
         }
 
+        // Thinking indicator (shown while LLM is in reasoning mode)
+        var thinkingIndicator = null;
+        function showThinkingIndicator() {
+            if (thinkingIndicator) return; // Already showing
+
+            var messages = document.getElementById("messages");
+            if (!messages) return;
+
+            thinkingIndicator = document.createElement("div");
+            thinkingIndicator.id = "thinking-indicator";
+            thinkingIndicator.className = "message bot";
+            thinkingIndicator.innerHTML =
+                '<div class="message-content bot-message">' +
+                '<span class="thinking-text">🤔 Pensando...</span>' +
+                "</div>";
+            messages.appendChild(thinkingIndicator);
+            scrollToBottom(true);
+        }
+
+        function hideThinkingIndicator() {
+            if (!thinkingIndicator) return;
+
+            thinkingIndicator.remove();
+            thinkingIndicator = null;
+        }
+
         // Track last rendered suggestions to prevent duplicates
         var lastRenderedSuggestions = null;