spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/chat/searching-widget.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import { motion } from "framer-motion";18import { Sparkles } from "lucide-react";1920export function SearchingWidget() {21  return (22    <motion.div23      initial={{ opacity: 0, y: 20 }}24      animate={{ opacity: 1, y: 0 }}25      exit={{ opacity: 0, y: -20 }}26      transition={{ duration: 0.4 }}27      className="w-full max-w-5xl mx-auto"28      data-testid="searching-widget"29    >30      <div className="flex flex-col items-center justify-center py-20 space-y-6">31        {/* Animated Icon */}32        <motion.div33          animate={{34            rotate: [0, 360],35            scale: [1, 1.1, 1],36          }}37          transition={{38            rotate: {39              duration: 2,40              repeat: Infinity,41              ease: "linear",42            },43            scale: {44              duration: 1.5,45              repeat: Infinity,46              ease: "easeInOut",47            },48          }}49          className="relative"50        >51          <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl" />52          <div className="relative bg-gradient-to-br from-primary/10 to-cyan-500/10 p-6 rounded-full border border-primary/20">53            <Sparkles className="w-12 h-12 text-primary" />54          </div>55        </motion.div>5657        {/* Text Content */}58        <div className="text-center space-y-2">59          <motion.h360            initial={{ opacity: 0 }}61            animate={{ opacity: 1 }}62            transition={{ delay: 0.2 }}63            className="text-2xl font-semibold text-foreground"64            data-testid="text-searching-title"65          >66            Search in progress...67          </motion.h3>68          <motion.p69            initial={{ opacity: 0 }}70            animate={{ opacity: 1 }}71            transition={{ delay: 0.3 }}72            className="text-muted-foreground max-w-md"73            data-testid="text-searching-subtitle"74          >75            Analyzing and retrieving the best information76          </motion.p>77        </div>7879        {/* Animated Dots */}80        <motion.div81          className="flex gap-2"82          initial={{ opacity: 0 }}83          animate={{ opacity: 1 }}84          transition={{ delay: 0.4 }}85        >86          {[0, 1, 2].map((i) => (87            <motion.div88              key={i}89              animate={{90                y: [0, -10, 0],91                opacity: [0.5, 1, 0.5],92              }}93              transition={{94                duration: 1.5,95                repeat: Infinity,96                delay: i * 0.2,97                ease: "easeInOut",98              }}99              className="w-2 h-2 bg-primary rounded-full"100            />101          ))}102        </motion.div>103      </div>104    </motion.div>105  );106}107