Ezmary commited on
Commit
86cb155
·
verified ·
1 Parent(s): 81929ec

Update src/components/logo/Logo.tsx

Browse files
Files changed (1) hide show
  1. src/components/logo/Logo.tsx +7 -20
src/components/logo/Logo.tsx CHANGED
@@ -15,9 +15,9 @@ type LogoProps = {
15
  export default function Logo({ isAi, isActive, isMini, speakingVolume = 0, isUserSpeaking = false }: LogoProps) {
16
  if (!isActive) return null;
17
 
18
- // --- منطق انیمیشن صدای ربات ---
19
  const aiVoiceScale = 1 + (speakingVolume * 1.5);
20
- const isAiSpeaking = speakingVolume > 0.02; // یک آستانه برای جلوگیری از لرزش‌های جزئی
 
21
  const animatedCircleStyle: React.CSSProperties = {
22
  transition: 'transform 0.15s ease-out',
23
  transform: `scale(${aiVoiceScale})`
@@ -30,24 +30,10 @@ export default function Logo({ isAi, isActive, isMini, speakingVolume = 0, isUse
30
  </div>
31
 
32
  <div className={cn("relative", isMini ? "w-[80px] h-[80px]" : "w-[200px] h-[200px]")}>
33
- {/* انیمیشن پینگ اصلی که همیشه فعال است */}
34
- <div className={cn(
35
- "absolute rounded-full opacity-50 animate-ping",
36
- isAi ? "bg-green-200" : "bg-blue-200", // حذف dark mode برای سادگی
37
- isMini ? "inset-[10px]" : "inset-[40px]"
38
- )} />
39
 
40
- {/* این دایره با صدای ربات بزرگ و کوچک می‌شود */}
41
- <div
42
- className={cn(
43
- "absolute rounded-full opacity-50",
44
- isAi ? "bg-green-200" : "bg-blue-200",
45
- isMini ? "inset-[10px]" : "inset-[40px]"
46
- )}
47
- style={animatedCircleStyle}
48
- />
49
 
50
- {/* بقیه دایره‌های ثابت پس‌زمینه */}
51
  <div className={cn("absolute inset-0 rounded-full opacity-50", isAi ? "bg-green-200" : "bg-blue-200")} />
52
  <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-300" : "bg-blue-300", isMini ? "inset-[5px]" : "inset-[20px]")} />
53
  <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-400" : "bg-blue-400", isMini ? "inset-[12px]" : "inset-[50px]")} />
@@ -55,8 +41,9 @@ export default function Logo({ isAi, isActive, isMini, speakingVolume = 0, isUse
55
  <div className={cn("z-10 absolute flex items-center justify-center inset-0")}>
56
  {humanAiIcon({
57
  size: isMini ? 24 : 45,
58
- isUserSpeaking: isUserSpeaking, // <-- این برای آدمک است
59
- isAiSpeaking: isAiSpeaking, // <-- این برای ربات است
 
60
  })}
61
  </div>
62
  </div>
 
15
  export default function Logo({ isAi, isActive, isMini, speakingVolume = 0, isUserSpeaking = false }: LogoProps) {
16
  if (!isActive) return null;
17
 
 
18
  const aiVoiceScale = 1 + (speakingVolume * 1.5);
19
+ const isAiSpeaking = speakingVolume > 0.02;
20
+
21
  const animatedCircleStyle: React.CSSProperties = {
22
  transition: 'transform 0.15s ease-out',
23
  transform: `scale(${aiVoiceScale})`
 
30
  </div>
31
 
32
  <div className={cn("relative", isMini ? "w-[80px] h-[80px]" : "w-[200px] h-[200px]")}>
33
+ <div className={cn("absolute rounded-full opacity-50 animate-ping", isAi ? "bg-green-200" : "bg-blue-200", isMini ? "inset-[10px]" : "inset-[40px]")} />
 
 
 
 
 
34
 
35
+ <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-200" : "bg-blue-200", isMini ? "inset-[10px]" : "inset-[40px]")} style={animatedCircleStyle} />
 
 
 
 
 
 
 
 
36
 
 
37
  <div className={cn("absolute inset-0 rounded-full opacity-50", isAi ? "bg-green-200" : "bg-blue-200")} />
38
  <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-300" : "bg-blue-300", isMini ? "inset-[5px]" : "inset-[20px]")} />
39
  <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-400" : "bg-blue-400", isMini ? "inset-[12px]" : "inset-[50px]")} />
 
41
  <div className={cn("z-10 absolute flex items-center justify-center inset-0")}>
42
  {humanAiIcon({
43
  size: isMini ? 24 : 45,
44
+ // --- 👇 منطق برعکس شده 👇 ---
45
+ isUserSpeaking: isAiSpeaking, // <-- ربات صحبت می‌کند -> آدمک تکان می‌خورد
46
+ isAiSpeaking: isUserSpeaking, // <-- کاربر صحبت می‌کند -> ربات تکان می‌خورد
47
  })}
48
  </div>
49
  </div>