Update src/App.tsx

src/App.tsx

@@ -1,8 +1,6 @@
-// src/App.tsx (نسخه یکپارچه و نهایی)
-
+// 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";
@@ -11,9 +9,7 @@ import cn from "classnames";
 import Logo from "./components/logo/Logo";
 import { LiveConfig } from "./multimodal-live-types";
 
-// ===================================================================
-// START: کامپوننت مودال مستقیماً اینجا تعریف شده است
-// ===================================================================
+// کامپوننت مودال (که قبلاً در فایل جدا بود، برای سادگی اینجا قرار گرفته)
 interface CustomModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -21,74 +17,48 @@ interface CustomModalProps {
   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("لطفا نام و دستورالعمل‌ها را وارد کنید.");
-    }
+    } 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-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 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();
   const personalityIcons: Record<PersonalityType, string> = { default: "person", teacher: "school", poetic: "auto_awesome", funny: "sentiment_satisfied", custom: "tune" };
   const personalityLabels: Record<PersonalityType, string> = { default: 'دستیار پیش‌فرض', teacher: 'استاد زبان', poetic: 'حس خوب', funny: 'شوخ‌طبع', custom: 'شخصیت اختصاصی' };
-
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => menuRef.current && !menuRef.current.contains(e.target as Node) && onClose();
     if (isOpen) document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [isOpen, onClose]);
-
   if (!isOpen) return null;
-
   return (
     <div ref={menuRef} className="personality-popover-wrapper open">
       <div className="popover-content">
@@ -116,30 +86,26 @@ const AppInternal: React.FC = () => {
   const [isNotificationOpen, setIsNotificationOpen] = useState(false);
   const [isPersonalityMenuOpen, setIsPersonalityMenuOpen] = useState(false);
   const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
-
   const handleSelectPersonality = (p: PersonalityType) => {
     setIsPersonalityMenuOpen(false);
     if (p === 'custom') setIsCustomModalOpen(true);
     else changePersonality(p);
   };
-
   return (
     <>
-      <div className="main-wrapper">
+      <div className="main-wrapper"> {/* ✅ این ساختار اصلی حفظ شده است */}
         <div className="header-controls">
-          <button aria-label="انتخاب شخصیت" className="header-icon-button" onClick={() => setIsPersonalityMenuOpen(true)}>
+          <button aria-label="انتخاب شخصیت" className="header-icon-button" onClick={() => setIsPersonalityMenuOpen(v => !v)}>
             <span className="material-symbols-outlined">psychology</span>
           </button>
           <button aria-label="اطلاعات" className="header-icon-button" onClick={() => setIsNotificationOpen(v => !v)}>
             <span className="material-symbols-outlined">info</span>
           </button>
         </div>
-
         {isNotificationOpen && <div className="notification-popover-wrapper open"><div className="popover-content">مدل‌های هوش مصنوعی می‌توانند اشتباه کنند.</div></div>}
-        
         <PersonalityMenu isOpen={isPersonalityMenuOpen} onClose={() => setIsPersonalityMenuOpen(false)} onSelect={handleSelectPersonality} />
-
-        <div className="media-area">
+        
+        <div className="media-area"> {/* ✅ این بخش برای نمایش ویدیو و لوگو ضروری است */}
           <video id="video-feed" ref={videoRef} autoPlay playsInline className={cn({ hidden: !isCamActive }, { "scale-x-[-1]": currentFacingMode === 'user' })} />
           {isMicActive && !isCamActive && <div id="large-logo-container"><Logo isMini={false} isActive={true} isAi={false} speakingVolume={volume} isUserSpeaking={isUserSpeaking} /></div>}
         </div>
@@ -156,7 +122,6 @@ function App() {
   const [showIOSModal, setShowIOSModal] = useState(false);
   const [personalityInstructions, setPersonalityInstructions] = useState<PersonalityInstructions | null>(null);
   const [loadingError, setLoadingError] = useState<string | null>(null);
-
   useEffect(() => {
     if (isIOS()) setShowIOSModal(true);
     const fetchInstructions = async () => {
@@ -170,12 +135,9 @@ function App() {
     };
     fetchInstructions();
   }, []);
-
   if (loadingError) return <div className="loading-screen">{loadingError}</div>;
   if (!personalityInstructions) return <div className="loading-screen">در حال بارگذاری...</div>;
-
   const initialAppConfig: LiveConfig = { model: "models/gemini-2.0-flash-exp" };
-
   return (
     <AppProvider initialConfig={initialAppConfig} personalityInstructions={personalityInstructions}>
       <AppInternal />
@@ -183,5 +145,4 @@ function App() {
     </AppProvider>
   );
 }
-
 export default App;