Listening Convo Edit and a bunch of ts errors

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

@@ -0,0 +1,86 @@
+import AutoExpandingTextArea from "@/components/Low/AutoExpandingTextarea";
+import { useState } from "react";
+import { FaEdit, FaFemale, FaMale } from "react-icons/fa";
+import { FaTrash } from "react-icons/fa6";
+import { ScriptLine } from ".";
+
+interface MessageProps {
+    message: ScriptLine & { position: 'left' | 'right' };
+    color: string;
+    editing: boolean;
+    onEdit?: (text: string) => void;
+    onDelete?: () => void;
+}
+
+const Message: React.FC<MessageProps> = ({ message, color, editing, onEdit, onDelete }) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [editText, setEditText] = useState(message.text);
+
+    return (
+        <div className={`flex items-start gap-2 ${message.position === 'left' ? 'justify-start' : 'justify-end'}`}>
+            <div className="flex flex-col w-[50%]">
+                <div className={`flex items-center gap-2 ${message.position === 'right' && 'self-end'}`}>
+                    {message.gender === 'male' ? (
+                        <FaMale className="w-5 h-5 text-blue-500" />
+                    ) : (
+                        <FaFemale className="w-5 h-5 text-pink-500" />
+                    )}
+                    <span className="text-sm font-medium">{message.name}</span>
+                </div>
+                <div className={`rounded-lg p-3 bg-${color}-100 relative group mt-1`}>
+                    {isEditing ? (
+                        <div className="flex flex-col gap-2">
+                            <AutoExpandingTextArea
+                                value={editText}
+                                onChange={setEditText}
+                                placeholder="Edit message..."
+                                className="w-full min-h-[96px] px-4 py-2 border border-gray-200 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-base resize-none"
+                            />
+                            <div className="flex justify-between">
+                                <button
+                                    className="px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-sm font-medium"
+                                    onClick={() => {
+                                        onEdit?.(editText);
+                                        setIsEditing(false);
+                                    }}
+                                >
+                                    Save
+                                </button>
+                                <button
+                                    className="px-3 py-1 bg-red-500 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium text-white"
+                                    onClick={() => setIsEditing(false)}
+                                >
+                                    Cancel
+                                </button>
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="flex items-start justify-between gap-2">
+                            <p className="text-gray-700 whitespace-pre-wrap flex-grow">{message.text}</p>
+                            {editing && (
+                                <div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                                    <div className="flex gap-1">
+                                        <button
+                                            onClick={() => setIsEditing(true)}
+                                            className="p-1 rounded hover:bg-gray-200 transition-colors"
+                                        >
+                                            <FaEdit className="w-3.5 h-3.5 text-gray-600" />
+                                        </button>
+                                        <button
+                                            onClick={onDelete}
+                                            className="p-1 rounded hover:bg-gray-200 transition-colors"
+                                        >
+                                            <FaTrash className="w-3.5 h-3.5 text-red-500" />
+                                        </button>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Message;