增加可视化

app.py

@@ -956,8 +956,9 @@ css = """
 .thinking-content .ant-collapse {
   background: linear-gradient(135deg, #f6f9fc 0%, #f0f4f8 100%);
   border: 1px solid #e1e8ed;
-  border-radius: 8px;
-  margin-bottom: 12px;
+  border-radius: 8px 8px 0 0;
+  border-bottom: none;
+  margin-bottom: 0;
 }
 .thinking-content .ant-collapse > .ant-collapse-item > .ant-collapse-header {
   padding: 8px 12px;
@@ -966,16 +967,93 @@ css = """
   font-weight: 500;
 }
 .thinking-content .ant-collapse-content > .ant-collapse-content-box {
-  padding: 12px;
-  background: #fff;
-  border-radius: 0 0 6px 6px;
+  padding: 0;
+  background: transparent;
+  border-radius: 0;
+}
+
+/* Thinking markdown 内容样式 */
+.thinking-markdown-content {
   font-size: 13px;
   color: #667788;
-  line-height: 1.5;
-  white-space: pre-wrap;
+  line-height: 1.6;
+}
+
+.thinking-markdown-content h1,
+.thinking-markdown-content h2,
+.thinking-markdown-content h3,
+.thinking-markdown-content h4,
+.thinking-markdown-content h5,
+.thinking-markdown-content h6 {
+  color: #5a6c7d;
+  margin: 12px 0 8px 0;
+  font-weight: 600;
+}
+
+.thinking-markdown-content h1 { font-size: 16px; }
+.thinking-markdown-content h2 { font-size: 15px; }
+.thinking-markdown-content h3 { font-size: 14px; }
+.thinking-markdown-content h4,
+.thinking-markdown-content h5,
+.thinking-markdown-content h6 { font-size: 13px; }
+
+.thinking-markdown-content p {
+  margin: 8px 0;
+}
+
+.thinking-markdown-content code {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 3px;
+  padding: 2px 4px;
+  font-size: 12px;
   font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
 }
 
+.thinking-markdown-content pre {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  padding: 12px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.thinking-markdown-content pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: 12px;
+}
+
+.thinking-markdown-content blockquote {
+  border-left: 3px solid #6A57FF;
+  padding-left: 12px;
+  margin: 8px 0;
+  color: #666;
+  font-style: italic;
+}
+
+.thinking-markdown-content ul,
+.thinking-markdown-content ol {
+  margin: 8px 0;
+  padding-left: 20px;
+}
+
+.thinking-markdown-content li {
+  margin: 4px 0;
+}
+
+.thinking-markdown-content strong {
+  color: #333;
+  font-weight: 600;
+}
+
+.thinking-markdown-content em {
+  color: #666;
+  font-style: italic;
+}
+
 /* 图片预览和展示样式 */
 .image-preview-container {
   background: #fafafa;
@@ -1306,30 +1384,45 @@ with gr.Blocks(css=css, fill_width=True) as demo:
                                             const thinking_done = bubble?.meta?.thinking_done || false
                                             
                                             return {
+                                                thinking_container: {
+                                                    style: { 
+                                                        display: (thinking_content || is_thinking) ? 'block' : 'none',
+                                                        marginBottom: thinking_content || is_thinking ? '12px' : '0'
+                                                    }
+                                                },
                                                 thinking_collapse: {
                                                     items: thinking_content || is_thinking ? [{
                                                         key: '1',
                                                         label: is_thinking ? '🤔 正在思考...' : '🤔 思考过程',
-                                                        children: thinking_content || '思考中...'
+                                                        children: ''  // 我们将使用独立的 Markdown 组件
                                                     }] : [],
-                                                    style: { 
-                                                        display: (thinking_content || is_thinking) ? 'block' : 'none',
-                                                        marginBottom: thinking_content || is_thinking ? '12px' : '0'
-                                                    },
+                                                    defaultActiveKey: thinking_content || is_thinking ? ['1'] : [],
                                                     size: 'small',
                                                     ghost: true
                                                 },
+                                                thinking_markdown: {
+                                                    value: thinking_content || (is_thinking ? '思考中...' : ''),
+                                                    style: {
+                                                        display: (thinking_content || is_thinking) ? 'block' : 'none'
+                                                    }
+                                                },
                                                 answer: {
                                                     value: content
                                                 },
                                                 canceled: bubble.meta?.canceled ? undefined : { style: { display: 'none' } }
                                             }
                                         }"""):
-                                    # Thinking区域 - 可折叠显示
-                                    antd.Collapse(
-                                        as_item="thinking_collapse",
-                                        elem_classes="thinking-content"
-                                    )
+                                    # Thinking区域 - 可折叠显示，支持markdown渲染
+                                    with ms.Div(as_item="thinking_container", elem_classes="thinking-content"):
+                                        antd.Collapse(
+                                            as_item="thinking_collapse",
+                                            elem_style=dict(marginBottom="0")
+                                        )
+                                        with ms.Div(elem_style=dict(padding="12px 16px 16px 16px", background="#fff", borderRadius="0 0 6px 6px", border="1px solid #e1e8ed", borderTop="none")):
+                                            ms.Markdown(
+                                                as_item="thinking_markdown",
+                                                elem_classes="thinking-markdown-content"
+                                            )
                                     
                                     # 回答内容
                                     ms.Markdown(