style: AI 回复中工具卡片移至文字上方,增加视觉层次
- 工具卡片渲染位置从文字下方移至文字上方 - 工具卡片与文字之间用虚线分隔,形成视觉层次 - 逻辑顺序:思考过程 → 工具执行 → 最终回答
This commit is contained in:
@@ -157,6 +157,22 @@ export function appendMessageDOM(msg: ChatMessage, index: number): void {
|
|||||||
contentHtml = contentHtml.replace('<div class="msg-content"></div>', '');
|
contentHtml = contentHtml.replace('<div class="msg-content"></div>', '');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// v5.1.2 工具卡片移至文字上方(先展示工具执行过程,再展示最终回答)
|
||||||
|
if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
|
||||||
|
let toolHtml = '<div class="tool-calls-container">';
|
||||||
|
for (const tc of msg.toolCalls) {
|
||||||
|
toolHtml += renderToolCallCard(tc);
|
||||||
|
}
|
||||||
|
toolHtml += '</div>';
|
||||||
|
// 插入到 msg-content 之前
|
||||||
|
const contentIdx = contentHtml.indexOf('<div class="msg-content">');
|
||||||
|
if (contentIdx >= 0) {
|
||||||
|
contentHtml = contentHtml.slice(0, contentIdx) + toolHtml + contentHtml.slice(contentIdx);
|
||||||
|
} else {
|
||||||
|
contentHtml = toolHtml + contentHtml;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const stats: string[] = [];
|
const stats: string[] = [];
|
||||||
const statClasses: string[] = [];
|
const statClasses: string[] = [];
|
||||||
if (msg.timestamp) { stats.push(formatTime(msg.timestamp)); statClasses.push(''); }
|
if (msg.timestamp) { stats.push(formatTime(msg.timestamp)); statClasses.push(''); }
|
||||||
@@ -166,14 +182,6 @@ export function appendMessageDOM(msg: ChatMessage, index: number): void {
|
|||||||
contentHtml += `<div class="msg-stats">${stats.map((s, i) => `<span${statClasses[i] ? ` class="${statClasses[i]}"` : ''}>${s}</span>`).join(' · ')}</div>`;
|
contentHtml += `<div class="msg-stats">${stats.map((s, i) => `<span${statClasses[i] ? ` class="${statClasses[i]}"` : ''}>${s}</span>`).join(' · ')}</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
|
|
||||||
contentHtml += '<div class="tool-calls-container">';
|
|
||||||
for (const tc of msg.toolCalls) {
|
|
||||||
contentHtml += renderToolCallCard(tc);
|
|
||||||
}
|
|
||||||
contentHtml += '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
div.innerHTML = `
|
div.innerHTML = `
|
||||||
<div class="msg-avatar">${avatar}</div>
|
<div class="msg-avatar">${avatar}</div>
|
||||||
<div class="msg-body">
|
<div class="msg-body">
|
||||||
|
|||||||
@@ -833,6 +833,11 @@ html, body {
|
|||||||
box-shadow: var(--shadow-card);
|
box-shadow: var(--shadow-card);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tool-calls-container + .msg-stats + .msg-content,
|
||||||
|
.tool-calls-container + .msg-content {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.msg-content {
|
.msg-content {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
@@ -1976,7 +1981,9 @@ html, body {
|
|||||||
═══════════════════════════════════════════════════════════════ */
|
═══════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
.tool-calls-container {
|
.tool-calls-container {
|
||||||
margin-top: 10px;
|
margin-bottom: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
border-bottom: 1px dashed var(--border-subtle);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-call-card {
|
.tool-call-card {
|
||||||
|
|||||||
Reference in New Issue
Block a user