Grok Slash Menu

1"use client";
2 
3import * as React from "react";
4import { GrokPrompt } from "@/registry/brainless/grok/grok-prompt";
5import { cn } from "@/lib/utils";
6 
7/**
8 * GrokSlashMenu — Grok CLI's slash-command palette.
9 *
10 * Overlay above the rounded composer: active row marked with `❯`, inactive
11 * rows indented. Type after `/` to filter; arrow keys move selection.
12 */
13export type GrokSlashCommand = { name: string; description: string };
14 
15const DEFAULT: GrokSlashCommand[] = [
16  { name: "/quit", description: "Quit the application" },
17  { name: "/help", description: "Browse commands and keyboard shortcuts" },
18  { name: "/docs", description: "Open How-to Guides or online Build docs" },
19  { name: "/home", description: "Return to the welcome screen" },
20  { name: "/new", description: "Start a new session" },
21  { name: "/fork", description: "Branch the current session into a peer agent" },
22];
23 
24const ACTIVE = "#e1e1e1";
25const INACTIVE = "#8b8b90";
26const RULE = "#505058";
27const NAME_COLS = 16;
28 
29export function GrokSlashMenu({
30  commands = DEFAULT,
31  className,
32}: {
33  commands?: GrokSlashCommand[];
34  className?: string;
35}) {
36  const [value, setValue] = React.useState("/");
37  const [active, setActive] = React.useState(0);
38 
39  const query = value.startsWith("/") ? value.slice(1) : value;
40  const list = commands.filter((c) =>
41    c.name.slice(1).toLowerCase().startsWith(query.toLowerCase()),
42  );
43  const clampedActive = list.length ? Math.min(active, list.length - 1) : 0;
44 
45  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
46    if (!list.length) return;
47    if (e.key === "ArrowDown") {
48      e.preventDefault();
49      setActive((a) => (a + 1) % list.length);
50    } else if (e.key === "ArrowUp") {
51      e.preventDefault();
52      setActive((a) => (a - 1 + list.length) % list.length);
53    }
54  }
55 
56  return (
57    <div className={cn("font-mono text-[13px] leading-[1.55]", className)}>
58      <div
59        className="mb-2 border-y py-1.5"
60        style={{ borderColor: RULE }}
61        role="listbox"
62        aria-label="Slash commands"
63        aria-activedescendant={
64          list.length ? `grok-slash-${clampedActive}` : undefined
65        }
66      >
67        <ul className="space-y-0.5">
68          {list.map((c, i) => {
69            const activeRow = i === clampedActive;
70            return (
71              <li
72                key={c.name}
73                id={`grok-slash-${i}`}
74                role="option"
75                aria-selected={activeRow}
76// … truncated