function MainComponent() { const [loading, setLoading] = React.useState(false); const [graphData, setGraphData] = React.useState(null); const handleSubmit = async (event)=>{ event.preventDefault(); const country = event.target.country.value; setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Provide a JSON array of COVID data for ${country}.` } ] }) }); const result = await response.json(); const data = JSON.parse(result.choices[0].message.content); setGraphData(data); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "COVID-19 Data Visualization"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white p-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "country", className: "text-lg font-medium", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Country"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "country", name: "country", className: "mt-1 p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "self-end bg-blue-500 text-white px-6 py-2 rounded-lg font-medium", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, loading ? 'Loading...' : 'Submit')), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Graph"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full h-[400px] bg-gray-200 rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, graphData ? /*#__PURE__*/ React.createElement("pre", { className: "text-gray-700 text-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, JSON.stringify(graphData, null, 2)) : /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 text-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Graph will be displayed here"))))); }