function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleSubmit = async (e)=>{ if (e.key === "Enter" && input.trim() !== "" && !loading) { setLoading(true); const userMessage = { role: "user", content: input }; const updatedMessages = [ ...messages, userMessage ]; setMessages(updatedMessages); setInput(""); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...updatedMessages, { role: "system", content: "私はイタリア語の勉強をしています。イタリア語での回答を読みたいです。回答は、必ずイタリア語で回答してください。使うイタリア語は、CEFRのA1レベルとしてください。さらに加えて、この時、回答には、イタリア語回答文の1文ごとに、日本語訳を併記してください。" } ] }) }); const data = await response.json(); const assistantMessage = { role: "assistant", content: data.choices[0].message.content }; setMessages([ ...updatedMessages, assistantMessage ]); setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#e8ffe8] min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 flex justify-between", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-xl", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "ChatGPT UI Clone / らくらくGPT(italiano(it))"), /*#__PURE__*/ React.createElement("a", { href: "https://mon-chat-gpt-911.created.app/it", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "https://mon-chat-gpt-911.created.app/it")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, 'Press "Enter" to Send !'))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>{ const isUser = msg.role === "user"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${isUser ? "justify-end" : "justify-start"} mb-4`, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, !isUser && /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-2xl mr-2 self-end", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `p-2 rounded-lg ${isUser ? "bg-blue-100" : "bg-gray-100"} max-w-[70%]`, __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text whitespace-pre-wrap", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, msg.content))); })), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 bg-white", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, 'You may ask questions in ANY language. Press "Enter" to Send, and', " ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "you shall have answers in ITALIAN"), " all the time! このChatbotはイタリア語(it)学習のためにカスタマイズしたGPTです。回答はすべてイタリア語(CEFRのA1レベル)です。日本語訳が併記されます。powered by GPT-4"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 p-2 border border-gray-300 rounded-l-md font-crimson-text", placeholder: "Type your message here", value: input, onChange: (e)=>setInput(e.target.value), onKeyDown: handleSubmit, disabled: loading, __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded-r-md font-crimson-text", onClick: ()=>handleSubmit({ key: "Enter" }), disabled: loading, __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Send"), loading && /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin ml-2", __source: { fileName: "", lineNumber: 108, columnNumber: 23 }, __self: this })))); }