Grok Thinking

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * GrokThinking — Grok's working line: a braille spinner and a rotating verb in
8 * Grok's amber, with a live elapsed hint. Polite live region for screen
9 * readers.
10 */
11const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
12const VERBS = ["Thinking", "Reticulating", "Computing", "Pondering", "Percolating"];
13 
14const FG = "#ffffff"; // 38;5;15
15const MUTED = "#c0c0c0"; // 38;5;7
16 
17export function GrokThinking({
18  running = true,
19  verbs = VERBS,
20  className,
21}: {
22  running?: boolean;
23  verbs?: string[];
24  className?: string;
25}) {
26  const [f, setF] = React.useState(0);
27  const [v, setV] = React.useState(0);
28  const [secs, setSecs] = React.useState(0);
29 
30  React.useEffect(() => {
31    if (!running) return;
32    const id = setInterval(() => setF((n) => (n + 1) % FRAMES.length), 90);
33    return () => clearInterval(id);
34  }, [running]);
35 
36  React.useEffect(() => {
37    if (!running) return;
38    const id = setInterval(() => {
39      setSecs((s) => s + 1);
40      if (secs % 5 === 4) setV((x) => (x + 1) % verbs.length);
41    }, 1000);
42    return () => clearInterval(id);
43  }, [running, secs, verbs.length]);
44 
45  if (!running) return null;
46 
47  return (
48    <div
49      role="status"
50      aria-live="polite"
51      className={cn("flex items-center gap-2 font-mono text-[13px]", className)}
52    >
53      <span aria-hidden style={{ color: FG, width: "1ch" }}>
54        {FRAMES[f]}
55      </span>
56      <span style={{ color: FG }}>{verbs[v % verbs.length]}…</span>
57      <span style={{ color: MUTED }}>({secs}s)</span>
58    </div>
59  );
60}