Update src/App.tsx

src/App.tsx

@@ -1,4 +1,4 @@
-// src/App.tsx (نسخه نهایی و تصحیح شده برای رفع مشکل ظاهری)
+// src/App.tsx (نسخه نهایی و کامل)
 import React, { useEffect, useRef, useState, FC } from "react";
 import './App.scss';
 import { AppProvider, useAppContext, PersonalityType, PersonalityInstructions } from "./contexts/AppContext";
@@ -39,7 +39,7 @@ const CustomModal: FC<CustomModalProps> = ({ isOpen, onClose, onSave, initialNam
         <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 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>
@@ -60,18 +60,7 @@ const PersonalityMenu: React.FC<{ isOpen: boolean; onClose: () => void; onSelect
   }, [isOpen, onClose]);
   if (!isOpen) return null;
   return (
-    <div ref={menuRef} className="personality-popover-wrapper open">
-      <div className="popover-content">
-        <ul>
-          {(Object.keys(personalityIcons) as PersonalityType[]).map(key => (
-            <li key={key} className={cn({ active: selectedPersonality === key })} onClick={() => onSelect(key)}>
-              <div><span className="material-symbols-outlined">{personalityIcons[key]}</span>{personalityLabels[key]}</div>
-              {selectedPersonality === key && <span className="material-symbols-outlined tick">done</span>}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
+    <div ref={menuRef} className="personality-popover-wrapper open"><div className="popover-content"><ul>{(Object.keys(personalityIcons) as PersonalityType[]).map(key => (<li key={key} className={cn({ active: selectedPersonality === key })} onClick={() => onSelect(key)}><div><span className="material-symbols-outlined">{personalityIcons[key]}</span>{personalityLabels[key]}</div>{selectedPersonality === key && <span className="material-symbols-outlined tick">done</span>}</li>))}</ul></div></div>
   );
 };
 
@@ -86,30 +75,49 @@ const AppInternal: React.FC = () => {
   const [isNotificationOpen, setIsNotificationOpen] = useState(false);
   const [isPersonalityMenuOpen, setIsPersonalityMenuOpen] = useState(false);
   const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
+  const notificationButtonRef = useRef<HTMLButtonElement>(null);
+  const notificationPopoverRef = useRef<HTMLDivElement>(null);
+
   const handleSelectPersonality = (p: PersonalityType) => {
     setIsPersonalityMenuOpen(false);
     if (p === 'custom') setIsCustomModalOpen(true);
     else changePersonality(p);
   };
+  
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isNotificationOpen && notificationPopoverRef.current && !notificationPopoverRef.current.contains(event.target as Node) && notificationButtonRef.current && !notificationButtonRef.current.contains(event.target as Node)) {
+        setIsNotificationOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isNotificationOpen]);
+
   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>
           </button>
-          <button aria-label="اطلاعات" className="header-icon-button" onClick={() => setIsNotificationOpen(v => !v)}>
+          <button ref={notificationButtonRef} 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>}
+        
+        <div ref={notificationPopoverRef} id="notification-popover-wrapper" className="notification-popover-wrapper">
+          <div id="notification-popover" className={cn("popover-content", { "open animate-popover-open-top-center": isNotificationOpen, "animate-popover-close-top-center": !isNotificationOpen && document.getElementById('notification-popover')?.classList.contains('open'), })}>
+            <div className="notification-popover-text-content">مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید و از بیان اطلاعات حساس بپرهیزید.</div>
+          </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>
-
         <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} />
@@ -129,9 +137,7 @@ function App() {
         const res = await fetch('/api/instructions');
         if (!res.ok) throw new Error(`Network error: ${res.status}`);
         setPersonalityInstructions(await res.json());
-      } catch (e) {
-        setLoadingError("امکان دریافت تنظیمات شخصیت‌ها وجود ندارد. لطفاً صفحه را رفرش کنید.");
-      }
+      } catch (e) { setLoadingError("امکان دریافت تنظیمات شخصیت‌ها وجود ندارد. لطفاً صفحه را رفرش کنید."); }
     };
     fetchInstructions();
   }, []);
@@ -139,10 +145,7 @@ function App() {
   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 />
-      <IOSModal isOpen={showIOSModal} onClose={() => setShowIOSModal(false)} />
-    </AppProvider>
+    <AppProvider initialConfig={initialAppConfig} personalityInstructions={personalityInstructions}><AppInternal /><IOSModal isOpen={showIOSModal} onClose={() => setShowIOSModal(false)} /></AppProvider>
   );
 }
 export default App;