Create components/ai-tutor/TutorAvatar.tsx

frontend/src/components/ai-tutor/TutorAvatar.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+
+const TutorAvatar = ({ state = 'neutral', speaking = false }) => {
+  const [isBlinking, setIsBlinking] = useState(false);
+
+  useEffect(() => {
+    const blinkInterval = setInterval(() => {
+      setIsBlinking(true);
+      setTimeout(() => setIsBlinking(false), 200);
+    }, Math.random() * 4000 + 2000);
+    
+    return () => clearInterval(blinkInterval);
+  }, []);
+
+  return (
+    <div className="flex justify-center items-center p-4">
+      <svg viewBox="0 0 100 100" className="w-32 h-32 transition-transform duration-300 hover:scale-110">
+        <circle cx="50" cy="50" r="45" className="fill-blue-500" />
+        
+        {isBlinking ? (
+          <g>
+            <line x1="30" y1="40" x2="40" y2="40" stroke="white" strokeWidth="3" />
+            <line x1="60" y1="40" x2="70" y2="40" stroke="white" strokeWidth="3" />
+          </g>
+        ) : (
+          <g>
+            <circle cx="35" cy="40" r="5" fill="white" />
+            <circle cx="65" cy="40" r="5" fill="white" />
+          </g>
+        )}
+        
+        <path
+          d={
+            state === 'happy'
+              ? 'M 30 60 Q 50 80 70 60'
+              : state === 'thinking'
+              ? 'M 30 65 Q 50 65 70 65'
+              : 'M 30 60 Q 50 70 70 60'
+          }
+          stroke="white"
+          fill="none"
+          strokeWidth="3"
+          className={speaking ? 'animate-bounce' : ''}
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default TutorAvatar;