function MainComponent() { const chatContainerStyle = "flex flex-col h-full w-[400px] bg-white shadow-lg rounded-lg"; const chatHeaderStyle = "flex items-center justify-center bg-blue-500 text-white p-4 rounded-t-lg"; const chatBodyStyle = "flex-1 p-4 overflow-y-auto"; const chatInputContainerStyle = "flex items-center bg-gray-200 p-4 rounded-b-lg"; const characterImageStyle = "w-[100px] h-[200px]"; const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [loading, setLoading] = React.useState(false); const [characterEmotion, setCharacterEmotion] = React.useState("neutral"); const handleSendMessage = async ()=>{ if (inputValue.trim() === "") return; setMessages([ ...messages, { sender: "user", text: inputValue } ]); setInputValue(""); setCharacterEmotion("thinking"); setLoading(true); try { // Simulate the call to ChatGPT API const response = await new Promise((resolve)=>setTimeout(()=>resolve({ data: `おすすめ3か所 for ${inputValue}` }), 1000)); setMessages((prevMessages)=>[ ...prevMessages, { sender: "ai", text: response.data } ]); setCharacterEmotion("happy"); setLoading(false); } catch (error) { setMessages((prevMessages)=>[ ...prevMessages, { sender: "ai", text: "Error: could not fetch recommendations" } ]); setCharacterEmotion("sad"); setLoading(false); } }; const handleInputKeyDown = (e)=>{ if (e.key === "Enter") { handleSendMessage(); } }; const handleReset = ()=>{ setMessages([]); setCharacterEmotion("neutral"); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-[#f0f0f0] font-sans", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/images/character-${characterEmotion}.png`, alt: `Anime character with ${characterEmotion} emotion`, className: characterImageStyle, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: chatContainerStyle, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: chatHeaderStyle, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "おすすめ AI Chat")), /*#__PURE__*/ React.createElement("div", { className: chatBodyStyle, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-blue-500", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this })) : messages.map((msg, index)=>{ const messageStyle = msg.sender === "user" ? "bg-blue-100 self-end" : "bg-gray-100 self-start"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 my-2 rounded-lg ${messageStyle}`, __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, msg.text); })), /*#__PURE__*/ React.createElement("div", { className: chatInputContainerStyle, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "cityInput", value: inputValue, onChange: (e)=>setInputValue(e.target.value), onKeyDown: handleInputKeyDown, className: "flex-1 p-2 border border-gray-300 rounded-lg", placeholder: "都市を入力...", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-4 p-2 bg-blue-500 text-white rounded-lg", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }))), messages.length > 0 && !loading && /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 bg-red-500 text-white rounded-lg self-center", onClick: handleReset, __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "戻る")))); }