54 lines
2.5 KiB
JavaScript
54 lines
2.5 KiB
JavaScript
import React, { memo } from 'react';
|
|
import { Sparkles, Brain, Zap } from 'lucide-react';
|
|
|
|
const AIThinking = memo(({ className = '' }) => {
|
|
return (
|
|
<div className={`flex items-center space-x-3 ${className}`} role="status" aria-label="AI is thinking">
|
|
{/* Animated AI Avatar */}
|
|
<div className="relative">
|
|
<div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-violet-500 via-violet-600 to-fuchsia-500 flex items-center justify-center shadow-lg shadow-violet-500/30 animate-glow-pulse" aria-hidden="true">
|
|
<Sparkles className="w-5 h-5 text-white" />
|
|
</div>
|
|
{/* Orbiting dots */}
|
|
<div className="absolute inset-0 flex items-center justify-center" aria-hidden="true">
|
|
<div className="w-14 h-14 border border-violet-300/30 rounded-2xl animate-ping" style={{ animationDuration: '2s' }} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Thinking Animation */}
|
|
<div className="flex items-center space-x-3 bg-white/10 backdrop-blur-md rounded-2xl px-5 py-3 border border-white/10 shadow-soft">
|
|
{/* Animated bars */}
|
|
<div className="flex items-end space-x-1 h-5" aria-hidden="true">
|
|
{[0, 1, 2].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="w-1.5 bg-gradient-to-t from-violet-400 to-fuchsia-400 rounded-full animate-bounce"
|
|
style={{
|
|
height: '100%',
|
|
animationDuration: '0.6s',
|
|
animationDelay: `${i * 0.15}s`,
|
|
transform: 'scaleY(0.4)',
|
|
transformOrigin: 'bottom',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<span className="text-sm font-medium text-slate-300">Sarthi is thinking</span>
|
|
|
|
{/* Brain icon with pulse */}
|
|
<div className="relative" aria-hidden="true">
|
|
<Brain className="w-4 h-4 text-violet-400" />
|
|
<div className="absolute inset-0 w-full h-full">
|
|
<Zap className="w-2 h-2 text-amber-400 absolute -top-1 -right-1 animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
AIThinking.displayName = 'AIThinking';
|
|
|
|
export default AIThinking;
|