const { setupArtifacts, artifactSegment } = window.apartePlugins.artifacts;
setupArtifacts();
const page = `<!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: 26rem; margin: 0 auto; padding: 2.5rem 1.5rem }
h1 { font-size: 1.6rem; margin: 0 0 .5rem }
p { color: #6b6b76; margin: 0 0 1.4rem }
a { display: inline-block; padding: .55rem 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>`;
// What the create_artifact tool returns, drawn as a card: Code first, Preview on a click.
document.querySelector('aparte-chat-bubble').setSegments([
{ id: 's1', type: 'text', content: 'Here is a first draft of the landing page.' },
artifactSegment('s2', { mimeType: 'text/html', title: 'Landing page', content: page }),
]);