components/agentic-chat.js

class AgenticChat extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    max-width: 800px;
                    margin: 2rem auto;
                    font-family: 'Inter', sans-serif;
                }
                
                .chat-container {
                    height: 70vh;
                    overflow-y: auto;
                    padding: 1rem;
                    background-color: #f9fafb;
                    border-radius: 0.5rem;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                }
                
                .input-area {
                    display: flex;
                    gap: 0.5rem;
                    margin-top: 1rem;
                }
                
                input {
                    flex: 1;
                    padding: 0.75rem 1rem;
                    border: 1px solid #e5e7eb;
                    border-radius: 0.375rem;
                    outline: none;
                    transition: border-color 0.2s;
                }
                
                input:focus {
                    border-color: #3b82f6;
                }
                
                button {
                    padding: 0.75rem 1.5rem;
                    background-color: #3b82f6;
                    color: white;
                    border: none;
                    border-radius: 0.375rem;
                    cursor: pointer;
                    transition: background-color 0.2s;
                }
                
                button:hover {
                    background-color: #2563eb;
                }
                
                .typing-indicator {
                    display: inline-flex;
                    gap: 4px;
                }
                
                .typing-dot {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background-color: #6b7280;
                    animation: pulse 1.5s infinite ease-in-out;
                }
                
                @keyframes pulse {
                    0%, 100% { opacity: 1; }
                    50% { opacity: 0.5; }
                }
            </style>
            
            <div class="chat-container" id="messages">
                <div class="p-4 mb-2 bg-white rounded-lg shadow-sm">
                    Hello! I'm your AI assistant. How can I help you today?
                </div>
            </div>
            
            <div class="input-area">
                <input type="text" id="userInput" placeholder="Type your message...">
                <button id="sendButton">
                    <i data-feather="send"></i>
                </button>
            </div>
        `;

        const sendButton = this.shadowRoot.getElementById('sendButton');
        const userInput = this.shadowRoot.getElementById('userInput');
        const messagesContainer = this.shadowRoot.getElementById('messages');

        sendButton.addEventListener('click', () => {
            const message = userInput.value.trim();
            if (message) {
                // Add user message
                const userMessage = document.createElement('div');
                userMessage.className = 'p-4 mb-2 bg-indigo-50 rounded-lg shadow-sm text-right';
                userMessage.textContent = message;
                messagesContainer.appendChild(userMessage);
                
                // Add typing indicator
                const typingIndicator = document.createElement('div');
                typingIndicator.className = 'p-4 mb-2 bg-white rounded-lg shadow-sm';
                typingIndicator.innerHTML = `
                    <div class="typing-indicator">
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                        <div class="typing-dot"></div>
                    </div>
                `;
                messagesContainer.appendChild(typingIndicator);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
                
                userInput.value = '';
                
                // Simulate agent response after a delay
                setTimeout(() => {
                    messagesContainer.removeChild(typingIndicator);
                    simulateAgentResponse(messagesContainer);
                }, 1500);
            }
        });

        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendButton.click();
            }
        });
    }
}

customElements.define('agentic-chat', AgenticChat);