function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const sendMessage = async (e)=>{ e.preventDefault(); if (!inputValue.trim()) return; const userMessage = { text: inputValue, role: "user" }; setMessages((prevMessages)=>[ userMessage, ...prevMessages ]); setInputValue(""); setIsLoading(true); const botResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: inputValue } ], system_prompt: "Assistant Response" }) }).then((response)=>response.json()); setIsLoading(false); const botMessage = { text: botResponse.choices[0].message.content, role: "assistant" }; setMessages((prevMessages)=>[ botMessage, ...prevMessages ]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F0F0] p-4 text-2xl font-roboto text-center sticky top-0", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "与 GPT-3.5 聊天"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col-reverse overflow-auto p-4 space-y-4 space-y-reverse grow", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "bg-[#FFEEC9] rounded-lg p-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "Loading...")), messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center justify-${message.role === "user" ? "end" : "start"}`, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `rounded-lg p-2 max-w-[70%] break-words ${message.role === "user" ? "bg-[#D1FFD7]" : "bg-[#FFD1D1]"}`, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("div", { className: "p-4 sticky bottom-0 bg-white", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex gap-2", onSubmit: sendMessage, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputValue, onChange: (e)=>setInputValue(e.target.value), className: "flex-grow p-2 border rounded outline-none focus:ring-2 focus:ring-[#5755d9]", placeholder: "Type your message here", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#5755d9] text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Send")))); }