"use client" import { AnimatePresence, motion } from "motion/react" import type React from "react" import { createContext, useCallback, useContext, useEffect, useState, } from "react" import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { Torus } from "lucide-react" // Constants export const TOUR_STEP_IDS = { TEAM_SWITCHER: "team-switcher", WRITING_AREA: "writing-area", ASK_AI: "ask-ai", FAVORITES: "favorites", } as const export interface TourStep { content: React.ReactNode selectorId: string width?: number height?: number onClickWithinArea?: () => void position?: "top" | "bottom" | "left" | "right" } interface TourContextType { currentStep: number totalSteps: number nextStep: () => void previousStep: () => void endTour: () => void isActive: boolean startTour: () => void setSteps: (steps: TourStep[]) => void steps: TourStep[] isTourCompleted: boolean setIsTourCompleted: (completed: boolean) => void } interface TourProviderProps { children: React.ReactNode onComplete?: () => void className?: string isTourCompleted?: boolean } const TourContext = createContext(null) const PADDING = 16; const CONTENT_WIDTH = 300; const CONTENT_HEIGHT = 174; function getElementPosition(id: string) { const element = document.getElementById(id) if (!element) return null const rect = element.getBoundingClientRect() return { top: rect.top, left: rect.left, width: rect.width, height: rect.height, } } function calculateContentPosition( elementPos: { top: number; left: number; width: number; height: number }, position: "top" | "bottom" | "left" | "right" = "bottom", ) { let left = elementPos.left let top = elementPos.top switch (position) { case "top": top = elementPos.top - CONTENT_HEIGHT - PADDING left = elementPos.left + elementPos.width / 2 - CONTENT_WIDTH / 2 break case "bottom": top = elementPos.top + elementPos.height + PADDING left = elementPos.left + elementPos.width / 2 - CONTENT_WIDTH / 2 break case "left": left = elementPos.left - CONTENT_WIDTH - PADDING top = elementPos.top + elementPos.height / 2 - CONTENT_HEIGHT / 2 break case "right": left = elementPos.left + elementPos.width + PADDING top = elementPos.top + elementPos.height / 2 - CONTENT_HEIGHT / 2 break } return { top, left, width: CONTENT_WIDTH, height: CONTENT_HEIGHT, } } export function TourProvider({ children, onComplete, className, isTourCompleted = false, }: TourProviderProps) { const [steps, setSteps] = useState([]) const [currentStep, setCurrentStep] = useState(-1) const [elementPosition, setElementPosition] = useState<{ top: number left: number width: number height: number } | null>(null) const [isCompleted, setIsCompleted] = useState(isTourCompleted) const updateElementPosition = useCallback(() => { if (currentStep >= 0 && currentStep < steps.length) { const position = getElementPosition(steps[currentStep]?.selectorId ?? "") if (position) { setElementPosition(position) } } }, [currentStep, steps]) useEffect(() => { updateElementPosition() window.addEventListener("resize", updateElementPosition) window.addEventListener("scroll", updateElementPosition) return () => { window.removeEventListener("resize", updateElementPosition) window.removeEventListener("scroll", updateElementPosition) } }, [updateElementPosition]) const nextStep = useCallback(async () => { setCurrentStep((prev) => { if (prev >= steps.length - 1) { return -1 } return prev + 1 }) if (currentStep === steps.length - 1) { setIsTourCompleted(true) onComplete?.() } }, [steps.length, onComplete, currentStep]) const previousStep = useCallback(() => { setCurrentStep((prev) => (prev > 0 ? prev - 1 : prev)) }, []) const endTour = useCallback(() => { setCurrentStep(-1) }, []) const startTour = useCallback(() => { if (isTourCompleted) { return } setCurrentStep(0) }, [isTourCompleted]) const handleClick = useCallback( (e: MouseEvent) => { if ( currentStep >= 0 && elementPosition && steps[currentStep]?.onClickWithinArea ) { const clickX = e.clientX + window.scrollX const clickY = e.clientY + window.scrollY const isWithinBounds = clickX >= elementPosition.left && clickX <= elementPosition.left + (steps[currentStep]?.width || elementPosition.width) && clickY >= elementPosition.top && clickY <= elementPosition.top + (steps[currentStep]?.height || elementPosition.height) if (isWithinBounds) { steps[currentStep].onClickWithinArea?.() } } }, [currentStep, elementPosition, steps], ) useEffect(() => { window.addEventListener("click", handleClick) return () => { window.removeEventListener("click", handleClick) } }, [handleClick]) const setIsTourCompleted = useCallback((completed: boolean) => { setIsCompleted(completed) }, []) return ( = 0, startTour, setSteps, steps, isTourCompleted: isCompleted, setIsTourCompleted, }} > {children} {currentStep >= 0 && elementPosition && ( <>

{currentStep + 1} / {steps.length}

{steps[currentStep]?.content}

{currentStep > 0 && ( )}

)} ) } export function useTour() { const context = useContext(TourContext) if (!context) { throw new Error("useTour must be used within a TourProvider") } return context } export function TourAlertDialog({ isOpen, setIsOpen, }: { isOpen: boolean setIsOpen: (isOpen: boolean) => void }) { const { startTour, steps, isTourCompleted, currentStep } = useTour() if (isTourCompleted || steps.length === 0 || currentStep > -1) { return null } const handleSkip = async () => { setIsOpen(false) } return (

Welcome to the Tour Take a quick tour to learn about the key features and functionality of this application.

) }