// The viewport keeps the messages, builds a bubble for each, and stays pinned to the
// bottom while you are there; scroll up and the button brings you back.
const viewport = document.querySelector('aparte-chat-viewport');
for (const message of [
{ id: 'u1', role: 'user', content: 'Which transport should I use?', timestamp: Date.parse('2026-10-15T09:41:00') },
{ id: 'a1', role: 'assistant', content: 'Use **AparteDirectTransport** while you prototype: the browser talks to the model. Switch to **AparteBackendTransport** before you ship, so the key stays on your server.', timestamp: Date.parse('2026-10-15T09:41:04') },
{ id: 'u2', role: 'user', content: 'Does the component change between the two?', timestamp: Date.parse('2026-10-15T09:42:10') },
{ id: 'a2', role: 'assistant', content: 'No. The transport is configuration; the chat, its streaming and its tool calls stay the same.', timestamp: Date.parse('2026-10-15T09:42:13') },
]) viewport.appendMessage(message);