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";
@@ -8,59 +8,58 @@ import { isIOS } from "./lib/platform";
 import cn from "classnames";
 import Logo from "./components/logo/Logo";
 import { LiveConfig } from "./multimodal-live-types";
+import { speakers } from "./data/speakers"; // <-- ایمپورت داده‌های گویندگان
 
-// کامپوننت مودال (که قبلاً در فایل جدا بود، برای سادگی اینجا قرار گرفته)
-interface CustomModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSave: (name: string, instructions: string) => void;
-  initialName: string;
-  initialInstructions: string;
-}
+// کامپوننت مودال (بدون تغییر)
+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]);
+  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>
-  );
+  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> );
 };
 
 // کامپوننت منوی شخصیت‌ها
-const PersonalityMenu: React.FC<{ isOpen: boolean; onClose: () => void; onSelect: (p: PersonalityType) => void; }> = ({ isOpen, onClose, onSelect }) => {
+const PersonalityMenu: React.FC<{ isOpen: boolean; onClose: () => void; onSelectPersonality: (p: PersonalityType) => void; }> = ({ isOpen, onClose, onSelectPersonality }) => {
   const menuRef = useRef<HTMLDivElement>(null);
-  const { selectedPersonality } = useAppContext();
+  const { selectedPersonality, selectedVoice, changeVoice } = 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"><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={() => onSelectPersonality(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>
+        {/* ✅ تغییر اصلی: اضافه شدن گالری گویندگان */}
+        <hr className="menu-divider" />
+        <h4 className="menu-subtitle">انتخاب گوینده</h4>
+        <div className="voice-grid">
+          {speakers.map(speaker => (
+            <div key={speaker.id} className={cn("voice-card", { active: selectedVoice === speaker.id })} onClick={() => changeVoice(speaker.id)} title={speaker.name}>
+              <img src={speaker.imgUrl} alt={speaker.name} loading="lazy" />
+              <div className="voice-name">{speaker.name.split(' ')[0]}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
   );
 };
 
@@ -86,9 +85,7 @@ const AppInternal: React.FC = () => {
   
   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);
-      }
+      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);
@@ -99,22 +96,18 @@ const AppInternal: React.FC = () => {
       <div className="main-wrapper">
         <div className="header-controls">
           <button aria-label="انتخاب شخصیت" className="header-icon-button" onClick={() => setIsPersonalityMenuOpen(v => !v)}>
-            {/* ✅ تغییر اصلی اینجاست */}
             <span className="material-symbols-outlined">account_circle</span>
           </button>
           <button ref={notificationButtonRef} aria-label="اطلاعات" className="header-icon-button" onClick={() => setIsNotificationOpen(v => !v)}>
             <span className="material-symbols-outlined">info</span>
           </button>
         </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} />
-        
+        <PersonalityMenu isOpen={isPersonalityMenuOpen} onClose={() => setIsPersonalityMenuOpen(false)} onSelectPersonality={handleSelectPersonality} />
         <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>}