components/chat-input.js

class ChatInput extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                }
                .input-container {
                    position: relative;
                    width: 100%;
                }
                textarea {
                    width: 100%;
                    padding: 1rem;
                    padding-right: 4rem;
                    border-radius: 0.5rem;
                    border: 1px solid #D1D5DB;
                    resize: none;
                    min-height: 60px;
                    font-family: inherit;
                    line-height: 1.5;
                }
                textarea:focus {
                    outline: none;
                    box-shadow: 0 0 0 2px #3B82F6;
                    border-color: transparent;
                }
                .send-btn {
                    position: absolute;
                    right: 0.75rem;
                    bottom: 0.75rem;
                    padding: 0.5rem;
                    border-radius: 0.375rem;
                    background-color: #3B82F6;
                    color: white;
                    transition: background-color 0.2s;
                }
                .send-btn:hover {
                    background-color: #2563EB;
                }
                .disclaimer {
                    font-size: 0.75rem;
                    color: #6B7280;
                    margin-top: 0.5rem;
                    text-align: center;
                }
            </style>
            <div class="input-container">
                <textarea placeholder="Message Chatty McChatFace..." rows="1"></textarea>
                <button class="send-btn">
                    <i data-feather="send"></i>
                </button>
            </div>
            <p class="disclaimer">
                Chatty McChatFace can make mistakes. Consider checking important information.
            </p>
        `;
    }
}

customElements.define('chat-input', ChatInput);