Thinking Indicator

1"use client";
2 
3import { forwardRef, useState, useEffect, type HTMLAttributes } from "react";
4import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
5import { cn } from "@/lib/utils";
6import { fontWeights } from "@/lib/font-weight";
7 
8const circleA =
9  "M 12 8 C 14.21 8 16 9.79 16 12 C 16 14.21 14.21 16 12 16 C 9.79 16 8 14.21 8 12 C 8 9.79 9.79 8 12 8 Z";
10 
11const infinity =
12  "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z";
13 
14const circleB =
15  "M 12 16 C 14.21 16 16 14.21 16 12 C 16 9.79 14.21 8 12 8 C 9.79 8 8 9.79 8 12 C 8 14.21 9.79 16 12 16 Z";
16 
17const words = ["Thinking", "Moonwalking", "Planning", "Refining"];
18 
19interface ThinkingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
20  /** Show the morphing circle⇄infinity glyph before the label. Set to `false`
21   *  for a text-only indicator (e.g. inline before a streamed reply). */
22  showIcon?: boolean;
23}
24 
25const ThinkingIndicator = forwardRef<HTMLDivElement, ThinkingIndicatorProps>(
26  ({ className, showIcon = true, ...props }, ref) => {
27  const [index, setIndex] = useState(0);
28  // Reduced motion drops the infinite glyph morph and the word cycling — a
29  // static glyph and label carry the same meaning without the movement.
30  const reduceMotion = useReducedMotion() ?? false;
31 
32  useEffect(() => {
33    if (reduceMotion) return;
34    const interval = setInterval(() => {
35      setIndex((i) => (i + 1) % words.length);
36    }, 4000);
37    return () => clearInterval(interval);
38  }, [reduceMotion]);
39 
40  return (
41    <div
42      ref={ref}
43      role="status"
44      className={cn("flex items-center gap-2 px-3 py-2", className)}
45      {...props}
46    >
47      {/* Static announcement — the cycling word display below is aria-hidden
48          so screen readers hear one "Thinking…" instead of a re-announcement
49          every 4 seconds. */}
50      <span className="sr-only">Thinking…</span>
51      {showIcon && (
52        <motion.svg
53          aria-hidden
54          width={20}
55          height={20}
56          viewBox="0 0 24 24"
57          fill="none"
58          stroke="currentColor"
59          strokeWidth={1.5}
60          strokeLinecap="round"
61          strokeLinejoin="round"
62          className="text-muted-foreground shrink-0"
63        >
64          {reduceMotion ? (
65            <path d={infinity} />
66          ) : (
67            <motion.path
68              animate={{
69                d: [circleA, infinity, circleB, infinity, circleA],
70              }}
71// … truncated