Thinking

import type { ReactNode } from "react";

const dot = "size-(--tui-thinking-dot-size) rounded-full bg-(--tui-thinking-dot) animate-bounce [animation-duration:var(--tui-thinking-speed)]";

/** Text with a band of light moving across it, for something still in progress. */
export const shimmer =
  "bg-[linear-gradient(90deg,var(--tui-thinking-fg)_35%,var(--tui-thinking-shine)_50%,var(--tui-thinking-fg)_65%)] bg-[length:250%_100%] bg-clip-text text-transparent [animation:tui-shimmer_var(--tui-thinking-shimmer-speed)_linear_infinite] motion-reduce:animate-none motion-reduce:text-(--tui-thinking-fg)";

export interface ThinkingProps {
  /** What is happening, e.g. "Thinking" or "Searching the web". */
  label?: ReactNode;
  /** A note after it: how long it has been, what it is looking at. */
  detail?: ReactNode;
  /** Shimmering text, or three moving dots. */
  variant?: "shimmer" | "dots";
  className?: string;
}

/** Shows that a reply is on its way, before any of it has arrived. */
export function Thinking({ label = "Thinking", detail, variant = "shimmer", className }: ThinkingProps) {
  return (
    <div role="status" className={["inline-flex items-center gap-(--tui-thinking-gap) font-(family-name:--tui-font) text-(length:--tui-thinking-font-size) leading-none text-(--tui-thinking-fg)", className].filter(Boolean).join(" ")}>
      {variant === "dots" ? (
        <span aria-hidden className="inline-flex items-end gap-[calc(var(--tui-thinking-dot-size)_*_0.6)] pt-[calc(var(--tui-thinking-dot-size)_*_0.5)]">
          <span className={`${dot} [animation-delay:-0.3s]`} />
          <span className={`${dot} [animation-delay:-0.15s]`} />
          <span className={dot} />
        </span>
      ) : (
        <svg aria-hidden viewBox="0 0 16 16" fill="currentColor" className="size-[1.15em] shrink-0 animate-pulse text-(--tui-thinking-dot)">
          <path d="M8 1.5c.3 2.9 1.6 4.2 4.5 4.5v1C9.6 7.3 8.3 8.6 8 11.5H7C6.7 8.6 5.4 7.3 2.5 7V6C5.4 5.7 6.7 4.4 7 1.5z" />
        </svg>
      )}
      <span className={`font-(--tui-thinking-font-weight) ${variant === "shimmer" ? shimmer : ""}`}>{label}</span>
      {detail && <span className="text-(--tui-thinking-detail) tabular-nums">{detail}</span>}
    </div>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Thinking */
  --tui-thinking-gap: calc(var(--tui-space) * 2);
  --tui-thinking-font-size: var(--tui-text);
  --tui-thinking-font-weight: 500;
  --tui-thinking-fg: var(--tui-muted-fg);
  --tui-thinking-detail: color-mix(in oklab, var(--tui-muted-fg) 70%, var(--tui-bg));
  --tui-thinking-dot: var(--tui-muted-fg);
  --tui-thinking-shine: var(--tui-fg);
  --tui-thinking-shimmer-speed: 2000ms;
  --tui-thinking-dot-size: 5px;
  --tui-thinking-speed: 900ms;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}

@keyframes tui-shimmer {
  from { background-position: 125% 0; }
  to { background-position: -125% 0; }
}