function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputText, setInputText] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleMessageChange = (event)=>{ setInputText(event.target.value); }; const handleSendMessage = async ()=>{ if (inputText.trim() === '') return; const newMessage = { role: 'user', content: inputText }; setMessages([ ...messages, newMessage ]); setIsLoading(true); try { const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: inputText }) }); const data = await response.json(); if (data.reply) { setMessages([ ...messages, newMessage, { role: 'bot', content: data.reply } ]); } } catch (error) { console.error('Failed to send message:', error); } setIsLoading(false); setInputText(''); }; const handleKeyPress = (event)=>{ if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); handleSendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8f8f8] flex flex-col", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 shadow-md", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-2xl font-semibold font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "ChatGPT Inspired Chat")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-auto", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 my-2 rounded-lg max-w-[80%] ${message.role === 'user' ? 'bg-[#D1E7FF] ml-auto' : 'bg-[#EFEFEF]'}`, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#333]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, message.content))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center my-2 animate-pulse", __source: { fileName: "", lineNumber: 52, columnNumber: 23 }, __self: this }, "Sending...")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow-up-md", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { rows: "1", placeholder: "Type a message...", value: inputText, onChange: handleMessageChange, onKeyPress: handleKeyPress, className: "flex-grow p-2 border border-[#DDDDDD] rounded focus:outline-none focus:ring-2 focus:ring-[#005BFF] resize-none", name: "chat-message", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#005BFF] text-white px-4 py-2 rounded font-semibold disabled:opacity-50", onClick: handleSendMessage, disabled: !inputText.trim(), __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Send")))); }