ChatGPT
4oHello! I'm ChatGPT, your AI assistant. How can I help you today?
Can you help me create a React component for a chat interface?
I'll help you create a React component for a chat interface. Here's a basic implementation:
import React, { useState } from 'react';
const ChatInterface = () => {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const sendMessage = () => {
if (input.trim()) {
setMessages([...messages, { text: input, sender: 'user' }]);
setInput('');
}
};
return (
<div className="chat-container">
<div className="messages">
{messages.map((msg, idx) => (
<div key={idx} className={`message ${msg.sender}`}>
{msg.text}
</div>
))}
</div>
<div className="input-area">
<input
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
placeholder="Type a message..."
/>
<button onClick={sendMessage}>Send</button>
</div>
</div>
);
};