File size: 2,216 Bytes
e686056 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | class AgenticOutputViewer extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return ['output'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'output' && oldValue !== newValue) {
this.render();
}
}
render() {
const output = this.getAttribute('output') ? JSON.parse(this.getAttribute('output')) : null;
if (!output) {
this.shadowRoot.innerHTML = `<div>No output available</div>`;
return;
}
let content;
if (output.type === 'markdown') {
content = `
<div class="markdown-viewer p-4 bg-gray-50 rounded-lg">
${this.renderMarkdown(output.content)}
</div>
`;
} else if (output.type === 'table') {
content = `
<div class="table-viewer overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
${output.content.headers.map(header => `
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
${header}
</th>
`).join('')}
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
${output.content.rows.map((row, rowIndex) => `
<tr class="${rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'}">
${row.map(cell => `
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
${cell}
</td>
`).join('')}
</tr>
`).join('')} |