// In an app: import { setupMediaCard } from '@aparte/plugin-cards/media';
const { setupMediaCard } = window.apartePlugins.cards.media;
// A card shows only http(s) pictures: these are served by this site, which its image
// policy lets load. Without it they wait behind "Show images", as any picture would.
window.aparte.aparteGlobalConfig.setImagePolicy(['self']);
const picture = (name) => new URL('/demo-pictures/' + name + '.svg', location.href).href;
setupMediaCard({ tool: 'generate_image' });
const viewport = document.querySelector('aparte-chat-viewport');
viewport.appendMessage({ id: 'u1', role: 'user', content: 'Draw me mountains at dawn, flat style.', timestamp: Date.now() });
viewport.appendMessage({ id: 'a1', role: 'assistant', timestamp: Date.now(), segments: [{
id: 's1', type: 'tool_call', status: 'resolved',
toolCall: { id: 'c-s1', name: 'generate_image', input: { prompt: 'Mountains at dawn, layered, flat illustration' } },
structuredResult: {
src: picture('alps-dawn'), width: 1200, height: 800, title: 'Mountains at dawn',
caption: 'Layered ridges in violet and indigo under a rose sky, the sun low behind the last one.',
alt: 'Layered mountain ridges under a pink dawn sky, with the sun low behind them.',
},
}] });