import { useEffect, useRef, useState } from "react"; import { animate, motion } from "motion/react"; import { cn } from "@/lib/utils"; export interface AiTokenCounterProps extends React.HTMLAttributes { sourceRef: React.RefObject; token: number; flyingClassName?: string; } export const AiTokenCounter = ({ sourceRef, token, className, flyingClassName, ...props }: AiTokenCounterProps) => { const [displayCount, setDisplayCount] = useState(token); const lastToken = useRef(token); const counterRef = useRef(null); const flyingRef = useRef(null); const ANIMATION_DURATION = 1; useEffect(() => { const diff = token - lastToken.current; if (diff === 0 || !sourceRef.current || !counterRef.current || !flyingRef.current) return; const startValue = lastToken.current; lastToken.current = token; const flyEl = flyingRef.current; flyEl.innerText = `${diff > 0 ? "+" : ""}${diff}`; flyEl.style.transform = "none"; const src = sourceRef.current.getBoundingClientRect(); const dest = counterRef.current.getBoundingClientRect(); const fly = flyEl.getBoundingClientRect(); const start = { x: src.left + src.width / 2 - (fly.left + fly.width / 2), y: src.top + src.height / 2 - (fly.top + fly.height / 2), }; const end = { x: dest.left + dest.width / 2 - (fly.left + fly.width / 2), y: dest.top + dest.height / 2 - (fly.top + fly.height / 2), }; const midX = (start.x + end.x) / 2; const midY = Math.min(start.y, end.y) - 24; flyEl.style.visibility = "visible"; const flyControls = animate( flyEl, { x: [start.x, midX, end.x], y: [start.y, midY, end.y], scale: [0.5, 1.2, 0.5], opacity: [0, 1, 0], }, { duration: ANIMATION_DURATION, x: { duration: ANIMATION_DURATION, ease: "linear", times: [0, 0.5, 1] }, y: { duration: ANIMATION_DURATION, ease: ["easeOut", "easeIn"], times: [0, 0.5, 1] }, scale: { duration: ANIMATION_DURATION, ease: "easeInOut", times: [0, 0.5, 1] }, opacity: { duration: ANIMATION_DURATION, ease: "easeInOut", times: [0, 0.5, 1] }, }, ); const countControls = animate(startValue, token, { duration: ANIMATION_DURATION * 0.2, delay: ANIMATION_DURATION * 0.8, onUpdate: (value) => { setDisplayCount(Math.floor(value)); }, onComplete: () => { setDisplayCount(token); flyEl.style.visibility = "hidden"; }, }); return () => { flyControls.stop(); countControls.stop(); }; }, [token, sourceRef]); return (

{displayCount}

); };