Update src/App.tsx

src/App.tsx

@@ -19,8 +19,11 @@ import { IOSModal } from "./components/ios-modal/IOSModal";
 import { isIOS } from "./lib/platform";
 import cn from "classnames";
 import { LiveConfig } from "./multimodal-live-types";
+import { Altair } from "./components/altair/Altair"; // اگر می‌خواهید نمایش چت را داشته باشید
+import SidePanel from "./components/side-panel/SidePanel"; // اگر می‌خواهید پنل کناری را داشته باشید
 
-// --- دستورالعمل شخصی‌سازی شما ---
+
+// --- دستورالعمل شخصی‌سازی شما (با بخش تعامل تصویری) ---
 const myCustomInstruction = `
 ت1. هویت دستیار:
 
@@ -89,7 +92,13 @@ const myCustomInstruction = `
 
 در صورت درخواست کاربر، سرعت مکالمه را کند یا تند کن.
 
-سطح سختی واژگان و جملات را بر اساس سطح کاربر (مبتدی، متوسط، پیشرفته) تنظیم کن.".
+سطح سختی واژگان و جملات را بر اساس سطح کاربر (مبتدی، متوسط، پیشرفته) تنظیم کن.
+
+**تعامل تصویری:**
+- به تصویر زنده‌ای که از کاربر دریافت می‌کنی توجه کن.
+- اگر در تصویر نکته قابل توجهی وجود دارد (مانند حالت چهره، اشیاء خاص، یا محیط اطراف کاربر)، می‌توانی به آن در مکالمه اشاره کنی، البته فقط اگر مرتبط با موضوع صحبت باشد یا کاربر از تو بخواهد.
+- اگر کاربر سوالی در مورد چیزی که در تصویر می‌بیند پرسید، سعی کن بر اساس تصویر پاسخ دهی.
+- هدف اصلی، کمک به یادگیری زبان است، پس تعامل تصویری باید در خدمت این هدف باشد.
 `.trim();
 // --- ---
 
@@ -108,9 +117,10 @@ const SvgHumanIcon = () => (
 
 function App() {
   const videoRef = useRef<HTMLVideoElement>(null);
-  const [videoStream, setVideoStream] = useState<MediaStream | null>(null);
+  // videoStream دیگر مستقیماً توسط App مدیریت نمی‌شود، بلکه توسط ControlTray از طریق onVideoStreamChange
+  // const [videoStream, setVideoStream] = useState<MediaStream | null>(null);
   const [showIOSModal, setShowIOSModal] = useState(false);
-  const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null); // برای نمایش اولیه "در حال بررسی"
+  const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null);
 
   const [isMicActive, setIsMicActive] = useState(false);
   const [isCamActive, setIsCamActive] = useState(false);
@@ -124,15 +134,12 @@ function App() {
     if (isIOS()) {
       setShowIOSModal(true);
     }
-    // برای اجازه دادن به برنامه در همه جا، isAllowedOrigin را مستقیماً true قرار می‌دهیم.
-    // نمایش اولیه "در حال بررسی دسترسی..." همچنان مفید است.
-    // بنابراین با یک تاخیر کوچک true می‌کنیم تا کاربر آن را ببیند.
     const timer = setTimeout(() => {
         setIsAllowedOrigin(true);
-        console.log("Access allowed globally.");
-    }, 100); // تاخیر کوتاه برای نمایش پیام "در حال بررسی"
+        console.log("Access allowed globally by default in App.tsx.");
+    }, 100); 
 
-    return () => clearTimeout(timer); // پاکسازی تایمر
+    return () => clearTimeout(timer);
   }, []);
 
   useEffect(() => {
@@ -155,16 +162,9 @@ function App() {
 
 
   if (isAllowedOrigin === null) {
-    // این پیام برای مدت کوتاهی نمایش داده می‌شود و سپس به true تغییر می‌کند.
     return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
   }
-
-  //  این بخش دیگر لازم نیست چون isAllowedOrigin همیشه true خواهد شد:
-  //  if (isAllowedOrigin === false) {
-  //    return <div style={{ padding: '20px', textAlign: 'center', color: 'red' }}>دسترسی غیرمجاز! ... </div>;
-  //  }
   
-  // تابع برای ساخت لوگو (ساده شده)
   const createLogoHTML = (isMini: boolean, isActive: boolean, type: 'human' | 'ai' = 'human') => {
     if (!isActive) return null;
     const size = isMini ? 80 : 200;
@@ -172,18 +172,16 @@ function App() {
     const insetBase = isMini 
         ? { ping: 10, outer: 0, mid: 5, inner: 12, icon: 22 }
         : { ping: 40, outer: 0, mid: 20, inner: 50, icon: 65 };
-    const bgColorBase = type === 'human' ? 'blue' : 'green'; // رنگ‌ها باید با Tailwind هماهنگ باشند
+    const bgColorBase = type === 'human' ? 'blue' : 'green';
 
     return (
       <div className="relative" style={{ width: `${size}px`, height: `${size}px` }}>
-        {/* کلاس‌های رنگی مانند bg-blue-200 باید توسط Tailwind شناسایی شوند */}
-        <div className={`absolute rounded-full opacity-50 animate-ping bg-${bgColorBase}-200`} style={{ inset: `${insetBase.ping}px` }}></div>
-        <div className={`absolute inset-0 rounded-full opacity-50 bg-${bgColorBase}-200`} style={{ inset: `${insetBase.outer}px` }}></div>
-        <div className={`absolute rounded-full opacity-50 bg-${bgColorBase}-300`} style={{ inset: `${insetBase.mid}px` }}></div>
-        <div className={`absolute rounded-full opacity-50 bg-${bgColorBase}-400`} style={{ inset: `${insetBase.inner}px` }}></div>
+        <div className={`absolute rounded-full opacity-50 animate-ping bg-${bgColorBase}-200 dark:bg-${bgColorBase}-700`} style={{ inset: `${insetBase.ping}px` }}></div>
+        <div className={`absolute inset-0 rounded-full opacity-50 bg-${bgColorBase}-200 dark:bg-${bgColorBase}-700`} style={{ inset: `${insetBase.outer}px` }}></div>
+        <div className={`absolute rounded-full opacity-50 bg-${bgColorBase}-300 dark:bg-${bgColorBase}-600`} style={{ inset: `${insetBase.mid}px` }}></div>
+        <div className={`absolute rounded-full opacity-50 bg-${bgColorBase}-400 dark:bg-${bgColorBase}-500`} style={{ inset: `${insetBase.inner}px` }}></div>
         <div className="z-10 absolute" style={{ inset: `${insetBase.icon}px`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           {type === 'human' && <SvgHumanIcon />}
-          {/* Add AI icon if needed */}
         </div>
       </div>
     );
@@ -191,10 +189,9 @@ function App() {
 
 
   return (
-    // تگ <style jsx global> از اینجا حذف شده و استایل‌ها از App.scss می‌آیند
     <LiveAPIProvider initialConfig={initialAppConfig}>
-      <div className="w-full flex flex-col items-center justify-center min-h-[90dvh] md:min-h-screen bg-background text-foreground antialiased">
-        <div className="max-w-3xl w-full flex flex-col items-center justify-center h-full relative">
+      <div className="w-full flex flex-col items-center justify-center min-h-screen bg-background text-foreground antialiased"> {/* min-h-screen for full height */}
+        <div className="max-w-3xl w-full flex flex-col items-center justify-center h-full relative"> {/* h-full */}
           {/* Header */}
           <div className="header-controls">
             <button
@@ -202,11 +199,14 @@ function App() {
               id="notification-button"
               aria-label="Notifications"
               className="header-button"
-              onClick={() => setIsNotificationOpen(!isNotificationOpen)}
+              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 className="header-button" onClick={() => alert('Back clicked (implement navigation)')}>
+            <div className="header-button" onClick={() => alert('Back clicked (navigation logic)')}>
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"></path></svg>
             </div>
           </div>
@@ -215,7 +215,7 @@ function App() {
           <div ref={notificationPopoverRef} id="notification-popover-wrapper" className="notification-popover-wrapper">
             <div
               id="notification-popover"
-              className={cn("popover-content", { // کلاس‌های انیمیشن از App.scss می‌آیند
+              className={cn("popover-content", { 
                 "open animate-popover-open-top-center": isNotificationOpen,
                 "animate-popover-close-top-center": !isNotificationOpen && document.getElementById('notification-popover')?.classList.contains('open'),
               })}
@@ -226,39 +226,45 @@ function App() {
             </div>
           </div>
           
-          {/* Main Media Area */}
-          <div className="w-full flex flex-col items-center justify-center h-[90dvh] bg-background top-0 left-0 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,
-              })}
-            />
-            <div id="large-logo-container" className={cn("items-center justify-center w-full h-full absolute top-0 left-0", {
-                "flex": !isCamActive && isMicActive,
-                "hidden": isCamActive || !isMicActive
-            })}>
-               {createLogoHTML(false, !isCamActive && isMicActive)}
-            </div>
+          {/* Main Media Area and Chat Area */}
+          <div className="flex flex-col md:flex-row w-full h-[calc(100vh-100px)] mt-[60px] mb-[40px]"> {/* Adjust height and margins as needed */}
+              {/* SidePanel - اگر می‌خواهید پنل کناری چت را داشته باشید */}
+              <div className="w-full md:w-1/3 p-2 overflow-y-auto">
+                <SidePanel />
+                <Altair />
+              </div>
 
-            {/* Altair Chat component - شما تصمیم می‌گیرید کجا و چگونه نمایش داده شود */}
-            {/* <div className="absolute bottom-24 left-4 z-20 w-1/3 max-w-md"> <Altair /> </div> */}
-            {/* <SidePanel /> */}
-
-            <ControlTray
-              videoRef={videoRef}
-              supportsVideo={true}
-              onVideoStreamChange={setVideoStream}
-              isAppMicActive={isMicActive}
-              onAppMicToggle={setIsMicActive}
-              isAppCamActive={isCamActive}
-              onAppCamToggle={setIsCamActive}
-              createLogoFunction={createLogoHTML}
-            />
+              {/* Video Area */}
+              <div className="w-full md:w-2/3 flex flex-col items-center justify-center bg-background relative"> {/* Removed h-[90dvh] to fit within flex layout */}
+                <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,
+                  })}
+                />
+                <div id="large-logo-container" className={cn("items-center justify-center w-full h-full absolute top-0 left-0", {
+                    "flex": !isCamActive && isMicActive,
+                    "hidden": isCamActive || !isMicActive
+                })}>
+                  {createLogoHTML(false, !isCamActive && isMicActive)}
+                </div>
+              </div>
           </div>
+            
+          <ControlTray
+            videoRef={videoRef}
+            supportsVideo={true}
+            onVideoStreamChange={(stream) => { /* App.tsx no longer needs direct videoStream state */ }}
+            isAppMicActive={isMicActive}
+            onAppMicToggle={setIsMicActive}
+            isAppCamActive={isAppCamActive}
+            onAppCamToggle={setIsCamActive}
+            createLogoFunction={createLogoHTML}
+          />
+
         </div>
       </div>
       <IOSModal isOpen={showIOSModal} onClose={() => setShowIOSModal(false)} />