// 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: 'search_images', variant: 'strip' });
document.querySelector('aparte-chat-bubble').setSegments([{
id: 's1', type: 'tool_call', status: 'resolved',
toolCall: { id: 'c-s1', name: 'search_images', input: { query: 'landscapes, flat illustration' } },
structuredResult: {
title: 'Landscapes, flat illustration',
items: [
{ src: picture('alps-dawn'), title: 'First light', credit: 'Studio Ridge', width: 1200, height: 800 },
{ src: picture('coast'), title: 'The cliff path', credit: 'Studio Ridge', width: 1200, height: 800 },
{ src: picture('aurora'), title: 'Northern lights', credit: 'M. Haldor', width: 1200, height: 800 },
{ src: picture('forest'), title: 'Pines in the fog', credit: 'M. Haldor', width: 1200, height: 800 },
{ src: picture('dunes'), title: 'Dunes at noon', credit: 'A. Serra', width: 1200, height: 800 },
{ src: picture('city-dusk'), title: 'The city at dusk', credit: 'A. Serra', width: 1200, height: 800 },
],
},
}]);