Update src/App.tsx

src/App.tsx

@@ -1,4 +1,16 @@
-// ... (ایمپورت‌ها، myCustomInstruction, initialAppConfig, SVG Icons, AppInternalLogic، و بخش اول تابع App بدون تغییر) ...
+/**
+Copyright 2024 Google LLC
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import React, { useEffect, useRef, useState } from "react";
 import './App.scss';
 import { LiveAPIProvider, useLiveAPIContext } from "./contexts/LiveAPIContext";
@@ -107,109 +119,119 @@ const SvgReferenceMicrophoneIcon = () => (
     </svg>
 );
 
-const AppInternalLogic: React.FC<{ /* ... props ... */ }> = ({ /* ... props ... */ }) => {
-    // ... (بدون تغییر)
-    isMicActive,
-    isCamActive,
-    setIsMicActive,
-    setIsCamActive,
-    createLogoFunction,
-    videoRef,
-    notificationPopoverRef,
-    notificationButtonRef,
-    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 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 className="back-button-container">
-              <button
-                id="back-button"
-                aria-label="Go back"
-                className="header-button"
-                onClick={() => alert('Back clicked (implement navigation)')}
-              >
-                <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"><path d="m15 18-6-6 6-6"></path></svg>
-              </button>
-            </div>
+const AppInternalLogic: React.FC<{
+  isMicActive: boolean;
+  isCamActive: boolean;
+  setIsMicActive: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsCamActive: React.Dispatch<React.SetStateAction<boolean>>;
+  createLogoFunction: (isMini: boolean, isActive: boolean, type?: 'human' | 'ai', forFooter?: boolean) => React.ReactNode;
+  videoRef: React.RefObject<HTMLVideoElement>;
+  notificationPopoverRef: React.RefObject<HTMLDivElement>;
+  notificationButtonRef: React.RefObject<HTMLButtonElement>;
+  isNotificationOpen: boolean;
+  setIsNotificationOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}> = ({
+  isMicActive,
+  isCamActive,
+  setIsMicActive,
+  setIsCamActive,
+  createLogoFunction,
+  videoRef,
+  notificationPopoverRef,
+  notificationButtonRef,
+  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 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 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="back-button-container">
+            <button
+              id="back-button"
+              aria-label="Go back"
+              className="header-button"
+              onClick={() => alert('Back clicked (implement navigation)')}
             >
-              <div className="notification-popover-text-content">
-                مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید و از وارد کردن اطلاعات حساس بپرهیزید.
-              </div>
+              <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"><path d="m15 18-6-6 6-6"></path></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 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"
-              >
-                {createLogoFunction(false, true, 'human', false)}
-              </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 }
             )}
-          </div>
-  
-          <ControlTray
-            videoRef={videoRef}
-            supportsVideo={true}
-            onVideoStreamChange={(stream) => { /* ... */ }}
-            isAppMicActive={isMicActive}
-            onAppMicToggle={setIsMicActive}
-            isAppCamActive={isCamActive}
-            onAppCamToggle={setIsCamActive}
-            createLogoFunction={createLogoFunction}
-            ReferenceMicrophoneIcon={SvgReferenceMicrophoneIcon}
           />
+          {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"
+            >
+              {createLogoFunction(false, true, 'human', false)}
+            </div>
+          )}
         </div>
+
+        <ControlTray
+          videoRef={videoRef}
+          supportsVideo={true}
+          onVideoStreamChange={(stream) => { /* ... */ }}
+          isAppMicActive={isMicActive}
+          onAppMicToggle={setIsMicActive}
+          isAppCamActive={isCamActive}
+          onAppCamToggle={setIsCamActive}
+          createLogoFunction={createLogoFunction}
+          ReferenceMicrophoneIcon={SvgReferenceMicrophoneIcon}
+        />
       </div>
-    );
+    </div>
+  );
 };
 
-const logoColorConfig = { /* ... (بدون تغییر) ... */
+const logoColorConfig = {
   blue: {
     ping: "bg-blue-200 dark:bg-blue-700",
     outer: "bg-blue-200 dark:bg-blue-700",
@@ -230,51 +252,50 @@ const logoColorConfig = { /* ... (بدون تغییر) ... */
   }
 };
 
-function App() { /* ... (useEffect ها و state ها بدون تغییر) ... */
-    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 notificationPopoverRef = useRef<HTMLDivElement>(null);
-    const notificationButtonRef = useRef<HTMLButtonElement>(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);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }, [isNotificationOpen]);
-  
-    if (isAllowedOrigin === null) {
-      return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
+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 notificationPopoverRef = useRef<HTMLDivElement>(null);
+  const notificationButtonRef = useRef<HTMLButtonElement>(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);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isNotificationOpen]);
+
+  if (isAllowedOrigin === null) {
+    return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
+  }
 
-  // *** MODIFIED: createLogoFunction با دقت بیشتر در inset ها و کلاس‌ها ***
   const createLogoFunction = (isMini: boolean, isActive: boolean, type: 'human' | 'ai' = 'human', forFooter: boolean = false) => {
     if (!isActive) return null;
 
@@ -285,13 +306,9 @@ function App() { /* ... (useEffect ها و state ها بدون تغییر) ... *
     const iconDisplaySize = isMini ? 35 : 70;
     const iconInset = (size - iconDisplaySize) / 2;
 
-    // مقادیر inset برای حلقه‌ها از HTML مرجع شما:
-    // بزرگ: ping: 40, outer: 0, mid: 20, inner: 50, icon: 65
-    // کوچک: ping: 10, outer: 0, mid: 5, inner: 12, icon: 22
-    // ما iconInset را خودمان محاسبه کردیم، بقیه را از HTML می‌گیریم.
     const insetValues = {
         ping: isMini ? 10 : 40,
-        outer: 0, // در HTML شما برای outer از inset:0 استفاده شده
+        outer: 0,
         mid: isMini ? 5 : 20,
         inner: isMini ? 12 : 50,
         icon: iconInset
@@ -301,15 +318,10 @@ function App() { /* ... (useEffect ها و state ها بدون تغییر) ... *
 
     return (
       <div className={cn("logo-animation-wrapper", {"for-footer": forFooter})} style={{ width: `${size}px`, height: `${size}px` }}>
-        {/* حلقه پینگ */}
         <div className={`absolute rounded-full opacity-50 animate-ping ${currentColors.ping}`} style={{ inset: `${insetValues.ping}px` }}></div>
-        {/* حلقه بیرونی */}
         <div className={`absolute rounded-full opacity-50 ${currentColors.outer}`} style={{ inset: `${insetValues.outer}px` }}></div>
-        {/* حلقه میانی */}
         <div className={`absolute rounded-full opacity-50 ${currentColors.mid}`} style={{ inset: `${insetValues.mid}px` }}></div>
-        {/* حلقه داخلی */}
         <div className={`absolute rounded-full opacity-50 ${currentColors.inner}`} style={{ inset: `${insetValues.inner}px` }}></div>
-        {/* کانتینر آیکون */}
         <div className="z-10 absolute flex items-center justify-center" style={{ inset: `${insetValues.icon}px`, width: `${iconDisplaySize}px`, height: `${iconDisplaySize}px` }}>
           {IconComponent && <IconComponent />}
         </div>
@@ -317,7 +329,7 @@ function App() { /* ... (useEffect ها و state ها بدون تغییر) ... *
     );
   };
 
-  return ( /* ... (LiveAPIProvider و AppInternalLogic مثل قبل) ... */
+  return (
     <LiveAPIProvider initialConfig={initialAppConfig}>
       <AppInternalLogic
         isMicActive={isMicActive}