refactor: remove ModeToggle from configurator, make it typed-form-only
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,69 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Keyboard, Mic } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
interface ModeToggleProps {
|
||||
mode: 'type' | 'talk';
|
||||
onChange: (mode: 'type' | 'talk') => void;
|
||||
}
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ModeToggle({ mode, onChange }: ModeToggleProps) {
|
||||
const t = useTranslations('configurator');
|
||||
const [voiceSupported, setVoiceSupported] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function check() {
|
||||
if (typeof WebSocket === 'undefined') return;
|
||||
if (!navigator.mediaDevices?.getUserMedia) return;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/gemini-token');
|
||||
const data = (await res.json()) as { success: boolean };
|
||||
if (data.success) setVoiceSupported(true);
|
||||
} catch {
|
||||
// silent — toggle stays hidden
|
||||
}
|
||||
}
|
||||
void check();
|
||||
}, []);
|
||||
|
||||
if (!voiceSupported) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 rounded-xl bg-surface-low p-1 border border-outline-variant/30">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange('type')}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200',
|
||||
mode === 'type'
|
||||
? 'bg-white text-on-surface shadow-card'
|
||||
: 'text-outline hover:text-on-surface',
|
||||
)}
|
||||
>
|
||||
<Keyboard size={13} />
|
||||
{t('mode.type')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange('talk')}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200',
|
||||
mode === 'talk'
|
||||
? 'bg-white text-on-surface shadow-card'
|
||||
: 'text-outline hover:text-on-surface',
|
||||
)}
|
||||
>
|
||||
<Mic size={13} />
|
||||
{t('mode.talk')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,9 +8,6 @@ import StepDetails from './StepDetails';
|
||||
import StepContact from './StepContact';
|
||||
import StepGenerating from './StepGenerating';
|
||||
import StepComplete from './StepComplete';
|
||||
import ModeToggle from './ModeToggle';
|
||||
import VoiceAgent from './VoiceAgent';
|
||||
import VoiceAgentProvider from './VoiceAgentProvider';
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -90,7 +87,6 @@ export default function WizardContainer() {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
const [mode, setMode] = useState<'type' | 'talk'>('type');
|
||||
|
||||
const goNext = () => {
|
||||
setDirection(1);
|
||||
@@ -108,7 +104,6 @@ export default function WizardContainer() {
|
||||
setBrief('');
|
||||
setSubmitError(null);
|
||||
setIsGenerating(false);
|
||||
setMode('type');
|
||||
setCurrentStep(1);
|
||||
};
|
||||
|
||||
@@ -144,13 +139,6 @@ export default function WizardContainer() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleVoiceComplete = (voiceBrief: string, voiceFormData: WizardFormData) => {
|
||||
setFormData(voiceFormData);
|
||||
setBrief(voiceBrief);
|
||||
setDirection(1);
|
||||
setCurrentStep(4);
|
||||
};
|
||||
|
||||
const stepVariants = makeVariants(direction);
|
||||
|
||||
const sharedProps: StepProps = {
|
||||
@@ -162,28 +150,8 @@ export default function WizardContainer() {
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden">
|
||||
{!isGenerating && currentStep !== 4 && (
|
||||
<div className="flex justify-center mb-4">
|
||||
<ModeToggle mode={mode} onChange={setMode} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{mode === 'talk' && !isGenerating && currentStep !== 4 && (
|
||||
<motion.div
|
||||
key="voice-mode"
|
||||
variants={stepVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
>
|
||||
<VoiceAgentProvider locale={locale}>
|
||||
<VoiceAgent locale={locale} onComplete={handleVoiceComplete} />
|
||||
</VoiceAgentProvider>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{mode === 'type' && !isGenerating && currentStep === 1 && (
|
||||
{!isGenerating && currentStep === 1 && (
|
||||
<motion.div
|
||||
key="step-1"
|
||||
variants={stepVariants}
|
||||
@@ -195,7 +163,7 @@ export default function WizardContainer() {
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{mode === 'type' && !isGenerating && currentStep === 2 && (
|
||||
{!isGenerating && currentStep === 2 && (
|
||||
<motion.div
|
||||
key="step-2"
|
||||
variants={stepVariants}
|
||||
@@ -207,7 +175,7 @@ export default function WizardContainer() {
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{mode === 'type' && !isGenerating && currentStep === 3 && (
|
||||
{!isGenerating && currentStep === 3 && (
|
||||
<motion.div
|
||||
key="step-3"
|
||||
variants={stepVariants}
|
||||
|
||||
Reference in New Issue
Block a user