function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); if (input.trim() === "") return; const newMessage = { role: "user", content: input }; setMessages([ ...messages, newMessage ]); setInput(""); setIsLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a helpful assistant. Always respond in Dutch. どんな言語で質問されても、回答は必ずオランダ語で回答してください。使うオランダ語は、CEFRの(A1)レベルとしてください。1文ごとに改行してください。さらに、オランダ語回答文の1文ごとに改行して、その下に、日本語訳を併記してください。オランダ語文と日本語訳を表示したあとは、さらに、空行を挟んで表示してください。あなたがそうしてくれると、私は読みやすいです。" }, ...messages, newMessage ] }) }); const data = await response.json(); if (data.choices && data.choices.length > 0) { const assistantMessage = { role: "assistant", content: data.choices[0].message.content }; setMessages((prevMessages)=>[ ...prevMessages, assistantMessage ]); } } catch (error) { console.error("Error:", error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#FFF0F0]", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 flex justify-between items-start", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "ChatGPT UI Clone /らくらくGPT(dutch/nederlandse(nl))"), /*#__PURE__*/ React.createElement("a", { href: "https://mon-chat-gpt-911.created.app/nl", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "https://mon-chat-gpt-911.created.app/nl")), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, 'Press "Enter" to Send !')), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto p-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"} mb-4`, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex items-start ${message.role === "user" ? "flex-row-reverse" : "flex-row"}`, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-full w-8 h-8 flex items-center justify-center ${message.role === "user" ? "bg-blue-500 ml-2" : "bg-gray-300 mr-2"}`, __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${message.role === "user" ? "fa-user" : "fa-robot"}`, __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg p-3 ${message.role === "user" ? "bg-blue-100" : "bg-white"}`, __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, message.content)))))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm mb-2 font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, 'You may ask questions in ANY language. Press "Enter" to Send, and', " ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "you shall have answers in DUTCH"), " all the time! このChatbotはオランダ語(nl)学習のためにカスタマイズしたGPTです。回答はすべてオランダ語(CEFRのA1レベル)です。powered by GPT-4"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: (e)=>setInput(e.target.value), placeholder: "Type your message here...", className: "flex-grow p-2 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500", disabled: isLoading, __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500", disabled: isLoading, __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }))))); }