Update app.py

app.py

@@ -228,28 +228,55 @@ def chatbot_response(message, history):
         # 构建响应前缀（简化版）
         response_prefix = ""
         
-        # 显示工具调用（简单文本+可展开输出）
+        # 显示工具调用（带展开/折叠按钮）
         if tool_calls_log:
-            response_prefix += "**🛠️ Tools Used:**\n\n"
+            response_prefix += """<div style='margin-bottom: 15px;'>
+<div style='background: #f0f0f0; padding: 8px 12px; border-radius: 6px; font-weight: 600; color: #333;'>
+🛠️ Tools Used ({} calls)
+</div>
+""".format(len(tool_calls_log))
+            
             for idx, tool_call in enumerate(tool_calls_log):
-                # 工具名称和输入
-                response_prefix += f"**{idx+1}. `{tool_call['name']}`**\n"
-                response_prefix += f"- 📥 Input: `{json.dumps(tool_call['arguments'], ensure_ascii=False)}`\n"
+                tool_id = f"tool_{idx}_{hash(str(tool_call))}"
                 
-                # 输出（可展开）
-                if 'result' in tool_call:
-                    result_str = json.dumps(tool_call['result'], ensure_ascii=False, indent=2)
-                    # 截断过长结果
-                    if len(result_str) > 500:
-                        result_preview = result_str[:500] + "..."
-                    else:
-                        result_preview = result_str
-                    
-                    response_prefix += f"<details>\n<summary>📤 Output (click to expand)</summary>\n\n```json\n{result_preview}\n```\n</details>\n\n"
-                else:
-                    response_prefix += "\n"
+                # 工具卡片
+                response_prefix += f"""<div style='margin: 8px 0; border: 1px solid #ddd; border-radius: 6px; overflow: hidden;'>
+  <div style='background: #fff; padding: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;' onclick='toggleTool("{tool_id}")'>
+    <div>
+      <strong style='color: #2c5aa0;'>📌 {idx+1}. {tool_call['name']}</strong>
+      <div style='font-size: 0.85em; color: #666; margin-top: 4px;'>📥 Input: <code>{json.dumps(tool_call['arguments'], ensure_ascii=False)}</code></div>
+    </div>
+    <span id='arrow_{tool_id}' style='font-size: 1.2em; color: #999;'>▶</span>
+  </div>
+  <div id='{tool_id}' style='display: none; background: #f9f9f9; padding: 12px; border-top: 1px solid #eee;'>
+    <div style='font-size: 0.9em; color: #333;'>
+      <strong>📤 Output:</strong>
+      <pre style='background: #fff; padding: 10px; border-radius: 4px; overflow-x: auto; margin-top: 6px; font-size: 0.85em; border: 1px solid #e0e0e0;'>{json.dumps(tool_call.get('result', {}), ensure_ascii=False, indent=2)[:1000]}{'...' if len(json.dumps(tool_call.get('result', {}), ensure_ascii=False)) > 1000 else ''}</pre>
+    </div>
+  </div>
+</div>
+"""
             
-            response_prefix += "---\n\n"
+            # JavaScript 函数
+            response_prefix += """<script>
+function toggleTool(id) {
+  var content = document.getElementById(id);
+  var arrow = document.getElementById('arrow_' + id);
+  if (content.style.display === 'none') {
+    content.style.display = 'block';
+    arrow.innerHTML = '▼';
+  } else {
+    content.style.display = 'none';
+    arrow.innerHTML = '▶';
+  }
+}
+</script>
+</div>
+
+---
+
+"""
+            response_prefix += "\n"
         
         # 流式输出最终答案
         yield response_prefix