// In an app: import { setupOrderCard } from '@aparte/plugin-cards/order';
const { setupOrderCard } = window.apartePlugins.cards.order;
// 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;
setupOrderCard({ tool: 'get_order' });
const viewport = document.querySelector('aparte-chat-viewport');
viewport.appendMessage({ id: 'u1', role: 'user', content: 'Where is my headphones order?', 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: 'get_order', input: { orderId: 'A-20931' } },
structuredResult: {
reference: 'A-20931', status: 'shipped', date: Date.now() - 2 * 86400000, currency: 'EUR',
items: [
{ title: 'Arden 700 wireless headphones', subtitle: 'Graphite', image: picture('headphones-graphite'), quantity: 1, price: 279 },
{ title: 'Hard carrying case', subtitle: 'Arden 700', image: picture('case'), quantity: 1, price: 29 },
{ title: 'Replacement ear cushions', quantity: 2, price: 14.5 },
],
discount: 20, shipping: 0, payment: { brand: 'Visa', last4: '4242' },
shippingAddress: { address1: '8 rue Esquermoise', zip: '59800', city: 'Lille', country: 'France' },
delivery: {
estimate: { from: Date.now() + 86400000, to: Date.now() + 3 * 86400000 },
carrier: 'Express parcel', trackingNumber: '6A20931874512', trackingUrl: 'https://track.example.com/6A20931874512',
},
url: 'https://shop.example.com/orders/A-20931',
},
}] });