function MainComponent() { const [response, setResponse] = React.useState(""); const [loading, setLoading] = React.useState(false); const [searchQuery, setSearchQuery] = React.useState(""); const handleInputChange = (event)=>{ setSearchQuery(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); try { const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": searchQuery } ], system_prompt: 'Find medical supplies for', max_tokens: 200 }) }); const data = await res.json(); setResponse(data.result); } catch (error) { console.error("There was an issue with the ChatGPT API request", error); } setLoading(false); }; const loadingClass = loading ? "animate-pulse" : ""; const responseContent = response || "Enter a query about medical supplies and I will provide the information you are looking for."; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${loading ? 'bg-gray-300' : 'bg-gray-100'}`, __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow overflow-hidden sm:rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:px-6", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg leading-6 font-roboto text-gray-900", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Medical Supplies E-commerce Store"), /*#__PURE__*/ React.createElement("p", { className: "mt-1 max-w-2xl text-sm font-roboto text-gray-500", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Find and order the best medical supplies for your needs.")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "border-t border-gray-200", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 ${loadingClass}`, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-sm font-roboto text-gray-500", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Search for supplies"), /*#__PURE__*/ React.createElement("dd", { className: "mt-1 text-sm font-roboto text-gray-900 sm:col-span-2 sm:mt-0", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchQuery, onChange: handleInputChange, className: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", placeholder: "e.g. Masks, Sanitizers", disabled: loading, __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-sm font-roboto text-gray-500", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("dd", { className: "mt-1 text-sm font-roboto text-gray-900 sm:col-span-2 sm:mt-0", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: loadingClass, __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, responseContent))), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-3 bg-gray-50 text-right sm:px-6", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: `inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white ${loading ? 'bg-indigo-300' : 'bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500'} focus:outline-none focus:ring-offset-2`, disabled: loading, __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, loading ? 'Searching...' : 'Search'))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .animate-pulse { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }