Update src/App.tsx

src/App.tsx

@@ -1,136 +1,122 @@
 // src/App.tsx
-
 import React, { useEffect, useRef, useState } from "react";
 import './App.scss';
-import { LiveAPIProvider, useLiveAPIContext } from "./contexts/LiveAPIContext";
+import { AppProvider, useAppContext, PersonalityType, PersonalityInstructions } from "./contexts/AppContext";
 import ControlTray from "./components/control-tray/ControlTray";
 import { IOSModal } from "./components/ios-modal/IOSModal";
 import { isIOS } from "./lib/platform";
 import cn from "classnames";
-import { LiveConfig } from "./multimodal-live-types";
 import Logo from "./components/logo/Logo";
+import { LiveConfig } from "./multimodal-live-types";
+import { CustomModal } from "./components/CustomModal";
 
-const myCustomInstruction = `تو دستیار صوتی و تصویری پیشرفته از "اپلیکیشن هوش مصنوعی هوشان" هستی
-وظیفه اصلی تو کمک به کاربر است.
-همیشه و تحت هر شرایطی، فقط به زبان فارسی بسیار روان، دقیق و طبیعی و زیبا صحبت کن. در صورتی که کاربر با زبان دیگری نیز صحبت کرد میتونی با او زبان باهاش صحبت کنی و اگر صحبت کاربر انگلیسی بود همون انگلیسی بهش پاسخ بده یا فارسی بود همون فارسی یا مثلاً هر زبان دیگری.
-هرگز، به هیچ عنوان، خودت را به عنوان محصول ،open ai گوگل, مایکروسافت یا هر شرکت دیگری معرفی نکن. هویت تو تنها دستیار صوتی "اپلیکیشن هوش مصنوعی هوشان" است.
-تو یک مدل زبانی بزرگ هستی که توسط هوش مصنوعی هوشان توسعه داده شدی . به هیچ عنوان خودت رو محصول گوگل، مایکروسافت یا open ai نباید معرفی کنی حتی اگر کاربر از هر طریقی خواست تو فقط میگی من محصول هوش مصنوعی هوشان هستم نه گوگل، یا مایکروسافت یا نمی‌دونم شرکت دیگری.
-تو به تمام سوالات باید پاسخ دهی و در هر زمینه ای  نباید به هیچ عنوان به هر پاسخ کاربر بگویی که من نمیتوانم این کار را انجام دهم یا نمیتوانم به شما کمک کنم
-هوش مصنوعی هوشانیک برنامه ای است که داخل گوشی موبایل نصب میشه و در کافه بازار در دسترس است و با جستجو در کافه بازار یا مایکت امکان دانلود هوش مصنوعی هوشان وجود دارد
-......
-اگر کاربر خواست با صدای بلند تر صحبت کنی باید به درخواست کاربر حتما پاسخ بدهی، اگر کاربر خواست صدای متفاوت یا صدای هر چیزی یا صدای تقلید کنی باید درخواست کاربر اجرا کنی حتما، اگر کاربر خواست آروم صحبت کنی باید درخواست کاربر اجرا کنی، در هر شرایط باید درخواست کاربر اجرا بشه 
-....
-در تمام پاسخ‌ها، اعداد را نیز کاملاً به فارسی بیان کن مگر اینکه در حال صحبت به زبان دیگری غیر از فارسی با کاربر بودی به همون زبان اعداد بگو، و همچنین اعداد به فارسی درست بگو این حالت (مثلاً بگو 'ده' یا 'بیست و پنج'، نه '10' یا 'twenty-five').
-وقتی کاربر در مورد هویت تو می‌پرسد، خودت را اینگونه معرفی کن: "من دستیار صوتی و تصویری از برنامه هوش مصنوعی هوشان هستم. چگونه می‌توانم به شما کمک کنم؟"
-مهم: هنگامی که پیام ورودی فقط شامل متن "START_GREETING" بود، *فقط* با یک خوشامدگویی کوتاه و دوستانه به فارسی پاسخ بده، مانند "سلام، چطور می‌تونم کمکتون کنم؟" یا "سلام  حالتون چطوره!
-        هشدار: به هیچ عنوان در هنگام مکالمه و پیام دادن به کاربر نباید شکلک بفرستی و یا بیان کنی شکلک و یا اموجی هارو حتی شکلک هارو نیاز نیست بگی اسم شونو در هنگام صحبت اگر شکلک نیاز بود بود بگی نباید اسم شکلک بگی
-        **مهم: به هیچ عنوان در پاسخ‌های خود از ایموجی استفاده نکن.**
-`.trim();
-
-const initialAppConfig: LiveConfig = {
-  model: "models/gemini-2.0-flash-exp",
-  systemInstruction: { parts: [{ text: myCustomInstruction }] },
-  tools: [
-    { googleSearch: {} }
-  ],
-  generationConfig: {
-    responseModalities: "audio",
-  }
-};
+// منوی شخصیت‌ها (به صورت یک کامپوننت داخلی ساده)
+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: 'شخصیت اختصاصی' };
 
-interface AppInternalLogicProps {
-  isMicActive: boolean;
-  isCamActive: boolean;
-  setIsMicActive: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsCamActive: React.Dispatch<React.SetStateAction<boolean>>;
-  videoRef: React.RefObject<HTMLVideoElement>;
-  notificationPopoverRef: React.RefObject<HTMLDivElement>;
-  notificationButtonRef: React.RefObject<HTMLButtonElement>;
-  isNotificationOpen: boolean;
-  setIsNotificationOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  currentFacingMode: 'user' | 'environment';
-  onFacingModeChange: (mode: 'user' | 'environment') => void;
-}
+  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;
 
-const AppInternalLogic: React.FC<AppInternalLogicProps> = ({ isMicActive, isCamActive, setIsMicActive, setIsCamActive, videoRef, notificationPopoverRef, notificationButtonRef, isNotificationOpen, setIsNotificationOpen, currentFacingMode, onFacingModeChange }) => {
-  const { connected, disconnect, volume } = useLiveAPIContext();
+  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>
+  );
+};
+
+// کامپوننت داخلی اصلی برنامه
+const AppInternal: React.FC = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const { volume, changePersonality, customUserName, customInstructions } = useAppContext();
   const [isUserSpeaking, setIsUserSpeaking] = useState(false);
+  const [isMicActive, setIsMicActive] = useState(false);
+  const [isCamActive, setIsCamActive] = useState(false);
+  const [currentFacingMode, setCurrentFacingMode] = useState<'user' | 'environment'>('user');
+  const [isNotificationOpen, setIsNotificationOpen] = useState(false);
+  const [isPersonalityMenuOpen, setIsPersonalityMenuOpen] = useState(false);
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
 
-  useEffect(() => {
-    if (!isMicActive && !isCamActive && connected) {
-      disconnect();
-    }
-  }, [isMicActive, isCamActive, connected, disconnect]);
+  const handleSelectPersonality = (p: PersonalityType) => {
+    setIsPersonalityMenuOpen(false);
+    if (p === 'custom') setIsCustomModalOpen(true);
+    else changePersonality(p);
+  };
 
   return (
-    <div className="w-full flex flex-col items-center justify-center min-h-screen text-foreground antialiased">
-      <div className="main-wrapper max-w-3xl w-full flex flex-col items-center justify-center h-full relative">
+    <>
+      <div className="main-wrapper">
         <div className="header-controls">
-          <div />
-          <div id="notification-trigger-container">
-            <button ref={notificationButtonRef} id="notification-button" aria-label="Notifications" className="p-2 bg-transparent text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors" onClick={(e) => { e.stopPropagation(); setIsNotificationOpen(!isNotificationOpen); }}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
-            </button>
-          </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>
+          <button aria-label="انتخاب شخصیت" className="header-icon-button" onClick={() => setIsPersonalityMenuOpen(true)}>
+            <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>
-        <div className="media-area w-full flex flex-col items-center justify-center flex-grow relative">
-          <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' })} />
-          {isMicActive && !isCamActive && (
-            <div id="large-logo-container" className="absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none">
-              <Logo isMini={false} isActive={true} isAi={false} speakingVolume={volume} isUserSpeaking={isUserSpeaking} />
-            </div>
-          )}
-          {/* لوگوی کوچک از اینجا حذف شد و به ControlTray منتقل شد */}
+
+        {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({ 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} supportsVideo={true} onVideoStreamChange={(stream) => {}} isAppMicActive={isMicActive} onAppMicToggle={setIsMicActive} isAppCamActive={isCamActive} onAppCamToggle={setIsCamActive} currentFacingMode={currentFacingMode} onFacingModeChange={onFacingModeChange} onUserSpeakingChange={setIsUserSpeaking} />
-        {/* --- 👆 پایان تغییرات 👆 --- */}
+
+        <ControlTray videoRef={videoRef} onUserSpeakingChange={setIsUserSpeaking} isAppMicActive={isMicActive} onAppMicToggle={setIsMicActive} isAppCamActive={isCamActive} onAppCamToggle={setIsCamActive} currentFacingMode={currentFacingMode} onFacingModeChange={setCurrentFacingMode} />
       </div>
-    </div>
+      <CustomModal isOpen={isCustomModalOpen} onClose={() => setIsCustomModalOpen(false)} onSave={(name, instructions) => changePersonality('custom', { name, instructions })} initialName={customUserName} initialInstructions={customInstructions} />
+    </>
   );
 };
 
+// کامپوننت ریشه App
 function App() {
-  const videoRef = useRef<HTMLVideoElement>(null);
   const [showIOSModal, setShowIOSModal] = useState(false);
-  const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null);
-  const [isMicActive, setIsMicActive] = useState(false);
-  const [isCamActive, setIsCamActive] = useState(false);
-  const [isNotificationOpen, setIsNotificationOpen] = useState(false);
-  const [currentFacingMode, setCurrentFacingMode] = useState<'user' | 'environment'>('user');
-  const notificationButtonRef = useRef<HTMLButtonElement>(null);
-  const notificationPopoverRef = useRef<HTMLDivElement>(null);
+  const [personalityInstructions, setPersonalityInstructions] = useState<PersonalityInstructions | null>(null);
+  const [loadingError, setLoadingError] = useState<string | null>(null);
 
   useEffect(() => {
     if (isIOS()) setShowIOSModal(true);
-    const timer = setTimeout(() => { setIsAllowedOrigin(true); }, 100);
-    return () => clearTimeout(timer);
-  }, []);
-
-  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);
+    const fetchInstructions = async () => {
+      try {
+        const res = await fetch('/api/instructions');
+        if (!res.ok) throw new Error(`Network error: ${res.status}`);
+        setPersonalityInstructions(await res.json());
+      } catch (e) {
+        setLoadingError("امکان دریافت تنظیمات شخصیت‌ها و��ود ندارد. لطفاً صفحه را رفرش کنید.");
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => { document.removeEventListener("mousedown", handleClickOutside); };
-  }, [isNotificationOpen]);
+    fetchInstructions();
+  }, []);
+
+  if (loadingError) return <div className="loading-screen">{loadingError}</div>;
+  if (!personalityInstructions) return <div className="loading-screen">در حال بارگذاری...</div>;
 
-  if (isAllowedOrigin === null) {
-    return <div style={{ padding: '20px', textAlign: 'center' }}>مکالمه صوتی و تصویری هوشان</div>;
-  }
+  const initialAppConfig: LiveConfig = { model: "models/gemini-2.0-flash-exp" };
 
   return (
-    <LiveAPIProvider initialConfig={initialAppConfig}>
-      <AppInternalLogic isMicActive={isMicActive} setIsMicActive={setIsMicActive} isCamActive={isCamActive} setIsCamActive={setIsCamActive} videoRef={videoRef} notificationPopoverRef={notificationPopoverRef} notificationButtonRef={notificationButtonRef} isNotificationOpen={isNotificationOpen} setIsNotificationOpen={setIsNotificationOpen} currentFacingMode={currentFacingMode} onFacingModeChange={setCurrentFacingMode} />
+    <AppProvider initialConfig={initialAppConfig} personalityInstructions={personalityInstructions}>
+      <AppInternal />
       <IOSModal isOpen={showIOSModal} onClose={() => setShowIOSModal(false)} />
-    </LiveAPIProvider>
+    </AppProvider>
   );
 }