const { AparteConfig, attachConfig } = window.aparte;
// One config for this column only; the first bubble keeps the global one.
const mine = new AparteConfig();
mine.setBubbleShellRenderer((ctx) => `
<div class="aparte-message my-card" data-role="${ctx.role}">
<header class="my-card__who"><span class="aparte-name"></span></header>
<div class="aparte-message-content">
<div class="aparte-segments"></div>
<div class="aparte-content"></div>
<!-- The dots are yours to draw: the bubble only shows and hides this region. -->
<div class="aparte-waiting" hidden>
<span class="aparte-dots" aria-hidden="true">
<span class="aparte-dot"></span><span class="aparte-dot"></span><span class="aparte-dot"></span>
</span>
<span class="aparte-sr-only"></span>
</div>
</div>
<div class="aparte-footer"><div class="aparte-action-bar"></div></div>
</div>`);
const custom = document.querySelector('#custom');
attachConfig(custom, mine);
// Created AFTER the boundary: a bubble renders its shell once, when it connects.
const bubble = document.createElement('aparte-chat-bubble');
bubble.setAttribute('message-id', 'a2');
bubble.setAttribute('content', 'Retry does not overwrite a reply: it forks a sibling, and the picker walks them.');
custom.appendChild(bubble);
bubble.setAttribute('name', 'Assistant'); // the bubble writes it into .aparte-name