| 19 | ]; |
| 20 | |
| 21 | export const OnboardingWizard: React.FC<OnboardingWizardProps> = ({ onComplete }) => { |
| 22 | const [step, setStep] = useState<Step>('welcome'); |
| 23 | const [selectedPreset, setSelectedPreset] = useState(0); |
| 24 | const [apiKey, setApiKey] = useState(''); |
| 25 | const [baseUrl, setBaseUrl] = useState(''); |
| 26 | const [model, setModel] = useState(''); |
| 27 | const [projectName, setProjectName] = useState('My Project'); |
| 28 | |
| 29 | const addProvider = useSettingsStore((s) => s.addProvider); |
| 30 | const setDefaultProviderId = useSettingsStore((s) => s.setDefaultProviderId); |
| 31 | const addProject = useProjectStore((s) => s.addProject); |
| 32 | const setActiveProject = useProjectStore((s) => s.setActiveProjectId); |
| 33 | |
| 34 | const preset = PROVIDER_PRESETS[selectedPreset]; |
| 35 | |
| 36 | const handleProviderNext = () => { |
| 37 | const now = new Date().toISOString(); |
| 38 | const provider: Provider = { |
| 39 | id: crypto.randomUUID(), |
| 40 | name: preset.label, |
| 41 | providerType: preset.type, |
| 42 | baseUrl: baseUrl || preset.baseUrl, |
| 43 | apiKey: apiKey || undefined, |
| 44 | model: model || preset.model, |
| 45 | isDefault: true, |
| 46 | isBuiltin: false, |
| 47 | isEnabled: true, |
| 48 | apiFormat: (preset.type === 'anthropic' || preset.type === 'enowxlabs') ? 'anthropic' : 'openai', |
| 49 | createdAt: now, |
| 50 | updatedAt: now, |
| 51 | }; |
| 52 | addProvider(provider); |
| 53 | setDefaultProviderId(provider.id); |
| 54 | setStep('project'); |
| 55 | }; |
| 56 | |
| 57 | const handleProjectNext = () => { |
| 58 | const now = new Date().toISOString(); |
| 59 | const project: Project = { |
| 60 | id: crypto.randomUUID(), |
| 61 | name: projectName.trim() || 'My Project', |
| 62 | createdAt: now, |
| 63 | updatedAt: now, |
| 64 | }; |
| 65 | addProject(project); |
| 66 | setActiveProject(project.id); |
| 67 | setStep('done'); |
| 68 | }; |
| 69 | |
| 70 | return ( |
| 71 | <div className="fixed inset-0 z-50 flex items-center justify-center bg-[var(--bg)]/90 backdrop-blur-sm"> |
| 72 | <div className="w-full max-w-md mx-4 bg-[var(--surface)] border border-[var(--border)] rounded-2xl shadow-2xl shadow-[var(--shadow)] overflow-hidden"> |
| 73 | <div className="h-1 bg-[var(--surface-2)]"> |
| 74 | <div |
| 75 | className="h-full bg-[var(--accent)] transition-all duration-500" |
| 76 | style={{ width: step === 'welcome' ? '0%' : step === 'provider' ? '33%' : step === 'project' ? '66%' : '100%' }} |
| 77 | /> |
| 78 | </div> |