function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleSend = async ()=>{ if (!input.trim()) return; const newMessages = [ ...messages, { role: "user", content: input } ]; setMessages(newMessages); setInput(""); setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...newMessages, { role: "system", content: "Je suis en train d'apprendre le français. Je veux lire les réponses en français. Répondez toujours en français. どんな言語で質問されても、回答は必ずフランス語で回答してください。使うフランス語は、CEFRの(A1)レベルとしてください。1文ごとに改行してください。さらに、フランス語回答文の1文ごとに改行して、その下に、日本語訳を併記してください。フランス語文と日本語訳を表示したあとは、さらに、空行を挟んで表示してください。あなたがそうしてくれると、私は読みやすいです。" } ] }) }); const data = await response.json(); setMessages([ ...newMessages, { role: "assistant", content: data.choices[0].message.content } ]); setLoading(false); }; const handleKeyPress = (e)=>{ if (e.key === "Enter") { handleSend(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen w-full p-4 bg-[#e6f2ff]", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-1", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-sans text-xl", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "ChatGPT UI Clone /らくらくGPT(français(fr))"), /*#__PURE__*/ React.createElement("span", { className: "font-sans text-sm", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, 'Press "Enter" to Send !')), /*#__PURE__*/ React.createElement("a", { href: "https://mon-chat-gpt-911.created.app/fr", className: "font-sans text-sm mb-4 block", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "https://mon-chat-gpt-911.created.app/fr"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto mb-2", __source: { fileName: "", lineNumber: 56, 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: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-end", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${isUser ? "fa-user" : "fa-robot"} text-2xl mr-2`, __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `max-w-[60%] p-3 rounded-lg ${isUser ? "bg-blue-500 text-white" : "bg-white text-black"} font-sans`, __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, msg.content))); }), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner fa-spin text-2xl", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("span", { className: "font-sans text-sm text-center mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, 'You may ask questions in ANY language. Press "Enter" to Send, and', " ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "you shall have answers in FRENCH"), " all the time! このChatbotはフランス語(fr)学習のためにカスタマイズしたGPTです。回答はすべてフランス語(CEFRのA1レベル)です。powered by GPT-4"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user text-2xl mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 p-3 mr-2 border rounded-lg font-sans", value: input, onChange: (e)=>setInput(e.target.value), onKeyPress: handleKeyPress, disabled: loading, __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-3 bg-blue-500 text-white rounded-lg font-sans", onClick: handleSend, disabled: loading, __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "送信"))); }