function MainComponent() { const [currentBook, setCurrentBook] = React.useState(null); const [conversations, setConversations] = React.useState([]); const [loading, setLoading] = React.useState(false); const [inputMessage, setInputMessage] = React.useState(""); const fetchNextBook = ()=>{ setLoading(true); // Fetch the next book logic }; const likeBook = ()=>{ // Logic to like a book }; const dislikeBook = ()=>{ setCurrentBook(null); fetchNextBook(); }; const handleInput = (e)=>{ setInputMessage(e.target.value); }; const sendMessage = ()=>{ if (inputMessage.trim() !== "") { setConversations([ ...conversations, { role: "user", content: inputMessage } ]); setLoading(true); fetch('/api/books/conversation', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...conversations, { role: "user", content: inputMessage } ], bookId: currentBook.id }) }).then((response)=>response.json()).then((data)=>{ setConversations([ ...conversations, { role: "assistant", content: data.message } ]); setLoading(false); }); setInputMessage(""); } }; React.useEffect(fetchNextBook, []); let bookDisplay; if (currentBook) { bookDisplay = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 border shadow-md rounded-lg mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentBook.coverImage, alt: `Cover of the book titled ${currentBook.title}`, className: "w-full h-64 object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, currentBook.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#121212] mb-6", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, currentBook.synopsis), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: dislikeBook, className: "px-6 py-2 border rounded text-white bg-red-500 font-semibold", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "👎 Dislike"), /*#__PURE__*/ React.createElement("button", { onClick: likeBook, className: "px-6 py-2 border rounded text-white bg-green-500 font-semibold", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "💚 Like"))); } else if (loading) { bookDisplay = /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Loading..."); } let chatDisplay = /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-8 mb-8 bg-white shadow-md rounded-lg p-4", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, conversations.map((message, index)=>/*#__PURE__*/ React.createElement("div", { className: "mb-2", key: `message-${index}`, __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-2 ${message.role === 'user' ? 'bg-blue-200' : 'bg-gray-100'} rounded-lg`, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, message.content))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputMessage, onChange: handleInput, className: "flex-1 border rounded-l-lg p-2", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "bg-blue-500 text-white px-4 py-2 rounded-r-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Send"))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-6 bg-[#f7f1e3]", __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-5xl text-[#121212] mb-10", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, "BookSwipe"), bookDisplay, chatDisplay); }