class ClaudeHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.render();
this.setupEventListeners();
}
render() {
this.shadowRoot.innerHTML = `
`;
// Update feather icons
setTimeout(() => {
if (this.shadowRoot.querySelector('[data-feather]')) {
feather.replace();
}
}, 100);
}
setupEventListeners() {
const appName = this.shadowRoot.getElementById('appName');
const modelButton = this.shadowRoot.getElementById('modelButton');
const modelDropdown = this.shadowRoot.getElementById('modelDropdown');
const currentModel = this.shadowRoot.getElementById('currentModel');
// Reset conversation on app name click
appName.addEventListener('click', () => {
document.dispatchEvent(new CustomEvent('claude-new-chat'));
});
// Toggle dropdown
modelButton.addEventListener('click', () => {
if (window.claudeApp.isProcessing) return;
const isShowing = modelDropdown.classList.contains('show');
if (isShowing) {
modelDropdown.classList.remove('show');
} else {
modelDropdown.classList.add('show');
}
});
// Model selection
modelDropdown.addEventListener('click', (event) => {
const item = event.target.closest('.dropdown-item');
if (item) {
const model = item.dataset.model;
document.dispatchEvent(new CustomEvent('claude-change-model', {
detail: { model }
}));
// Update current model display
currentModel.textContent = this.getModelLabel(model);
// Close dropdown
modelDropdown.classList.remove('show');
// Show selection feedback
item.classList.add('selected');
setTimeout(() => item.classList.remove('selected'), 500);
}
});
// Close dropdown when clicking outside
document.addEventListener('click', (event) => {
if (!this.contains(event.target)) {
modelDropdown.classList.remove('show');
}
});
// Update model display when changed externally
document.addEventListener('claude-model-changed', (event) => {
const { model } = event.detail;
currentModel.textContent = this.getModelLabel(model);
});
}
getModelLabel(model) {
const modelLabels = {
'claude-sonnet-4-5': 'Claude Sonnet 4.5',
'claude-sonnet-4': 'Claude Sonnet 4',
'claude-opus-4-1': 'Claude Opus 4.1',
'claude-opus-4': 'Claude Opus 4',
'claude-haiku-4-5': 'Claude Haiku 4.5'
};
return modelLabels[model] || model;
}
}
customElements.define('claude-header', ClaudeHeader);