Now only when the user submits the listening exam are the mp3 are uploaded onto firebase bucket

src/components/ExamEditor/Exercises/Script/index.tsx

@@ -31,7 +31,7 @@ interface MessageWithPosition extends ScriptLine {
 interface Props {
     section: number;
     editing?: boolean;
-    local: Script;
+    local?: Script;
     setLocal: (script: Script) => void;
 }
 
@@ -41,14 +41,32 @@ const colorOptions = [
 ];
 
 const ScriptEditor: React.FC<Props> = ({ section, editing = false, local, setLocal }) => {
+
     const isConversation = [1, 3].includes(section);
+    const speakerCount = section === 1 ? 2 : 4;
+
+    if (local === undefined) {
+        if (isConversation) {
+            setLocal([]);
+        } else {
+            setLocal('');
+        }
+    }
 
     const [selectedSpeaker, setSelectedSpeaker] = useState<string>('');
     const [newMessage, setNewMessage] = useState('');
 
-    const speakerCount = section === 1 ? 2 : 4;
-
     const [speakers, setSpeakers] = useState<Speaker[]>(() => {
+        if (local === undefined) {
+            return Array.from({ length: speakerCount }, (_, index) => ({
+                id: index,
+                name: '',
+                gender: 'male',
+                color: colorOptions[index],
+                position: index % 2 === 0 ? 'left' : 'right'
+            }));
+        }
+        
         const existingScript = local as ScriptLine[];
         const existingSpeakers = new Set<string>();
         const speakerGenders = new Map<string, 'male' | 'female'>();
@@ -226,7 +244,7 @@ const ScriptEditor: React.FC<Props> = ({ section, editing = false, local, setLoc
             <CardContent className="py-10">
                 <div className="space-y-6">
                     {editing && (
-                        <div className="bg-white rounded-2xl p-6 shadow-inner border">
+                        <div className="bg-white rounded-2xl p-6 shadow-inner border mb-8">
                             <h3 className="text-lg font-medium text-gray-700 mb-6">Edit Conversation</h3>
                             <div className="space-y-4 mb-6">
                                 {speakers.map((speaker, index) => (