function MainComponent() { const [query, setQuery] = React.useState(""); const [responses, setResponses] = React.useState([]); const fetchResponse = async ()=>{ const response = await fetch('/integrations/groq/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: query } ] }) }); const data = await response.json(); setResponses([ ...responses, data.choices[0].message.content ]); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full p-4 bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl mb-2 text-center text-[#333] font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Search Engine Chatbot")), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-[100px] p-2 font-roboto text-[#555] border border-gray-300 rounded", placeholder: "Type your query here...", name: "userQuery", value: query, onChange: (e)=>setQuery(e.target.value), __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mt-4 w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: fetchResponse, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Send")), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, responses.map((response, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-gray-700 text-base font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, response))))); }