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

@@ -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,

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;