fix: 直播聊天时实时渲染工具调用卡片

- 新增 appendToolCallCardToPlaceholder: 工具开始执行时显示 running 卡片
- 新增 updateToolCallCardInPlaceholder: 工具完成后更新为 success/error 卡片
- 修复 onToolCallStart/onToolCallResult/onToolCallError 空回调问题
- 修复历史记录有工具卡片但直播聊天没有的不一致问题
This commit is contained in:
thzxx
2026-04-19 17:19:45 +08:00
parent 1f99d61a12
commit c60ee2b4ae
2 changed files with 54 additions and 7 deletions
+37
View File
@@ -400,6 +400,43 @@ export function updateLastAssistantMessage(content: string, think: string | null
scrollToBottom();
}
/** 实时追加工具调用卡片到当前 placeholder(直播聊天时使用) */
export function appendToolCallCardToPlaceholder(tc: ToolCallRecord): void {
if (!currentPlaceholder) return;
let container = currentPlaceholder.querySelector('.tool-calls-container');
if (!container) {
container = document.createElement('div');
container.className = 'tool-calls-container';
const msgBody = currentPlaceholder.querySelector('.msg-body');
if (msgBody) msgBody.appendChild(container);
}
const cardDiv = document.createElement('div');
cardDiv.innerHTML = renderToolCallCard(tc);
const card = cardDiv.firstElementChild as HTMLElement;
card.dataset.toolName = tc.name;
container.appendChild(card);
scrollToBottom();
}
/** 更新 placeholder 中已有的工具卡片状态(running → success/error */
export function updateToolCallCardInPlaceholder(tc: ToolCallRecord): void {
if (!currentPlaceholder) return;
const container = currentPlaceholder.querySelector('.tool-calls-container');
if (!container) return;
// 找到第一个同名且状态为 running 的卡片
const existing = container.querySelector(`.tool-call-card[data-tool-name="${tc.name}"].tool-call-running`) as HTMLElement;
if (existing) {
const cardDiv = document.createElement('div');
cardDiv.innerHTML = renderToolCallCard(tc);
const newCard = cardDiv.firstElementChild as HTMLElement;
newCard.dataset.toolName = tc.name;
existing.replaceWith(newCard);
} else {
// 没找到 running 的卡片,直接追加
appendToolCallCardToPlaceholder(tc);
}
}
export function appendAssistantPlaceholder(): void {
const div = document.createElement('div');
div.className = 'message assistant loading';