class ChatAssistant extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.messages = []; this.chatMode = 'general'; this.isTyping = false; } connectedCallback() { this.render(); this.attachEventListeners(); this.loadChatHistory(); this.setupKeyboardShortcuts(); } render() { this.shadowRoot.innerHTML = `

Spectre AI Assistant

Advanced Conversational Intelligence

Analyze threats OSINT Report Explain CVEs Security tips

`; } attachEventListeners() { const overlay = this.shadowRoot.getElementById('overlay'); const closeBtn = this.shadowRoot.getElementById('close-btn'); const chatInput = this.shadowRoot.getElementById('chat-input'); const sendBtn = this.shadowRoot.getElementById('send-btn'); const modeBtns = this.shadowRoot.querySelectorAll('.mode-btn'); const clearBtn = this.shadowRoot.getElementById('clear-chat'); const exportBtn = this.shadowRoot.getElementById('export-chat'); const voiceBtn = this.shadowRoot.getElementById('voice-input'); const quickPrompts = this.shadowRoot.querySelectorAll('.quick-prompt'); overlay.addEventListener('click', () => this.close()); closeBtn.addEventListener('click', () => this.close()); chatInput.addEventListener('input', () => { sendBtn.disabled = !chatInput.value.trim(); this.autoResizeTextarea(chatInput); }); chatInput.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (chatInput.value.trim()) { this.sendMessage(chatInput.value.trim()); chatInput.value = ''; sendBtn.disabled = true; this.autoResizeTextarea(chatInput); } } }); sendBtn.addEventListener('click', () => { if (chatInput.value.trim()) { this.sendMessage(chatInput.value.trim()); chatInput.value = ''; sendBtn.disabled = true; this.autoResizeTextarea(chatInput); } }); modeBtns.forEach(btn => { btn.addEventListener('click', () => { modeBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); this.chatMode = btn.dataset.mode; this.updateAIStatus(); }); }); clearBtn.addEventListener('click', () => { this.messages = []; this.saveChatHistory(); this.renderMessages(); this.addSystemMessage('Conversation cleared'); }); exportBtn.addEventListener('click', () => this.exportChat()); voiceBtn.addEventListener('click', () => this.toggleVoiceInput()); quickPrompts.forEach(prompt => { prompt.addEventListener('click', () => { chatInput.value = prompt.dataset.prompt; sendBtn.disabled = false; chatInput.focus(); }); }); } autoResizeTextarea(textarea) { textarea.style.height = 'auto'; textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px'; } setupKeyboardShortcuts() { document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && this.hasAttribute('active')) { this.close(); } if (e.ctrlKey && e.key === 'k') { e.preventDefault(); this.toggle(); } }); } toggle() { if (this.hasAttribute('active')) { this.close(); } else { this.open(); } } open() { this.setAttribute('active', ''); this.shadowRoot.getElementById('chat-input').focus(); } close() { this.removeAttribute('active'); } updateAIStatus() { const aiName = this.shadowRoot.getElementById('ai-name'); const aiStatus = this.shadowRoot.getElementById('ai-status'); const modeNames = { 'general': 'Spectre AI Assistant', 'technical': 'Technical Advisor', 'security': 'Security Intelligence', 'adversarial': 'Adversarial Analyst', 'creative': 'Creative Architect' }; const modeDescriptions = { 'general': 'Advanced Conversational Intelligence', 'technical': 'Expert Technical Guidance', 'security': 'Threat Analysis & Mitigation', 'adversarial': 'Red Team & Penetration Testing', 'creative': 'Innovation & Design Thinking' }; aiName.textContent = modeNames[this.chatMode]; aiStatus.textContent = modeDescriptions[this.chatMode]; } addMessage(role, content, isSystem = false) { const message = { role, content, timestamp: Date.now(), mode: this.chatMode }; this.messages.push(message); this.renderMessages(); this.saveChatHistory(); return message; } addSystemMessage(content) { this.addMessage('system', content); } renderMessages() { const container = this.shadowRoot.getElementById('chat-messages'); const quickPrompts = container.querySelector('.quick-prompts'); container.innerHTML = ''; if (this.messages.length === 0) { container.appendChild(quickPrompts); return; } container.appendChild(quickPrompts); this.messages.forEach(msg => { const messageEl = this.createMessageElement(msg); container.appendChild(messageEl); }); container.scrollTop = container.scrollHeight; } createMessageElement(msg) { const div = document.createElement('div'); div.className = `message ${msg.role}`; let avatarIcon = ''; if (msg.role === 'assistant') { avatarIcon = ``; } else if (msg.role === 'user') { avatarIcon = ``; } // Format content with markdown-like syntax let formattedContent = this.formatMessage(msg.content); div.innerHTML = `

${avatarIcon}

${formattedContent}

`; return div; } formatMessage(content) { // Escape HTML let formatted = content .replace(/&/g, '&') .replace(//g, '>'); // Code blocks formatted = formatted.replace(/