Update src/App.tsx

src/App.tsx

@@ -19,7 +19,6 @@ import { IOSModal } from "./components/ios-modal/IOSModal";
 import { isIOS } from "./lib/platform";
 import cn from "classnames";
 import { LiveConfig } from "./multimodal-live-types";
-// Altair و SidePanel حذف شدند چون در ظاهر جدید جایی ندارند
 
 const myCustomInstruction = `
 ت1. هویت دستیار:
@@ -105,8 +104,6 @@ const initialAppConfig: LiveConfig = {
   },
 };
 
-// آیکون انسان از HTML شما (برای لوگوی بزرگ و کوچک)
-// stroke="currentColor" باعث می‌شود رنگ خطوط از CSS (var(--foreground)) ارث‌بری کند
 const SvgHumanIcon = () => (
     <svg width="70" height="70" viewBox="0 0 88 89" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M75.1481 81.6361H12.9259C9.66667 81.6361 7 78.9721 7 75.7161V58.5112C7 57.5862 7 57.1052 7.44444 56.2172C8.85185 52.9612 13 50.2232 19.4815 47.8922C24.1111 56.6982 33.3704 62.6921 44 62.6921C54.6296 62.6921 63.9259 56.6982 68.5185 47.8922C75 50.1862 79.1852 52.9982 80.5556 56.2172C81 56.6612 81 57.6232 81 58.5112V75.7161C81 78.9721 78.3333 81.6361 75.0741 81.6361H75.1481Z" stroke="currentColor" strokeWidth="6.42146" strokeLinecap="round" strokeLinejoin="round"/><path d="M44.0371 50.1862C33.8519 50.1862 25.5186 41.8612 25.5186 31.6863V26.1363C25.5186 15.9613 33.8519 7.63635 44.0371 7.63635C54.2223 7.63635 62.5556 15.9613 62.5556 26.1363V31.6863C62.5556 41.8612 54.2223 50.1862 44.0371 50.1862Z" stroke="currentColor" strokeWidth="6.42146" strokeLinecap="round" strokeLinejoin="round"/></svg>
 );
@@ -143,14 +140,10 @@ const AppInternalLogic: React.FC<{
   }, [isMicActive, isCamActive, connected, disconnect]);
 
   return (
-    // کلاس‌های اصلی از body و div والد در HTML مرجع
-    // min-h-[90dvh] md:min-h-screen
-    <div className="w-full flex flex-col items-center justify-center min-h-screen text-foreground antialiased"> {/* استفاده از min-h-screen برای پر کردن کامل ارتفاع */}
-      {/* Wrapper داخلی از HTML: "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 text-foreground antialiased">
       <div className="max-w-3xl w-full flex flex-col items-center justify-center h-full relative">
-        {/* Header Controls - ترتیب دکمه‌ها مطابق HTML (نوتیفیکیشن چپ، بازگشت راست) */}
         <div className="header-controls">
-          <div id="notification-trigger-container"> {/* Wrapper از HTML */}
+          <div id="notification-trigger-container">
             <button
               ref={notificationButtonRef}
               id="notification-button"
@@ -164,14 +157,13 @@ const AppInternalLogic: React.FC<{
               <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"> {/* Wrapper از HTML */}
+          <div className="back-button-container">
             <div className="header-button" onClick={() => alert('Back clicked (implement navigation)')}>
               <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>
         </div>
 
-        {/* Notification Popover */}
         <div ref={notificationPopoverRef} id="notification-popover-wrapper" className="notification-popover-wrapper">
           <div
             id="notification-popover"
@@ -186,27 +178,24 @@ const AppInternalLogic: React.FC<{
           </div>
         </div>
         
-        {/* MediaToggle Area - از HTML: "w-full flex flex-col items-center justify-center h-[90dvh] bg-background top-0 left-0 relative" */}
-        {/* h-[90dvh] با flex-grow جایگزین می‌شود و bg-background از body می‌آید */}
-        <div className="w-full flex flex-col items-center justify-center flex-grow relative"> {/* flex-grow برای پر کردن ارتفاع */}
+        <div className="w-full flex flex-col items-center justify-center flex-grow relative">
           <video
-            id="video-feed" // id از HTML
+            id="video-feed"
             ref={videoRef}
             autoPlay
             playsInline
             className={cn(
-              "absolute top-0 left-0 w-full h-full object-cover scale-x-[-1]", // کلاس‌های HTML
-              { "hidden": !isCamActive } // کلاس hidden از HTML
+              "absolute top-0 left-0 w-full h-full object-cover scale-x-[-1]",
+              { "hidden": !isCamActive }
             )}
           />
-          {/* large-logo-container - کلاس hidden و flex از HTML */}
           <div
-            id="large-logo-container" // id از HTML
+            id="large-logo-container"
             className={cn(
-              "absolute top-0 left-0 w-full h-full", // برای پوشاندن کل فضا
+              "absolute top-0 left-0 w-full h-full",
               {
-                "flex items-center justify-center": isMicActive && !isCamActive, // نمایش لوگو با flex
-                "hidden": !isMicActive || isCamActive, // مخفی کردن در غیر این صورت
+                "flex items-center justify-center": isMicActive && !isCamActive,
+                "hidden": !isMicActive || isCamActive,
               }
             )}
           >
@@ -229,6 +218,28 @@ const AppInternalLogic: React.FC<{
   );
 }
 
+// *** NEW: Configuration for logo colors for Tailwind JIT compatibility ***
+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() {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [showIOSModal, setShowIOSModal] = useState(false);
@@ -275,27 +286,25 @@ function App() {
   
   const createLogoFunction = (isMini: boolean, isActive: boolean, type: 'human' | 'ai' = 'human') => {
     if (!isActive) return null;
-    const size = isMini ? 80 : 200; // مقادیر از JS در HTML
-    const iconSize = isMini ? 35 : 70;
+    const size = isMini ? 80 : 200;
+    const iconSize = isMini ? 35 : 70; // This variable seems unused for SvgHumanIcon which has fixed size. Kept for consistency.
     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' : (type === 'ai' ? 'green' : 'gray'); // اضافه کردن gray برای حالت پیش‌فرض
-
-    // کلاس‌های رنگی باید توسط Tailwind شناسایی شوند
-    // مثال: "bg-blue-200", "dark:bg-blue-700"
-    // این کلاس‌ها باید در فایل App.scss شما یا در پیکربندی Tailwind تعریف شده باشند اگر از رنگ‌های سفارشی استفاده می‌کنید.
-    // در اینجا فرض می‌کنیم Tailwind می‌تواند bg-blue-200 و غیره را به درستی پردازش کند.
+    
+    // *** UPDATED: Use logoColorConfig for Tailwind JIT compatibility ***
+    const effectiveType = (type === 'human') ? 'blue' : (type === 'ai' ? 'green' : 'gray');
+    const currentColors = logoColorConfig[effectiveType as keyof typeof logoColorConfig] || logoColorConfig.gray;
 
     return (
       <div className="relative" style={{ width: `${size}px`, height: `${size}px` }}>
-        <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={`absolute rounded-full opacity-50 animate-ping ${currentColors.ping}`} style={{ inset: `${insetBase.ping}px` }}></div>
+        <div className={`absolute rounded-full opacity-50 ${currentColors.outer}`} style={{ inset: `${insetBase.outer}px` }}></div>
+        <div className={`absolute rounded-full opacity-50 ${currentColors.mid}`} style={{ inset: `${insetBase.mid}px` }}></div>
+        <div className={`absolute rounded-full opacity-50 ${currentColors.inner}`} 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 />}
-          {/* اگر آیکون AI دارید، اینجا اضافه کنید */}
+          {/* اگر آیکون AI دارید، اینجا اضافه کنید. مثال: type === 'ai' && <SvgAiIcon /> */}
         </div>
       </div>
     );