Spaces:
Running
Running
Update src/components/logo/Logo.tsx
Browse files- 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 |
-
|
| 59 |
-
|
|
|
|
| 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>
|