function MainComponent() { const [message, setMessage] = React.useState(""); const [loading, setLoading] = React.useState(false); const [responseContent, setResponseContent] = React.useState(""); const handleMessageChange = (event)=>{ setMessage(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: message } ], system_prompt: 'Explain this content' }) }).then((response)=>response.json()).then((data)=>{ if (data && data.choices && data.choices.length > 0) { setResponseContent(data.choices[0].message.content); } setLoading(false); }).catch(()=>{ setResponseContent("Failed to get response from the API."); setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white p-8 rounded-lg shadow-lg w-[400px] font-roboto", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg text-center mb-4 text-[#333]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Chat with GPT"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block text-sm font-semibold mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Your Message:"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "content", className: "w-full p-2 border border-gray-300 rounded", placeholder: "Type your message here", value: message, onChange: handleMessageChange, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", disabled: loading, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Send"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-100 rounded shadow-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, loading ? "Loading..." : responseContent)))); }