const { setupArtifacts, artifactSegment } = window.aparteArtifacts;
setupArtifacts();
const DOC = `<!doctype html>
<meta charset="utf-8">
<style>
body { margin: 0; font: 16px/1.6 system-ui, sans-serif; color: #1b1b1f; background: #fbf9f5 }
main { max-width: 30rem; margin: 0 auto; padding: 3rem 1.5rem }
h1 { font-size: 1.8rem; margin: 0 0 .6rem }
p { color: #6b6b76; margin: 0 0 1.6rem }
a { display: inline-block; padding: .6rem 1.1rem; border-radius: .5rem; background: #1b1b1f; color: #fff; text-decoration: none }
</style>
<main>
<h1>A chat you can put anywhere</h1>
<p>Web components, no framework, and the agent loop inside.</p>
<a href="#">Read the guide</a>
</main>`;
// The pane is the app's, not the library's: mounting the document is one assignment.
document.getElementById('mounted').srcdoc = DOC;
const viewport = document.querySelector('aparte-chat-viewport');
viewport.appendMessage({ id: 'u1', role: 'user', content: 'Draft the landing page for the beta.', timestamp: Date.now() });
viewport.appendMessage({
id: 'a1',
role: 'assistant',
timestamp: Date.now(),
segments: [
{ id: 's1', type: 'text', content: 'Here is a first draft — the pane beside this is the same document, mounted.' },
artifactSegment('s2', { mimeType: 'text/html', title: 'Landing page', content: DOC }),
],
});