change for AI thinking

app.py

@@ -40,11 +40,9 @@ def respond(
         if token:
             response += token
             # Store intermediate responses in thinking process
-            if len(response) % 50 == 0:  # Store every 50 characters
+            if len(response) % 100 == 0:  # Increased to 100 characters to reduce frequency
                 thinking_process.append(response)
-        # Only yield the final response
-        if message.choices[0].finish_reason == "stop":
-            yield response
+            yield f"{response}<thinking>{','.join(thinking_process)}</thinking>"
 
 
 # Custom CSS for Plant Wisdom.AI styling
@@ -69,7 +67,6 @@ custom_css = """
     margin: 12px 0;
     font-size: 16px;
     line-height: 1.5;
-    position: relative;
 }
 
 .message.user {
@@ -85,58 +82,6 @@ custom_css = """
     color: #2c3338;
 }
 
-.message.in-progress {
-    opacity: 0.7;
-}
-
-.thinking-indicator {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    font-size: 12px;
-    color: #666;
-    background: rgba(0,0,0,0.05);
-    padding: 4px 8px;
-    border-radius: 4px;
-    display: none;
-}
-
-.message.in-progress .thinking-indicator {
-    display: block;
-}
-
-.thinking-process {
-    display: none;
-    margin-top: 8px;
-    padding: 8px;
-    background: #f8f9fa;
-    border-radius: 4px;
-    font-size: 14px;
-    color: #666;
-}
-
-.show-thinking .thinking-process {
-    display: block;
-}
-
-.toggle-thinking {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    background: none;
-    border: none;
-    color: #2e7d32;
-    cursor: pointer;
-    font-size: 12px;
-    padding: 4px 8px;
-    border-radius: 4px;
-    transition: all 0.2s ease;
-}
-
-.toggle-thinking:hover {
-    background: rgba(46,125,50,0.1);
-}
-
 .submit-btn {
     background-color: #2e7d32 !important;
     color: white !important;
@@ -209,6 +154,41 @@ custom_css = """
     border-radius: 12px;
     background-color: #ffffff;
 }
+
+.message thinking {
+    display: none;
+}
+
+.message.show-thinking thinking {
+    display: block;
+    margin-top: 8px;
+    padding: 8px;
+    background: #f8f9fa;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #666;
+    border: 1px solid #e0ede0;
+}
+
+.toggle-thinking-btn {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: none;
+    border: none;
+    color: #2e7d32;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    opacity: 0.7;
+    transition: all 0.2s ease;
+}
+
+.toggle-thinking-btn:hover {
+    opacity: 1;
+    background: rgba(46,125,50,0.1);
+}
 """
 
 """
@@ -252,26 +232,43 @@ demo = gr.ChatInterface(
     ),
     css=custom_css,
     js="""
-    function setupThinkingToggles() {
-        const messages = document.querySelectorAll('.message.assistant');
-        messages.forEach(msg => {
-            if (!msg.querySelector('.toggle-thinking')) {
+    function addThinkingButtons() {
+        document.querySelectorAll('.message.assistant').forEach(msg => {
+            // Only add button if message has thinking content and doesn't already have a button
+            const thinking = msg.querySelector('thinking');
+            if (thinking && !msg.querySelector('.toggle-thinking-btn')) {
                 const btn = document.createElement('button');
-                btn.className = 'toggle-thinking';
-                btn.textContent = 'Show thinking';
-                btn.onclick = function() {
+                btn.className = 'toggle-thinking-btn';
+                btn.textContent = 'Show thinking process';
+                btn.onclick = function(e) {
+                    e.preventDefault();
                     msg.classList.toggle('show-thinking');
-                    btn.textContent = msg.classList.contains('show-thinking') ? 'Hide thinking' : 'Show thinking';
+                    btn.textContent = msg.classList.contains('show-thinking') 
+                        ? 'Hide thinking process' 
+                        : 'Show thinking process';
                 };
                 msg.appendChild(btn);
             }
         });
     }
-    
-    // Run on load and when new messages are added
-    document.addEventListener('DOMContentLoaded', setupThinkingToggles);
-    const observer = new MutationObserver(setupThinkingToggles);
-    observer.observe(document.body, { childList: true, subtree: true });
+
+    // Add buttons when new messages appear
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.addedNodes.length) {
+                addThinkingButtons();
+            }
+        });
+    });
+
+    // Start observing after the page loads
+    document.addEventListener('DOMContentLoaded', () => {
+        observer.observe(document.body, { 
+            childList: true, 
+            subtree: true 
+        });
+        addThinkingButtons();
+    });
     """,
     additional_inputs=[
         gr.Textbox(