const { aparteGlobalConfig } = window.aparte;
// An icon is a key of the icon provider. 'search' ships in '@aparte/core/icons'; here a
// glyph of our own stands in for it.
aparteGlobalConfig.registerIcons({
search: () => '<svg class="aparte-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="7"/><path d="m16 16 5.5 5.5"/></svg>',
});
// A label replaces the identifier; the identifier stays on the row as data-tool-name.
aparteGlobalConfig.registerToolDisplay('web_search', {
label: 'Searching the web',
icon: 'search',
summary: (segment) => `“${segment.toolCall.input.query}”`,
});
aparteGlobalConfig.registerToolDisplay('read_file', {
label: 'Reading a file',
icon: 'file',
summary: (segment) => String(segment.toolCall.input.path ?? ''),
});
// A label can read the call: the same tool, said differently once it is done.
aparteGlobalConfig.registerToolDisplay('delete_file', {
label: (segment) => (segment.status === 'resolved' ? 'Deleted a file' : 'Delete a file'),
icon: 'trash',
summary: (segment) => String(segment.toolCall.input.path ?? ''),
});
document.querySelector('aparte-chat-bubble').setSegments([
{ id: 's1', type: 'tool_call', status: 'resolved', toolCall: { id: 't1', name: 'web_search', input: { query: 'release checklist' } }, result: '3 pages' },
{ id: 's2', type: 'tool_call', status: 'resolved', toolCall: { id: 't2', name: 'read_file', input: { path: 'docs/release.md' } }, result: '## Release' },
{ id: 's3', type: 'tool_call', status: 'resolved', toolCall: { id: 't3', name: 'delete_file', input: { path: 'docs/draft.md' } }, result: 'Deleted' },
]);