function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); const [loading, setLoading] = React.useState(false); const [chatMessages, setChatMessages] = React.useState([]); const handleSearchChange = (event)=>{ setSearchQuery(event.target.value); }; const performSearch = async ()=>{ if (!searchQuery.trim()) return; setLoading(true); try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchQuery)}`, { method: 'GET' }); const data = await response.json(); if (data.status === "success") { setSearchResults(data.items); } else { setSearchResults([]); } } catch (error) { setSearchResults([]); } finally{ setLoading(false); } }; const handleSearchSubmit = (event)=>{ event.preventDefault(); performSearch(); }; const sendMessageToChatGPT = async (message)=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...chatMessages, { role: 'user', content: message } ], system_prompt: 'Assist the user with their shopping queries' }) }); const data = await response.json(); if (data.status) { setChatMessages((chatMessages)=>[ ...chatMessages, { role: 'user', content: message }, { role: 'assistant', content: data.result } ]); } } catch (error) {} finally{ setLoading(false); } }; const handleChatMessageSubmit = (event)=>{ event.preventDefault(); const newChatMessage = event.target.elements.chatMessage.value.trim(); if (newChatMessage) { sendMessageToChatGPT(newChatMessage); event.target.reset(); } }; const loadingIndicator = /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-12", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin text-xl text-[#121212]", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this })); const searchForm = /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearchSubmit, className: "flex mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", name: "search", placeholder: "Type to search products...", onChange: handleSearchChange, className: "px-4 py-2 w-full border border-gray-300 rounded-l-md focus:outline-none focus:border-blue-300", autoComplete: "off", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-md", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, "Search")); const chatForm = /*#__PURE__*/ React.createElement("form", { onSubmit: handleChatMessageSubmit, className: "flex", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatMessage", placeholder: "Ask us anything...", className: "px-4 py-2 w-full border border-gray-300 rounded-l-md focus:outline-none focus:border-blue-300", autoComplete: "off", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-r-md", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, "Send")); const searchResultsSection = searchResults.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-2", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-200 rounded-md", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, target: "_blank", rel: "noreferrer", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, result.snippet)))); const chatMessagesSection = chatMessages.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-2", __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this }, chatMessages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 ${message.role === 'user' ? 'bg-blue-100' : 'bg-green-100'} rounded-md`, __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, message.content)))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row h-screen", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:w-1/3 p-4 overflow-auto", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, "Customer Support Chat"), chatForm, loading && loadingIndicator, chatMessagesSection), /*#__PURE__*/ React.createElement("div", { className: "lg:w-2/3 p-4 overflow-auto", __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, "Search Products"), searchForm, loading && loadingIndicator, searchResultsSection)); }