Update src/App.tsx

src/App.tsx

@@ -1,4 +1,4 @@
-// src/App.tsx (نسخه نهایی با رفع خطای isAppCamActive)
+// src/App.tsx (نسخه نهایی و تصحیح شده برای رفع مشکل ظاهری)
 import React, { useEffect, useRef, useState, FC } from "react";
 import './App.scss';
 import { AppProvider, useAppContext, PersonalityType, PersonalityInstructions } from "./contexts/AppContext";
@@ -9,7 +9,7 @@ import cn from "classnames";
 import Logo from "./components/logo/Logo";
 import { LiveConfig } from "./multimodal-live-types";
 
-// کامپوننت مودال
+// کامپوننت مودال (که قبلاً در فایل جدا بود، برای سادگی اینجا قرار گرفته)
 interface CustomModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -21,22 +21,27 @@ const CustomModal: FC<CustomModalProps> = ({ isOpen, onClose, onSave, initialNam
   const [name, setName] = useState(initialName);
   const [instructions, setInstructions] = useState(initialInstructions);
   useEffect(() => {
-    if (isOpen) { setName(initialName); setInstructions(initialInstructions); }
+    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("لطفا نام و دستورالعمل‌ها را وارد کنید."); }
+    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} /></div>
+          <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 className="modal-footer"><button className="save-button" onClick={handleSave}>ذخیره و فعال‌سازی</button></div>
       </div>
     </div>
   );
@@ -88,7 +93,7 @@ const AppInternal: React.FC = () => {
   };
   return (
     <>
-      <div className="main-wrapper">
+      <div className="main-wrapper"> {/* ✅ این ساختار اصلی حفظ شده است */}
         <div className="header-controls">
           <button aria-label="انتخاب شخصیت" className="header-icon-button" onClick={() => setIsPersonalityMenuOpen(v => !v)}>
             <span className="material-symbols-outlined">psychology</span>
@@ -100,28 +105,12 @@ const AppInternal: React.FC = () => {
         {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">
-          <video 
-            id="video-feed" 
-            ref={videoRef} 
-            autoPlay 
-            playsInline 
-            className={cn('absolute top-0 left-0 w-full h-full object-cover', { hidden: !isCamActive }, { "scale-x-[-1]": currentFacingMode === 'user' })} 
-          />
+        <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>
 
-        {/* ✅✅✅ رفع خطا اینجاست ✅✅✅ */}
-        <ControlTray 
-            videoRef={videoRef} 
-            onUserSpeakingChange={setIsUserSpeaking} 
-            isAppMicActive={isMicActive} 
-            onAppMicToggle={setIsMicActive} 
-            isAppCamActive={isCamActive} /* <-- متغیر صحیح پاس داده شد */
-            onAppCamToggle={setIsCamActive} 
-            currentFacingMode={currentFacingMode} 
-            onFacingModeChange={setCurrentFacingMode} 
-        />
+        <ControlTray videoRef={videoRef} onUserSpeakingChange={setIsUserSpeaking} isAppMicActive={isMicActive} onAppMicToggle={setIsMicActive} isAppCamActive={isCamActive} onAppCamToggle={setIsCamActive} currentFacingMode={currentFacingMode} onFacingModeChange={setCurrentFacingMode} />
       </div>
       <CustomModal isOpen={isCustomModalOpen} onClose={() => setIsCustomModalOpen(false)} onSave={(name, instructions) => changePersonality('custom', { name, instructions })} initialName={customUserName} initialInstructions={customInstructions} />
     </>