function MainComponent() { const [selectedSection, setSelectedSection] = React.useState('paintings'); const [chatResponse, setChatResponse] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSectionClick = (section)=>{ setSelectedSection(section); fetchChatGptResponse(section); }; const fetchChatGptResponse = async (section)=>{ setIsLoading(true); setChatResponse(''); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `Show me ${section}` } ], system_prompt: `Display works of ${section}` }) }); const data = await response.json(); if (data.status) { setChatResponse(data.result); } else { setChatResponse('Failed to get a response from the system.'); } } catch (error) { setChatResponse('An error occurred while communicating with the system.'); } setIsLoading(false); }; const buttons = [ 'paintings', 'sculptures', 'photography', 'digital' ].map((section)=>/*#__PURE__*/ React.createElement("button", { key: section, className: `font-roboto text-lg px-6 py-2 rounded ${selectedSection === section ? 'bg-[#4834d4] text-[#ffffff]' : 'bg-transparent text-[#40407a]'}`, onClick: ()=>handleSectionClick(section), __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, section.charAt(0).toUpperCase() + section.slice(1))); const sectionTitle = selectedSection.charAt(0).toUpperCase() + selectedSection.slice(1); const artworkSection = isLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-xl font-roboto text-[#40407a]", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "Loading...")) : /*#__PURE__*/ React.createElement("div", { className: "transition-opacity duration-500 ease-in-out", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 font-roboto text-[#2c2c54]", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, sectionTitle), /*#__PURE__*/ React.createElement("p", { className: "text-base font-roboto text-[#40407a] whitespace-pre-line", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, chatResponse)); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f1e3] flex flex-col", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#474787] p-6 flex-none", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold text-[#ffffff] font-roboto text-center", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Art Gallery")), /*#__PURE__*/ React.createElement("nav", { className: "flex justify-center space-x-4 py-4 bg-[#f8c291]", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, buttons), /*#__PURE__*/ React.createElement("main", { className: "px-8 py-4 flex-grow", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, artworkSection), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#2c2c54] p-6 flex-none", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-[#ffffff] font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "© 2023 Art Gallery")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `)); }

Paintings