function MainComponent() { const [loading, setLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [response, setResponse] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const content = event.target.elements.query.value; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content } ], system_prompt: "Explain this content" }) }); const data = await response.json(); setResponse(data.choices[0].message.content); setMessages([ ...messages, { role: "user", content }, { role: "assistant", content: data.choices[0].message.content } ]); } catch (error) { console.error("Error accessing the ChatGPT API:", error); setResponse("Failed to load response."); } setLoading(false); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("nav", { className: "navbar bg-[#007bff] p-2 text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container-fluid", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "navbar-brand mb-0 h1 text-white font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Header Menu"))), /*#__PURE__*/ React.createElement("div", { className: "container my-8", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "row", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-md-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "card p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "card-title font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "List Screen"), /*#__PURE__*/ React.createElement("ul", { className: "list-group list-group-flush", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "list-group-item", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, message.role, ": ", message.content))))), /*#__PURE__*/ React.createElement("div", { className: "col-md-8", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "card p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "card-title font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Detail Screen"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "query", type: "text", className: "form-control mb-2", placeholder: "Enter your query", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "btn btn-primary", disabled: loading, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, loading ? 'Loading...' : 'Submit')), /*#__PURE__*/ React.createElement("p", { className: "card-text font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, response)))))); }