Update app.py

app.py

@@ -108,7 +108,7 @@ def format_response_with_thinking(response):
             # Create HTML with collapsible thinking section
             html = f"{before_thinking}\n"
             html += f'<div class="thinking-container">'
-            html += f'<button class="thinking-toggle">Show reasoning</button>'
+            html += f'<button class="thinking-toggle"><div class="thinking-icon"></div> Thinking completed <span class="dropdown-arrow">▼</span></button>'
             html += f'<div class="thinking-content hidden">{thinking_content}</div>'
             html += f'</div>\n'
             html += after_thinking
@@ -163,25 +163,58 @@ css = """
     margin: 10px 0;
 }
 .thinking-toggle {
-    background-color: #f1f1f1;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    padding: 5px 10px;
+    background-color: rgba(30, 30, 40, 0.8);
+    border: none;
+    border-radius: 25px;
+    padding: 8px 15px;
     cursor: pointer;
-    font-size: 0.9em;
-    margin-bottom: 5px;
-    color: #555;
+    font-size: 0.95em;
+    margin-bottom: 8px;
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    transition: background-color 0.2s;
+}
+.thinking-toggle:hover {
+    background-color: rgba(40, 40, 50, 0.9);
+}
+.thinking-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: #6366f1;
+    position: relative;
+    overflow: hidden;
+}
+.thinking-icon::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 60%;
+    height: 60%;
+    background-color: #a5b4fc;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+}
+.dropdown-arrow {
+    font-size: 0.7em;
+    margin-left: auto;
+    transition: transform 0.3s;
 }
 .thinking-content {
-    background-color: #f9f9f9;
-    border-left: 3px solid #ccc;
-    padding: 10px;
+    background-color: rgba(30, 30, 40, 0.6);
+    border-left: 3px solid #6366f1;
+    padding: 12px 15px;
     margin-top: 5px;
     font-size: 0.95em;
-    color: #555;
+    color: #e2e8f0;
     font-family: monospace;
     white-space: pre-wrap;
     overflow-x: auto;
+    border-radius: 5px;
 }
 .hidden {
     display: none;
@@ -196,7 +229,8 @@ function setupThinkingToggle() {
             button.addEventListener('click', function() {
                 const content = this.nextElementSibling;
                 content.classList.toggle('hidden');
-                this.textContent = content.classList.contains('hidden') ? 'Show reasoning' : 'Hide reasoning';
+                const arrow = this.querySelector('.dropdown-arrow');
+                arrow.style.transform = content.classList.contains('hidden') ? '' : 'rotate(180deg)';
             });
             button.hasEventListener = true;
         }
@@ -293,7 +327,7 @@ with gr.Blocks(title="Athena Playground Chat", css=css, theme=theme) as demo:
     gr.Markdown("""
     ### About the Thinking Tags
     Some Athena models (particularly R3X series) include reasoning in `<think></think>` tags.
-    Click "Show reasoning" to see the model's thought process behind its answers.
+    Click on "Thinking completed" to view the model's thought process behind its answers.
     """)
     
     # Add the JavaScript to handle the thinking toggle buttons