File size: 1,445 Bytes
9b906ea | 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 | import { cn } from "@heroui/react";
import { motion, AnimatePresence } from "framer-motion";
import DebugStackframeDot from "#/icons/debug-stackframe-dot.svg?react";
interface ChatStatusIndicatorProps {
status: string;
statusColor: string;
}
function ChatStatusIndicator({
status,
statusColor,
}: ChatStatusIndicatorProps) {
return (
<div
data-testid="chat-status-indicator"
className={cn(
"w-full max-w-full rounded-[100px] p-1 bg-[var(--oh-surface)] flex items-center gap-1",
)}
>
<AnimatePresence mode="wait">
{/* Dot */}
<motion.span
key={`dot-${status}`}
className="flex-shrink-0 animate-[pulse_1.2s_ease-in-out_infinite]"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
>
<DebugStackframeDot className="w-4 h-4" color={statusColor} />
</motion.span>
{/* Text */}
<motion.span
key={`text-${status}`}
initial={{ opacity: 0, y: -2 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 2 }}
transition={{ duration: 0.3 }}
className="pr-1.5 font-normal text-[11px] leading-[16px] normal-case break-words whitespace-normal"
>
{status}
</motion.span>
</AnimatePresence>
</div>
);
}
export default ChatStatusIndicator;
|