Update src/components/logo/Logo.tsx

src/components/logo/Logo.tsx

@@ -9,44 +9,32 @@ type LogoProps = {
   isAi: boolean;
   isActive: boolean;
   speakingVolume?: number;
+  isUserSpeaking?: boolean;
 }
 
-export default function Logo({isAi, isActive, isMini, speakingVolume = 0}: LogoProps) {
-
+export default function Logo({ isAi, isActive, isMini, speakingVolume = 0, isUserSpeaking = false }: LogoProps) {
   if (!isActive) return null;
 
   const aiVoiceScale = 1 + (speakingVolume * 1.5);
 
+  const animatedCircleStyle: React.CSSProperties = {
+    transition: 'transform 0.15s ease-out',
+    transform: `scale(${aiVoiceScale})`
+  };
+
   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",
-                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,
-                humanColor: "#FFFFFF",
-                aiColor: "#FFFFFF",
-              })}
-            </div>
-          </>
+        <div className={cn("absolute rounded-full opacity-50", isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700", isMini ? "inset-[10px]" : "inset-[40px]")} style={animatedCircleStyle} />
+        <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, isUserSpeaking: isUserSpeaking })}
+        </div>
       </div>
     </div>
   );