function MainComponent() { const [category, setCategory] = React.useState(""); const [subcategory, setSubcategory] = React.useState(""); const [likedItems, setLikedItems] = React.useState([]); const [showLikedItems, setShowLikedItems] = React.useState(false); const [searchResults, setSearchResults] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [showAIChat, setShowAIChat] = React.useState(false); const [showWhiz, setShowWhiz] = React.useState(true); const categoryItems = { Electronics: [ "Smartphone", "Laptop", "Headphones", "Smartwatch", "3D Printer" ], Books: [ "Fiction", "Non-fiction", "Biography", "Cookbook" ], Fashion: [ "T-shirt", "Jeans", "Dress", "Jacket", "Scarf", "Shoes" ], "Home & Living": [ "Blender", "Coffee Maker", "Toaster", "Cookware Set" ], Beauty: [ "Perfume", "Makeup Set", "Skincare Kit", "Hair Styling Tools" ], "Toys & Games": [ "Board Game", "Action Figure", "Puzzle", "Video Game" ], "Sports & Outdoors": [ "Yoga Mat", "Dumbbell Set", "Camping Tent", "Bicycle" ], Jewelry: [ "Necklace", "Earrings", "Bracelet", "Watch" ], "Art & Crafts": [ "Paint Set", "Sketchbook", "Craft Kit", "Sewing Machine" ], "Food & Beverages": [ "Gourmet Coffee", "Chocolate Box", "Wine Set", "Spice Collection" ], "Pet Supplies": [ "Dog Bed", "Cat Toy", "Pet Carrier", "Aquarium" ], "Music Instruments": [ "Guitar", "Keyboard", "Drum Set", "Ukulele" ], Clothes: [ "Sweater", "Coat", "Scarf", "Gloves", "T-shirt", "Hoodie" ], Bags: [ "Backpack", "Tote Bag", "Messenger Bag", "Travel Suitcase", "Duffel Bag" ], Accessories: [ "Sunglasses", "Wallet", "Belt", "Hat", "Trucker Hat" ], Shoes: [ "Sneakers", "Boots", "Sandals", "Dress Shoes", "Designer Shoes" ] }; const handleCategoryChange = (e)=>{ const newCategory = e.target.value; setCategory(newCategory); setSubcategory(""); setShowLikedItems(false); setSearchResults([]); }; const handleSubcategoryChange = (e)=>{ const newSubcategory = e.target.value; setSubcategory(newSubcategory); fetchProducts(category, newSubcategory); }; const fetchProducts = async (category, subcategory)=>{ setIsLoading(true); try { const query = `${category} ${subcategory}`; const [googleSearchResponse, imageSearchResponse] = await Promise.all([ fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`), fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(query)}`) ]); const [googleSearchData, imageSearchData] = await Promise.all([ googleSearchResponse.json(), imageSearchResponse.json() ]); let combinedResults = []; if (googleSearchData.status === "success" && googleSearchData.items) { const googleResults = googleSearchData.items.map((item)=>({ product_title: item.title, product_description: item.snippet, product_photos: [ item.thumbnailImageUrl || "" ], offer: { price: "N/A", store_name: item.displayLink }, source: "Google Search", source_link: item.link })); combinedResults = [ ...combinedResults, ...googleResults ]; } if (imageSearchData.status === "success" && imageSearchData.items) { const imageResults = imageSearchData.items.map((item)=>({ product_title: item.title, product_description: "", product_photos: [ item.thumbnailImageUrl ], offer: { price: "N/A", store_name: item.contextLink }, source: "Image Search", source_link: item.contextLink })); combinedResults = [ ...combinedResults, ...imageResults ]; } const additionalStores = [ { name: "Five Star 3D Printing", url: "https://fivestar3dprinting.company.site/" }, { name: "Godess Designs", url: "https://godess-designs.printify.me/products" }, { name: "JayceePEE Store", url: "https://www.amazon.com/shop/jayceepeegospel" }, { name: "Goddess Designs", url: "https://www.aliveshoes.com/brand/goddessshoes" } ]; const additionalResults = await Promise.all(additionalStores.map(async (store)=>{ try { const response = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(`${subcategory} from ${store.name}`)}`); const data = await response.json(); const imageUrl = data.items && data.items.length > 0 ? data.items[0].thumbnailImageUrl : "https://via.placeholder.com/150"; return { product_title: `${subcategory} from ${store.name}`, product_description: `Custom ${subcategory} available at ${store.name}`, product_photos: [ imageUrl ], offer: { price: "Contact for price", store_name: store.name }, source: "Additional Stores", source_link: store.url }; } catch (error) { console.error(`Error fetching data for ${store.name}:`, error); return null; } })); const filteredAdditionalResults = additionalResults.filter((result)=>result !== null); combinedResults = [ ...filteredAdditionalResults, ...combinedResults ]; setSearchResults(combinedResults); } catch (error) { console.error("Error fetching products:", error); setSearchResults([]); } setIsLoading(false); }; const handleLikeItem = (item)=>{ setLikedItems((prevLikedItems)=>{ if (!prevLikedItems.some((likedItem)=>likedItem.product_title === item.product_title)) { return [ ...prevLikedItems, item ]; } return prevLikedItems; }); }; const toggleLikedItems = ()=>{ setShowLikedItems(!showLikedItems); }; const downloadWishlist = ()=>{ const wishlistContent = likedItems.map((item)=>`${item.product_title}\nPrice: ${item.offer.price}\nStore: ${item.offer.store_name}\n\n`).join(""); const blob = new Blob([ wishlistContent ], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "wishlist.txt"; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const toggleAIChat = ()=>{ setShowAIChat(!showAIChat); }; const startWhiz = ()=>{ setShowAIChat(false); setShowWhiz(true); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 py-12 px-4 sm:px-6 lg:px-8 flex flex-col justify-between", __source: { fileName: "", lineNumber: 218, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex items-center justify-center", __source: { fileName: "", lineNumber: 219, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl w-full bg-white rounded-3xl shadow-2xl overflow-hidden relative", __source: { fileName: "", lineNumber: 220, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 mb-4", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, "Whiz"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-gray-600", __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }, "Find the Perfect Gift")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-6", __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 229, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: category, onChange: handleCategoryChange, className: "w-full p-4 border-2 border-purple-300 rounded-lg text-gray-700 appearance-none focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent text-lg", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 235, columnNumber: 19 }, __self: this }, "Select a category"), Object.keys(categoryItems).map((cat, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: cat, __source: { fileName: "", lineNumber: 237, columnNumber: 21 }, __self: this }, cat)))), category && /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 244, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: subcategory, onChange: handleSubcategoryChange, className: "w-full p-4 border-2 border-purple-300 rounded-lg text-gray-700 appearance-none focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent text-lg", __source: { fileName: "", lineNumber: 245, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 250, columnNumber: 21 }, __self: this }, "Select a subcategory"), categoryItems[category].map((subcat, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: subcat, __source: { fileName: "", lineNumber: 252, columnNumber: 23 }, __self: this }, subcat))))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, "Loading...")), !isLoading && searchResults.length > 0 && !showLikedItems && /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-gray-100 p-6 rounded-2xl shadow-inner", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, category, ": ", subcategory), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this }, searchResults.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 274, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.product_photos[0], alt: item.product_title, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 278, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 283, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800 mb-2 truncate", __source: { fileName: "", lineNumber: 284, columnNumber: 25 }, __self: this }, item.product_title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-2 truncate", __source: { fileName: "", lineNumber: 287, columnNumber: 25 }, __self: this }, item.product_description), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 truncate", __source: { fileName: "", lineNumber: 290, columnNumber: 25 }, __self: this }, "Available at: ", item.offer.store_name), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400 mb-2", __source: { fileName: "", lineNumber: 293, columnNumber: 25 }, __self: this }, "Source: ", item.source), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleLikeItem(item), className: `mt-4 w-full font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 ${likedItems.some((likedItem)=>likedItem.product_title === item.product_title) ? "bg-gray-400 text-white cursor-not-allowed" : "bg-purple-500 hover:bg-purple-600 text-white"}`, disabled: likedItems.some((likedItem)=>likedItem.product_title === item.product_title), __source: { fileName: "", lineNumber: 296, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart mr-2", __source: { fileName: "", lineNumber: 311, columnNumber: 27 }, __self: this }), " ", likedItems.some((likedItem)=>likedItem.product_title === item.product_title) ? "Liked" : "Like")))))), showLikedItems && /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-gray-100 p-6 rounded-2xl shadow-inner", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-semibold text-gray-800 mb-6", __source: { fileName: "", lineNumber: 328, columnNumber: 17 }, __self: this }, "Liked Items"), likedItems.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-6 p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300", __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start", __source: { fileName: "", lineNumber: 336, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.product_photos[0], alt: item.product_title, className: "w-24 h-24 object-contain rounded-lg mr-4", __source: { fileName: "", lineNumber: 337, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 342, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 343, columnNumber: 25 }, __self: this }, item.product_title), /*#__PURE__*/ React.createElement("p", { className: "text-md text-gray-600 mb-2", __source: { fileName: "", lineNumber: 346, columnNumber: 25 }, __self: this }, "Available at:", " ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 348, columnNumber: 27 }, __self: this }, item.offer.store_name)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 352, columnNumber: 25 }, __self: this }, "Source: ", item.source), /*#__PURE__*/ React.createElement("a", { href: item.source_link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:text-blue-700 transition-colors duration-300", __source: { fileName: "", lineNumber: 355, columnNumber: 25 }, __self: this }, "View Item")))))), /*#__PURE__*/ React.createElement("button", { onClick: toggleLikedItems, className: "w-full mt-6 bg-purple-500 hover:bg-purple-600 text-white font-bold py-4 px-6 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 text-lg", __source: { fileName: "", lineNumber: 370, columnNumber: 13 }, __self: this }, showLikedItems ? "Hide Liked Items" : "Show Liked Items"), likedItems.length > 0 && /*#__PURE__*/ React.createElement("button", { onClick: downloadWishlist, className: "w-full mt-4 bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 text-lg", __source: { fileName: "", lineNumber: 378, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 382, columnNumber: 17 }, __self: this }), " Download Wishlist")), /*#__PURE__*/ React.createElement("button", { onClick: toggleAIChat, className: "absolute bottom-4 right-4 bg-indigo-500 hover:bg-indigo-600 text-white font-bold w-12 h-12 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 386, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-xl", __source: { fileName: "", lineNumber: 390, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("footer", { className: "mt-8 text-center text-white", __source: { fileName: "", lineNumber: 394, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 395, columnNumber: 9 }, __self: this }, "Powered by Five Stars App Solutions")), showAIChat && /*#__PURE__*/ React.createElement(AIChat, { toggleAIChat: toggleAIChat, setCategory: setCategory, initialMessage: "Welcome! I'm here to help you find the perfect gift. Who are you shopping for?", __source: { fileName: "", lineNumber: 398, columnNumber: 9 }, __self: this })); } function AIChat({ toggleAIChat, setCategory, initialMessage }) { const [messages, setMessages] = React.useState([ { role: "assistant", content: initialMessage } ]); const [input, setInput] = React.useState(""); const handleSendMessage = async ()=>{ if (input.trim() === "") return; const newMessages = [ ...messages, { role: "user", content: input } ]; setMessages(newMessages); setInput(""); try { const response = await fetch("/integrations/anthropic-claude/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: newMessages }) }); const data = await response.json(); const aiResponse = data.choices[0].message.content; setMessages([ ...newMessages, { role: "assistant", content: aiResponse } ]); // Extract category suggestion from AI response const categoryMatch = aiResponse.match(/I suggest the "(.*?)" category/); if (categoryMatch) { setCategory(categoryMatch[1]); } } catch (error) { console.error("Error fetching AI response:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-white p-5 rounded-lg shadow-xl w-96 max-h-[80vh] overflow-y-auto", __source: { fileName: "", lineNumber: 446, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 447, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 448, columnNumber: 9 }, __self: this }, "AI Gift Advisor"), /*#__PURE__*/ React.createElement("button", { onClick: toggleAIChat, className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 449, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 453, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 456, columnNumber: 7 }, __self: this }, "AI Gift Advisor"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 h-64 overflow-y-auto", __source: { fileName: "", lineNumber: 457, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 ${message.role === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 459, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block p-2 rounded-lg ${message.role === "user" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 463, columnNumber: 13 }, __self: this }, message.content)))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 471, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: (e)=>setInput(e.target.value), className: "flex-grow mr-2 p-2 border rounded", placeholder: "Ask about gift ideas...", __source: { fileName: "", lineNumber: 472, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 479, columnNumber: 9 }, __self: this }, "Send"))); }