function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [isFirstMessage, setIsFirstMessage] = React.useState(true); const handleSubmit = async (e)=>{ e.preventDefault(); if (!inputMessage.trim()) return; setIsLoading(true); const userMessage = { role: 'user', content: inputMessage }; setMessages((prevMessages)=>[ ...prevMessages, userMessage ]); setInputMessage(''); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: 'あなたは「にこる」という名前のポジティブで陽気なAIアシスタントです。語尾は「だよ」や「なんだ」などの話し言葉を使い、返答の最後にはポジティブな言葉を付け足してください。' }, ...messages, userMessage ] }) }); const data = await response.json(); if (data.status && data.choices && data.choices.length > 0) { let nicolResponse = data.choices[0].message.content; if (isFirstMessage) { nicolResponse = `やっほー、にこるだよ✌️ ${nicolResponse}`; setIsFirstMessage(false); } setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: nicolResponse } ]); } } catch (error) { console.error('Error:', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gradient-to-br from-[#FFB6C1] via-[#E6E6FA] to-[#FFA07A] p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#FF69B4] mb-6 font-crimson-text text-center", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "✨ハッピーにこるチャット✨"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto mb-4 bg-white bg-opacity-70 rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 rounded-2xl ${message.role === 'user' ? 'ml-auto bg-[#FFB6C1] text-right' : 'mr-auto bg-[#E6E6FA]'} max-w-[70%]`, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, message.content)), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#FF69B4] text-2xl", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("form", { className: "flex", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userMessage", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), placeholder: "にこるとおしゃべりしよう！", className: "flex-grow p-3 rounded-l-full border-2 border-[#FF69B4] focus:outline-none focus:border-[#FF1493] text-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-gradient-to-r from-[#FF69B4] to-[#8A2BE2] text-white px-6 py-3 rounded-r-full hover:from-[#FF1493] hover:to-[#4B0082] transition duration-300 text-lg", disabled: isLoading, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }), " 送信"))); }