function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!inputValue.trim() || isLoading) return; const newMessage = { role: "user", content: inputValue }; setMessages([ ...messages, newMessage ]); setInputValue(""); setIsLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...messages, newMessage, { role: "system", content: 'You are a Swiss German language tutor. Always respond in Swiss German(CEFR A1 niveau) using "ue" for ü, "ae" for ä, "oe" for ö, and "ss" for ß. Provide helpful and educational responses to assist with learning Swiss Germanどんな言語で質問されても、回答は必ずスイスドイツ語で回答してください。使うスイスイドイツ語は、CEFRの(A1)レベルとしてください。1文ごとに改行してください。さらに、スイスドイツ語回答文の1文ごとに改行して、その下に、日本語訳を併記してください。スイスドイツ語文と日本語訳を表示したあとは、さらに、空行を挟んで表示してください。あなたがそうしてくれると、私は読みやすいです。' } ] }) }); const data = await response.json(); if (data.choices && data.choices[0] && data.choices[0].message) { setMessages((prevMessages)=>[ ...prevMessages, { role: "assistant", content: data.choices[0].message.content } ]); } } catch (error) { console.error("Error:", error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#FFF0F5]", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 flex justify-between items-start", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "ChatGPT UI Clone /らくらくGPT(schweizerdeutsch==schwyzerdütsch==schwiizertüütsch(gsw))"), /*#__PURE__*/ React.createElement("a", { href: "https://mon-chat-gpt-911.created.app/gsw", className: "text-blue-600 hover:underline font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "https://mon-chat-gpt-911.created.app/gsw")), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, 'Press "Enter" to Send !')), /*#__PURE__*/ React.createElement("main", { className: "flex-grow overflow-auto p-4", __source: { fileName: "", lineNumber: 70, 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: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex items-start ${message.role === "user" ? "flex-row-reverse" : "flex-row"}`, __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center mr-2", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${message.role === "user" ? "fa-user" : "fa-robot"}`, __source: { fileName: "", lineNumber: 84, 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-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, message.content)))))), /*#__PURE__*/ React.createElement("footer", { className: "p-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-sm 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 Swiss GERMAN"), " all the time! このChatbotはスイスドイツ語(gsw)学習のためにカスタマイズしたGPTです。回答はすべてスイスドイツ語(gsw)表記(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", placeholder: "Type your message here...", className: "flex-grow p-2 border border-gray-300 rounded-l-md font-roboto", name: "userInput", value: inputValue, onChange: handleInputChange, disabled: isLoading, __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-r-md font-roboto", disabled: isLoading, __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }))))); }