Listening Convo Edit and a bunch of ts errors

src/components/ExamEditor/SectionRenderer/SectionContext/listening.tsx

@@ -2,10 +2,10 @@ import { useEffect, useState } from "react";
 import { ListeningPart } from "@/interfaces/exam";
 import SectionContext from ".";
 import useExamEditorStore from "@/stores/examEditor";
-import { FaFemale, FaMale } from "react-icons/fa";
 import useSectionEdit from "../../Hooks/useSectionEdit";
-import ScriptRender from "../../Exercises/Shared/Script";
+import ScriptRender from "../../Exercises/Script";
 import { Card, CardContent } from "@/components/ui/card";
+import Dropdown from "@/components/Dropdown";
 
 
 const ListeningContext: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
@@ -15,50 +15,55 @@ const ListeningContext: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
     );
     const listeningPart = state as ListeningPart;
 
-    const [script, setScript] = useState(listeningPart.script);
+    const [scriptLocal, setScriptLocal] = useState(listeningPart.script);
 
     const { editing, handleSave, handleDiscard, modeHandle, setEditing } = useSectionEdit({
         sectionId,
         mode: "edit",
         onSave: () => {
             const newState = { ...listeningPart };
-            newState.script = script;
+            newState.script = scriptLocal;
             dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState } })
             setEditing(false);
         },
         onDiscard: () => {
-            setScript(listeningPart.script);
+            setScriptLocal(listeningPart.script);
         },
     });
 
     useEffect(() => {
         if (genResult !== undefined && generating === "context") {
             setEditing(true);
-            setScript(genResult[0].script)
+            setScriptLocal(genResult[0].script);
             dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined } })
         }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [genResult, dispatch, sectionId, setEditing, currentModule]);
 
     const renderContent = (editing: boolean) => {
-
-        if (script === undefined && !editing) {
-            return (<p className="w-full text-gray-600 px-7 py-8 border-2 bg-white rounded-3xl whitespace-pre-line">
-                Generate or import audio to add exercises!
-            </p>
-            )
+        if (scriptLocal === undefined) {
+            return (
+                <Card>
+                    <CardContent className="py-10">
+                        <span>Edit, generate or import your own audio.</span>
+                    </CardContent>
+                </Card>
+            );
         }
-
         return (
-            <Card>
-                <CardContent className="py-10">
-                    <ScriptRender
-                        script={script}
-                        setScript={setScript}
-                        editing={editing}
-                    />
-                </CardContent>
-            </Card>
+
+            <Dropdown
+                className={`w-full text-left p-4 mb-2 bg-gradient-to-r from-ielts-${currentModule}/60 to-ielts-${currentModule} text-white rounded-lg shadow-lg transition-transform transform hover:scale-102`}
+                title="Conversation"
+                contentWrapperClassName="rounded-xl"
+            >
+                <ScriptRender
+                    local={scriptLocal}
+                    setLocal={setScriptLocal}
+                    section={sectionId}
+                    editing={editing}
+                />
+            </Dropdown>
         );
     };