File size: 2,161 Bytes
5da4770 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { AnimatedShinyText } from '@/components/ui/animated-shiny-text';
const items = [
{ id: 1, content: "Initializing neural pathways..." },
{ id: 2, content: "Analyzing query complexity..." },
{ id: 3, content: "Assembling cognitive framework..." },
{ id: 4, content: "Orchestrating thought processes..." },
{ id: 5, content: "Synthesizing contextual understanding..." },
{ id: 6, content: "Calibrating response parameters..." },
{ id: 7, content: "Engaging reasoning algorithms..." },
{ id: 8, content: "Processing semantic structures..." },
{ id: 9, content: "Formulating strategic approach..." },
{ id: 10, content: "Optimizing solution pathways..." },
{ id: 11, content: "Harmonizing data streams..." },
{ id: 12, content: "Architecting intelligent response..." },
{ id: 13, content: "Fine-tuning cognitive models..." },
{ id: 14, content: "Weaving narrative threads..." },
{ id: 15, content: "Crystallizing insights..." },
{ id: 16, content: "Preparing comprehensive analysis..." }
];
export const AgentLoader = () => {
const [index, setIndex] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setIndex((state) => {
if (state >= items.length - 1) return 0;
return state + 1;
});
}, 1500);
return () => clearInterval(id);
}, []);
return (
<div className="flex py-2 items-center w-full">
<div>✨</div>
<AnimatePresence>
<motion.div
key={items[index].id}
initial={{ y: 20, opacity: 0, filter: "blur(8px)" }}
animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
exit={{ y: -20, opacity: 0, filter: "blur(8px)" }}
transition={{ ease: "easeInOut" }}
style={{ position: "absolute" }}
className='ml-7'
>
<AnimatedShinyText>{items[index].content}</AnimatedShinyText>
</motion.div>
</AnimatePresence>
</div>
);
};
|