Update app.py

app.py

@@ -176,6 +176,8 @@ css = """
     gap: 8px;
     box-shadow: 0 2px 5px rgba(0,0,0,0.2);
     transition: background-color 0.2s;
+    width: auto;
+    max-width: 280px;
 }
 .thinking-toggle:hover {
     background-color: rgba(40, 40, 50, 0.9);
@@ -205,16 +207,18 @@ css = """
     transition: transform 0.3s;
 }
 .thinking-content {
-    background-color: rgba(30, 30, 40, 0.6);
-    border-left: 3px solid #6366f1;
-    padding: 12px 15px;
+    background-color: rgba(30, 30, 40, 0.8);
+    border-left: 2px solid #6366f1;
+    padding: 15px;
     margin-top: 5px;
+    margin-bottom: 15px;
     font-size: 0.95em;
     color: #e2e8f0;
     font-family: monospace;
     white-space: pre-wrap;
     overflow-x: auto;
     border-radius: 5px;
+    line-height: 1.5;
 }
 .hidden {
     display: none;
@@ -230,25 +234,41 @@ function setupThinkingToggle() {
                 const content = this.nextElementSibling;
                 content.classList.toggle('hidden');
                 const arrow = this.querySelector('.dropdown-arrow');
-                arrow.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
+                if (content.classList.contains('hidden')) {
+                    arrow.textContent = '▼';
+                    arrow.style.transform = '';
+                } else {
+                    arrow.textContent = '▲';
+                    arrow.style.transform = 'rotate(0deg)';
+                }
             });
             button.hasEventListener = true;
         }
     });
 }
 
-// Run initially and set up a mutation observer to watch for new buttons
-setupThinkingToggle();
+// Setup a mutation observer to watch for changes in the DOM
 const observer = new MutationObserver(function(mutations) {
     setupThinkingToggle();
 });
 
-// Start observing the chatbot container
+// Start observing the document body for changes
 document.addEventListener('DOMContentLoaded', () => {
+    setupThinkingToggle();
     setTimeout(() => {
         const chatbot = document.querySelector('.chatbot');
         if (chatbot) {
-            observer.observe(chatbot, { childList: true, subtree: true });
+            observer.observe(chatbot, { 
+                childList: true, 
+                subtree: true,
+                characterData: true
+            });
+        } else {
+            // If chatbot container not found, observe the body
+            observer.observe(document.body, { 
+                childList: true, 
+                subtree: true 
+            });
         }
     }, 1000);
 });
@@ -256,7 +276,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 theme = gr.themes.Soft()
 
-with gr.Blocks(title="Athena Playground Chat", css=css, theme=theme) as demo:
+with gr.Blocks(title="Athena Playground Chat", css=css, theme=theme, js=js) as demo:
     gr.Markdown("# 🚀 Athena Playground Chat")
     gr.Markdown("*Powered by HuggingFace ZeroGPU*")
 
@@ -329,9 +349,6 @@ with gr.Blocks(title="Athena Playground Chat", css=css, theme=theme) as demo:
     Some Athena models (particularly R3X series) include reasoning in `<think></think>` tags.
     Click on "Thinking completed" to view the model's thought process behind its answers.
     """)
-    
-    # Add the JavaScript to handle the thinking toggle buttons
-    demo.load(None, None, None, _js=js)
 
 if __name__ == "__main__":
     demo.launch(debug=True)  # Enable debug mode for better error reporting