From 680b900c7675afbd477ca13de55ab442c4757b50 Mon Sep 17 00:00:00 2001
From: Soulter <905617992@qq.com>
Date: Thu, 15 Jan 2026 18:15:42 +0800
Subject: [PATCH] feat: implement iPython tool and reasoning blocks with
 enhanced UI components

---
 dashboard/src/components/chat/MessageList.vue | 435 ++----------------
 .../message_list_comps/IPythonToolBlock.vue   | 220 +++++++++
 .../message_list_comps/ReasoningBlock.vue     |  73 +++
 .../chat/message_list_comps/ToolCallCard.vue  | 290 ++++++++++++
 .../src/i18n/locales/en-US/features/chat.json |   6 +-
 .../src/i18n/locales/zh-CN/features/chat.json |   6 +-
 6 files changed, 638 insertions(+), 392 deletions(-)
 create mode 100644 dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
 create mode 100644 dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
 create mode 100644 dashboard/src/components/chat/message_list_comps/ToolCallCard.vue

diff --git a/dashboard/src/components/chat/MessageList.vue b/dashboard/src/components/chat/MessageList.vue
index 987827bf0..e417b7225 100644
--- a/dashboard/src/components/chat/MessageList.vue
+++ b/dashboard/src/components/chat/MessageList.vue
@@ -90,103 +90,28 @@
 
                             <template v-else>
                                 <!-- Reasoning Block (Collapsible) - 放在最前面 -->
-                                <div v-if="msg.content.reasoning && msg.content.reasoning.trim()"
-                                    class="reasoning-container" :class="{ 'is-dark': isDark }"
-                                    :style="isDark ? { backgroundColor: 'rgba(103, 58, 183, 0.08)' } : {}">
-                                    <div class="reasoning-header" :class="{ 'is-dark': isDark }"
-                                        @click="toggleReasoning(index)">
-                                        <v-icon size="small" class="reasoning-icon">
-                                            {{ isReasoningExpanded(index) ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
-                                        </v-icon>
-                                        <span class="reasoning-label">{{ tm('reasoning.thinking') }}</span>
-                                    </div>
-                                    <div v-if="isReasoningExpanded(index)" class="reasoning-content">
-                                        <MarkdownRender :content="msg.content.reasoning"
-                                            class="reasoning-text markdown-content" :typewriter="false"
-                                            :style="isDark ? { opacity: '0.85' } : {}" :is-dark="isDark" />
-                                    </div>
-                                </div>
+                                <ReasoningBlock v-if="msg.content.reasoning && msg.content.reasoning.trim()"
+                                    :reasoning="msg.content.reasoning" :is-dark="isDark"
+                                    :initial-expanded="isReasoningExpanded(index)" />
 
                                 <!-- 遍历 message parts (保持顺序) -->
                                 <template v-for="(part, partIndex) in msg.content.message" :key="partIndex">
-                                    <!-- Tool Calls Block -->
-                                    <div v-if="part.type === 'tool_call' && part.tool_calls && part.tool_calls.length > 0"
-                                        class="tool-calls-container">
-                                        <div class="tool-calls-label">{{ tm('actions.toolsUsed') }}</div>
-                                        <div v-for="(toolCall, tcIndex) in part.tool_calls" :key="toolCall.id"
-                                            class="tool-call-card" :class="{ 'is-dark': isDark, 'expanded': isToolCallExpanded(index, partIndex, tcIndex) }" :style="isDark ? {
-                                                backgroundColor: 'rgba(40, 60, 100, 0.4)',
-                                                borderColor: 'rgba(100, 140, 200, 0.4)'
-                                            } : {}">
-                                            <div class="tool-call-header" :class="{ 'is-dark': isDark }"
-                                                @click="toggleToolCall(index, partIndex, tcIndex)">
-                                                <v-icon size="small" class="tool-call-expand-icon">
-                                                    {{ isToolCallExpanded(index, partIndex, tcIndex) ?
-                                                        'mdi-chevron-down' : 'mdi-chevron-right' }}
-                                                </v-icon>
-                                                <v-icon size="small" class="tool-call-icon">mdi-wrench-outline</v-icon>
-                                                <div class="tool-call-info">
-                                                    <span class="tool-call-name">{{ toolCall.name }}</span>
-                                                </div>
-                                                <span class="tool-call-status"
-                                                    :class="{ 'status-running': !toolCall.finished_ts, 'status-finished': toolCall.finished_ts }">
-                                                    <template v-if="toolCall.finished_ts">
-                                                        <v-icon size="x-small"
-                                                            class="status-icon">mdi-check-circle</v-icon>
-                                                        {{ formatDuration(toolCall.finished_ts - toolCall.ts) }}
-                                                    </template>
-                                                    <template v-else>
-                                                        <v-icon size="x-small"
-                                                            class="status-icon spinning">mdi-loading</v-icon>
-                                                        {{ getElapsedTime(toolCall.ts) }}
-                                                    </template>
-                                                </span>
-                                            </div>
-                                            <div v-if="isToolCallExpanded(index, partIndex, tcIndex)"
-                                                class="tool-call-details" :style="isDark ? {
-                                                    borderTopColor: 'rgba(100, 140, 200, 0.3)',
-                                                    backgroundColor: 'rgba(30, 45, 70, 0.5)'
-                                                } : {}">
-                                                <!-- Special rendering for iPython tool -->
-                                                <template v-if="isIPythonTool(toolCall)">
-                                                    <div class="ipython-code-container">
-                                                        <!-- <div class="detail-label ipython-label">Code:</div> -->
-                                                        <div v-if="shikiReady && getIPythonCode(toolCall)" 
-                                                            class="ipython-code-highlighted"
-                                                            v-html="highlightIPythonCode(getIPythonCode(toolCall))"></div>
-                                                        <pre v-else class="detail-value detail-json"
-                                                            :style="isDark ? { backgroundColor: 'transparent' } : {}">{{ getIPythonCode(toolCall) || 'No code available' }}</pre>
-                                                    </div>
-                                                    <div v-if="toolCall.result" class="tool-call-detail-row">
-                                                        <span class="detail-label">Result:</span>
-                                                        <pre class="detail-value detail-json detail-result"
-                                                            :style="isDark ? { backgroundColor: 'transparent' } : {}">{{ formatToolResult(toolCall.result) }}</pre>
-                                                    </div>
-                                                </template>
-                                                
-                                                <!-- Default rendering for other tools -->
-                                                <template v-else>
-                                                    <div class="tool-call-detail-row">
-                                                        <span class="detail-label">ID:</span>
-                                                        <code class="detail-value"
-                                                            :style="isDark ? { backgroundColor: 'transparent' } : {}">{{ toolCall.id
-                                                            }}</code>
-                                                    </div>
-                                                    <div class="tool-call-detail-row">
-                                                        <span class="detail-label">Args:</span>
-                                                        <pre class="detail-value detail-json"
-                                                            :style="isDark ? { backgroundColor: 'transparent' } : {}">{{
-                                                                JSON.stringify(toolCall.args, null, 2) }}</pre>
-                                                    </div>
-                                                    <div v-if="toolCall.result" class="tool-call-detail-row">
-                                                        <span class="detail-label">Result:</span>
-                                                        <pre class="detail-value detail-json detail-result"
-                                                            :style="isDark ? { backgroundColor: 'transparent' } : {}">{{ formatToolResult(toolCall.result) }}
-                </pre>
-                                                    </div>
-                                                </template>
-                                            </div>
-                                        </div>
+                                    <!-- iPython Tool Special Block -->
+                                    <template v-if="part.type === 'tool_call' && part.tool_calls && part.tool_calls.length > 0">
+                                        <template v-for="(toolCall, tcIndex) in part.tool_calls" :key="toolCall.id">
+                                            <IPythonToolBlock v-if="isIPythonTool(toolCall)" :tool-call="toolCall" style="margin: 8px 0;"
+                                                :is-dark="isDark"
+                                                :initial-expanded="isIPythonToolExpanded(index, partIndex, tcIndex)" />
+                                        </template>
+                                    </template>
+
+                                    <!-- Regular Tool Calls Block (for non-iPython tools) -->
+                                    <div v-if="part.type === 'tool_call' && part.tool_calls && part.tool_calls.some(tc => !isIPythonTool(tc))"
+                                        class="flex flex-col gap-2">
+                                        <div class="font-medium opacity-70" style="font-size: 13px; margin-bottom: 16px;">{{ tm('actions.toolsUsed') }}</div>
+                                        <ToolCallCard v-for="(toolCall, tcIndex) in part.tool_calls.filter(tc => !isIPythonTool(tc))"
+                                            :key="toolCall.id" :tool-call="toolCall" :is-dark="isDark"
+                                            :initial-expanded="isToolCallExpanded(index, partIndex, tcIndex)" />
                                     </div>
 
                                     <!-- Text (Markdown) -->
@@ -325,7 +250,9 @@ import 'markstream-vue/index.css'
 import 'katex/dist/katex.min.css'
 import 'highlight.js/styles/github.css';
 import axios from 'axios';
-import { createHighlighter } from 'shiki';
+import ReasoningBlock from './message_list_comps/ReasoningBlock.vue';
+import IPythonToolBlock from './message_list_comps/IPythonToolBlock.vue';
+import ToolCallCard from './message_list_comps/ToolCallCard.vue';
 
 enableKatex();
 enableMermaid();
@@ -333,7 +260,10 @@ enableMermaid();
 export default {
     name: 'MessageList',
     components: {
-        MarkdownRender
+        MarkdownRender,
+        ReasoningBlock,
+        IPythonToolBlock,
+        ToolCallCard
     },
     props: {
         messages: {
@@ -372,6 +302,7 @@ export default {
             expandedReasoning: new Set(), // Track which reasoning blocks are expanded
             downloadingFiles: new Set(), // Track which files are being downloaded
             expandedToolCalls: new Set(), // Track which tool call cards are expanded
+            expandedIPythonTools: new Set(), // Track which iPython tools are expanded
             elapsedTimeTimer: null, // Timer for updating elapsed time
             currentTime: Date.now() / 1000, // Current time for elapsed time calculation
             // 选中文本相关状态
@@ -384,10 +315,7 @@ export default {
             imagePreview: {
                 show: false,
                 url: ''
-            },
-            // Shiki highlighter
-            shikiHighlighter: null,
-            shikiReady: false
+            }
         };
     },
     async mounted() {
@@ -396,7 +324,6 @@ export default {
         this.addScrollListener();
         this.scrollToBottom();
         this.startElapsedTimeTimer();
-        await this.initShiki();
     },
     updated() {
         this.initCodeCopyButtons();
@@ -545,6 +472,23 @@ export default {
             return this.expandedReasoning.has(messageIndex);
         },
 
+        // Toggle iPython tool expansion state
+        toggleIPythonTool(messageIndex, partIndex, toolCallIndex) {
+            const key = `${messageIndex}-${partIndex}-${toolCallIndex}`;
+            if (this.expandedIPythonTools.has(key)) {
+                this.expandedIPythonTools.delete(key);
+            } else {
+                this.expandedIPythonTools.add(key);
+            }
+            // Force reactivity
+            this.expandedIPythonTools = new Set(this.expandedIPythonTools);
+        },
+
+        // Check if iPython tool is expanded
+        isIPythonToolExpanded(messageIndex, partIndex, toolCallIndex) {
+            return this.expandedIPythonTools.has(`${messageIndex}-${partIndex}-${toolCallIndex}`);
+        },
+
         // 下载文件
         async downloadFile(file) {
             if (!file.attachment_id) return;
@@ -930,50 +874,9 @@ export default {
             }, 300);
         },
 
-        // Initialize Shiki highlighter
-        async initShiki() {
-            try {
-                this.shikiHighlighter = await createHighlighter({
-                    themes: ['nord', 'github-light'],
-                    langs: ['python']
-                });
-                this.shikiReady = true;
-            } catch (err) {
-                console.error('Failed to initialize Shiki:', err);
-            }
-        },
-
         // Check if tool is iPython executor
         isIPythonTool(toolCall) {
             return toolCall.name === 'astrbot_execute_ipython';
-        },
-
-        // Get iPython code from tool args
-        getIPythonCode(toolCall) {
-            try {
-                if (toolCall.args && toolCall.args.code) {
-                    return toolCall.args.code;
-                }
-            } catch (err) {
-                console.error('Failed to get iPython code:', err);
-            }
-            return null;
-        },
-
-        // Highlight iPython code with Shiki
-        highlightIPythonCode(code) {
-            if (!this.shikiReady || !this.shikiHighlighter || !code) {
-                return '';
-            }
-            try {
-                return this.shikiHighlighter.codeToHtml(code, {
-                    lang: 'python',
-                    theme: this.isDark ? 'nord' : 'github-light'
-                });
-            } catch (err) {
-                console.error('Failed to highlight code:', err);
-                return `<pre><code>${code}</code></pre>`;
-            }
         }
     }
 }
@@ -1443,167 +1346,6 @@ export default {
     animation: fadeIn 0.3s ease-in-out;
 }
 
-/* Reasoning 区块样式 */
-.reasoning-container {
-    margin-bottom: 12px;
-    margin-top: 6px;
-    border: 1px solid var(--v-theme-border);
-    border-radius: 20px;
-    overflow: hidden;
-    width: fit-content;
-}
-
-.reasoning-header {
-    display: inline-flex;
-    align-items: center;
-    padding: 8px 8px;
-    cursor: pointer;
-    user-select: none;
-    transition: background-color 0.2s ease;
-    border-radius: 20px;
-}
-
-.reasoning-header:hover {
-    background-color: rgba(103, 58, 183, 0.08);
-}
-
-.reasoning-header.is-dark:hover {
-    background-color: rgba(103, 58, 183, 0.15);
-}
-
-.reasoning-icon {
-    margin-right: 6px;
-    color: var(--v-theme-secondary);
-    transition: transform 0.2s ease;
-}
-
-.reasoning-label {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--v-theme-secondary);
-    letter-spacing: 0.3px;
-}
-
-.reasoning-content {
-    padding: 0px 12px;
-    border-top: 1px solid var(--v-theme-border);
-    color: gray;
-    animation: fadeIn 0.2s ease-in-out;
-    font-style: italic;
-}
-
-.reasoning-text {
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--v-theme-secondaryText);
-}
-
-/* Tool Call Card Styles */
-.tool-calls-container {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 12px;
-    margin-top: 6px;
-}
-
-.tool-calls-label {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--v-theme-secondaryText);
-    opacity: 0.7;
-    margin-bottom: 4px;
-}
-
-.tool-call-card {
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: #eff3f6;
-    margin: 8px 0px;
-    width: fit-content;
-    min-width: 320px;
-    max-width: 100%;
-    transition: all 0.1s ease;
-}
-
-.tool-call-card.expanded {
-    width: 100%;
-}
-
-.tool-call-header {
-    display: flex;
-    align-items: center;
-    padding: 10px 12px;
-    cursor: pointer;
-    user-select: none;
-    transition: background-color 0.2s ease;
-    gap: 8px;
-}
-
-.tool-call-header:hover {
-    background-color: rgba(169, 194, 219, 0.15);
-}
-
-.tool-call-header.is-dark:hover {
-    background-color: rgba(100, 150, 200, 0.2);
-}
-
-.tool-call-expand-icon {
-    color: var(--v-theme-secondary);
-    transition: transform 0.2s ease;
-    flex-shrink: 0;
-}
-
-.tool-call-icon {
-    color: var(--v-theme-secondary);
-    flex-shrink: 0;
-}
-
-.tool-call-info {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex: 1;
-    min-width: 0;
-}
-
-.tool-call-name {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--v-theme-secondary);
-}
-
-.tool-call-id {
-    font-size: 11px;
-    color: var(--v-theme-secondaryText);
-    opacity: 0.7;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.tool-call-status {
-    margin-left: 8px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    flex-shrink: 0;
-}
-
-.tool-call-status.status-running {
-    color: #ff9800;
-}
-
-.tool-call-status.status-finished {
-    color: #4caf50;
-}
-
-.tool-call-status .status-icon {
-    font-size: 14px;
-}
-
 /* 浮动引用按钮样式 */
 .selection-quote-button {
     position: fixed;
@@ -1614,7 +1356,6 @@ export default {
     pointer-events: all;
 }
 
-
 .quote-btn {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     font-size: 14px;
@@ -1634,94 +1375,8 @@ export default {
     color: #ffffff !important;
 }
 
-.tool-call-status .status-icon.spinning {
-    animation: spin 1s linear infinite;
-}
 
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
 
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.tool-call-details {
-    padding: 12px;
-    background-color: rgba(255, 255, 255, 0.5);
-    animation: fadeIn 0.2s ease-in-out;
-}
-
-.tool-call-detail-row {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 8px;
-}
-
-.tool-call-detail-row:last-child {
-    margin-bottom: 0;
-}
-
-.detail-label {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--v-theme-secondaryText);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 4px;
-}
-
-.detail-value {
-    font-size: 12px;
-    color: var(--v-theme-primaryText);
-    background-color: transparent;
-    padding: 4px 8px;
-    border-radius: 4px;
-    word-break: break-all;
-}
-
-.detail-json {
-    font-family: 'Fira Code', 'Consolas', monospace;
-    white-space: pre-wrap;
-    max-height: 200px;
-    overflow-y: auto;
-    margin: 0;
-}
-
-.detail-result {
-    max-height: 300px;
-    background-color: transparent;
-}
-
-/* iPython Tool Special Styles */
-.ipython-code-container {
-    margin-bottom: 12px;
-}
-
-.ipython-label {
-    margin-bottom: 8px;
-}
-
-.ipython-code-highlighted {
-    border-radius: 6px;
-    overflow-x: auto;
-    font-size: 13px;
-    line-height: 1.5;
-}
-
-.ipython-code-highlighted :deep(pre) {
-    margin: 0;
-    padding: 12px;
-    border-radius: 6px;
-    overflow-x: auto;
-}
-
-.ipython-code-highlighted :deep(code) {
-    font-family: 'Fira Code', 'Consolas', monospace;
-    font-size: 13px;
-}
 </style>
 
 <style>
diff --git a/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue b/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
new file mode 100644
index 000000000..26a401d10
--- /dev/null
+++ b/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
@@ -0,0 +1,220 @@
+<template>
+    <div class="mb-3 mt-1.5">
+        <div class="ipython-header" :class="{ 'expanded': isExpanded }" @click="toggleExpanded">
+            <span class="ipython-label">
+                {{ tm('actions.pythonCodeAnalysis') }}
+            </span>
+            <v-icon size="small" class="ipython-icon" :class="{ 'rotated': isExpanded }">
+                mdi-chevron-right
+            </v-icon>
+        </div>
+        <div v-if="isExpanded" class="py-3 animate-fade-in">
+            <!-- Code Section -->
+            <div class="code-section">
+                <div v-if="shikiReady && code" class="code-highlighted"
+                    v-html="highlightedCode"></div>
+                <pre v-else class="code-fallback"
+                    :class="{ 'dark-theme': isDark }">{{ code || 'No code available' }}</pre>
+            </div>
+
+            <!-- Result Section -->
+            <div v-if="result" class="result-section">
+                <div class="result-label">
+                    {{ tm('ipython.output') }}:
+                </div>
+                <pre class="result-content"
+                    :class="{ 'dark-theme': isDark }">{{ formattedResult }}</pre>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useModuleI18n } from '@/i18n/composables';
+import { createHighlighter } from 'shiki';
+
+const props = defineProps({
+    toolCall: {
+        type: Object,
+        required: true
+    },
+    isDark: {
+        type: Boolean,
+        default: false
+    },
+    initialExpanded: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const { tm } = useModuleI18n('features/chat');
+const isExpanded = ref(props.initialExpanded);
+const shikiHighlighter = ref(null);
+const shikiReady = ref(false);
+
+const code = computed(() => {
+    try {
+        if (props.toolCall.args && props.toolCall.args.code) {
+            return props.toolCall.args.code;
+        }
+    } catch (err) {
+        console.error('Failed to get iPython code:', err);
+    }
+    return null;
+});
+
+const result = computed(() => props.toolCall.result);
+
+const formattedResult = computed(() => {
+    if (!result.value) return '';
+    try {
+        const parsed = JSON.parse(result.value);
+        return JSON.stringify(parsed, null, 2);
+    } catch {
+        return result.value;
+    }
+});
+
+const highlightedCode = computed(() => {
+    if (!shikiReady.value || !shikiHighlighter.value || !code.value) {
+        return '';
+    }
+    try {
+        return shikiHighlighter.value.codeToHtml(code.value, {
+            lang: 'python',
+            theme: props.isDark ? 'min-dark' : 'github-light'
+        });
+    } catch (err) {
+        console.error('Failed to highlight code:', err);
+        return `<pre><code>${code.value}</code></pre>`;
+    }
+});
+
+const toggleExpanded = () => {
+    isExpanded.value = !isExpanded.value;
+};
+
+onMounted(async () => {
+    try {
+        shikiHighlighter.value = await createHighlighter({
+            themes: ['min-dark', 'github-light'],
+            langs: ['python']
+        });
+        shikiReady.value = true;
+    } catch (err) {
+        console.error('Failed to initialize Shiki:', err);
+    }
+});
+</script>
+
+<style scoped>
+.mb-3 {
+    margin-bottom: 12px;
+}
+
+.mt-1\.5 {
+    margin-top: 6px;
+}
+
+.ipython-header {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 20px;
+    opacity: 0.7;
+    transition: opacity;
+}
+
+.ipython-header:hover,
+.ipython-header.expanded {
+    opacity: 1;
+}
+
+.ipython-label {
+    font-size: 16px;
+}
+
+.ipython-icon {
+    margin-left: 6px;
+    transition: transform 0.2s ease;
+}
+
+.ipython-icon.rotated {
+    transform: rotate(90deg);
+}
+
+.py-3 {
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.code-section {
+    margin-bottom: 12px;
+}
+
+.code-highlighted {
+    border-radius: 6px;
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.code-fallback {
+    margin: 0;
+    padding: 12px;
+    border-radius: 6px;
+    overflow-x: auto;
+    font-size: 13px;
+    line-height: 1.5;
+    background-color: #f5f5f5;
+}
+
+.code-fallback.dark-theme {
+    background-color: transparent;
+}
+
+.result-section {
+    margin-top: 12px;
+}
+
+.result-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--v-theme-secondaryText);
+    margin-bottom: 6px;
+    opacity: 0.8;
+}
+
+.result-content {
+    margin: 0;
+    padding: 12px;
+    border-radius: 6px;
+    overflow-x: auto;
+    font-size: 13px;
+    line-height: 1.5;
+    background-color: #f5f5f5;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.result-content.dark-theme {
+    background-color: transparent;
+}
+
+.animate-fade-in {
+    animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+</style>
diff --git a/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue b/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
new file mode 100644
index 000000000..d9d180259
--- /dev/null
+++ b/dashboard/src/components/chat/message_list_comps/ReasoningBlock.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="mb-3 mt-1.5 border border-gray-200 dark:border-gray-700 rounded-2xl overflow-hidden w-fit"
+        :class="{ 'dark:bg-purple-900/8': isDark, 'bg-purple-50/50': !isDark }">
+        <div class="inline-flex items-center px-2 py-2 cursor-pointer select-none rounded-2xl transition-colors hover:bg-purple-50/80 dark:hover:bg-purple-900/15"
+            @click="toggleExpanded">
+            <v-icon size="small" class="mr-1.5 text-purple-600 dark:text-purple-400 transition-transform"
+                :class="{ 'rotate-90': isExpanded }">
+                mdi-chevron-right
+            </v-icon>
+            <span class="text-sm font-medium text-purple-600 dark:text-purple-400 tracking-wide">
+                {{ tm('reasoning.thinking') }}
+            </span>
+        </div>
+        <div v-if="isExpanded" class="px-3 border-t border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 animate-fade-in italic">
+            <MarkdownRender :content="reasoning" class="reasoning-text markdown-content text-sm leading-relaxed"
+                :typewriter="false" :is-dark="isDark" :style="isDark ? { opacity: '0.85' } : {}" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useModuleI18n } from '@/i18n/composables';
+import { MarkdownRender } from 'markstream-vue';
+
+const props = defineProps({
+    reasoning: {
+        type: String,
+        required: true
+    },
+    isDark: {
+        type: Boolean,
+        default: false
+    },
+    initialExpanded: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const { tm } = useModuleI18n('features/chat');
+const isExpanded = ref(props.initialExpanded);
+
+const toggleExpanded = () => {
+    isExpanded.value = !isExpanded.value;
+};
+</script>
+
+<style scoped>
+.animate-fade-in {
+    animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.rotate-90 {
+    transform: rotate(90deg);
+}
+
+.reasoning-text {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--v-theme-secondaryText);
+}
+</style>
diff --git a/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue b/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue
new file mode 100644
index 000000000..db1a71e79
--- /dev/null
+++ b/dashboard/src/components/chat/message_list_comps/ToolCallCard.vue
@@ -0,0 +1,290 @@
+<template>
+    <div class="tool-call-card" :class="{ 'is-dark': isDark, 'expanded': isExpanded }" :style="isDark ? {
+        backgroundColor: 'rgba(40, 60, 100, 0.4)',
+        borderColor: 'rgba(100, 140, 200, 0.4)'
+    } : {}">
+        <!-- Header -->
+        <div class="tool-call-header" :class="{ 'is-dark': isDark }" @click="toggleExpanded">
+            <v-icon size="small" class="tool-call-expand-icon" :class="{ 'expanded': isExpanded }">
+                mdi-chevron-right
+            </v-icon>
+            <v-icon size="small" class="tool-call-icon">mdi-wrench-outline</v-icon>
+            <div class="tool-call-info">
+                <span class="tool-call-name">{{ toolCall.name }}</span>
+            </div>
+            <span class="tool-call-status"
+                :class="{ 'status-running': !toolCall.finished_ts, 'status-finished': toolCall.finished_ts }">
+                <template v-if="toolCall.finished_ts">
+                    <v-icon size="x-small" class="status-icon">mdi-check-circle</v-icon>
+                    {{ formatDuration(toolCall.finished_ts - toolCall.ts) }}
+                </template>
+                <template v-else>
+                    <v-icon size="x-small" class="status-icon spinning">mdi-loading</v-icon>
+                    {{ elapsedTime }}
+                </template>
+            </span>
+        </div>
+
+        <!-- Details -->
+        <div v-if="isExpanded" class="tool-call-details" :style="isDark ? {
+            borderTopColor: 'rgba(100, 140, 200, 0.3)',
+            backgroundColor: 'rgba(30, 45, 70, 0.5)'
+        } : {}">
+            <!-- ID -->
+            <div class="tool-call-detail-row">
+                <span class="detail-label">ID:</span>
+                <code class="detail-value" :style="isDark ? { backgroundColor: 'transparent' } : {}">
+            {{ toolCall.id }}
+        </code>
+            </div>
+
+            <!-- Args -->
+            <div class="tool-call-detail-row">
+                <span class="detail-label">Args:</span>
+                <pre class="detail-value detail-json" :style="isDark ? { backgroundColor: 'transparent' } : {}">{{
+                    JSON.stringify(toolCall.args, null, 2) }}</pre>
+            </div>
+
+            <!-- Result -->
+            <div v-if="toolCall.result" class="tool-call-detail-row">
+                <span class="detail-label">Result:</span>
+                <pre class="detail-value detail-json detail-result"
+                    :style="isDark ? { backgroundColor: 'transparent' } : {}">{{
+            formattedResult }}</pre>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+const props = defineProps({
+    toolCall: {
+        type: Object,
+        required: true
+    },
+    isDark: {
+        type: Boolean,
+        default: false
+    },
+    initialExpanded: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const isExpanded = ref(props.initialExpanded);
+const currentTime = ref(Date.now() / 1000);
+let timer = null;
+
+const elapsedTime = computed(() => {
+    if (props.toolCall.finished_ts) return '';
+    const elapsed = currentTime.value - props.toolCall.ts;
+    return formatDuration(elapsed);
+});
+
+const formattedResult = computed(() => {
+    if (!props.toolCall.result) return '';
+    try {
+        const parsed = JSON.parse(props.toolCall.result);
+        return JSON.stringify(parsed, null, 2);
+    } catch {
+        return props.toolCall.result;
+    }
+});
+
+const formatDuration = (seconds) => {
+    if (seconds < 1) {
+        return `${Math.round(seconds * 1000)}ms`;
+    } else if (seconds < 60) {
+        return `${seconds.toFixed(1)}s`;
+    } else {
+        const minutes = Math.floor(seconds / 60);
+        const secs = Math.round(seconds % 60);
+        return `${minutes}m ${secs}s`;
+    }
+};
+
+const toggleExpanded = () => {
+    isExpanded.value = !isExpanded.value;
+};
+
+const updateTime = () => {
+    currentTime.value = Date.now() / 1000;
+};
+
+onMounted(() => {
+    // Update time periodically if tool call is running
+    if (!props.toolCall.finished_ts) {
+        timer = setInterval(updateTime, 100);
+    }
+});
+
+onUnmounted(() => {
+    if (timer) {
+        clearInterval(timer);
+    }
+});
+</script>
+
+<style scoped>
+.tool-call-card {
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: #eff3f6;
+    margin: 8px 0px;
+    width: fit-content;
+    min-width: 320px;
+    max-width: 100%;
+    transition: all 0.1s ease;
+}
+
+.tool-call-card.expanded {
+    width: 100%;
+}
+
+.tool-call-header {
+    display: flex;
+    align-items: center;
+    padding: 10px 12px;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s ease;
+    gap: 8px;
+}
+
+.tool-call-header:hover {
+    background-color: rgba(169, 194, 219, 0.15);
+}
+
+.tool-call-header.is-dark:hover {
+    background-color: rgba(100, 150, 200, 0.2);
+}
+
+.tool-call-expand-icon {
+    color: var(--v-theme-secondary);
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+}
+
+.tool-call-expand-icon.expanded {
+    transform: rotate(90deg);
+}
+
+.tool-call-icon {
+    color: var(--v-theme-secondary);
+    flex-shrink: 0;
+}
+
+.tool-call-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+
+.tool-call-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--v-theme-secondary);
+}
+
+.tool-call-status {
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    flex-shrink: 0;
+}
+
+.tool-call-status.status-running {
+    color: #ff9800;
+}
+
+.tool-call-status.status-finished {
+    color: #4caf50;
+}
+
+.tool-call-status .status-icon {
+    font-size: 14px;
+}
+
+.tool-call-status .status-icon.spinning {
+    animation: spin 1s linear infinite;
+}
+
+.tool-call-details {
+    padding: 12px;
+    background-color: rgba(255, 255, 255, 0.5);
+    animation: fadeIn 0.2s ease-in-out;
+}
+
+.tool-call-detail-row {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 8px;
+}
+
+.tool-call-detail-row:last-child {
+    margin-bottom: 0;
+}
+
+.detail-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--v-theme-secondaryText);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}
+
+.detail-value {
+    font-size: 12px;
+    color: var(--v-theme-primaryText);
+    background-color: transparent;
+    padding: 4px 8px;
+    border-radius: 4px;
+    word-break: break-all;
+}
+
+.detail-json {
+    font-family: 'Fira Code', 'Consolas', monospace;
+    white-space: pre-wrap;
+    max-height: 200px;
+    overflow-y: auto;
+    margin: 0;
+}
+
+.detail-result {
+    max-height: 300px;
+    background-color: transparent;
+}
+
+.animate-fade-in {
+    animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>
diff --git a/dashboard/src/i18n/locales/en-US/features/chat.json b/dashboard/src/i18n/locales/en-US/features/chat.json
index d39f16ec2..4e049e2d5 100644
--- a/dashboard/src/i18n/locales/en-US/features/chat.json
+++ b/dashboard/src/i18n/locales/en-US/features/chat.json
@@ -43,7 +43,11 @@
     "exitFullscreen": "Exit Fullscreen",
     "reply": "Reply",
     "providerConfig": "AI Configuration",
-    "toolsUsed": "Tool Used"
+    "toolsUsed": "Tool Used",
+    "pythonCodeAnalysis": "Python Code Analysis Used"
+  },
+  "ipython": {
+    "output": "Output"
   },
   "conversation": {
     "newConversation": "New Conversation",
diff --git a/dashboard/src/i18n/locales/zh-CN/features/chat.json b/dashboard/src/i18n/locales/zh-CN/features/chat.json
index f4f431bc6..861cb70d7 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/chat.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/chat.json
@@ -43,7 +43,11 @@
     "exitFullscreen": "退出全屏",
     "reply": "引用回复",
     "providerConfig": "AI 配置",
-    "toolsUsed": "已使用工具"
+    "toolsUsed": "已使用工具",
+    "pythonCodeAnalysis": "已使用 Python 代码分析"
+  },
+  "ipython": {
+    "output": "输出"
   },
   "conversation": {
     "newConversation": "新的聊天",