// Every fence in a reply is a code segment: a mermaid one is redrawn as it arrives.
const bubble = document.querySelector('aparte-chat-bubble');
bubble.setSegments([{ id: 's1', type: 'code', language: 'mermaid', content: '', isStreaming: true }]);
const source = 'flowchart LR\n accTitle: How a reply reaches the screen\n A[Model] -->|tokens| B[Markdown provider]\n B --> C{A code language?}\n C -->|math| D[KaTeX]\n C -->|mermaid| E[Mermaid]\n C -->|anything else| F[Highlighter]';
let i = 0;
const tick = setInterval(() => {
bubble.appendToSegment('s1', source.slice(i, i + 4));
i += 4;
if (i >= source.length) {
clearInterval(tick);
bubble.updateSegment('s1', { isStreaming: false });
bubble.removeAttribute('streaming');
}
}, 60);