File size: 3,251 Bytes
e686056 bb73d0c e686056 bb73d0c 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
class AgenticNotebook extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.cells = [];
}
static get observedAttributes() {
return ['cells'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'cells') {
this.cells = JSON.parse(newValue);
this.render();
}
}
render() {
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
width: 100%;
}
.notebook-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.add-cell-btn {
transition: all 0.2s ease;
}
.add-cell-btn:hover {
transform: translateY(-1px);
}
.cells-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 0 1rem;
}
</style>
<div class="notebook-container">
<div class="notebook-header">
<h1 class="text-2xl font-bold text-gray-800">Agentic Research Notebook</h1>
<button class="add-cell-btn flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700">
<i data-feather="plus"></i>
Add Cell
</button>
</div>
<div class="cells-container">
${this.cells.map((cell, index) => `
<agentic-cell
id="${cell.id}"
agent-type="${cell.agentType}"
input="${cell.input}"
output='${JSON.stringify(cell.output)}'
status="${cell.status}"
timestamp="${cell.timestamp}"
${index > 0 ? 'has-previous' : ''}
></agentic-cell>
`).join('')}
</div>
</div>
`;
// Add event listener for the add cell button
const addCellBtn = this.shadowRoot.querySelector('.add-cell-btn');
addCellBtn.addEventListener('click', () => this.addNewCell());
// Initialize feather icons
if (window.feather) {
window.feather.replace();
}
}
addNewCell() {
const newCellId = `cell-${Date.now()}`;
const newCell = {
id: newCellId,
agentType: 'researcher',
input: '',
output: null,
status: 'idle',
timestamp: new Date().toISOString()
};
this.cells.push(newCell);
this.setAttribute('cells', JSON.stringify(this.cells));
}
}
customElements.define('agentic-notebook', AgenticNotebook); |