Listening Convo Edit and a bunch of ts errors

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

@@ -1,134 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Script } from '@/interfaces/exam';
-import { FaFemale, FaMale } from "react-icons/fa";
-import AutoExpandingTextArea from '@/components/Low/AutoExpandingTextarea';
-import clsx from 'clsx';
-
-const colorOptions = [
-    'red', 'blue', 'green', 'purple', 'pink', 'indigo', 'teal', 'orange',
-    'cyan', 'emerald', 'sky', 'violet', 'fuchsia', 'rose', 'lime', 'slate'
-];
-
-interface Speaker {
-    id: number;
-    name: string;
-    gender: 'male' | 'female';
-    color: string;
-    position: 'left' | 'right';
-}
-
-interface Props {
-    script?: Script;
-    setScript: React.Dispatch<React.SetStateAction<Script | undefined>>;
-    editing?: boolean;
-}
-
-const ScriptRender: React.FC<Props> = ({ script, setScript, editing = false }) => {
-    const [speakers, setSpeakers] = useState<Speaker[]>(() => {
-        if (!script || typeof script === 'string') return [];
-        
-        const uniqueSpeakers = new Map();
-        const usedColors = new Set();
-        let isLeft = true;
-
-        script.forEach((line, index) => {
-            if (!uniqueSpeakers.has(line.name)) {
-                const availableColors = colorOptions.filter(color => !usedColors.has(color));
-                if (availableColors.length === 0) {
-                    usedColors.clear();
-                }
-                const randomColor = availableColors[Math.floor(Math.random() * availableColors.length)];
-                usedColors.add(randomColor);
-
-                uniqueSpeakers.set(line.name, {
-                    id: index,
-                    name: line.name,
-                    gender: line.gender,
-                    color: randomColor,
-                    position: isLeft ? 'left' : 'right'
-                });
-                isLeft = !isLeft;
-            }
-        });
-        return Array.from(uniqueSpeakers.values());
-    });
-
-    const speakerProperties = useMemo(() => {
-        return speakers.reduce((acc, speaker) => {
-            acc[speaker.name] = {
-                color: speaker.color,
-                position: speaker.position
-            };
-            return acc;
-        }, {} as Record<string, { color: string; position: 'left' | 'right' }>);
-    }, [speakers]);
-
-    if (script === undefined) return null;
-
-    if (typeof script === 'string') {
-        return (
-            <div className="w-full px-4">
-                {editing ? (
-                    <AutoExpandingTextArea
-                        className="w-full p-3 border rounded bg-white"
-                        value={script}
-                        onChange={(text) => setScript(text)}
-                    />
-                ) : (
-                    <p className="text-gray-700 p-3 bg-gray-100 rounded-lg" dangerouslySetInnerHTML={{ __html: script.split("\n").join("<br>") }} />
-                )}
-            </div>
-        );
-    }
-
-    const updateMessage = (index: number, newText: string) => {
-        setScript([
-            ...script.slice(0, index),
-            { ...script[index], text: newText },
-            ...script.slice(index + 1)
-        ]);
-    };
-
-    return (
-        <div className="w-full px-4">
-            <div className="space-y-2">
-                {script.map((line, index) => {
-                    const { color, position } = speakerProperties[line.name];
-
-                    return (
-                        <div
-                            key={index}
-                            className={`flex items-start gap-2 ${position === 'left' ? 'justify-start' : 'justify-end'}`}
-                        >
-                            <div className="flex flex-col w-[50%]">
-                                <div className={clsx('flex', position !== 'left' && 'self-end')}>
-                                    {line.gender === 'male' ? (
-                                        <FaMale className="w-5 h-5 text-blue-500 mb-1" />
-                                    ) : (
-                                        <FaFemale className="w-5 h-5 text-pink-500 mb-1" />
-                                    )}
-                                    <span className="text-sm mb-1">
-                                        {line.name}
-                                    </span>
-                                </div>
-                                <div className={`rounded-lg p-3 bg-${color}-100`}>
-                                    {editing ? (
-                                        <AutoExpandingTextArea
-                                            className="w-full p-2 border rounded bg-white"
-                                            value={line.text}
-                                            onChange={(text) => updateMessage(index, text)}
-                                        />
-                                    ) : (
-                                        <p className="text-gray-700">{line.text}</p>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
-};
-
-export default ScriptRender;