Update src/components/logo/Logo.scss

src/components/logo/Logo.scss

@@ -1,27 +1,60 @@
-// src/components/logo/Logo.scss
-
-@keyframes user-pulse-animation {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 0.8; // کمی محوتر در حالت عادی
-  }
-  50% {
-    transform: scale(1.1); // بزرگتر می‌شود
-    opacity: 1; // کاملا واضح
-  }
-}
+// src/components/logo/Logo.tsx
+
+import React from 'react';
+import cn from "classnames";
+import { humanAiIcon } from '../icons';
+import './Logo.scss'; // <<--- این ایمپورت بسیار مهم است
 
-.user-speaking {
-  .human-part {
-    // انیمیشن را فقط روی بخش انسان اعمال می‌کنیم
-    animation: user-pulse-animation 1.5s infinite ease-in-out;
-    // مرکز چرخش را درست تنظیم می‌کنیم
-    transform-origin: center; 
-  }
+type LogoProps = {
+  isMini: boolean;
+  isAi: boolean;
+  isActive: boolean;
+  speakingVolume?: number;
+  isUserSpeaking?: boolean;
 }
 
-.ai-speaking-ripple {
-  // متغیر --ai-voice-scale از React می‌آید
-  transform: scale(var(--ai-voice-scale, 1));
-  transition: transform 0.15s ease-out; // transition نرم‌تر
+export default function Logo({isAi, isActive, isMini, speakingVolume = 0, isUserSpeaking = false}: LogoProps) {
+
+  if (!isActive) return null;
+
+  const aiVoiceScale = 1 + (speakingVolume * 1.5);
+
+  // رنگ بخش انسان در حالت عادی کمی خاکستری و در هنگام صحبت سفید کامل است
+  const humanColor = isUserSpeaking ? "#FFFFFF" : "#E2E8F0"; 
+  const aiColor = "#FFFFFF";
+
+  return (
+    <div className={cn("w-fit flex items-center justify-center")}>
+      <div className={"hidden bg-green-200 bg-green-300 bg-green-400 bg-blue-200 bg-blue-300 bg-blue-400 dark:bg-green-700 dark:bg-green-600 dark:bg-green-500 dark:bg-blue-700 dark:bg-blue-600 dark:bg-blue-500"}>
+        color pre-loader
+      </div>
+
+      <div className={cn("relative", isMini ? "w-[80px] h-[80px]" : "w-[200px] h-[200px]")}>
+          <>
+            <div
+              className={cn(
+                "absolute rounded-full opacity-50",
+                "ai-speaking-ripple", // کلاس انیمیشن موج AI
+                isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700",
+                isMini ? "inset-[10px]" : "inset-[40px]",
+              )}
+              style={{ '--ai-voice-scale': aiVoiceScale } as React.CSSProperties}
+            />
+            
+            <div className={cn("absolute inset-0 rounded-full opacity-50", isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700")} />
+            <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-300 dark:bg-green-600" : "bg-blue-300 dark:bg-blue-600", isMini ? "inset-[5px]" : "inset-[20px]")} />
+            <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-400 dark:bg-green-500" : "bg-blue-400 dark:bg-blue-500", isMini ? "inset-[12px]" : "inset-[50px]")} />
+
+            <div className={cn("z-10 absolute flex items-center justify-center inset-0")}>
+              {humanAiIcon({ 
+                size: isMini ? 24 : 45,
+                className: cn({ 'user-speaking': isUserSpeaking }), // اعمال کلاس انیمیشن
+                humanColor: humanColor, // ارسال رنگ برای بخش انسان
+                aiColor: aiColor,       // ارسال رنگ برای بخش ربات
+              })}
+            </div>
+          </>
+      </div>
+    </div>
+  );
 }