letsbe/LetsBeBiz-Site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rebuild voice agent UI — larger layout, contact card, reconnect, no chips

Browse Source 
- Larger orb (w-24), taller transcript (max-h-72), proper scrollIntoView
- On-screen contact confirmation card replaces verbal spell-back
- Reconnect button on connection loss
- Selection chips removed (structured data captured silently)
- Mobile-sticky controls for thumb reach

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-04-06 14:44:28 -04:00
parent cdb89553e0
commit 3cdb95e488
1 changed files with 76 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/configurator/VoiceAgent.tsx
View File

@@ -5,7 +5,6 @@ import { useTranslations } from 'next-intl';
import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion'; import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion';
import { Mic, MicOff, PhoneOff, Loader2 } from 'lucide-react'; import { Mic, MicOff, PhoneOff, Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import Chip from '@/components/ui/Chip';
import { useVoiceAgent, type TranscriptEntry } from './VoiceAgentProvider'; import { useVoiceAgent, type TranscriptEntry } from './VoiceAgentProvider';
import type { WizardFormData } from './WizardContainer'; import type { WizardFormData } from './WizardContainer';
@@ -53,7 +52,6 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
isMicActive, isMicActive,
toggleMic, toggleMic,
transcript, transcript,
selections,
isAnalyzingSite, isAnalyzingSite,
isGeneratingBrief, isGeneratingBrief,
agentAmplitude, agentAmplitude,
@@ -61,16 +59,18 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
endConversation, endConversation,
completedBrief, completedBrief,
completedFormData, completedFormData,
pendingContact,
confirmContact,
updatePendingContact,
canReconnect,
reconnect,
} = useVoiceAgent(); } = useVoiceAgent();
const transcriptEndRef = useRef<HTMLDivElement>(null); const transcriptEndRef = useRef<HTMLDivElement>(null);
// Auto-scroll transcript within its container only // Auto-scroll transcript
useEffect(() => { useEffect(() => {
const el = transcriptEndRef.current; transcriptEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
if (el?.parentElement) {
el.parentElement.scrollTop = el.parentElement.scrollHeight;
}
}, [transcript]); }, [transcript]);
// Handle completion — end the call, then transition // Handle completion — end the call, then transition
@@ -98,32 +98,6 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
['0px 0px 0px rgba(0,100,148,0)', '0px 0px 30px rgba(0,100,148,0.3)'], ['0px 0px 0px rgba(0,100,148,0)', '0px 0px 30px rgba(0,100,148,0.3)'],
); );
// Build selection chips — use i18n for known keys, raw value otherwise
const KNOWN_SERVICES = ['web', 'systems', 'infrastructure'];
const KNOWN_AI_TYPES = ['teammate', 'customer-facing', 'data-intelligence', 'notsure'];
const KNOWN_INDUSTRIES = ['maritime', 'hospitality', 'technology', 'realestate', 'finance', 'ngo', 'other'];
const KNOWN_TIMELINES = ['asap', '1-3months', '3-6months', 'exploring'];
const chipLabels: string[] = [];
if (selections.services) {
for (const svc of selections.services) {
chipLabels.push(KNOWN_SERVICES.includes(svc) ? t(`services.${svc}.title`) : svc);
}
}
if (selections.aiEnabled && selections.aiTypes) {
for (const ai of selections.aiTypes) {
chipLabels.push(KNOWN_AI_TYPES.includes(ai) ? t(`aiTypes.${ai}.title`) : ai);
}
}
if (selections.industry) {
const ind = selections.industry;
chipLabels.push(KNOWN_INDUSTRIES.includes(ind) ? t(`industries.${ind}`) : ind);
}
if (selections.timeline) {
const tl = selections.timeline;
chipLabels.push(KNOWN_TIMELINES.includes(tl) ? t(`timelines.${tl}`) : tl);
}
return ( return (
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
{/* Agent card header */} {/* Agent card header */}
@@ -152,20 +126,20 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
<motion.div <motion.div
style={{ scale: status === 'active' ? orbScale : 1, boxShadow: status === 'active' ? orbGlow : 'none' }} style={{ scale: status === 'active' ? orbScale : 1, boxShadow: status === 'active' ? orbGlow : 'none' }}
className={cn( className={cn(
'w-20 h-20 rounded-full flex items-center justify-center transition-colors duration-300', 'w-24 h-24 rounded-full flex items-center justify-center transition-colors duration-300',
status === 'active' status === 'active'
? 'bg-gradient-to-br from-primary to-primary-dark' ? 'bg-gradient-to-br from-primary to-primary-dark'
: status === 'connecting' : status === 'connecting' || (status === 'idle' && isGeneratingBrief)
? 'bg-primary/20' ? 'bg-primary/20'
: 'bg-surface-low border-2 border-outline-variant/30', : 'bg-surface-low border-2 border-outline-variant/30',
)} )}
> >
{status === 'idle' && ( {status === 'idle' && !isGeneratingBrief && (
<Mic size={28} strokeWidth={1.5} className="text-outline" /> <Mic size={32} strokeWidth={1.5} className="text-outline" />
)} )}
{status === 'connecting' && ( {(status === 'connecting' || (status === 'idle' && isGeneratingBrief)) && (
<motion.div animate={{ rotate: 360 }} transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}> <motion.div animate={{ rotate: 360 }} transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}>
<Loader2 size={28} strokeWidth={1.5} className="text-primary" /> <Loader2 size={32} strokeWidth={1.5} className="text-primary" />
</motion.div> </motion.div>
)} )}
{status === 'active' && ( {status === 'active' && (
@@ -173,7 +147,7 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
animate={{ scale: [1, 1.1, 1] }} animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }} transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
> >
<Mic size={28} strokeWidth={1.5} className="text-white" /> <Mic size={32} strokeWidth={1.5} className="text-white" />
</motion.div> </motion.div>
)} )}
</motion.div> </motion.div>
@@ -203,20 +177,20 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
<motion.div animate={{ rotate: 360 }} transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}> <motion.div animate={{ rotate: 360 }} transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}>
<Loader2 size={11} /> <Loader2 size={11} />
</motion.div> </motion.div>
{locale === 'fr' ? 'Génération de votre brief...' : 'Generating your brief...'} {t('voice.generatingBrief')}
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
{/* Error message */} {/* Error message */}
{errorMessage && ( {errorMessage && !canReconnect && (
<p className="text-xs text-red-600 text-center max-w-xs">{errorMessage}</p> <p className="text-xs text-red-600 text-center max-w-xs">{errorMessage}</p>
)} )}
</div> </div>
{/* Live transcript */} {/* Live transcript */}
{transcript.length > 0 && ( {transcript.length > 0 && (
<div className="rounded-xl border border-outline-variant/30 bg-surface-high p-3 max-h-40 overflow-y-auto scrollbar-thin"> <div className="rounded-xl border border-outline-variant/30 bg-surface-high p-3 max-h-72 overflow-y-auto scrollbar-thin">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{transcript.map((entry, i) => ( {transcript.map((entry, i) => (
<TranscriptBubble key={`${entry.timestamp}-${i}`} entry={entry} /> <TranscriptBubble key={`${entry.timestamp}-${i}`} entry={entry} />
@@ -226,37 +200,58 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
</div> </div>
)} )}
{/* Selection chips */} {/* Contact confirmation card */}
<AnimatePresence> <AnimatePresence>
{chipLabels.length > 0 && ( {pendingContact && !completedBrief && (
<motion.div <motion.div
initial={{ opacity: 0, height: 0 }} initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, height: 'auto' }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, height: 0 }} exit={{ opacity: 0, y: -8 }}
className="overflow-hidden" transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
className="rounded-xl border border-primary/20 bg-primary/5 p-4"
> >
<p className="text-xs font-semibold uppercase tracking-label text-outline mb-2"> <p className="text-xs font-semibold uppercase tracking-label text-outline mb-3">
{t('voice.capturedSoFar')} {t('voice.contactConfirm')}
</p> </p>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-col gap-2">
{chipLabels.map((label, i) => ( <div className="flex items-center gap-2">
<motion.div <label className="text-xs text-outline w-12 flex-shrink-0">
key={label} {t('fields.name')}
initial={{ opacity: 0, scale: 0.8 }} </label>
animate={{ opacity: 1, scale: 1 }} <input
transition={{ delay: i * 0.05, duration: 0.2 }} type="text"
> value={pendingContact.name}
<Chip active>{label}</Chip> onChange={(e) => updatePendingContact('name', e.target.value)}
</motion.div> className="flex-1 text-sm text-on-surface bg-white rounded-lg border border-outline-variant/30 px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary/40"
))} />
</div> </div>
<div className="flex items-center gap-2">
<label className="text-xs text-outline w-12 flex-shrink-0">
{t('fields.email')}
</label>
<input
type="email"
value={pendingContact.email}
onChange={(e) => updatePendingContact('email', e.target.value)}
className="flex-1 text-sm text-on-surface bg-white rounded-lg border border-outline-variant/30 px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary/40"
/>
</div>
</div>
<button
type="button"
onClick={confirmContact}
className="mt-3 w-full py-2 rounded-lg text-xs font-medium text-white transition-all hover:-translate-y-px active:translate-y-0"
style={{ background: 'linear-gradient(135deg, #006494, #5BA4D9)' }}
>
{t('voice.contactConfirmButton')}
</button>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
{/* Controls */} {/* Controls — sticky on mobile for thumb reach */}
<div className="flex items-center justify-center gap-3 pt-2"> <div className="flex items-center justify-center gap-3 pt-2 sticky bottom-0 bg-surface-high/95 backdrop-blur-sm pb-2 -mx-6 px-6 sm:static sm:bg-transparent sm:backdrop-blur-none sm:pb-0 sm:mx-0">
{status === 'idle' && !completedBrief && ( {status === 'idle' && !completedBrief && !isGeneratingBrief && (
<button <button
type="button" type="button"
onClick={startConversation} onClick={startConversation}
@@ -296,6 +291,22 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
{status === 'connecting' && ( {status === 'connecting' && (
<p className="text-sm text-outline animate-pulse">{t('voice.connecting')}</p> <p className="text-sm text-outline animate-pulse">{t('voice.connecting')}</p>
)} )}
{(status === 'error' || canReconnect) && !completedBrief && (
<div className="flex flex-col items-center gap-2">
<p className="text-xs text-outline text-center">
{t('voice.connectionLost')}
</p>
<button
type="button"
onClick={reconnect}
className="flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-medium text-white transition-all hover:-translate-y-px active:translate-y-0"
style={{ background: 'linear-gradient(135deg, #006494, #5BA4D9)' }}
>
{t('voice.reconnect')}
</button>
</div>
)}
</div> </div>
</div> </div>
); );