Function TutorialModal

apps/chat/src/components/TutorialModal.jsx:474–522

({ isOpen, onClose })

};

const TutorialModal = ({ isOpen, onClose }) => {
    const {
        currentStep,
        currentStepData,
        highlightRect,
        tooltipPosition,
        animationState,
        isFirstStep,
        isLastStep,
        totalSteps,
        isCentered,
        handleNext,
        handlePrev,
        handleSkip,
        handleDotClick,
    } = useTutorial(isOpen, onClose);

    if (!isOpen) return null;

    if (!currentStepData) {
        console.error("TutorialModal: No step data available");
        return null;
    }

    return (
        <div className="tutorial-modal-container" aria-hidden={!isOpen}>
            <TutorialOverlay
                highlightRect={highlightRect}
                isTransitioning={animationState.isTransitioning}
            />

            <TutorialTooltip
                step={currentStepData}
                currentStep={currentStep}
                totalSteps={totalSteps}
                position={tooltipPosition}
                animationState={animationState}
                isFirstStep={isFirstStep}
                isLastStep={isLastStep}
                isCentered={isCentered}
                onPrev={handlePrev}
                onNext={handleNext}
                onSkip={handleSkip}
                onDotClick={handleDotClick}
                onClose={onClose}
            />
        </div>
    );
};

TutorialModal.propTypes = {
    isOpen: PropTypes.bool.isRequired,