[V0_FILE]typescriptreact:file="components/product-categories.tsx" isMerged="true" "use client" import type React from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Laptop, Home, Shirt, Car, Dumbbell, Book, Baby, Wrench, Palette, Briefcase } from "lucide-react" interface Category { id: string name: string icon: React.ReactNode description: string subcategories: string[] } const categories: Category[] = [ { id: "electronics", name: "Electronics", icon: , description: "Computers, phones, gadgets", subcategories: ["Laptops", "Smartphones", "Tablets", "Headphones", "Smart Home", "Gaming"], }, { id: "home-garden", name: "Home & Garden", icon: , description: "Furniture, decor, appliances", subcategories: ["Furniture", "Kitchen", "Decor", "Gardening", "Tools", "Storage"], }, { id: "fashion", name: "Fashion", icon: , description: "Clothing, shoes, accessories", subcategories: ["Men's Clothing", "Women's Clothing", "Shoes", "Accessories", "Jewelry", "Bags"], }, { id: "sports-fitness", name: "Sports & Fitness", icon: , description: "Exercise equipment, sportswear", subcategories: ["Gym Equipment", "Sportswear", "Outdoor Gear", "Supplements", "Bikes", "Water Sports"], }, { id: "automotive", name: "Automotive", icon: , description: "Car parts, accessories, tools", subcategories: ["Car Parts", "Accessories", "Tools", "Maintenance", "Electronics", "Tires"], }, { id: "books-media", name: "Books & Media", icon: , description: "Books, movies, music, games", subcategories: ["Books", "Movies", "Music", "Video Games", "Educational", "E-books"], }, { id: "baby-kids", name: "Baby & Kids", icon: , description: "Toys, clothing, baby gear", subcategories: ["Baby Gear", "Toys", "Kids Clothing", "Educational", "Safety", "Feeding"], }, { id: "business", name: "Business & Office", icon: , description: "Office supplies, software, equipment", subcategories: ["Office Supplies", "Software", "Equipment", "Furniture", "Security", "Communication"], }, { id: "arts-crafts", name: "Arts & Crafts", icon: , description: "Art supplies, craft materials", subcategories: ["Art Supplies", "Craft Materials", "Sewing", "Jewelry Making", "Painting", "Drawing"], }, { id: "tools-hardware", name: "Tools & Hardware", icon: , description: "Hand tools, power tools, hardware", subcategories: ["Hand Tools", "Power Tools", "Hardware", "Safety", "Storage", "Measuring"], }, ] interface ProductCategoriesProps { onCategorySelect: (category: Category, subcategory?: string) => void onSkip: () => void } export function ProductCategories({ onCategorySelect, onSkip }: ProductCategoriesProps) { return (

What are you looking for?

Choose a category to get started, or skip to chat freely

{categories.map((category) => ( onCategorySelect(category)} >

{category.icon}

{category.name}

{category.description}

{category.subcategories.slice(0, 3).map((sub) => ( {sub} ))} {category.subcategories.length > 3 && ( +{category.subcategories.length - 3} more )}

))}

) } [V0_FILE]typescriptreact:file="components/subcategory-selection.tsx" isMerged="true" "use client" import type React from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" interface Category { id: string name: string icon: React.ReactNode description: string subcategories: string[] } interface SubcategorySelectionProps { category: Category onSubcategorySelect: (subcategory: string) => void onBack: () => void onSkipSubcategory: () => void } export function SubcategorySelection({ category, onSubcategorySelect, onBack, onSkipSubcategory, }: SubcategorySelectionProps) { return (

{category.icon}

{category.name}

What specific type of {category.name.toLowerCase()} are you looking for?

{category.subcategories.map((subcategory) => ( ))}

) } [V0_FILE]typescriptreact:file="app/api/chat/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { openai } from "@ai-sdk/openai" import { streamText } from "ai" export const maxDuration = 30 export async function POST(req: Request) { const { messages } = await req.json() const result = streamText({ model: openai("gpt-4o"), system: `You are a helpful product discovery assistant. Your goal is to help users find their ideal product by asking thoughtful questions about their needs, preferences, budget, and use cases. Guidelines: - Ask one question at a time to avoid overwhelming the user - Be conversational and friendly - Focus on understanding their specific needs, pain points, and goals - Consider factors like budget, timeline, technical requirements, and personal preferences - Provide personalized recommendations based on their responses - If they mention a specific product category or subcategory, dive deeper into their requirements for that area - Always explain your reasoning for recommendations - Be honest if you need more information to make a good recommendation - When users come from a category selection, acknowledge their interest and ask relevant follow-up questions - Provide specific product suggestions when you have enough information - Include pros and cons for recommended products - Suggest alternatives at different price points when possible If a user has selected a category, help them narrow down their specific needs within that category before making recommendations.`, messages, }) return result.toDataStreamResponse() } [V0_FILE]png:file="public/images/chatty-reference-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iPhone%2013%20mini%20-%20628-hOH3LqX66w6hbJaZyglRljoU1ziafQ.png" isMerged="true" [V0_FILE]png:file="public/images/chatty-reference-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iPhone%2013%20mini%20-%20632-q4zYhStHpALxbePIUolBSxjgcp7Xkt.png" isMerged="true" [V0_FILE]png:file="public/images/chatty-reference-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iPhone%2013%20mini%20-%20631-DHjZ5qAkFtEmbMFf0HazwyQhf8gzcf.png" isMerged="true" [V0_FILE]png:file="public/images/chatty-reference-4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iPhone%2013%20mini%20-%20633-Ue9BOTLOdIYIzplJI8ysiwS0dT8eQw.png" isMerged="true" [V0_FILE]png:file="public/images/chatty-reference-5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iPhone%2013%20mini%20-%20630-z1kfeVqXn9AVJQlWzewaXmxpdtIGwz.png" isMerged="true" [V0_FILE]png:file="public/images/answers-inline.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iPhone%2013%20mini%20-%20634-GuJF0szcyDzydoTq1YB5YodNQO0Mom.png" isMerged="true" [V0_FILE]png:file="public/images/chatty-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-05-28%20at%2010.52.00%E2%80%AFAM-6lF0xJNIRrQOHJvsKdeFUgWVkDrxO9.png" isMerged="true" [V0_FILE]png:file="public/images/recommendation-screen.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iPhone%2013%20mini%20-%20648-hpWOT1qGtX8O2drLLxGya0ia3GRxDq.png" isMerged="true" [V0_FILE]png:file="public/images/monthbooks-product.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-05-28%20at%204.10.01%E2%80%AFPM-Xso82CME95olZsDvDoujvL5JBrHlxi.png" isMerged="true" [V0_FILE]png:file="public/images/onboarding-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Onboarding_2025.png-8oFrQuHGINni5VhWqc6m4cCn0c1BpZ.jpeg" isMerged="true" [V0_FILE]png:file="public/images/signin-hero.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/first_image-kBbSlItusMiFP5qDa8gi1EtUhNLLp2.png" isMerged="true" [V0_FILE]png:file="public/images/mission-family.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rectangle%203433-3UFVEdu0gH6AweKLv7pOaIny3aQeNa.png" isMerged="true" [V0_FILE]png:file="public/images/mission-photobooks.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rectangle%203433-1-pERgpoN35VmbVtxWHFhFDmsnqVExVa.png" isMerged="true" [V0_FILE]png:file="public/images/honest-pricing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%202190-T6d7ixGJ8oOs9ZpiebQ3DlpNG4Gk32.png" isMerged="true" [V0_FILE]png:file="public/images/toddler-insurance.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%202188-KRxbmXkZAJEBuaRU8yqCBlzWEhKPkd.png" isMerged="true" [V0_FILE]png:file="public/images/free-shipping.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%202189-gVl1V2H4aXZlVKDzSiaJbJWiruKj0o.png" isMerged="true" [V0_FILE]png:file="public/images/love-guarantee.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%202187-086syfA5ax7dEC3ykqw7R3SH1uYhrk.png" isMerged="true" [V0_FILE]png:file="public/images/quiz-illustration.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/paper-list-pen%201-97FKwxramFInnwbl9JCujq8sH7TQV5.png" isMerged="true" [V0_FILE]typescriptreact:file="components/onboarding-flow.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" interface OnboardingFlowProps { onComplete: () => void } export function OnboardingFlow({ onComplete }: OnboardingFlowProps) { const [currentScreen, setCurrentScreen] = useState(0) const ProgressBar = ({ current, total, showSkip = false, }: { current: number; total: number; showSkip?: boolean }) => { const progressPercentage = (current / total) * 100 return (

{/* Empty div for spacing */}

{showSkip ? ( ) : (

// Empty div for spacing when no skip button )}

) } const screens = [ // Mission Screen 1 (now the first screen) { id: "mission1", component: (

OUR MISSION

Sharing memories
strengthens families

Family looking at photo book together - parents and children sharing memories

Studies show when kids see themselves in printed photos, it boosts their confidence, identity, and sense of belonging

), }, // Mission Screen 2 { id: "mission2", component: (

OUR MISSION

We are here to help you
print your memories

Hands holding photo books and albums showing printed family memories

The average parent takes over 3,000 photos a year! Let's get your photos off your phone and into your home

), }, // What Makes Us Special Screen { id: "special", component: (

There are a lot of places to print photos...

...what makes Chatbooks special?

{/* Empty space - icons will be shown on next screen */}

), }, // Brand Promises Screen { id: "promises", component: (

Our brand promises keep
Chatbooks customers
happy

{/* Love Guarantee */}

{/* Toddler Insurance */}

{/* Honest Pricing */}

{/* Free Shipping */}

Free Standard Shipping - Free standard shipping, always

), }, // Quiz Introduction Screen { id: "quiz-intro", component: (

GET STARTED

Let's find your perfect
Chatbooks match

Paper with list and pen illustration for taking quiz

Answer the next 4 questions to help us
find the right product for you

), }, ] return screens[currentScreen].component } [V0_FILE]png:file="public/images/classic-books-product.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-03%20at%204.22.55%E2%80%AFPM-J793M9IFm6VP0rETBukvlhM0onqxAc.png" isMerged="true" [V0_FILE]png:file="public/images/gift-card.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%202046-a7PULRTrUvbp2r5o57h2ho0lo9RP4d.png" isMerged="true" [V0_FILE]png:file="public/images/layflat-books-product.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-04%20at%2010.08.06%E2%80%AFAM-csK9dp1LBs2LaTJV8BRG97DMrMsags.png" isMerged="true" [V0_FILE]png:file="public/images/classic-books-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-06-04%20at%2011.07.13%E2%80%AFAM-LxgbH7yaMX48i0oyPholrMqbxTA2IW.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { RecommendationResults } from "@/components/recommendation-results" import { OnboardingFlow } from "@/components/onboarding-flow" interface ChattyState { step: number bookTypes: string[] primaryBookType: string frequency: string pricePreference: string budget: string bookTypePreference: string giftMaker: string giftBudget: string } const bookTypeOptions = [ { id: "baby-first-year", label: "Baby's first year", emoji: "🍼" }, { id: "special-occasions", label: "Special occasions / milestones", emoji: "💕" }, { id: "annual-book", label: "Annual book", emoji: "📖" }, { id: "gift", label: "I want to make a gift", emoji: "🎁" }, { id: "vacation-travel", label: "Vacation / travel", emoji: "✈️" }, { id: "everyday-photos", label: "Family memories / everyday photos", emoji: "📸" }, ] const frequencyOptions = [ { id: "monthly", label: "Monthly" }, { id: "few-times-year", label: "A few times a year" }, { id: "once-year", label: "Once a year" }, ] const priceOptions = [ { id: "smaller-book", label: "$8 smaller simpler book" }, { id: "larger-book", label: "$12-15 larger, more customizable books" }, ] const budgetOptions = [ { id: "budget-15-25", label: "$15-25" }, { id: "budget-25-50", label: "$25-50" }, { id: "budget-50-100", label: "$50-100" }, ] const bookTypePreferenceOptions = [ { id: "subscription", label: "4-6 books per year Subscription", subhead: "$12-15 / book, More straightforward, up to 60 pages", }, { id: "no-subscription", label: "No subscription", subhead: "$25, More layouts, pages and bigger books", }, ] const giftMakerOptions = [ { id: "self", label: "I'll make it" }, { id: "recipient", label: "They'll make it" }, { id: "giftcard", label: "I'm here for a gift card" }, ] const giftBudgetOptions = [ { id: "gift-15-25", label: "$15-25 (softcover)" }, { id: "gift-25-50", label: "$25-50 (hardcover)" }, { id: "gift-50-100", label: "$50-100 (Layflat)" }, ] export default function ChattyBot() { const [showOnboarding, setShowOnboarding] = useState(true) const [state, setState] = useState({ step: 1, bookTypes: [], primaryBookType: "", frequency: "", pricePreference: "", budget: "", bookTypePreference: "", giftMaker: "", giftBudget: "", }) const [messages, setMessages] = useState< Array<{ id: string; type: "bot" | "user"; content: string; timestamp: number }> >([]) const [visibleMessages, setVisibleMessages] = useState([]) const [showOptions, setShowOptions] = useState(false) const [showResults, setShowResults] = useState(false) // Initialize with first messages when onboarding is complete useEffect(() => { if (!showOnboarding) { const initialMessages = [ { id: "1", type: "bot" as const, content: "Hi, I'm Chatty, I have five questions to help you find the perfect product.", timestamp: Date.now(), }, { id: "2", type: "bot" as const, content: "What kind of photo books do you want to print? (select all that apply)", timestamp: Date.now() + 1000, }, ] setMessages(initialMessages) // Show first message immediately setVisibleMessages(["1"]) // Show second message after delay setTimeout(() => { setVisibleMessages(["1", "2"]) // Show options after the question appears setTimeout(() => { setShowOptions(true) }, 500) }, 1500) } }, [showOnboarding]) const handleOnboardingComplete = () => { setShowOnboarding(false) } // Function to add a new message with animation const addMessage = (message: { id: string; type: "bot" | "user"; content: string }, showOptionsAfter = false) => { const newMessage = { ...message, timestamp: Date.now() } setMessages((prev) => [...prev, newMessage]) // Hide options when adding new messages if (message.type === "user") { setShowOptions(false) } // Add to visible messages after a short delay for animation setTimeout(() => { setVisibleMessages((prev) => [...prev, message.id]) // Show options after bot message if specified if (showOptionsAfter && message.type === "bot") { setTimeout(() => { setShowOptions(true) }, 500) } }, 100) } const toggleBookType = (option: string) => { setState((prev) => { const newBookTypes = prev.bookTypes.includes(option) ? prev.bookTypes.filter((item) => item !== option) : [...prev.bookTypes, option] return { ...prev, bookTypes: newBookTypes } }) } const selectPrimaryBookType = (option: string) => { setState((prev) => ({ ...prev, primaryBookType: option })) // Hide options immediately setShowOptions(false) // Add the selection as a user message const bookOption = bookTypeOptions.find((opt) => opt.id === option) addMessage({ id: `user-primary-${Date.now()}`, type: "user", content: `${bookOption?.emoji} ${bookOption?.label}`, }) // Special flow for gift option if (option === "gift") { setTimeout(() => { addMessage( { id: `bot-gift-maker-${Date.now()}`, type: "bot", content: "Who do you want to make the gift?", }, true, ) // Show options after this message setState((prev) => ({ ...prev, step: 7 })) // Use step 7 for gift maker selection }, 800) return } // Add personalized response based on book type const personalizedResponses = { "baby-first-year": "You're in luck! Baby's first year is our specialty.", "special-occasions": "Nice! We have lots of options for special occasion books.", "annual-book": "Great choice! We have the perfect solution for yearbooks.", gift: "Perfect! We have several gift options.", "vacation-travel": "A globe trotter! Don't worry, we have lots of options for travel books.", "everyday-photos": "This is our specialty, you are in the right place!", } setTimeout(() => { addMessage({ id: `bot-personalized-${Date.now()}`, type: "bot", content: personalizedResponses[option as keyof typeof personalizedResponses] || "Great choice!", }) // Then ask frequency question after another delay setTimeout(() => { addMessage( { id: `bot-frequency-${Date.now()}`, type: "bot", content: `How often would you like to receive books for ${getPrimaryBookTypeLabel().toLowerCase()}?`, }, true, ) // Show options after this message setState((prev) => ({ ...prev, step: 3 })) }, 1500) }, 800) } const selectGiftMaker = (option: string) => { setState((prev) => ({ ...prev, giftMaker: option })) // Hide options immediately setShowOptions(false) // Add the selection as a user message const giftMakerOption = giftMakerOptions.find((opt) => opt.id === option) addMessage({ id: `user-gift-maker-${Date.now()}`, type: "user", content: giftMakerOption?.label || option, }) // For gift card option, go straight to results if (option === "giftcard") { setTimeout(() => { addMessage({ id: `bot-giftcard-${Date.now()}`, type: "bot", content: "Great! Let me show you our gift card options.", }) // Show results screen after a delay setTimeout(() => { setShowResults(true) }, 1500) }, 800) return } // For "I'll make it" option, ask for budget if (option === "self") { setTimeout(() => { addMessage({ id: `bot-gift-self-response-${Date.now()}`, type: "bot", content: "Perfect! You'll be creating a beautiful book for them.", }) // Then ask budget question after another delay setTimeout(() => { addMessage( { id: `bot-gift-budget-${Date.now()}`, type: "bot", content: "What is your budget?", }, true, ) // Show options after this message setState((prev) => ({ ...prev, step: 8 })) // Use step 8 for gift budget selection }, 1500) }, 800) return } // For "They'll make it" option, go directly to results setTimeout(() => { addMessage({ id: `bot-gift-recipient-${Date.now()}`, type: "bot", content: "Great! Let me show you the perfect gift option for them to create their own book.", }) // Show results screen after a delay setTimeout(() => { setShowResults(true) }, 1500) }, 800) } const selectGiftBudget = (option: string) => { setState((prev) => ({ ...prev, giftBudget: option })) // Hide options immediately setShowOptions(false) // Add the selection as a user message const giftBudgetOption = giftBudgetOptions.find((opt) => opt.id === option) addMessage({ id: `user-gift-budget-${Date.now()}`, type: "user", content: giftBudgetOption?.label || option, }) // Give final recommendation after gift budget selection setTimeout(() => { addMessage({ id: `bot-drumroll-${Date.now()}`, type: "bot", content: "Drumroll.. we are calculating your perfect match", }) // Show results screen after drumroll setTimeout(() => { setShowResults(true) }, 2000) }, 800) } const selectFrequency = (option: string) => { setState((prev) => ({ ...prev, frequency: option })) // Hide options immediately setShowOptions(false) // Add the frequency as a user message const frequencyOption = frequencyOptions.find((opt) => opt.id === option) addMessage({ id: `user-frequency-${Date.now()}`, type: "user", content: frequencyOption?.label || option, }) // Check which question to ask next based on frequency if (option === "once-year") { // Ask budget for once a year option setTimeout(() => { addMessage( { id: `bot-budget-${Date.now()}`, type: "bot", content: "What's your budget?", }, true, ) // Show options after this message setState((prev) => ({ ...prev, step: 5 })) }, 800) } else if (option === "few-times-year") { // Ask book type preference for few times a year setTimeout(() => { addMessage( { id: `bot-book-type-preference-${Date.now()}`, type: "bot", content: "Which book type is most interesting to you?", }, true, ) // Show options after this message setState((prev) => ({ ...prev, step: 6 })) }, 800) } else { // Ask price preference for monthly setTimeout(() => { addMessage( { id: `bot-price-${Date.now()}`, type: "bot", content: "Which is most interesting to you?", }, true, ) // Show options after this message setState((prev) => ({ ...prev, step: 4 })) }, 800) } } const selectBudget = (option: string) => { setState((prev) => ({ ...prev, budget: option })) // Hide options immediately setShowOptions(false) // Add the selection as a user message const budgetOption = budgetOptions.find((opt) => opt.id === option) addMessage({ id: `user-budget-${Date.now()}`, type: "user", content: budgetOption?.label || option, }) // Give final recommendation after budget selection setTimeout(() => { addMessage({ id: `bot-drumroll-${Date.now()}`, type: "bot", content: "Drumroll.. we are calculating your perfect match", }) // Show results screen after drumroll setTimeout(() => { setShowResults(true) }, 2000) }, 800) } const selectBookTypePreference = (option: string) => { setState((prev) => ({ ...prev, bookTypePreference: option })) // Hide options immediately setShowOptions(false) // Add the selection as a user message const bookTypeOption = bookTypePreferenceOptions.find((opt) => opt.id === option) addMessage({ id: `user-book-type-preference-${Date.now()}`, type: "user", content: bookTypeOption?.label || option, }) // Give final recommendation after book type preference selection setTimeout(() => { addMessage({ id: `bot-drumroll-${Date.now()}`, type: "bot", content: "Drumroll.. we are calculating your perfect match", }) // Show results screen after drumroll setTimeout(() => { setShowResults(true) }, 2000) }, 800) } const selectPricePreference = (option: string) => { setState((prev) => ({ ...prev, pricePreference: option })) // Hide options immediately setShowOptions(false) // Add the selection as a user message const priceOption = priceOptions.find((opt) => opt.id === option) addMessage({ id: `user-price-${Date.now()}`, type: "user", content: priceOption?.label || option, }) // Give final recommendation // Give drumroll message and then show results setTimeout(() => { addMessage({ id: `bot-drumroll-${Date.now()}`, type: "bot", content: "Drumroll.. we are calculating your perfect match", }) // Show results screen after drumroll setTimeout(() => { setShowResults(true) }, 2000) }, 800) } const nextStep = () => { // Hide options immediately setShowOptions(false) setState((prev) => { if (prev.step === 1) { // Add all selected book types as user messages with staggered timing prev.bookTypes.forEach((id, index) => { const option = bookTypeOptions.find((opt) => opt.id === id) setTimeout(() => { addMessage({ id: `user-${id}-${Date.now()}`, type: "user", content: `${option?.emoji} ${option?.label}`, }) }, index * 300) }) // Check if we need to ask which to create first if (prev.bookTypes.length > 1) { setTimeout( () => { addMessage( { id: `bot-primary-${Date.now()}`, type: "bot", content: "Which do you want to create first?", }, true, ) // Show options after this message }, prev.bookTypes.length * 300 + 800, ) return { ...prev, step: 2 } } else { // Only one selected, set as primary and move to frequency const primaryType = prev.bookTypes[0] // Special flow for gift option if (primaryType === "gift") { setTimeout(() => { addMessage( { id: `bot-gift-maker-${Date.now()}`, type: "bot", content: "Who do you want to make the gift?", }, true, ) // Show options after this message }, 800) return { ...prev, step: 7, primaryBookType: primaryType } } // Add personalized response const personalizedResponses = { "baby-first-year": "You're in luck! Baby's first year is our specialty.", "special-occasions": "Nice! We have lots of options for special occasion books.", "annual-book": "Great choice! We have the perfect solution for yearbooks.", gift: "Perfect! We have several gift options.", "vacation-travel": "A globe trotter! Don't worry, we have lots of options for travel books.", "everyday-photos": "This is our specialty, you are in the right place!", } setTimeout(() => { addMessage({ id: `bot-personalized-${Date.now()}`, type: "bot", content: personalizedResponses[primaryType as keyof typeof personalizedResponses] || "Great choice!", }) // Then ask frequency question after another delay setTimeout(() => { addMessage( { id: `bot-frequency-${Date.now()}`, type: "bot", content: `How often would you like to receive books for ${getPrimaryBookTypeLabel().toLowerCase()}?`, }, true, ) // Show options after this message }, 1500) }, 800) return { ...prev, step: 3, primaryBookType: primaryType } } } return prev }) } const getPrimaryBookTypeLabel = () => { const primaryType = state.primaryBookType || state.bookTypes[0] return bookTypeOptions.find((option) => option.id === primaryType)?.label || "" } const getBookTypeLabel = (id: string) => { return bookTypeOptions.find((option) => option.id === id)?.label || id } const getBookTypeEmoji = (id: string) => { return bookTypeOptions.find((option) => option.id === id)?.emoji || "" } const goBackFromResults = () => { setShowResults(false) } // Show onboarding flow first if (showOnboarding) { return } if (showResults) { return ( ) } return (

{/* Content */}

{/* Chat Messages */}

{messages.map((message) => (

{message.type === "bot" && (

)}

{message.content}

))}

{/* Question Options */}

{/* Step 1: Book Type Options */} {state.step === 1 && ( <> {bookTypeOptions.map((option, index) => ( ))} {state.bookTypes.length > 0 && ( )} )} {/* Step 2: Primary Book Type Selection (only if multiple selected) */} {state.step === 2 && ( <> {state.bookTypes.map((bookTypeId, index) => { const option = bookTypeOptions.find((opt) => opt.id === bookTypeId) return ( ) })} )} {/* Step 3: Frequency Options */} {state.step === 3 && ( <> {frequencyOptions.map((option, index) => ( ))} )} {/* Step 4: Price Preference Options (for monthly) */} {state.step === 4 && ( <> {priceOptions.map((option, index) => ( ))} )} {/* Step 5: Budget Options (for once a year frequency) */} {state.step === 5 && ( <> {budgetOptions.map((option, index) => ( ))} )} {/* Step 6: Book Type Preference Options (for few times a year frequency) */} {state.step === 6 && ( <> {bookTypePreferenceOptions.map((option, index) => ( ))} )} {/* Step 7: Gift Maker Options */} {state.step === 7 && ( <> {giftMakerOptions.map((option, index) => ( ))} )} {/* Step 8: Gift Budget Options */} {state.step === 8 && ( <> {giftBudgetOptions.map((option, index) => ( ))} )}

) } [V0_FILE]typescriptreact:file="components/recommendation-results.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { ArrowLeft, ChevronDown, Check } from "lucide-react" const bookTypeOptions = [ { id: "baby-first-year", label: "Baby's first year", emoji: "🍼" }, { id: "special-occasions", label: "Special occasions / milestones", emoji: "💕" }, { id: "annual-book", label: "Annual book", emoji: "📖" }, { id: "gift", label: "I want to make a gift", emoji: "🎁" }, { id: "vacation-travel", label: "Vacation / travel", emoji: "✈️" }, { id: "everyday-photos", label: "Family memories / everyday photos", emoji: "📸" }, ] const frequencyOptions = [ { id: "monthly", label: "Monthly" }, { id: "few-times-year", label: "A few times a year" }, { id: "once-year", label: "Once a year" }, ] const priceOptions = [ { id: "smaller-book", label: "$8 smaller simpler book" }, { id: "larger-book", label: "$12-15 larger, more customizable books" }, ] const budgetOptions = [ { id: "budget-15-25", label: "$15-25" }, { id: "budget-25-50", label: "$25-50" }, { id: "budget-50-100", label: "$50-100" }, ] const bookTypePreferenceOptions = [ { id: "subscription", label: "4-6 books per year Subscription", subhead: "$12-15 / book, More straightforward, up to 60 pages", }, { id: "no-subscription", label: "No subscription", subhead: "$25, More layouts, pages and bigger books", }, ] const giftMakerOptions = [ { id: "self", label: "I'll make it" }, { id: "recipient", label: "They'll make it" }, { id: "giftcard", label: "I'm here for a gift card" }, ] const giftBudgetOptions = [ { id: "gift-15-25", label: "$15-25 (softcover)" }, { id: "gift-25-50", label: "$25-50 (hardcover)" }, { id: "gift-50-100", label: "$50-100 (Layflat)" }, ] interface RecommendationResultsProps { selectedAnswers: { bookType: string frequency: string pricePreference: string budget?: string bookTypePreference?: string giftMaker?: string giftBudget?: string } onBack: () => void } export function RecommendationResults({ selectedAnswers, onBack }: RecommendationResultsProps) { const [openDropdown, setOpenDropdown] = useState(null) const dropdownRefs = useRef>({}) // Close dropdown when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if ( openDropdown && dropdownRefs.current[openDropdown] && !dropdownRefs.current[openDropdown]?.contains(event.target as Node) ) { setOpenDropdown(null) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [openDropdown]) const toggleDropdown = (name: string) => { setOpenDropdown(openDropdown === name ? null : name) } const getBookTypeLabel = (id: string) => { const labels = { "baby-first-year": "Baby's first year", "special-occasions": "Special occasions", "annual-book": "Annual book", gift: "I want to make a gift", "vacation-travel": "Vacation / travel", "everyday-photos": "Everyday photos", } return labels[id as keyof typeof labels] || id } const getFrequencyLabel = (id: string) => { const labels = { monthly: "Monthly", "few-times-year": "A few times a year", "once-year": "Once a year", } return labels[id as keyof typeof labels] || id } const getPriceLabel = (id: string) => { const labels = { "smaller-book": "$8", "larger-book": "$12-15", } return labels[id as keyof typeof labels] || id } const getBudgetLabel = (id: string) => { const labels = { "budget-15-25": "$15-25", "budget-25-50": "$25-50", "budget-50-100": "$50-100", } return labels[id as keyof typeof labels] || id } const getBookTypePreferenceLabel = (id: string) => { const labels = { subscription: "4-6 books per year Subscription", "no-subscription": "No subscription", } return labels[id as keyof typeof labels] || id } const getGiftMakerLabel = (id: string) => { const labels = { self: "I'll make it", recipient: "They'll make it", giftcard: "I'm here for a gift card", } return labels[id as keyof typeof labels] || id } const getGiftBudgetLabel = (id: string) => { const labels = { "gift-15-25": "$15-25 (softcover)", "gift-25-50": "$25-50 (hardcover)", "gift-50-100": "$50-100 (Layflat)", } return labels[id as keyof typeof labels] || id } // Special case for gift card const isGiftCard = selectedAnswers.bookType === "gift" && selectedAnswers.giftMaker === "giftcard" // Special case for gift subscription (when user selects "I'll make it" and provides budget) const isGiftWithSelfBudget = selectedAnswers.bookType === "gift" && selectedAnswers.giftMaker === "self" && selectedAnswers.giftBudget // Special case for gift recipient (when user selects "They'll make it") const isGiftForRecipient = selectedAnswers.bookType === "gift" && selectedAnswers.giftMaker === "recipient" && !selectedAnswers.giftBudget // Special case for gift subscription (when user selects "I'll make it") const isGiftSubscription = selectedAnswers.bookType === "gift" && selectedAnswers.giftMaker === "self" // Special case for gift with budget (when user selects "They'll make it") const isGiftWithBudget = selectedAnswers.bookType === "gift" && selectedAnswers.giftMaker === "recipient" && selectedAnswers.giftBudget // Determine which recommendation to show // Show Classic books if: once a year OR no subscription preference // Show Monthbooks otherwise const showClassicBooks = selectedAnswers.frequency === "once-year" || selectedAnswers.bookTypePreference === "no-subscription" // For gift with budget, determine recommendation based on budget const getGiftRecommendation = () => { if (!isGiftWithBudget && !isGiftWithSelfBudget) return null switch (selectedAnswers.giftBudget) { case "gift-15-25": return "Classic books" case "gift-25-50": return "Classic books" case "gift-50-100": return "Layflat books" default: return "Classic books" } } const giftRecommendation = getGiftRecommendation() // Check if we should show layflat books const isLayflatBooks = (isGiftWithBudget && giftRecommendation === "Layflat books") || (isGiftWithSelfBudget && getGiftRecommendation() === "Layflat books") // Check if we should show Classic books (including gift flows) const isClassicBooks = showClassicBooks || (isGiftWithBudget && giftRecommendation === "Classic books") || (isGiftWithSelfBudget && giftRecommendation === "Classic books") return (

{/* Content */}

{/* Back button and See other matches */}

{/* Because you said section */}

BECAUSE YOU SAID:

{/* Book Type Dropdown */}

(dropdownRefs.current["bookType"] = el)}> {openDropdown === "bookType" && (

{bookTypeOptions.map((option) => ( ))}

)}

{/* Gift Maker Dropdown (only for gift type) */} {selectedAnswers.bookType === "gift" && selectedAnswers.giftMaker && (

(dropdownRefs.current["giftMaker"] = el)}> {openDropdown === "giftMaker" && (

{giftMakerOptions.map((option) => ( ))}

)}

)} {/* Gift Budget Dropdown (only for gift with budget) */} {isGiftWithBudget && (

(dropdownRefs.current["giftBudget"] = el)}> {openDropdown === "giftBudget" && (

{giftBudgetOptions.map((option) => ( ))}

)}

)} {/* Only show frequency if not gift card and not gift with budget */} {!isGiftCard && !isGiftWithBudget && selectedAnswers.frequency && (

(dropdownRefs.current["frequency"] = el)}> {openDropdown === "frequency" && (

{frequencyOptions.map((option) => ( ))}

)}

)} {/* Third dropdown - Budget, Book Type Preference, or Price (only if not gift card and not gift with budget) */} {!isGiftCard && !isGiftWithBudget && ( <> {selectedAnswers.budget ? (

(dropdownRefs.current["budget"] = el)}> {openDropdown === "budget" && (

{budgetOptions.map((option) => ( ))}

)}

) : selectedAnswers.bookTypePreference ? (

(dropdownRefs.current["bookTypePreference"] = el)}> {openDropdown === "bookTypePreference" && (

{bookTypePreferenceOptions.map((option) => ( ))}

)}

) : ( selectedAnswers.pricePreference && (

(dropdownRefs.current["price"] = el)}> {openDropdown === "price" && (

{priceOptions.map((option) => ( ))}

)}

) )} )}

{/* Recommendation */}

WE RECOMMEND:

{isGiftCard ? "Gift Card" : isGiftWithSelfBudget ? getGiftRecommendation() : isGiftForRecipient ? "Gift a subscription" : isGiftWithBudget ? giftRecommendation : showClassicBooks ? "Classic books" : "Monthbooks"}

Match score: 100%

{/* Product images */}

{/* Features */}

{isGiftCard ? ( <>

Perfect for any occasion

Let them choose exactly what they want

Available in multiple amounts

$25, $50, or $100 options

Digital delivery

Send instantly via email

Never expires

They can use it whenever they're ready

) : isLayflatBooks ? ( <>

Single book (no subscription)

Perfect for chronicling baby's first year

Comes in 10x10

In your $50-100 range

Starts at $80

Great for busy parents

Customize 366 pages and much or as little as you want

) : isClassicBooks ? ( <>

Single book (no subscription)

Perfect for chronicling baby's first year

Choose from 6x6, 8x8, or 10x10

In your $15-20 range

Softcover starts at $15 per book

Great for busy parents

Customize 366 pages and much or as little as you want

) : isGiftSubscription || isGiftForRecipient ? ( <>

Perfect gift for new parents

They'll receive books automatically throughout the year

Choose 4, 6, or 12 books per year

Flexible subscription options to fit any budget

Easy setup and management

You handle the gift, they enjoy creating books

Starting at $12 per book

Affordable way to give the gift of memories

) : ( <>

Choose between 4, 6, or 12 books a year
Perfect for chronicling baby's first year

Choose from 5x7, 6x8, or 8x8
Portrait or square options

In your{" "} {selectedAnswers.budget ? getBudgetLabel(selectedAnswers.budget) : selectedAnswers.bookTypePreference ? getBookTypePreferenceLabel(selectedAnswers.bookTypePreference) : getPriceLabel(selectedAnswers.pricePreference)}{" "} budget range
Softcover is $12 per book, and hardcover is $15 per book

Great for busy parents
As little as 60 pages and as much or as little as you want

)}

{/* CTA Button */}

) }

What are you looking for?

{category.name}

{category.name}

Sharing memories strengthens families

We are here to help you print your memories

There are a lot of places to print photos... ...what makes Chatbooks special?

Our brand promises keep Chatbooks customers happy

Let's find your perfect Chatbooks match

{isGiftCard ? "Gift Card" : isGiftWithSelfBudget ? getGiftRecommendation() : isGiftForRecipient ? "Gift a subscription" : isGiftWithBudget ? giftRecommendation : showClassicBooks ? "Classic books" : "Monthbooks"}

Sharing memories
strengthens families

We are here to help you
print your memories

There are a lot of places to print photos...

...what makes Chatbooks special?

Our brand promises keep
Chatbooks customers
happy

Let's find your perfect
Chatbooks match