Update src/App.tsx

src/App.tsx

@@ -1,4 +1,16 @@
-// ... (ایمپورت‌ها، myCustomInstruction, initialAppConfig, SvgHumanIcon, SvgReferenceMicrophoneIcon، AppInternalLogic بدون تغییر) ...
+/**
+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";
@@ -106,7 +118,21 @@ const SvgReferenceMicrophoneIcon = () => (
     </svg>
 );
 
-const AppInternalLogic: React.FC<{ /* ...props... */ }> = ({ /* ...props... */
+// *** MODIFIED: تعریف دقیق پراپ‌ها برای AppInternalLogic ***
+interface AppInternalLogicProps {
+  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>>;
+}
+
+const AppInternalLogic: React.FC<AppInternalLogicProps> = ({
   isMicActive, isCamActive, setIsMicActive, setIsCamActive, createLogoFunction,
   videoRef, notificationPopoverRef, notificationButtonRef, isNotificationOpen, setIsNotificationOpen
 }) => {
@@ -116,7 +142,6 @@ const AppInternalLogic: React.FC<{ /* ...props... */ }> = ({ /* ...props... */
   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">
-        {/* Header and Popover ... */}
         <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); }}>
@@ -134,17 +159,15 @@ const AppInternalLogic: React.FC<{ /* ...props... */ }> = ({ /* ...props... */
             <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 })} />
-          {/* *** MODIFIED: Ensure large logo is displayed correctly *** */}
           {isMicActive && !isCamActive && (
             <div id="large-logo-container" className="large-logo-container-style">
               {createLogoFunction(false, true, 'human', false)}
             </div>
           )}
         </div>
-        <ControlTray /* ...props... */ 
+        <ControlTray
           videoRef={videoRef} supportsVideo={true} onVideoStreamChange={() => {}}
           isAppMicActive={isMicActive} onAppMicToggle={setIsMicActive}
           isAppCamActive={isCamActive} onAppCamToggle={setIsCamActive}
@@ -156,13 +179,13 @@ const AppInternalLogic: React.FC<{ /* ...props... */ }> = ({ /* ...props... */
   );
 };
 
-const logoColorConfig = { /* ... (بدون تغییر) ... */
+const logoColorConfig = {
   blue: { ping: "bg-blue-200 dark:bg-blue-700", outer: "bg-blue-200 dark:bg-blue-700", mid: "bg-blue-300 dark:bg-blue-600", inner: "bg-blue-400 dark:bg-blue-500", },
   green: { ping: "bg-green-200 dark:bg-green-700", outer: "bg-green-200 dark:bg-green-700", mid: "bg-green-300 dark:bg-green-600", inner: "bg-green-400 dark:bg-green-500", },
   gray: { ping: "bg-gray-200 dark:bg-gray-700", outer: "bg-gray-200 dark:bg-gray-700", mid: "bg-gray-300 dark:bg-gray-600", inner: "bg-gray-400 dark:bg-gray-500", }
 };
 
-function App() { /* ... (state ها و useEffect ها بدون تغییر) ... */
+function App() {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [showIOSModal, setShowIOSModal] = useState(false);
   const [isAllowedOrigin, setIsAllowedOrigin] = useState<boolean | null>(null);
@@ -175,35 +198,23 @@ function App() { /* ... (state ها و useEffect ها بدون تغییر) ... *
   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 for complete animation ***
   const createLogoFunction = (isMini: boolean, isActive: boolean, type: 'human' | 'ai' = 'human', forFooter: boolean = false) => {
     if (!isActive) return null;
-
     const colorKey = type === 'human' ? 'blue' : (type === 'ai' ? 'green' : 'gray');
     const currentColors = logoColorConfig[colorKey as keyof typeof logoColorConfig] || logoColorConfig.gray;
-
     const size = isMini ? 80 : 200;
     const iconDisplaySize = isMini ? 35 : 70;
     const iconInset = (size - iconDisplaySize) / 2;
-
-    // مقادیر inset برای حلقه‌ها از HTML مرجع شما (مهم)
-    // این مقادیر باید فاصله حلقه‌ها از لبه کانتینر اصلی لوگو باشند
-    const insetsForRings = isMini 
-        ? { ping: 10, outer: 0, mid: 5, inner: 12 } // مقادیر HTML برای لوگوی کوچک
-        : { ping: 40, outer: 0, mid: 20, inner: 50 }; // مقادیر HTML برای لوگوی بزرگ
-
+    const insetsForRings = isMini
+        ? { ping: 10, outer: 0, mid: 5, inner: 12 }
+        : { ping: 40, outer: 0, mid: 20, inner: 50 };
     const IconComponent = type === 'human' ? SvgHumanIcon : null;
-
     return (
-      // کلاس logo-animation-wrapper در App.scss استایل‌های position:relative و flex را دارد
       <div className={cn("logo-animation-wrapper", {"for-footer": forFooter})} style={{ width: `${size}px`, height: `${size}px` }}>
-        {/* حلقه‌های انیمیشن با inset های صحیح */}
         <div className={`absolute rounded-full opacity-50 animate-ping ${currentColors.ping}`} style={{ inset: `${insetsForRings.ping}px` }}></div>
         <div className={`absolute rounded-full opacity-50 ${currentColors.outer}`} style={{ inset: `${insetsForRings.outer}px` }}></div>
         <div className={`absolute rounded-full opacity-50 ${currentColors.mid}`} style={{ inset: `${insetsForRings.mid}px` }}></div>
         <div className={`absolute rounded-full opacity-50 ${currentColors.inner}`} style={{ inset: `${insetsForRings.inner}px` }}></div>
-        
-        {/* کانتینر آیکون */}
         <div className="z-10 absolute flex items-center justify-center" style={{ inset: `${iconInset}px`, width: `${iconDisplaySize}px`, height: `${iconDisplaySize}px` }}>
           {IconComponent && <IconComponent />}
         </div>
@@ -213,7 +224,7 @@ function App() { /* ... (state ها و useEffect ها بدون تغییر) ... *
 
   return (
     <LiveAPIProvider initialConfig={initialAppConfig}>
-      <AppInternalLogic /* ...props... */ 
+      <AppInternalLogic
         isMicActive={isMicActive} setIsMicActive={setIsMicActive}
         isCamActive={isCamActive} setIsCamActive={setIsCamActive}
         createLogoFunction={createLogoFunction}