function MainComponent() { const [messages, setMessages] = React.useState([ { role: "user", content: "the content of the message" } ]); const [isLoading, setIsLoading] = React.useState(false); React.useEffect(()=>{ setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: messages, system_prompt: 'Explain this content' }) }).then((response)=>response.json()).then((data)=>{ if (data.status) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: data.result } ]); } setIsLoading(false); }).catch(()=>setIsLoading(false)); }, []); return /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto shadow-md sm:rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm text-left text-gray-500", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-xs text-gray-700 uppercase bg-gray-50", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 34, columnNumber: 21 }, __self: this }, "Role"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 37, columnNumber: 21 }, __self: this }, "Content"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: index % 2 === 0 ? "bg-white border-b" : "bg-gray-50 border-b", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 45, columnNumber: 21 }, __self: this }, message.role), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, message.content))))), isLoading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 23 }, __self: this }, "Loading...")); }