351 lines
No EOL
13 KiB
TypeScript
351 lines
No EOL
13 KiB
TypeScript
"use client";
|
|
|
|
import React, { useRef, useEffect } from 'react';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Rocket, BrainCircuit, UserCog, Database, Shield } from 'lucide-react';
|
|
|
|
// Register GSAP plugins
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
interface OnboardingStep {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
icon: React.ReactNode;
|
|
component: React.ReactNode;
|
|
}
|
|
|
|
export default function DigitalTwinOnboarding() {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const progressRef = useRef<HTMLDivElement>(null);
|
|
const [currentStep, setCurrentStep] = React.useState(0);
|
|
const [completedSteps, setCompletedSteps] = React.useState<Set<string>>(new Set());
|
|
|
|
// Animation setup
|
|
useEffect(() => {
|
|
const ctx = gsap.context(() => {
|
|
gsap.from(".onboarding-card", {
|
|
opacity: 0,
|
|
y: 50,
|
|
duration: 0.8,
|
|
stagger: 0.15,
|
|
ease: "power3.out",
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: containerRef.current,
|
|
start: "top top",
|
|
end: "bottom bottom",
|
|
onUpdate: (self) => {
|
|
if (progressRef.current) {
|
|
progressRef.current.style.width = `${self.progress * 100}%`;
|
|
}
|
|
},
|
|
});
|
|
}, containerRef);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
const onboardingSteps: OnboardingStep[] = [
|
|
{
|
|
id: "personalization",
|
|
title: "Personalization Setup",
|
|
description: "Configure your digital twin's personality and interaction style",
|
|
icon: <UserCog className="w-6 h-6 text-indigo-600" />,
|
|
component: (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="communication-style">Communication Style</Label>
|
|
<select
|
|
id="communication-style"
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<option value="professional">Professional</option>
|
|
<option value="friendly">Friendly</option>
|
|
<option value="concise">Concise</option>
|
|
<option value="detailed">Detailed</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="response-length">Response Length</Label>
|
|
<Input id="response-length" type="range" min="1" max="5" defaultValue="3" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="knowledge-domains">Primary Knowledge Domains</Label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{['Technology', 'Business', 'Creative Arts', 'Science', 'Health'].map((domain) => (
|
|
<Button
|
|
key={domain}
|
|
variant="outline"
|
|
className="rounded-full"
|
|
size="sm"
|
|
>
|
|
{domain}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "data-sources",
|
|
title: "Data Integration",
|
|
description: "Connect your digital twin to your knowledge sources",
|
|
icon: <Database className="w-6 h-6 text-blue-600" />,
|
|
component: (
|
|
<div className="space-y-6">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-1 space-y-1">
|
|
<Label>Email Integration</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Connect your email for communication context
|
|
</p>
|
|
</div>
|
|
<Button variant="outline">Connect</Button>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-1 space-y-1">
|
|
<Label>Calendar Access</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Enable scheduling and time management
|
|
</p>
|
|
</div>
|
|
<Button variant="outline">Connect</Button>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-1 space-y-1">
|
|
<Label>Cloud Storage</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Access your documents and files
|
|
</p>
|
|
</div>
|
|
<Button variant="outline">Connect</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "capabilities",
|
|
title: "Capabilities Selection",
|
|
description: "Select your digital twin's core competencies",
|
|
icon: <BrainCircuit className="w-6 h-6 text-purple-600" />,
|
|
component: (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{[
|
|
"Email Management",
|
|
"Schedule Optimization",
|
|
"Research Assistant",
|
|
"Meeting Summaries",
|
|
"Data Analysis",
|
|
"Content Generation",
|
|
"Task Automation",
|
|
"Learning Companion",
|
|
].map((capability) => (
|
|
<Card key={capability} className="hover:border-primary transition-colors">
|
|
<CardHeader className="flex flex-row items-center space-y-0 space-x-4 p-4">
|
|
<input
|
|
type="checkbox"
|
|
id={`capability-${capability.toLowerCase().replace(' ', '-')}`}
|
|
className="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
<Label htmlFor={`capability-${capability.toLowerCase().replace(' ', '-')}`}>
|
|
{capability}
|
|
</Label>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: "security",
|
|
title: "Privacy & Security",
|
|
description: "Configure your data protection preferences",
|
|
icon: <Shield className="w-6 h-6 text-green-600" />,
|
|
component: (
|
|
<div className="space-y-6">
|
|
<div className="space-y-4">
|
|
<div className="flex items-start space-x-4">
|
|
<div className="flex items-center h-5">
|
|
<input
|
|
id="data-retention"
|
|
name="data-retention"
|
|
type="checkbox"
|
|
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
defaultChecked
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<Label htmlFor="data-retention">Automatic Data Retention</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Allow temporary data storage for context continuity
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="flex items-center h-5">
|
|
<input
|
|
id="analytics"
|
|
name="analytics"
|
|
type="checkbox"
|
|
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
defaultChecked
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<Label htmlFor="analytics">Anonymous Usage Analytics</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Help improve the system while protecting your identity
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start space-x-4">
|
|
<div className="flex items-center h-5">
|
|
<input
|
|
id="encryption"
|
|
name="encryption"
|
|
type="checkbox"
|
|
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
defaultChecked
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<Label htmlFor="encryption">End-to-End Encryption</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Maximum security for all your communications
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
const handleNext = () => {
|
|
setCompletedSteps(new Set(completedSteps).add(onboardingSteps[currentStep].id));
|
|
if (currentStep < onboardingSteps.length - 1) {
|
|
setCurrentStep(currentStep + 1);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (currentStep > 0) {
|
|
setCurrentStep(currentStep - 1);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 py-12 px-4 sm:px-6 lg:px-8"
|
|
>
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl mb-4">
|
|
Configure Your <span className="text-indigo-600">Digital Twin</span>
|
|
</h1>
|
|
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
|
|
Personalize your AI companion in just a few steps
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-8">
|
|
<div className="flex justify-between mb-2">
|
|
{onboardingSteps.map((step, index) => (
|
|
<div
|
|
key={step.id}
|
|
className={`flex flex-col items-center ${index < onboardingSteps.length - 1 ? 'flex-1' : ''}`}
|
|
>
|
|
<div
|
|
className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 transition-colors ${
|
|
currentStep >= index
|
|
? 'bg-indigo-600 text-white'
|
|
: 'bg-slate-200 text-slate-600'
|
|
} ${
|
|
completedSteps.has(step.id) ? 'ring-2 ring-offset-2 ring-indigo-500' : ''
|
|
}`}
|
|
>
|
|
{index + 1}
|
|
</div>
|
|
<span
|
|
className={`text-sm font-medium ${
|
|
currentStep === index ? 'text-indigo-600' : 'text-slate-600'
|
|
}`}
|
|
>
|
|
{step.title}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="relative h-2 bg-slate-200 rounded-full overflow-hidden">
|
|
<div
|
|
ref={progressRef}
|
|
className="absolute top-0 left-0 h-full bg-indigo-600 transition-all duration-300 ease-out"
|
|
style={{
|
|
width: `${(currentStep / (onboardingSteps.length - 1)) * 100}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="onboarding-card shadow-xl">
|
|
<CardHeader>
|
|
<div className="flex items-center gap-4 mb-2">
|
|
{onboardingSteps[currentStep].icon}
|
|
<div>
|
|
<CardTitle className="text-2xl">
|
|
{onboardingSteps[currentStep].title}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{onboardingSteps[currentStep].description}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-8">
|
|
{onboardingSteps[currentStep].component}
|
|
|
|
<div className="flex justify-between pt-6 border-t border-slate-200">
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleBack}
|
|
disabled={currentStep === 0}
|
|
>
|
|
Back
|
|
</Button>
|
|
<Button
|
|
onClick={handleNext}
|
|
className="gap-2"
|
|
>
|
|
{currentStep === onboardingSteps.length - 1 ? (
|
|
<>
|
|
Complete Setup <Rocket className="w-4 h-4" />
|
|
</>
|
|
) : (
|
|
<>
|
|
Next Step
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |