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,7 +8,7 @@ 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"; // <-- ایمپورت داده‌های گویندگان
+import { speakers } from "./data/speakers";
 
 // کامپوننت مودال (بدون تغییر)
 interface CustomModalProps { isOpen: boolean; onClose: () => void; onSave: (name: string, instructions: string) => void; initialName: string; initialInstructions: string; }
@@ -22,12 +22,14 @@ const CustomModal: FC<CustomModalProps> = ({ isOpen, onClose, onSave, initialNam
 };
 
 // کامپوننت منوی شخصیت‌ها
-const PersonalityMenu: React.FC<{ isOpen: boolean; onClose: () => void; onSelectPersonality: (p: PersonalityType) => void; }> = ({ isOpen, onClose, onSelectPersonality }) => {
+const PersonalityMenu: React.FC<{ isOpen: boolean; onClose: () => void; onSelectPersonality: (p: PersonalityType) => void; volume: number; }> = ({ isOpen, onClose, onSelectPersonality, volume }) => {
   const menuRef = useRef<HTMLDivElement>(null);
   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: 'شخصیت اختصاصی' };
   
+  const selectedSpeaker = speakers.find(s => s.id === selectedVoice) || speakers[0];
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => menuRef.current && !menuRef.current.contains(e.target as Node) && onClose();
     if (isOpen) document.addEventListener('mousedown', handleClickOutside);
@@ -39,6 +41,17 @@ const PersonalityMenu: React.FC<{ isOpen: boolean; onClose: () => void; onSelect
   return (
     <div ref={menuRef} className="personality-popover-wrapper open">
       <div className="popover-content">
+        {/* ✅ بخش جدید: پیش‌نمایش گوینده منتخب */}
+        <div className={cn("selected-voice-display", { speaking: volume > 0.01 })}>
+          <div className="voice-image-wrapper">
+            <img src={selectedSpeaker.imgUrl} alt={selectedSpeaker.name} />
+          </div>
+          <h3>{selectedSpeaker.name}</h3>
+          <p>{selectedSpeaker.desc}</p>
+        </div>
+        <hr className="menu-divider" />
+
+        <h4 className="menu-subtitle">انتخاب شخصیت</h4>
         <ul>
           {(Object.keys(personalityIcons) as PersonalityType[]).map(key => (
             <li key={key} className={cn({ active: selectedPersonality === key })} onClick={() => onSelectPersonality(key)}>
@@ -47,7 +60,6 @@ const PersonalityMenu: React.FC<{ isOpen: boolean; onClose: () => void; onSelect
             </li>
           ))}
         </ul>
-        {/* ✅ تغییر اصلی: اضافه شدن گالری گویندگان */}
         <hr className="menu-divider" />
         <h4 className="menu-subtitle">انتخاب گوینده</h4>
         <div className="voice-grid">
@@ -66,7 +78,7 @@ const PersonalityMenu: React.FC<{ isOpen: boolean; onClose: () => void; onSelect
 // کامپوننت داخلی اصلی برنامه
 const AppInternal: React.FC = () => {
   const videoRef = useRef<HTMLVideoElement>(null);
-  const { volume, changePersonality, customUserName, customInstructions } = useAppContext();
+  const { volume, changePersonality, customUserName, customInstructions, selectedVoice } = useAppContext();
   const [isUserSpeaking, setIsUserSpeaking] = useState(false);
   const [isMicActive, setIsMicActive] = useState(false);
   const [isCamActive, setIsCamActive] = useState(false);
@@ -76,13 +88,40 @@ const AppInternal: React.FC = () => {
   const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
   const notificationButtonRef = useRef<HTMLButtonElement>(null);
   const notificationPopoverRef = useRef<HTMLDivElement>(null);
+  const [confirmationMessage, setConfirmationMessage] = useState<string | null>(null);
+
+  // ✅ منطق جدید برای پیغام تایید
+  const showConfirmation = (message: string) => {
+    setConfirmationMessage(message);
+    setTimeout(() => setConfirmationMessage(null), 3000); // پیغام بعد از ۳ ثانیه محو می‌شود
+  };
 
   const handleSelectPersonality = (p: PersonalityType) => {
     setIsPersonalityMenuOpen(false);
-    if (p === 'custom') setIsCustomModalOpen(true);
-    else changePersonality(p);
+    if (p === 'custom') {
+      setIsCustomModalOpen(true);
+    } else {
+      changePersonality(p);
+      const personalityLabels: Record<PersonalityType, string> = { default: 'دستیار پیش‌فرض', teacher: 'استاد زبان', poetic: 'حس خوب', funny: 'شوخ‌طبع', custom: 'شخصیت اختصاصی' };
+      showConfirmation(`شخصیت به ${personalityLabels[p]} تغییر کرد`);
+    }
   };
-  
+
+  const handleSaveCustom = (name: string, instructions: string) => {
+    changePersonality('custom', { name, instructions });
+    showConfirmation("شخصیت اختصاصی با موفقیت ذخیره شد");
+  };
+
+  // ✅ هوک برای نمایش پیغام تایید هنگام تغییر گوینده
+  useEffect(() => {
+    if(isPersonalityMenuOpen) return; // جلوگیری از نمایش هنگام باز بودن منو
+    const speaker = speakers.find(s => s.id === selectedVoice);
+    if (speaker) {
+      showConfirmation(`گوینده به ${speaker.name} تغییر کرد`);
+    }
+  }, [selectedVoice]);
+
+
   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);
@@ -107,19 +146,25 @@ const AppInternal: React.FC = () => {
             <div className="notification-popover-text-content">مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید و از بیان اطلاعات حساس بپرهیزید.</div>
           </div>
         </div>
-        <PersonalityMenu isOpen={isPersonalityMenuOpen} onClose={() => setIsPersonalityMenuOpen(false)} onSelectPersonality={handleSelectPersonality} />
+        <PersonalityMenu isOpen={isPersonalityMenuOpen} onClose={() => setIsPersonalityMenuOpen(false)} onSelectPersonality={handleSelectPersonality} volume={volume} />
         <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} />
+      <CustomModal isOpen={isCustomModalOpen} onClose={() => setIsCustomModalOpen(false)} onSave={handleSaveCustom} initialName={customUserName} initialInstructions={customInstructions} />
+      {/* ✅ JSX برای نمایش پیغام تایید */}
+      {confirmationMessage && (
+        <div className="confirmation-toast">
+          {confirmationMessage}
+        </div>
+      )}
     </>
   );
 };
 
-// کامپوننت ریشه App
+// کامپوننت ریشه App (بدون تغییر)
 function App() {
   const [showIOSModal, setShowIOSModal] = useState(false);
   const [personalityInstructions, setPersonalityInstructions] = useState<PersonalityInstructions | null>(null);