Grok Prompt

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * GrokPrompt — Grok CLI's rounded composer box.
8 *
9 * CSS border (no box-drawing glyphs) around a real text input. The model · mode
10 * legend sits on the bottom edge like a fieldset legend. Plan mode tints the ❯
11 * yellow; legend mode text stays muted gray.
12 */
13export type GrokMode =
14  | "normal"
15  | "plan"
16  | "auto"
17  | "always-approve"
18  | "plan-approval";
19 
20const BORDER = "#505058";
21const FG = "#e1e1e1";
22const MUTED = "#6c6c6c";
23const SEP = "#585858";
24const PLAN = "#ffff00"; // 38;5;11 — plan caret only
25const SURFACE = "#1a1a1a"; // matches --term-bg so the legend punches the border
26 
27const MODE_LABEL: Record<GrokMode, string | null> = {
28  normal: null,
29  plan: "plan",
30  auto: "auto",
31  "always-approve": "always-approve",
32  "plan-approval": "plan approval",
33};
34 
35export function GrokPrompt({
36  value,
37  defaultValue = "",
38  onChange,
39  onKeyDown,
40  placeholder = "",
41  mode = "always-approve",
42  model = "Grok 4.5 (xhigh)",
43  showShortcuts = true,
44  busy = false,
45  className,
46  inputClassName,
47}: {
48  value?: string;
49  defaultValue?: string;
50  onChange?: React.ChangeEventHandler<HTMLInputElement>;
51  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
52  placeholder?: string;
53  mode?: GrokMode;
54  model?: string;
55  showShortcuts?: boolean;
56  /** Mid-turn: insert Ctrl+c:cancel into the shortcut hint row. */
57  busy?: boolean;
58  className?: string;
59  inputClassName?: string;
60}) {
61  const controlled = value !== undefined;
62  const modeLabel = MODE_LABEL[mode];
63  const caretColor = mode === "plan" || mode === "plan-approval" ? PLAN : FG;
64  const legend = modeLabel ? `${model} · ${modeLabel}` : model;
65 
66  return (
67    <div className={cn("min-w-0 font-mono text-[13px] leading-[1.5]", className)}>
68      <div
69        className="relative min-w-0 rounded-sm border px-2 py-1.5"
70        style={{ borderColor: BORDER, background: SURFACE }}
71      >
72        <div className="flex min-w-0 items-center gap-0">
73          <span
74            aria-hidden
75            className="shrink-0"
76            style={{ color: caretColor }}
77          >
78            ❯
79          </span>
80          <input
81            type="text"
82            aria-label="Prompt"
83            placeholder={placeholder}
84            onKeyDown={onKeyDown}
85            {...(controlled
86              ? { value, onChange }
87              : { defaultValue, onChange })}
88            className={cn(
89// … truncated