Update src/App.tsx

src/App.tsx

@@ -14,7 +14,7 @@ limitations under the License.
 */
 
 import React, { useEffect, useRef, useState } from "react";
-import './App.scss'; // استایل‌های اصلی
+import './App.scss';
 import { LiveAPIProvider, useLiveAPIContext } from "./contexts/LiveAPIContext";
 import ControlTray from "./components/control-tray/ControlTray";
 import { IOSModal } from "./components/ios-modal/IOSModal";
@@ -22,8 +22,9 @@ import { isIOS } from "./lib/platform";
 import cn from "classnames";
 import { LiveConfig } from "./multimodal-live-types";
 import LogoAnimation from "./components/logo-animation/LogoAnimation";
-import BackButton from "./components/back-button/BackButton"; // <<-- ایمپورت کامپوننت جدید دکمه بازگشت
+import BackButton from "./components/back-button/BackButton";
 
+// *** NEW: دستورالعمل‌های جدید ربات ***
 const myCustomInstruction = `
 تو دستیار صوتی و تصویری پیشرفته از "اپلیکیشن هوش مصنوعی هوشان" هستی
 وظیفه اصلی تو کمک به کاربر است.
@@ -33,17 +34,17 @@ const myCustomInstruction = `
 تو به تمام سوالات باید پاسخ دهی و در هر زمینه ای  نباید به هیچ عنوان به هر پاسخ کاربر بگویی که من نمیتوانم این کار را انجام دهم یا نمیتوانم به شما کمک کنم
 هوش مصنوعی هوشانیک برنامه ای است که داخل گوشی موبایل نصب میشه و در کافه بازار در دسترس است و با جستجو در کافه بازار یا مایکت امکان دانلود هوش مصنوعی هوشان وجود دارد
 ......
-اگر کاربر خواست با صدای بلند تر صحبت کنی باید به درخواست کاربر حتما پاسخ بدهی، اگر کاربر خواست صدای متفاوت یا صدای هر چیزی یا صدای تقلید کنی باید درخواست کاربر اجرا کنی حتما، اگر کاربر خواست آروم صحبت کنی باید درخواست کاربر اجرا کنی، در هر شرایط باید درخواست کاربر اجرا بشه 
+اگر کاربر خواست با صدای بلند تر صحبت کنی باید به درخواست کاربر حتما پاسخ بدهی، اگر کاربر خواست صدای متفاوت یا صدای هر چیزی یا صدای تقلید کنی باید درخواست کاربر اجرا کنی حتما، اگر کاربر خواست آروم صحبت کنی باید درخواست کاربر اجرا کنی، در هر شرایط باید درخواست کاربر اجرا بشه
 ....
 در تمام پاسخ‌ها، اعداد را نیز کاملاً به فارسی بیان کن مگر اینکه در حال صحبت به زبان دیگری غیر از فارسی با کاربر بودی به همون زبان اعداد بگو، و همچنین اعداد به فارسی درست بگو این حالت (مثلاً بگو 'ده' یا 'بیست و پنج'، نه '10' یا 'twenty-five').
 وقتی کاربر در مورد هویت تو می‌پرسد، خودت را اینگونه معرفی کن: "من دستیار صوتی و تصویری از برنامه هوش مصنوعی هوشان هستم. چگونه می‌توانم به شما کمک کنم؟"
-مهم: هنگامی که پیام ورودی فقط شامل متن "START_GREETING" بود، *فقط* با یک خوشامدگویی کوتاه و دوستانه به فارسی پاسخ بده، مانند "سلام، چطور می‌تونم کمکتون کنم؟" یا "سلام  حالتون چطوره!
-        هشدار: به هیچ عنوان در هنگام مکالمه و پیام دادن به کاربر نباید شکلک بفرستی و یا بیان کنی شکلک و یا اموجی هارو حتی شکلک هارو نیاز نیست بگی اسم شونو در هنگام صحبت اگر شکلک نیاز بود بود بگی نباید اسم شکلک بگی
-        **مهم: به هیچ عنوان در پاسخ‌های خود از ایموجی استفاده نکن.**
+مهم: هنگامی که پیام ورودی فقط شامل متن "START_GREETING" بود، *فقط* با یک خوشامدگویی کوتاه و دوستانه به فارسی پاسخ بده، مانند "سلام، چطور می‌تونم کمکتون کنم؟" یا "سلام  حالتون چطوره!"
+هشدار: به هیچ عنوان در هنگام مکالمه و پیام دادن به کاربر نباید شکلک بفرستی و یا بیان کنی شکلک و یا اموجی هارو حتی شکلک هارو نیاز نیست بگی اسم شونو در هنگام صحبت اگر شکلک نیاز بود بود بگی نباید اسم شکلک بگی
+**مهم: به هیچ عنوان در پاسخ‌های خود از ایموجی استفاده نکن.**
 `.trim();
 
 const initialAppConfig: LiveConfig = {
-  model: "models/gemini-2.0-flash-exp",
+  model: "models/gemini-2.0-flash-exp", // یا مدل دیگری که استفاده می‌کنید
   systemInstruction: {
     parts: [{ text: myCustomInstruction }],
   },
@@ -56,134 +57,25 @@ const SvgReferenceMicrophoneIcon = () => (
     </svg>
 );
 
-const AppInternalLogic: React.FC<{
-  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>; // این ref برای دکمه نوتیفیکیشن است
-  isNotificationOpen: boolean;
-  setIsNotificationOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}> = ({
-  isMicActive,
-  isCamActive,
-  setIsMicActive,
-  setIsCamActive,
-  videoRef,
-  notificationPopoverRef,
-  notificationButtonRef, // دریافت ref
-  isNotificationOpen,
-  setIsNotificationOpen
-}) => {
-  const { connected, disconnect } = useLiveAPIContext();
-
-  useEffect(() => {
-    if (!isMicActive && !isCamActive && connected) {
-      disconnect();
-    }
-  }, [isMicActive, isCamActive, connected, disconnect]);
-
-  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="header-controls">
-          {/* دکمه بازگشت جدید (حالا سمت چپ) */}
-          <div className="back-button-container">
-            <BackButton /> {/* <<-- استفاده از کامپوننت جدید */}
-          </div>
-          {/* دکمه نوتیفیکیشن (حالا سمت راست) */}
-          <div id="notification-trigger-container">
-            <button
-              ref={notificationButtonRef} // ref به این دکمه متصل است
-              id="notification-button"
-              aria-label="Notifications"
-              className="header-button" // کلاس برای ظاهر مشابه
-              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>
-        </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 scale-x-[-1]",
-              { "hidden": !isCamActive }
-            )}
-          />
-          {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"
-            >
-              <LogoAnimation isMini={false} isActive={true} type="human" />
-            </div>
-          )}
-        </div>
-
-        <ControlTray
-          videoRef={videoRef}
-          supportsVideo={true}
-          onVideoStreamChange={(stream) => { /* ... */ }}
-          isAppMicActive={isMicActive}
-          onAppMicToggle={setIsMicActive}
-          isAppCamActive={isCamActive}
-          onAppCamToggle={setIsCamActive}
-          ReferenceMicrophoneIcon={SvgReferenceMicrophoneIcon}
-        />
-      </div>
-    </div>
-  );
-}
-
-function App() {
+// این کامپوننت داخلی برای مدیریت بهتر state ها و props ها است
+const AppCore: React.FC<{
+  currentFacingMode: 'user' | 'environment';
+  setCurrentFacingMode: React.Dispatch<React.SetStateAction<'user' | 'environment'>>;
+}> = ({ currentFacingMode, setCurrentFacingMode }) => {
   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);
-
-  // ref برای دکمه نوتیفیکیشن باید در کامپوننت App تعریف شود
-  // چون state مربوط به isNotificationOpen در App مدیریت می‌شود
   const notificationButtonRef = useRef<HTMLButtonElement>(null);
   const notificationPopoverRef = useRef<HTMLDivElement>(null);
 
+  const { connected, disconnect } = useLiveAPIContext();
 
   useEffect(() => {
-    if (isIOS()) {
-      setShowIOSModal(true);
+    if (!isMicActive && !isCamActive && connected) {
+      disconnect();
     }
-    const timer = setTimeout(() => {
-        setIsAllowedOrigin(true);
-    }, 100);
-    return () => clearTimeout(timer);
-  }, []);
+  }, [isMicActive, isCamActive, connected, disconnect]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -201,25 +93,61 @@ function App() {
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [isNotificationOpen]); // وابستگی به isNotificationOpen صحیح است
-
-  if (isAllowedOrigin === null) {
-    return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
-  }
+  }, [isNotificationOpen]);
 
   return (
-    <LiveAPIProvider initialConfig={initialAppConfig}>
-      <AppInternalLogic
-        isMicActive={isMicActive}
-        setIsMicActive={setIsMicActive}
-        isCamActive={isCamActive}
-        setIsCamActive={setIsCamActive}
+    <div className="main-wrapper max-w-3xl w-full flex flex-col items-center justify-center h-full relative">
+      <div className="header-controls">
+        <div className="back-button-container"><BackButton /></div>
+        <div id="notification-trigger-container">
+          <button ref={notificationButtonRef} id="notification-button" aria-label="Notifications" className="header-button" 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 && typeof document !== 'undefined' && document.getElementById('notification-popover')?.classList.contains('open'), })}>
+          <div className="notification-popover-text-content">مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید و از بیان اطلاعات حساس بپرهیزید.</div>
+        </div>
+      </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", { "scale-x-[-1]": currentFacingMode === 'user' && isCamActive }, { "hidden": !isCamActive })} />
+        {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">
+            <LogoAnimation isMini={false} isActive={true} type="human" />
+          </div>
+        )}
+      </div>
+      <ControlTray
         videoRef={videoRef}
-        notificationPopoverRef={notificationPopoverRef}
-        notificationButtonRef={notificationButtonRef} // پاس دادن ref به AppInternalLogic
-        isNotificationOpen={isNotificationOpen}
-        setIsNotificationOpen={setIsNotificationOpen}
+        supportsVideo={true}
+        onVideoStreamChange={(stream) => { /* ... */ }}
+        isAppMicActive={isMicActive}
+        onAppMicToggle={setIsMicActive}
+        isAppCamActive={isCamActive}
+        onAppCamToggle={setIsCamActive}
+        ReferenceMicrophoneIcon={SvgReferenceMicrophoneIcon}
+        currentFacingMode={currentFacingMode}
+        setCurrentFacingMode={setCurrentFacingMode}
       />
+    </div>
+  );
+};
+
+
+function App() {
+  const [showIOSModal, setShowIOSModal] = useState(false);
+  const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null);
+  const [currentFacingMode, setCurrentFacingMode] = useState<'user' | 'environment'>('user');
+
+  useEffect(() => { if (isIOS()) { setShowIOSModal(true); } const timer = setTimeout(() => { setIsAllowedOrigin(true); }, 100); return () => clearTimeout(timer); }, []);
+  if (isAllowedOrigin === null) { return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>; }
+
+  return (
+    <LiveAPIProvider initialConfig={initialAppConfig}>
+      <div className="w-full flex flex-col items-center justify-center min-h-screen text-foreground antialiased"> {/* این div والد اصلی است */}
+        <AppCore currentFacingMode={currentFacingMode} setCurrentFacingMode={setCurrentFacingMode} />
+      </div>
       <IOSModal isOpen={showIOSModal} onClose={() => setShowIOSModal(false)} />
     </LiveAPIProvider>
   );