Initial commit: Sarthi Lab desktop application

src/components/AIThinking.jsx

@@ -0,0 +1,53 @@
+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;