components/MessageInput.js

class MessageInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: ''
        };
    }

    handleChange = (e) => {
        this.setState({ message: e.target.value });
    };

    handleSubmit = (e) => {
        e.preventDefault();
        if (this.state.message.trim()) {
            this.props.onSend(this.state.message);
            this.setState({ message: '' });
        }
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit} className="w-full max-w-2xl mx-auto">
                <div className="mb-4">
                    <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">
                        Message Copilot
                    </label>
                    <div className="flex">
                        <input
                            type="text"
                            id="message"
                            value={this.state.message}
                            onChange={this.handleChange}
                            placeholder="Type your message here..."
                            className="flex-1 px-4 py-3 bg-secondary border border-gray-600 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                        <button
                            type="button"
                            className="px-4 py-3 bg-secondary border-t border-r border-b border-gray-600 hover:bg-gray-700 transition-colors"
                        >
                            <i data-feather="paperclip" className="w-5 h-5"></i>
                        </button>
                        <button
                            type="submit"
                            className="px-4 py-3 bg-blue-600 hover:bg-blue-700 rounded-r-lg transition-colors"
                        >
                            <i data-feather="send" className="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
            </form>
        );
    }
}