function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleMessageSend = async ()=>{ if (input.trim() === "") return; const newMessage = { role: "user", content: input }; setMessages([ ...messages, newMessage ]); setLoading(true); setInput(""); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...messages, newMessage, { role: "system", content: "私は中国語を勉強しています。私は、中国語の回答を読みたいです。どんな言語で質問されても、あなたの回答は、必ず中国語文とピンイン表示文で回答してください。中国語文とピンイン表示文以外の回答表示はしないでください。表示する中国語文は、大陸中国語の普通話(簡体字)としてくださいね。中国語のレベルは、HSK3級レベルとしてください。中国語の長さは、500文字以内としてください。中国語文を、すべて、声調符号付きのピンイン表示文に替えて、添えて表示してください。中国の1単語は、ピンインを連続させてください。なお、中国語の単語で、「軽声詞」のものは、ピンインを軽声詞(声調符号なし)で表示してください。よろしいですか?" } ] }) }); const result = await response.json(); const assistantResponse = result.choices[0]?.message?.content ?? "Error in response"; setMessages([ ...messages, newMessage, { role: "assistant", content: assistantResponse } ]); setLoading(false); }; const handleInputChange = (e)=>setInput(e.target.value); const handleKeyPress = (e)=>{ if (e.key === "Enter") { handleMessageSend(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFFDE7] flex flex-col font-sans", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 flex justify-between items-start border-b", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "ChatGPT UI Clone /らくらくGPT(中文(zh))"), /*#__PURE__*/ React.createElement("a", { href: "https://mon-chat-gpt-911.created.app/zh", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "https://mon-chat-gpt-911.created.app/zh")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, 'Press "Enter" to Send !'))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-auto", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-start my-2 ${msg.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[60%] flex items-start", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, msg.role === "assistant" && /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-2xl mr-2", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `p-2 rounded-lg ${msg.role === "user" ? "bg-blue-200" : "bg-green-200"}`, __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, msg.content), msg.role === "user" && /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-2xl ml-2", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 text-sm", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, 'You may ask questions in ANY language. Press "Enter" to Send, and you shall have answers in CHINESE all the time!'), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "这个Bot把HSK 3级的中文回答 ! このChatbotは中国語(zh)学習のためにカスタマイズしたGPTです。回答はすべて中国語(zh)(ピンイン付き)です。轻声词には声調符号は付けないものです。powered by GPT-4")), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex border-t space-x-2 items-center", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "chatinput", type: "text", value: input, onChange: handleInputChange, onKeyPress: handleKeyPress, className: "flex-grow p-2 border rounded-lg", placeholder: "Type your message", disabled: loading, __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleMessageSend, className: "p-2 bg-blue-500 text-white rounded-lg", disabled: loading, __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, "Send"), loading && /*#__PURE__*/ React.createElement("div", { className: "loader", __source: { fileName: "", lineNumber: 127, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, ` .loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #3498db; width: 20px; height: 20px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }