From 3cdb95e488667b350be35de97fb8b6fc8d3a2344 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Mon, 6 Apr 2026 14:44:28 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20rebuild=20voice=20agent=20UI=20?=
 =?UTF-8?q?=E2=80=94=20larger=20layout,=20contact=20card,=20reconnect,=20n?=
 =?UTF-8?q?o=20chips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/components/configurator/VoiceAgent.tsx | 141 +++++++++++----------
 1 file changed, 76 insertions(+), 65 deletions(-)

diff --git a/src/components/configurator/VoiceAgent.tsx b/src/components/configurator/VoiceAgent.tsx
index c878c77..70a60de 100644
--- a/src/components/configurator/VoiceAgent.tsx
+++ b/src/components/configurator/VoiceAgent.tsx
@@ -5,7 +5,6 @@ import { useTranslations } from 'next-intl';
 import { motion, AnimatePresence, useMotionValue, useTransform } from 'framer-motion';
 import { Mic, MicOff, PhoneOff, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import Chip from '@/components/ui/Chip';
 import { useVoiceAgent, type TranscriptEntry } from './VoiceAgentProvider';
 import type { WizardFormData } from './WizardContainer';
 
@@ -53,7 +52,6 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
     isMicActive,
     toggleMic,
     transcript,
-    selections,
     isAnalyzingSite,
     isGeneratingBrief,
     agentAmplitude,
@@ -61,16 +59,18 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
     endConversation,
     completedBrief,
     completedFormData,
+    pendingContact,
+    confirmContact,
+    updatePendingContact,
+    canReconnect,
+    reconnect,
   } = useVoiceAgent();
 
   const transcriptEndRef = useRef<HTMLDivElement>(null);
 
-  // Auto-scroll transcript within its container only
+  // Auto-scroll transcript
   useEffect(() => {
-    const el = transcriptEndRef.current;
-    if (el?.parentElement) {
-      el.parentElement.scrollTop = el.parentElement.scrollHeight;
-    }
+    transcriptEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
   }, [transcript]);
 
   // 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)'],
   );
 
-  // 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 (
     <div className="flex flex-col gap-5">
       {/* Agent card header */}
@@ -152,20 +126,20 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
         <motion.div
           style={{ scale: status === 'active' ? orbScale : 1, boxShadow: status === 'active' ? orbGlow : 'none' }}
           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'
               ? 'bg-gradient-to-br from-primary to-primary-dark'
-              : status === 'connecting'
+              : status === 'connecting' || (status === 'idle' && isGeneratingBrief)
                 ? 'bg-primary/20'
                 : 'bg-surface-low border-2 border-outline-variant/30',
           )}
         >
-          {status === 'idle' && (
-            <Mic size={28} strokeWidth={1.5} className="text-outline" />
+          {status === 'idle' && !isGeneratingBrief && (
+            <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' }}>
-              <Loader2 size={28} strokeWidth={1.5} className="text-primary" />
+              <Loader2 size={32} strokeWidth={1.5} className="text-primary" />
             </motion.div>
           )}
           {status === 'active' && (
@@ -173,7 +147,7 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
               animate={{ scale: [1, 1.1, 1] }}
               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>
@@ -203,20 +177,20 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
               <motion.div animate={{ rotate: 360 }} transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}>
                 <Loader2 size={11} />
               </motion.div>
-              {locale === 'fr' ? 'Génération de votre brief...' : 'Generating your brief...'}
+              {t('voice.generatingBrief')}
             </motion.div>
           )}
         </AnimatePresence>
 
         {/* Error message */}
-        {errorMessage && (
+        {errorMessage && !canReconnect && (
           <p className="text-xs text-red-600 text-center max-w-xs">{errorMessage}</p>
         )}
       </div>
 
       {/* Live transcript */}
       {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">
             {transcript.map((entry, i) => (
               <TranscriptBubble key={`${entry.timestamp}-${i}`} entry={entry} />
@@ -226,37 +200,58 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
         </div>
       )}
 
-      {/* Selection chips */}
+      {/* Contact confirmation card */}
       <AnimatePresence>
-        {chipLabels.length > 0 && (
+        {pendingContact && !completedBrief && (
           <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            className="overflow-hidden"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            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">
-              {t('voice.capturedSoFar')}
+            <p className="text-xs font-semibold uppercase tracking-label text-outline mb-3">
+              {t('voice.contactConfirm')}
             </p>
-            <div className="flex flex-wrap gap-1.5">
-              {chipLabels.map((label, i) => (
-                <motion.div
-                  key={label}
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ delay: i * 0.05, duration: 0.2 }}
-                >
-                  <Chip active>{label}</Chip>
-                </motion.div>
-              ))}
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2">
+                <label className="text-xs text-outline w-12 flex-shrink-0">
+                  {t('fields.name')}
+                </label>
+                <input
+                  type="text"
+                  value={pendingContact.name}
+                  onChange={(e) => updatePendingContact('name', 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 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>
         )}
       </AnimatePresence>
 
-      {/* Controls */}
-      <div className="flex items-center justify-center gap-3 pt-2">
-        {status === 'idle' && !completedBrief && (
+      {/* Controls — sticky on mobile for thumb reach */}
+      <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 && !isGeneratingBrief && (
           <button
             type="button"
             onClick={startConversation}
@@ -296,6 +291,22 @@ export default function VoiceAgent({ locale, onComplete }: VoiceAgentProps) {
         {status === 'connecting' && (
           <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>
   );