function MainComponent() { const [messages, setMessages] = React.useState([ { role: 'system', content: 'Welcome to ChatGPT Clone. You can chat, create images, or search the web. What would you like to do?' } ]); const [inputText, setInputText] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [mode, setMode] = React.useState('text'); const [searchResults, setSearchResults] = React.useState([]); const sendMessage = async ()=>{ if (inputText.trim() === '') return; const newUserMessage = { role: 'user', content: inputText }; setMessages((prevMessages)=>[ ...prevMessages, newUserMessage ]); setIsLoading(true); try { if (mode === 'image') { const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(inputText)}`); const data = await response.json(); setMessages((prevMessages)=>[ ...prevMessages, { role: 'system', image: data.data && data.data[0] ? data.data[0] : 'Image not available.' } ]); } else if (mode === 'text') { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: inputText } ], system_prompt: 'Please assist with this query' }) }); const data = await response.json(); setMessages((prevMessages)=>[ ...prevMessages, { role: 'system', content: data.choices && data.choices[0].message.content ? data.choices[0].message.content : 'No response available.' } ]); } else if (mode === 'search') { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(inputText)}`); const data = await response.json(); setSearchResults(data.items || []); } } catch { setMessages((prevMessages)=>[ ...prevMessages, { role: 'system', content: 'An error occurred. Please try again later.' } ]); } finally{ setIsLoading(false); } setInputText(''); }; const handleInputChange = (e)=>{ setInputText(e.target.value); }; const handleKeyPress = (e)=>{ if (e.key === 'Enter') { sendMessage(); } }; const clearChat = ()=>{ setMessages([]); setSearchResults([]); }; const toggleMode = (newMode)=>{ setMode(newMode); setSearchResults([]); }; const chatComponents = messages.map((message, index)=>{ if (message.image) { return /*#__PURE__*/ React.createElement("div", { key: index, className: "text-center my-1", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: message.image, alt: "Generated content", className: "max-w-full h-auto bg-white p-2 rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this })); } else { return /*#__PURE__*/ React.createElement("div", { key: index, className: `${message.role === 'user' ? 'text-right' : 'text-left'} my-1`, __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `${message.role === 'user' ? 'bg-blue-600' : 'bg-gray-700'} text-white text-[14px] p-[8px] rounded-lg inline-block`, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, message.content)); } }); const searchComponents = searchResults.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-left p-2 bg-gray-700 rounded-lg my-1", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "text-white hover:text-blue-500 underline", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-[14px]", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, item.snippet))); const isLoadingComponent = isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "m-auto animate-spin rounded-full w-8 h-8 border-4", style: { borderTopColor: 'transparent', borderRightColor: 'transparent', borderBottomColor: 'white', borderLeftColor: 'white' }, __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this })); const inputPlaceholderText = mode === 'text' ? "Message ChatGPT..." : mode === 'image' ? "Describe the image you'd like to generate..." : "What would you like to search for?"; const modeButtons = [ 'text', 'image', 'search' ].map((m)=>/*#__PURE__*/ React.createElement("button", { key: m, onClick: ()=>toggleMode(m), className: `px-4 py-2 text-sm font-semibold ${mode === m ? 'bg-blue-600 text-white' : 'text-blue-600 bg-transparent'} border border-blue-600 rounded`, __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, `${m.charAt(0).toUpperCase()}${m.slice(1)} Mode`)); return /*#__PURE__*/ React.createElement("div", { className: "font-inter bg-[#212121] h-screen flex flex-col", __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#181818] text-white", __source: { fileName: "", lineNumber: 109, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, "ChatGPT Clone & Image Creator & Search Mode"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, modeButtons)), /*#__PURE__*/ React.createElement("main", { className: `flex-1 overflow-y-auto p-4 ${mode !== 'search' && 'flex flex-col justify-between'}`, __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, mode !== 'search' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, chatComponents), isLoadingComponent), mode === 'search' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, searchComponents))), mode !== 'search' && /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-[#181818]", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: clearChat, className: "px-4 py-2 text-sm text-white bg-transparent border border-gray-500 rounded hover:bg-gray-600", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, "Clear Chat"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 max-w-md w-full", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "chat", value: inputText, onChange: handleInputChange, onKeyPress: handleKeyPress, className: "w-full px-4 py-2 text-[16px] text-white placeholder-white bg-[#121212] border border-gray-500 rounded focus:outline-none", placeholder: inputPlaceholderText, __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700 focus:outline-none", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, "Send"))))); }