fix(show_html): freeze completed card during streaming
This commit is contained in:
parent
383e68188c
commit
ac788daa03
@ -565,6 +565,23 @@ function renderShowImages(root: ParentNode | null = document) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
let persistent = showHtmlPersistentRenderByPath.get(pathKey);
|
let persistent = showHtmlPersistentRenderByPath.get(pathKey);
|
||||||
|
if (!persistent && effectiveEncoded && inStreaming) {
|
||||||
|
// 精确匹配
|
||||||
|
let ep = showHtmlPersistentByEncoded.get(effectiveEncoded);
|
||||||
|
// 前缀匹配:多条渲染源可能输出不同阶段的 encoded,用最长前缀匹配找到 COMPLETE 的 wrapper
|
||||||
|
if (!ep) {
|
||||||
|
let bestLen = 0;
|
||||||
|
for (const [key, val] of showHtmlPersistentByEncoded) {
|
||||||
|
if (key.startsWith(effectiveEncoded) && key.length > bestLen) {
|
||||||
|
ep = val; bestLen = key.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (ep) {
|
||||||
|
persistent = { encoded: ep.encoded, ratioKey: ep.ratioKey, widthPx: ep.widthPx, heightPx: ep.heightPx, wrapper: ep.wrapper, host: ep.host, root: ep.root };
|
||||||
|
showHtmlPersistentRenderByPath.set(pathKey, persistent);
|
||||||
|
}
|
||||||
|
}
|
||||||
if (!persistent) {
|
if (!persistent) {
|
||||||
const wrapper = document.createElement('div');
|
const wrapper = document.createElement('div');
|
||||||
wrapper.className = 'chat-inline-html';
|
wrapper.className = 'chat-inline-html';
|
||||||
@ -615,17 +632,23 @@ function renderShowImages(root: ParentNode | null = document) {
|
|||||||
|
|
||||||
persistent.wrapper.style.width = `${widthPx}px`;
|
persistent.wrapper.style.width = `${widthPx}px`;
|
||||||
persistent.host.style.height = `${heightPx}px`;
|
persistent.host.style.height = `${heightPx}px`;
|
||||||
if (
|
const needsUpdate =
|
||||||
persistent.encoded !== effectiveEncoded ||
|
persistent.encoded !== effectiveEncoded ||
|
||||||
persistent.widthPx !== widthPx ||
|
persistent.widthPx !== widthPx ||
|
||||||
persistent.heightPx !== heightPx ||
|
persistent.heightPx !== heightPx ||
|
||||||
persistent.ratioKey !== ratioKey
|
persistent.ratioKey !== ratioKey;
|
||||||
) {
|
if (needsUpdate) {
|
||||||
persistent.root.innerHTML = safeHtml;
|
persistent.root.innerHTML = safeHtml;
|
||||||
persistent.encoded = effectiveEncoded;
|
persistent.encoded = effectiveEncoded;
|
||||||
persistent.widthPx = widthPx;
|
persistent.widthPx = widthPx;
|
||||||
persistent.heightPx = heightPx;
|
persistent.heightPx = heightPx;
|
||||||
persistent.ratioKey = ratioKey;
|
persistent.ratioKey = ratioKey;
|
||||||
|
if (effectiveEncoded && inStreaming) {
|
||||||
|
showHtmlPersistentByEncoded.set(effectiveEncoded, {
|
||||||
|
wrapper: persistent.wrapper, host: persistent.host, root: persistent.root,
|
||||||
|
encoded: effectiveEncoded, ratioKey, widthPx, heightPx
|
||||||
|
});
|
||||||
|
}
|
||||||
debugShowHtmlLog('render:node-persistent-update', {
|
debugShowHtmlLog('render:node-persistent-update', {
|
||||||
renderId,
|
renderId,
|
||||||
pathKey,
|
pathKey,
|
||||||
@ -642,7 +665,9 @@ function renderShowImages(root: ParentNode | null = document) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
node.replaceChildren(persistent.wrapper);
|
if (!inStreaming || isPartial || needsUpdate || !node.hasAttribute('data-rendered')) {
|
||||||
|
node.replaceChildren(persistent.wrapper);
|
||||||
|
}
|
||||||
node.setAttribute('data-rendered', '1');
|
node.setAttribute('data-rendered', '1');
|
||||||
const rect = persistent.wrapper.getBoundingClientRect();
|
const rect = persistent.wrapper.getBoundingClientRect();
|
||||||
debugShowHtmlLog('render:node-done', {
|
debugShowHtmlLog('render:node-done', {
|
||||||
@ -712,6 +737,10 @@ const showHtmlPersistentRenderByPath = new Map<
|
|||||||
root: HTMLElement
|
root: HTMLElement
|
||||||
}
|
}
|
||||||
>();
|
>();
|
||||||
|
const showHtmlPersistentByEncoded = new Map<string, {
|
||||||
|
wrapper: HTMLElement, host: HTMLElement, root: HTMLElement,
|
||||||
|
encoded: string, ratioKey: string, widthPx: number, heightPx: number
|
||||||
|
}>();
|
||||||
let layoutDebugObserver: MutationObserver | null = null;
|
let layoutDebugObserver: MutationObserver | null = null;
|
||||||
let layoutDebugResizeObserver: ResizeObserver | null = null;
|
let layoutDebugResizeObserver: ResizeObserver | null = null;
|
||||||
let layoutDebugStarted = false;
|
let layoutDebugStarted = false;
|
||||||
@ -1011,6 +1040,7 @@ export function teardownShowImageObserver() {
|
|||||||
showHtmlCompletedSnapshotByPath.clear();
|
showHtmlCompletedSnapshotByPath.clear();
|
||||||
showHtmlStreamingSizeLockByPath.clear();
|
showHtmlStreamingSizeLockByPath.clear();
|
||||||
showHtmlPersistentRenderByPath.clear();
|
showHtmlPersistentRenderByPath.clear();
|
||||||
|
showHtmlPersistentByEncoded.clear();
|
||||||
showTagObservedContainer = null;
|
showTagObservedContainer = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -32,6 +32,13 @@ const GENERATING_LABELS = [
|
|||||||
'快敲完了,别急'
|
'快敲完了,别急'
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const SHOW_HTML_COMPLETE_BLOCK_RE = /<show_html\b[\s\S]*?<\/show_html>/i;
|
||||||
|
|
||||||
|
function hasCompletedShowHtmlBlock(content: string | null | undefined) {
|
||||||
|
if (!content) return false;
|
||||||
|
return SHOW_HTML_COMPLETE_BLOCK_RE.test(content);
|
||||||
|
}
|
||||||
|
|
||||||
function randomGeneratingLabel() {
|
function randomGeneratingLabel() {
|
||||||
if (!GENERATING_LABELS.length) {
|
if (!GENERATING_LABELS.length) {
|
||||||
return '';
|
return '';
|
||||||
@ -249,6 +256,7 @@ export const useChatStore = defineStore('chat', {
|
|||||||
clearAwaitingFirstContent(msg);
|
clearAwaitingFirstContent(msg);
|
||||||
msg.streamingText = '';
|
msg.streamingText = '';
|
||||||
msg.currentStreamingType = 'text';
|
msg.currentStreamingType = 'text';
|
||||||
|
(msg as any).__splitByShowHtml = false;
|
||||||
const action = {
|
const action = {
|
||||||
id: randomId('text'),
|
id: randomId('text'),
|
||||||
type: 'text',
|
type: 'text',
|
||||||
@ -269,28 +277,58 @@ export const useChatStore = defineStore('chat', {
|
|||||||
msg.streamingText = '';
|
msg.streamingText = '';
|
||||||
}
|
}
|
||||||
msg.streamingText += content;
|
msg.streamingText += content;
|
||||||
const lastAction = msg.actions[msg.actions.length - 1];
|
let lastAction = msg.actions[msg.actions.length - 1];
|
||||||
if (lastAction && lastAction.type === 'text') {
|
if (!(lastAction && lastAction.type === 'text' && lastAction.streaming)) {
|
||||||
lastAction.content += content;
|
lastAction = {
|
||||||
return lastAction;
|
id: randomId('text'),
|
||||||
|
type: 'text',
|
||||||
|
content: '',
|
||||||
|
streaming: true,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
continuation: true
|
||||||
|
};
|
||||||
|
msg.actions.push(lastAction);
|
||||||
}
|
}
|
||||||
return null;
|
lastAction.content += content;
|
||||||
|
|
||||||
|
// show_html 一旦闭合,当前卡片应“定格”,后续 chunk 进入新的 text action,
|
||||||
|
// 避免 streaming 阶段每个新 chunk 都重建同一 show_html 卡片。
|
||||||
|
if (lastAction.streaming && hasCompletedShowHtmlBlock(lastAction.content)) {
|
||||||
|
lastAction.streaming = false;
|
||||||
|
lastAction.frozenByShowHtml = true;
|
||||||
|
(msg as any).__splitByShowHtml = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return lastAction;
|
||||||
},
|
},
|
||||||
completeText(fullContent: string) {
|
completeText(fullContent: string) {
|
||||||
if (this.currentMessageIndex < 0) return;
|
if (this.currentMessageIndex < 0) return;
|
||||||
const msg = this.messages[this.currentMessageIndex];
|
const msg = this.messages[this.currentMessageIndex];
|
||||||
|
const splitByShowHtml = !!(msg as any).__splitByShowHtml;
|
||||||
|
let completedStreamingAction = false;
|
||||||
for (let i = msg.actions.length - 1; i >= 0; i--) {
|
for (let i = msg.actions.length - 1; i >= 0; i--) {
|
||||||
const action = msg.actions[i];
|
const action = msg.actions[i];
|
||||||
if (action.type === 'text' && action.streaming) {
|
if (action.type === 'text' && action.streaming) {
|
||||||
action.streaming = false;
|
action.streaming = false;
|
||||||
if (typeof fullContent === 'string' && fullContent.length) {
|
completedStreamingAction = true;
|
||||||
|
if (!splitByShowHtml && typeof fullContent === 'string' && fullContent.length) {
|
||||||
action.content = fullContent;
|
action.content = fullContent;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (!completedStreamingAction && !splitByShowHtml && typeof fullContent === 'string') {
|
||||||
|
for (let i = msg.actions.length - 1; i >= 0; i--) {
|
||||||
|
const action = msg.actions[i];
|
||||||
|
if (action.type === 'text') {
|
||||||
|
action.content = fullContent;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
msg.streamingText = '';
|
msg.streamingText = '';
|
||||||
msg.currentStreamingType = null;
|
msg.currentStreamingType = null;
|
||||||
|
delete (msg as any).__splitByShowHtml;
|
||||||
},
|
},
|
||||||
addSystemMessage(content: string, meta: any = null) {
|
addSystemMessage(content: string, meta: any = null) {
|
||||||
// 与历史重建保持一致:子智能体/后台完成通知作为独立 assistant 消息渲染,
|
// 与历史重建保持一致:子智能体/后台完成通知作为独立 assistant 消息渲染,
|
||||||
|
|||||||
@ -937,7 +937,7 @@ body[data-theme='dark'] .more-icon {
|
|||||||
margin: 14px auto;
|
margin: 14px auto;
|
||||||
border: 1px solid var(--claude-border);
|
border: 1px solid var(--claude-border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
overflow: auto;
|
overflow: hidden;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: var(--claude-shadow);
|
box-shadow: var(--claude-shadow);
|
||||||
}
|
}
|
||||||
@ -945,6 +945,7 @@ body[data-theme='dark'] .more-icon {
|
|||||||
.chat-inline-html__host {
|
.chat-inline-html__host {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user