perf: tool rendering in conversation page

[10knamesmore]

close #7929

Modifications / 改动点

仅修改 dashboard/src/views/ConversationPage.vue。

Commit 1 — formattedMessages computed（原 L541）

• 过滤 role 仅保留 user / assistant，跳过 tool / system / _checkpoint
  → tool 大文本不再进 MarkdownMessagePart（MessageList.vue:77），消除卡死
• 按 tool_call_id 索引 tool 消息的 content
• 把 assistant.tool_calls 转成 {type:'tool_call'} MessagePart，由现有 ToolCallCard 渲染（MessageList.vue:124），默认折叠
• 哨兵时间戳处理（历史回放无真实耗时数据）：
  • ts: 0 → ToolCallCard.vue:92 在 startTime <= 0 时早返回，避免显示假的实时 ticking 时长（"0.1s, 0.2s..."）
  • finished_ts: 1 → ToolCallCard.vue:131 跳过 setInterval(updateTime, 100)，避免每个工具调用各自起一个定时器

Commit 2 — 新增两段 CSS（<style> 块内），父级选择器限定作用域，仅在历史预览内生效，主聊天界面不受影响：

/* 双滚动条：让 ToolCallCard 的 args/result 自然展开，由外层容器统一滚动 */
.conversation-messages-container .detail-json,
.conversation-messages-container .detail-result {
    max-height: none;
    overflow: visible;
}

/* 历史回放无真实状态数据，隐藏 IPython 工具的"已完成"标签，与其它工具卡片保持一致 */
.conversation-messages-container .tool-call-inline-status {
    display: none;
}

行为变化：tool 消息合并进对应 assistant 的 ToolCallCard.result，不再是独立气泡（与主聊天 UI 一致）。

• This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

对于这个对话 (python tool)

修改前:

工具调用结果被当成bot message, 进入md渲染

---

修改后

进入思考结果

对于一般工具

---

Checklist / 检查清单

• 😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
  / 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。

• 👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
  / 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。

• 🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
  / 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到 requirements.txt 和 pyproject.toml 文件相应位置。

• 😮 My changes do not introduce malicious code.
  / 我的更改没有引入恶意代码。

Summary by Sourcery

Stop rendering raw tool messages as standalone chat bubbles in conversation history and instead integrate tool call data into assistant messages for consistent tool call display and improved performance.

Bug Fixes:

• Prevent large tool outputs in conversation history from being rendered via markdown as bot messages, avoiding UI freezes and incorrect message bubbles.

Enhancements:

• Aggregate tool role messages into assistant ToolCallCard results based on tool_call_id to align conversation history with the main chat UI.
• Normalize assistant tool call metadata and timestamps when replaying conversation history so tool calls appear as completed without fake live duration updates.
• Adjust conversation history styles so tool call arguments/results expand naturally under the main scroll container and hide redundant inline completion status labels.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• The console.log('处理消息:', ...) inside formattedMessages runs for every message render and will spam the console; consider removing it or gating it behind a debug flag.
• When building toolResultsById, only the last tool message for a given tool_call_id is preserved; if a tool can stream or emit multiple chunks, you may want to accumulate or merge them instead of overwriting.
• The fallback finalParts for assistant messages with only tool_calls creates an empty plain part, which can still render an empty bubble; consider skipping the message entirely or making the UI handle a pure tool_call message without the placeholder.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `console.log('处理消息:', ...)` inside `formattedMessages` runs for every message render and will spam the console; consider removing it or gating it behind a debug flag.
- When building `toolResultsById`, only the last `tool` message for a given `tool_call_id` is preserved; if a tool can stream or emit multiple chunks, you may want to accumulate or merge them instead of overwriting.
- The fallback `finalParts` for assistant messages with only `tool_calls` creates an empty `plain` part, which can still render an empty bubble; consider skipping the message entirely or making the UI handle a pure `tool_call` message without the placeholder.

## Individual Comments

### Comment 1
<location path="dashboard/src/views/ConversationPage.vue" line_range="553-543" />
<code_context>
+            return this.conversationHistory
+                // tool / system 等非聊天角色不直接渲染为气泡，避免大文本走 markdown 路径卡死页面
+                .filter(msg => msg.role === 'user' || msg.role === 'assistant')
+                .map(msg => {
+                    console.log('处理消息:', msg.role, msg.content);
+
+                    const messageParts = this.convertContentToMessageParts(msg.content)
</code_context>
<issue_to_address>
**issue (performance):** Debug logging in the hot path may be noisy and impact performance in production.

This `console.log` runs on every rendered message and prints full content, which can be large and may contain sensitive data. Consider guarding it behind a debug flag or removing it before release to avoid overhead and exposing internal data in the console.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[gemini-code-assist]

Code Review

This pull request updates the formattedMessages logic in ConversationPage.vue to correctly handle tool call results and filter conversation history, while also adjusting CSS for tool call cards to improve layout and hide status labels. Feedback suggests including system messages in the filtered history to maintain context and removing a console.log statement to improve performance and log cleanliness.