mirror of https://github.com/kortix-ai/suna.git
58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
||
|
|
|
||
|
|
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-1 space-y-2 w-full h-16 bg-background">
|
||
|
|
<div className="max-w-[90%] animate-shimmer bg-transparent h-full p-0.5 text-sm border rounded-xl shadow-sm relative overflow-hidden">
|
||
|
|
<div className="rounded-md bg-background flex px-5 items-start justify-start h-full relative z-10">
|
||
|
|
<div className="flex flex-col py-5 items-start w-full space-y-3">
|
||
|
|
<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" }}
|
||
|
|
>
|
||
|
|
{items[index].content}
|
||
|
|
</motion.div>
|
||
|
|
</AnimatePresence>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|