Update src/App.tsx

src/App.tsx

@@ -1,6 +1,8 @@
-// src/App.tsx
-import React, { useEffect, useRef, useState } from "react";
+// src/App.tsx (نسخه یکپارچه و نهایی)
+
+import React, { useEffect, useRef, useState, FC } from "react";
 import './App.scss';
+// AppContext را از مسیر درست ایمپورت می‌کنیم
 import { AppProvider, useAppContext, PersonalityType, PersonalityInstructions } from "./contexts/AppContext";
 import ControlTray from "./components/control-tray/ControlTray";
 import { IOSModal } from "./components/ios-modal/IOSModal";
@@ -8,9 +10,71 @@ import { isIOS } from "./lib/platform";
 import cn from "classnames";
 import Logo from "./components/logo/Logo";
 import { LiveConfig } from "./multimodal-live-types";
-import { CustomModal } from "./components/CustomModal";
 
-// منوی شخصیت‌ها (به صورت یک کامپوننت داخلی ساده)
+// ===================================================================
+// START: کامپوننت مودال مستقیماً اینجا تعریف شده است
+// ===================================================================
+interface CustomModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (name: string, instructions: string) => void;
+  initialName: string;
+  initialInstructions: string;
+}
+
+const CustomModal: FC<CustomModalProps> = ({ isOpen, onClose, onSave, initialName, initialInstructions }) => {
+  const [name, setName] = useState(initialName);
+  const [instructions, setInstructions] = useState(initialInstructions);
+
+  useEffect(() => {
+    if (isOpen) {
+      setName(initialName);
+      setInstructions(initialInstructions);
+    }
+  }, [isOpen, initialName, initialInstructions]);
+
+  if (!isOpen) return null;
+
+  const handleSave = () => {
+    if (name.trim() && instructions.trim()) {
+      onSave(name.trim(), instructions.trim());
+      onClose();
+    } else {
+      alert("لطفا نام و دستورالعمل‌ها را وارد کنید.");
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>ساخت شخصیت اختصاصی</h3>
+          <button className="close-button" onClick={onClose}>×</button>
+        </div>
+        <div className="modal-body">
+          <div className="form-group">
+            <label htmlFor="name">نام شما (برای صدا زدن)</label>
+            <input id="name" type="text" placeholder="مثلا: علی" value={name} onChange={(e) => setName(e.target.value)} />
+          </div>
+          <div className="form-group">
+            <label htmlFor="instructions">دستورالعمل‌های شخصیت</label>
+            <textarea id="instructions" placeholder="مثلا: خیلی خودمونی و بامزه صحبت کن..." value={instructions} onChange={(e) => setInstructions(e.target.value)} rows={6} />
+            <small>اینجا فقط رفتار و سبک صحبت کردن دستیار را مشخص کنید.</small>
+          </div>
+        </div>
+        <div className="modal-footer">
+          <button className="save-button" onClick={handleSave}>ذخیره و فعال‌سازی</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+// ===================================================================
+// END: تعریف کامپوننت مودال
+// ===================================================================
+
+
+// کامپوننت منوی شخصیت‌ها (به صورت یک کامپوننت داخلی ساده)
 const PersonalityMenu: React.FC<{ isOpen: boolean; onClose: () => void; onSelect: (p: PersonalityType) => void; }> = ({ isOpen, onClose, onSelect }) => {
   const menuRef = useRef<HTMLDivElement>(null);
   const { selectedPersonality } = useAppContext();