From b5c53604a6c71d37bfb96c1435aa7f211c78262e Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Tue, 9 Dec 2025 14:37:23 +0000
Subject: [PATCH] Fix voice preview not updating when age category changes

- Clear all cached previews for a role when age changes
- Clear all cached previews for a role when voice changes
- Now preview correctly reflects the selected age speed modifier
---
 .../src/components/VoiceAssignmentSection.tsx | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/VoiceAssignmentSection.tsx b/frontend/src/components/VoiceAssignmentSection.tsx
index b132e10..f3b9c08 100644
--- a/frontend/src/components/VoiceAssignmentSection.tsx
+++ b/frontend/src/components/VoiceAssignmentSection.tsx
@@ -164,27 +164,32 @@ export default function VoiceAssignmentSection({
 
   const handleVoiceSelect = (roleId: string, voiceId: string) => {
     onVoiceChange(roleId, voiceId);
-    // Clear cached preview when voice changes
-    const cacheKey = `${roleId}-${voiceId}`;
+    // Clear all cached previews for this role when voice changes
     setAudioCache(prev => {
       const newCache = new Map(prev);
-      newCache.delete(cacheKey);
+      // Remove all cache entries that start with this roleId
+      Array.from(newCache.keys()).forEach(key => {
+        if (key.startsWith(`${roleId}-`)) {
+          newCache.delete(key);
+        }
+      });
       return newCache;
     });
   };
 
   const handleAgeSelect = (roleId: string, age: AgeCategory) => {
     onAgeChange(roleId, age);
-    // Clear cached preview when age changes
-    const voiceId = voiceAssignments.get(roleId);
-    if (voiceId) {
-      const cacheKey = `${roleId}-${voiceId}`;
-      setAudioCache(prev => {
-        const newCache = new Map(prev);
-        newCache.delete(cacheKey);
-        return newCache;
+    // Clear all cached previews for this role when age changes
+    setAudioCache(prev => {
+      const newCache = new Map(prev);
+      // Remove all cache entries that start with this roleId
+      Array.from(newCache.keys()).forEach(key => {
+        if (key.startsWith(`${roleId}-`)) {
+          newCache.delete(key);
+        }
       });
-    }
+      return newCache;
+    });
   };
 
   const handlePreview = async (roleId: string) => {