function MainComponent() { const [userMessage, setUserMessage] = React.useState(''); const [messages, setMessages] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const sendMessageToChatGPT = async (content)=>{ setIsLoading(true); try { const chatGptResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content } ], system_prompt: 'Explain this content' }) }); const data = await chatGptResponse.json(); setMessages((prevMessages)=>[ ...prevMessages, { role: "assistant", content: data.choices[0].message.content } ]); } catch (error) { setMessages((prevMessages)=>[ ...prevMessages, { role: "assistant", content: "エラーが発生しました。もう一度お試しください。" } ]); } setIsLoading(false); }; const handleSendMessage = (e)=>{ e.preventDefault(); if (userMessage.trim() === '') return; const newMessage = { role: "user", content: userMessage }; setMessages((prevMessages)=>[ ...prevMessages, newMessage ]); sendMessageToChatGPT(userMessage); setUserMessage(''); }; const MessageList = ()=>/*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[300px]", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-lg px-4 py-2 my-2 ${message.role === 'user' ? 'bg-[#FF4500] text-white' : 'bg-white text-[#333]'} max-w-xs`, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, message.content)))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full bg-white rounded-xl shadow-md overflow-hidden w-[300px]", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFA07A] p-4 font-roboto flex justify-between items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-full h-8 w-8 bg-[#FF4500] flex justify-center items-center text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-white", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "サポート | リコア")), /*#__PURE__*/ React.createElement("span", { className: "text-[#333] cursor-pointer", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-times", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement(MessageList, { __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#FFEFD5]", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-10 mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner animate-spin", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "rounded-full px-4 py-2 border-none flex-1", placeholder: "こちらにメッセージを入力してください…", value: userMessage, onChange: (e)=>setUserMessage(e.target.value), name: "user_message", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#FF4500] text-white rounded-lg px-6 py-2 font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "送信"))))); }