components/chat.js

class CustomChat extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .chat-container {
                    background: white;
                    border-radius: 1rem;
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                    height: 500px;
                    display: flex;
                    flex-direction: column;
                }
                .chat-header {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    padding: 1rem;
                    border-top-left-radius: 1rem;
                    border-top-right-radius: 1rem;
                }
                .chat-messages {
                    flex-grow: 1;
                    padding: 1rem;
                    overflow-y: auto;
                }
                .message {
                    margin-bottom: 1rem;
                    max-width: 80%;
                }
                .user-message {
                    background: #3b82f6;
                    color: white;
                    border-radius: 1rem 1rem 0 1rem;
                    padding: 0.5rem 1rem;
                    margin-left: auto;
                }
                .bot-message {
                    background: #e5e7eb;
                    color: #111827;
                    border-radius: 1rem 1rem 1rem 0;
                    padding: 0.5rem 1rem;
                    margin-right: auto;
                }
                .chat-input-container {
                    display: flex;
                    padding: 1rem;
                    border-top: 1px solid #e5e7eb;
                }
                .chat-input {
                    flex-grow: 1;
                    padding: 0.5rem 1rem;
                    border: 1px solid #e5e7eb;
                    border-radius: 0.5rem;
                    outline: none;
                }
                .chat-input:focus {
                    border-color: #3b82f6;
                }
                .send-button {
                    background: #3b82f6;
                    color: white;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.5rem 1rem;
                    margin-left: 0.5rem;
                    cursor: pointer;
                }
                .send-button:hover {
                    background: #2563eb;
                }
                @media (max-width: 768px) {
                    .chat-container {
                        height: 400px;
                    }
                }
            </style>
            <div class="chat-container">
                <div class="chat-header">
                    <h2 class="font-bold">Chat with your Avatar</h2>
                </div>
                <div class="chat-messages" id="chat-messages">
                    <div class="message bot-message">
                        Hello! I'm your AI Avatar. What would you like me to do?
                    </div>
                </div>
                <div class="chat-input-container">
                    <input type="text" class="chat-input" id="user-input" placeholder="Type a command...">
                    <button class="send-button" id="send-button">
                        <i data-feather="send"></i>
                    </button>
                </div>
            </div>
        `;

        // Add event listeners after rendering
        setTimeout(() => {
            const sendButton = this.shadowRoot.getElementById('send-button');
            const userInput = this.shadowRoot.getElementById('user-input');
            const chatMessages = this.shadowRoot.getElementById('chat-messages');

            const handleSend = () => {
                const message = userInput.value.trim();
                if (message) {
                    // Add user message
                    const userMsg = document.createElement('div');
                    userMsg.className = 'message user-message';
                    userMsg.textContent = message;
                    chatMessages.appendChild(userMsg);
                    
                    // Get bot response
                    const response = window.avatarCommander.handleCommand(message);
                    
                    // Add bot response after a short delay
                    setTimeout(() => {
                        const botMsg = document.createElement('div');
                        botMsg.className = 'message bot-message';
                        botMsg.textContent = response;
                        chatMessages.appendChild(botMsg);
                        chatMessages.scrollTop = chatMessages.scrollHeight;
                    }, 500);
                    
                    userInput.value = '';
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                }
            };

            sendButton.addEventListener('click', handleSend);
            userInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    handleSend();
                }
            });
        }, 0);
    }
}
customElements.define('custom-chat', CustomChat);