Thinking Dots

1'use client';
2 
3import { cn } from '@/lib/utils';
4 
5const KEYFRAMES = `
6@keyframes su-dot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-2px) } }
7@keyframes su-bar-slide { 0% { transform: translateX(-100%) } 100% { transform: translateX(400%) } }
8`;
9 
10export type ThinkingDotsVariant = 'Dots' | 'Bar';
11 
12export interface ThinkingDotsProps {
13  label?: string;
14  variant?: ThinkingDotsVariant;
15  className?: string;
16}
17 
18export function ThinkingDots({
19  label = 'Assistant is thinking',
20  variant = 'Dots',
21  className,
22}: ThinkingDotsProps) {
23  return (
24    <div
25      role="status"
26      aria-label={label}
27      className={cn(
28        'flex w-fit items-center gap-2.5 text-neutral-500 dark:text-neutral-400',
29        className,
30      )}
31    >
32      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />
33 
34      {variant === 'Dots' ? (
35        <span aria-hidden className="flex items-center gap-1">
36          {[0, 1, 2].map((index) => (
37            <span
38              key={index}
39              className="size-1.5 rounded-full bg-current motion-reduce:!animate-none"
40              style={{ animation: `su-dot 1.2s ease-in-out ${index * 160}ms infinite` }}
41            />
42          ))}
43        </span>
44      ) : (
45        <span
46          aria-hidden
47          className="relative h-1 w-10 overflow-hidden rounded-full bg-black/[0.07] dark:bg-white/[0.09]"
48        >
49          <span
50            className="absolute inset-y-0 w-1/4 rounded-full bg-current motion-reduce:!animate-none"
51            style={{ animation: 'su-bar-slide 1.1s ease-in-out infinite' }}
52          />
53        </span>
54      )}
55 
56      <span className="text-[12.5px]">{label}</span>
57    </div>
58  );
59}
60 
61export default ThinkingDots;