import React, { useState } from 'react';
import './App.css';
const App = () => {
const [message, setMessage] = useState('');
const [chatHistory, setChatHistory] = useState([]);
const handleInputChange = (e) => {
setMessage(e.target.value);
};
const handleSendMessage = () => {
if (message.trim() !== '') {
setChatHistory([...chatHistory, { type: 'user', content: message }]);
fetch(`https://api.hashnode.com/?query={search(query:"${message}")}`)
.then((response) => response.json())
.then((data) => {
setChatHistory([...chatHistory, { type: 'bot', content: data.data.search[0].title }]);
});
setMessage('');
}
};
return (
<div className="App">
<div className="chat-container">
{chatHistory.map((chat, index) => (
<div key={index} className={`chat-message ${chat.type}`}>
{chat.content}
</div>
))}
</div>
<div className="input-container">
<input
type="text"
value={message}
onChange={handleInputChange}
placeholder="Type your message here..."
/>
<button onClick={handleSendMessage}>Send</button>
</div>
</div>
);
};
export default App;