Grok Thought

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * GrokThought — a completed or streaming thought block.
6 *
7 * Captured forms:
8 *   `◆ Thought for 0.2s`                         (one-liner)
9 *   `❙  ◆ Thought for 0.1s`                      (gutter)
10 *   `┃  ◆ Thinking…` + body                      (bordered stream)
11 */
12const BORDER = "#808080"; // 38;5;8
13const FG = "#e1e1e1";
14const MUTED = "#c0c0c0"; // 38;5;7
15const SILVER = "#c0c0c0";
16 
17export function GrokThought({
18  elapsed = "0.2s",
19  streaming = false,
20  gutter = false,
21  className,
22  children,
23}: {
24  elapsed?: string;
25  streaming?: boolean;
26  /** Use the `❙` gutter marker instead of a plain diamond line. */
27  gutter?: boolean;
28  className?: string;
29  children?: React.ReactNode;
30}) {
31  const label = streaming ? "Thinking…" : `Thought for ${elapsed}`;
32 
33  if (children || streaming) {
34    return (
35      <div
36        className={cn(
37          "border-l-2 pl-3 font-mono text-[13px] leading-[1.55]",
38          className,
39        )}
40        style={{ borderColor: BORDER }}
41        role="status"
42        aria-live={streaming ? "polite" : undefined}
43      >
44        <div className="flex items-baseline gap-2">
45          <span aria-hidden style={{ color: BORDER }}>
46            ◆
47          </span>
48          <span className="font-semibold" style={{ color: MUTED }}>
49            {label}
50          </span>
51        </div>
52        {children ? (
53          <div className="mt-1 whitespace-pre-wrap" style={{ color: FG }}>
54            {children}
55          </div>
56        ) : null}
57      </div>
58    );
59  }
60 
61  return (
62    <div
63      className={cn(
64        "flex items-baseline gap-2 font-mono text-[13px] leading-[1.55]",
65        className,
66      )}
67    >
68      {gutter ? (
69        <span aria-hidden style={{ color: BORDER }}>
70          ❙
71        </span>
72      ) : null}
73      <span aria-hidden style={{ color: SILVER }}>
74        ◆
75      </span>
76      <span style={{ color: MUTED }}>{label}</span>
77    </div>
78  );
79}