function MainComponent() { const [tab, setTab] = React.useState('build'); const [messages, setMessages] = React.useState([]); const [response, setResponse] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [homepageContent, setHomepageContent] = React.useState(''); const handleTabChange = (newTab)=>{ setTab(newTab); }; const handleMessageSend = async (content)=>{ setIsLoading(true); try { const requestBody = { messages: [ { role: 'user', content: content } ], system_prompt: 'Create content for a homepage' }; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); const data = await response.json(); if (data.choices && data.choices.length > 0) { const messageContent = data.choices[0].message.content; setResponse(messageContent); setHomepageContent((prevContent)=>prevContent + '\n' + messageContent); } } catch (error) { console.error('Failed to send message:', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex border-b border-gray-300", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 font-roboto ${tab === 'build' ? 'bg-gray-200' : 'bg-white'}`, onClick: ()=>handleTabChange('build'), __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Build"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 font-roboto ${tab === 'demo' ? 'bg-gray-200' : 'bg-white'}`, onClick: ()=>handleTabChange('demo'), __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Demo")), tab === 'build' ? /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 27 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `font-roboto ${message.role === 'assistant' ? 'text-left' : 'text-right'}`, __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, message.content))), /*#__PURE__*/ React.createElement("div", { className: "p-2 font-roboto text-left", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, response)), /*#__PURE__*/ React.createElement("div", { className: "flex-none", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border border-gray-300 px-2 py-1 w-full font-roboto", type: "text", placeholder: "Type your message here...", onKeyDown: (e)=>{ if (e.key === 'Enter') { const newMessage = { role: 'user', content: e.target.value }; setMessages([ ...messages, newMessage ]); handleMessageSend(e.target.value); e.target.value = ''; } }, name: "messageInput", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })))) : /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 bg-gray-100 overflow-auto", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded p-4 font-roboto", dangerouslySetInnerHTML: { __html: homepageContent }, __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F8F8F8] p-4 text-center font-roboto text-sm", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, "Sponsored Content")); }