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:
2026-04-06 14:38:43 -04:00
parent a5570a90b2
commit bcc24d0f40
2 changed files with 3 additions and 104 deletions

View File

@@ -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>
);
}

View File

@@ -8,9 +8,6 @@ import StepDetails from './StepDetails';
import StepContact from './StepContact'; import StepContact from './StepContact';
import StepGenerating from './StepGenerating'; import StepGenerating from './StepGenerating';
import StepComplete from './StepComplete'; import StepComplete from './StepComplete';
import ModeToggle from './ModeToggle';
import VoiceAgent from './VoiceAgent';
import VoiceAgentProvider from './VoiceAgentProvider';
// ─── Types ──────────────────────────────────────────────────────────────────── // ─── Types ────────────────────────────────────────────────────────────────────
@@ -90,7 +87,6 @@ export default function WizardContainer() {
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [isGenerating, setIsGenerating] = useState(false); const [isGenerating, setIsGenerating] = useState(false);
const [submitError, setSubmitError] = useState<string | null>(null); const [submitError, setSubmitError] = useState<string | null>(null);
const [mode, setMode] = useState<'type' | 'talk'>('type');
const goNext = () => { const goNext = () => {
setDirection(1); setDirection(1);
@@ -108,7 +104,6 @@ export default function WizardContainer() {
setBrief(''); setBrief('');
setSubmitError(null); setSubmitError(null);
setIsGenerating(false); setIsGenerating(false);
setMode('type');
setCurrentStep(1); 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 stepVariants = makeVariants(direction);
const sharedProps: StepProps = { const sharedProps: StepProps = {
@@ -162,28 +150,8 @@ export default function WizardContainer() {
return ( return (
<div className="relative overflow-hidden"> <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}> <AnimatePresence mode="wait" initial={false}>
{mode === 'talk' && !isGenerating && currentStep !== 4 && ( {!isGenerating && currentStep === 1 && (
<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 && (
<motion.div <motion.div
key="step-1" key="step-1"
variants={stepVariants} variants={stepVariants}
@@ -195,7 +163,7 @@ export default function WizardContainer() {
</motion.div> </motion.div>
)} )}
{mode === 'type' && !isGenerating && currentStep === 2 && ( {!isGenerating && currentStep === 2 && (
<motion.div <motion.div
key="step-2" key="step-2"
variants={stepVariants} variants={stepVariants}
@@ -207,7 +175,7 @@ export default function WizardContainer() {
</motion.div> </motion.div>
)} )}
{mode === 'type' && !isGenerating && currentStep === 3 && ( {!isGenerating && currentStep === 3 && (
<motion.div <motion.div
key="step-3" key="step-3"
variants={stepVariants} variants={stepVariants}