const { registerSegmentRenderer } = window.aparte;
// type: 'custom' keeps several small views behind ONE renderer: switch on subType,
// and let the default branch draw something sensible for one you do not know.
registerSegmentRenderer({
type: 'custom',
render(segment) {
const el = document.createElement('span');
if (segment.subType === 'status') {
el.className = `aparte-badge aparte-badge--soft aparte-badge--${segment.data.ok ? 'success' : 'danger'}`;
el.textContent = segment.data.label;
} else {
el.textContent = segment.fallback ?? '';
}
return el;
},
});
document.querySelector('aparte-chat-bubble').setSegments([
{ id: 's1', type: 'text', content: 'Checks on the release branch:' },
{ id: 's2', type: 'custom', subType: 'status', data: { ok: true, label: 'Build passed' } },
{ id: 's3', type: 'custom', subType: 'status', data: { ok: false, label: '1 e2e test failed' } },
]);