// An echarts fence and a chartjs fence: each library's own config, as JSON, drawn as it arrives.
const bubble = document.querySelector('aparte-chat-bubble');
const echarts = JSON.stringify({
title: { text: 'Revenue by quarter (kâĴ)' }, tooltip: { trigger: 'axis' }, legend: {},
xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] }, yAxis: { type: 'value' },
series: [{ name: '2025', type: 'bar', data: [120, 132, 101, 134] }, { name: '2026', type: 'bar', data: [140, 162, 151, 190] }],
}, null, 2);
const chartjs = JSON.stringify({
type: 'line',
data: { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{ label: 'Visitors', data: [820, 932, 901, 934, 1290, 1330, 1320], fill: true, tension: 0.35 }] },
options: { plugins: { title: { display: true, text: 'This week' } } },
}, null, 2);
bubble.setSegments([
{ id: 's1', type: 'code', language: 'echarts', content: '', isStreaming: true },
{ id: 's2', type: 'code', language: 'chartjs', content: '', isStreaming: true },
]);
const stream = (id, source, done) => {
let i = 0;
const tick = setInterval(() => {
bubble.appendToSegment(id, source.slice(i, i + 12));
i += 12;
if (i >= source.length) {
clearInterval(tick);
bubble.updateSegment(id, { isStreaming: false });
done?.();
}
}, 50);
};
stream('s1', echarts, () => stream('s2', chartjs, () => bubble.removeAttribute('streaming')));