Update src/App.tsx

src/App.tsx

@@ -1,4 +1,4 @@
-// ... (لایسنس، ایمپورت‌ها، myCustomInstruction, initialAppConfig، SvgHumanIcon, SvgReferenceMicrophoneIcon، AppInternalLogic بدون تغییر از پاسخ قبلی) ...
+// ... (ایمپورت‌ها، myCustomInstruction, initialAppConfig, SVG Icons, AppInternalLogic، و بخش اول تابع App بدون تغییر) ...
 import React, { useEffect, useRef, useState } from "react";
 import './App.scss';
 import { LiveAPIProvider, useLiveAPIContext } from "./contexts/LiveAPIContext";
@@ -107,145 +107,174 @@ const SvgReferenceMicrophoneIcon = () => (
     </svg>
 );
 
-const AppInternalLogic: React.FC<{ /* ...props... */ }> = ({ /* ...props... */ }) => {
-  // ... (بدون تغییر)
-  const { isMicActive, isCamActive, setIsMicActive, setIsCamActive, createLogoFunction, videoRef, notificationPopoverRef, notificationButtonRef, isNotificationOpen, setIsNotificationOpen } = arguments[0];
-  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>
+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>
           </div>
-          <div className="back-button-container">
-            <button
-              id="back-button"
-              aria-label="Go back"
-              className="header-button"
-              onClick={() => alert('Back clicked (implement navigation)')}
+  
+          <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'),
+              })}
             >
-              <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 className="notification-popover-text-content">
+                مدل‌های هوش مصنوعی می‌توانند اشتباه کنند، صحت اطلاعات مهم را بررسی کنید و از وارد کردن اطلاعات حساس بپرهیزید.
+              </div>
             </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 }
+  
+          <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>
+  
+          <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 = { /* ... (بدون تغییر) ... */
+  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",
+  }
+};
 
-const logoColorConfig = { /* ... (بدون تغییر) ... */ };
-// ... (App و createLogoFunction مثل قبل، با تمرکز روی صحت رندر حلقه‌ها) ...
-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);
+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);
       }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isNotificationOpen]);
-
-  if (isAllowedOrigin === null) {
-    return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
-  }
+      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;
 
@@ -256,17 +285,23 @@ function App() {
     const iconDisplaySize = isMini ? 35 : 70;
     const iconInset = (size - iconDisplaySize) / 2;
 
-    // مقادیر inset برای حلقه‌ها از HTML مرجع شما
-    // این مقادیر باید ثابت باشند تا ظاهر انیمیشن حفظ شود
-    const insetValues = isMini
-        ? { ping: 10, outer: 0, mid: 5, inner: 12 } // مقادیر برای لوگوی کوچک
-        : { ping: 40, outer: 0, mid: 20, inner: 50 }; // مقادیر برای لوگوی بزرگ
+    // مقادیر 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 استفاده شده
+        mid: isMini ? 5 : 20,
+        inner: isMini ? 12 : 50,
+        icon: iconInset
+    };
 
     const IconComponent = type === 'human' ? SvgHumanIcon : null;
 
     return (
       <div className={cn("logo-animation-wrapper", {"for-footer": forFooter})} style={{ width: `${size}px`, height: `${size}px` }}>
-        {/* حلقه Ping */}
+        {/* حلقه پینگ */}
         <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>
@@ -275,14 +310,14 @@ function App() {
         {/* حلقه داخلی */}
         <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: `${iconInset}px`, width: `${iconDisplaySize}px`, height: `${iconDisplaySize}px` }}>
+        <div className="z-10 absolute flex items-center justify-center" style={{ inset: `${insetValues.icon}px`, width: `${iconDisplaySize}px`, height: `${iconDisplaySize}px` }}>
           {IconComponent && <IconComponent />}
         </div>
       </div>
     );
   };
 
-  return (
+  return ( /* ... (LiveAPIProvider و AppInternalLogic مثل قبل) ... */
     <LiveAPIProvider initialConfig={initialAppConfig}>
       <AppInternalLogic
         isMicActive={isMicActive}
@@ -300,4 +335,5 @@ function App() {
     </LiveAPIProvider>
   );
 }
+
 export default App;