Slash Menu

"use client"

import * as React from "react"
import { MentionMenuHandle, SlashCommand, SlashMenu } from "@/components/ui/slash-menu"

const FIT_CSS = "html,body{overflow:hidden}[data-fit-small] [data-fit-hide]{display:none!important}"

/**
 * 21st shows a demo in a small frame: about 674 by 421 on a component page, 358 by 224 on a
 * phone and 245 by 139 on a profile card. A demo taller than its frame gets scrollbars, which
 * render white on dark pages. FitFrame fills the frame exactly instead.
 *
 * - "scale": the content shrinks until it fits, centered. For visuals such as orbs.
 * - "crop": the content stays at full size from the top and fades out at the bottom. For text
 *   that streams in, where a changing scale would make the page breathe.
 *
 * `minWidth` lays out a wide demo (a table, a two column panel) at that width and scales it down
 * to the frame, instead of letting it collapse to a narrow layout. The frame centers it, so it
 * shrinks evenly on both sides.
 *
 * Anything marked `data-fit-hide` (state buttons, the chatcn.dev line) drops out in frames
 * shorter than `hideBelow`, so a profile card shows the visual alone.
 */
function FitFrame({
  children,
  mode = "scale",
  hideBelow = 360,
  minWidth,
}: {
  children: React.ReactNode
  mode?: "scale" | "crop"
  hideBelow?: number
  minWidth?: string
}) {
  const content = React.useRef<HTMLDivElement>(null)
  const [cropped, setCropped] = React.useState(false)

  React.useLayoutEffect(() => {
    const el = content.current
    if (!el) return
    const measure = () => {
      const vw = window.innerWidth
      const vh = window.innerHeight
      el.toggleAttribute("data-fit-small", vh < hideBelow)
      // Layout sizes ignore the transform, so measuring never feeds back.
      const w = Math.max(el.offsetWidth, el.scrollWidth)
      const h = Math.max(el.offsetHeight, el.scrollHeight)
      const scale = mode === "scale" ? Math.min(1, vw / w, vh / h) : 1
      el.style.transform = scale < 1 ? `scale(${scale})` : ""
      setCropped(mode === "crop" && h > vh + 1)
    }
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(el)
    // Content that changes inside a fixed width box (a headline that cycles words) never resizes
    // the box itself, so changes below it measure again on the next frame.
    let frame = 0
    const mutations = new MutationObserver(() => {
      cancelAnimationFrame(frame)
      frame = requestAnimationFrame(measure)
    })
    mutations.observe(el, { subtree: true, childList: true, characterData: true })
    window.addEventListener("resize", measure)
    return () => {
      observer.disconnect()
      mutations.disconnect()
      cancelAnimationFrame(frame)
      window.removeEventListener("resize", measure)
    }
  }, [mode, hideBelow])

  const fade = "linear-gradient(to bottom, #000 calc(100% - 40px), transparent)"
  return (
    <div
      className="flex w-full justify-center overflow-hidden"
      style={{
        height: "100dvh",
        alignItems: mode === "crop" ? "flex-start" : "center",
        maskImage: cropped ? fade : undefined,
        WebkitMaskImage: cropped ? fade : undefined,
      }}
    >
      <style>{FIT_CSS}</style>
      <div
        ref={content}
        className="w-full shrink-0"
        style={{ transformOrigin: mode === "crop" ? "top center" : "center", minWidth }}
      >
        {children}
      </div>
    </div>
  )
}

const commands: SlashCommand[] = [
  {
    name: "review",
    description: "Review the current diff or a pull request",
    category: "Code",
    argumentHint: "<pr-number> [--strict]",
  },
  {
    name: "test",
    description: "Run tests and fix what fails",
    category: "Code",
    argumentHint: "[pattern]",
  },
  { name: "init", description: "Write an AGENTS.md for this repository", category: "Code" },
  {
    name: "bug",
    description: "Investigate a regression",
    category: "Prompts",
    template: "Investigate {{symptom}} in {{area}}. It started after {{commit}}.",
  },
  {
    name: "changelog",
    description: "Write release notes from merged pull requests",
    kind: "skill",
    argumentHint: "<from>..<to>",
  },
  {
    name: "compact",
    description: "Summarize the conversation to free up context",
    category: "Session",
    argumentHint: "[what to keep]",
  },
  {
    name: "clear",
    description: "Start a new conversation",
    category: "Session",
    immediate: true,
    shortcut: ["⌘", "K"],
  },
]

/**
 * The menu in place under a command field. Focus stays in the field; arrows, Enter, Tab and
 * Escape reach the menu through `menuRef`.
 */
function SlashMenuDemo() {
  const [query, setQuery] = React.useState("")
  const [open, setOpen] = React.useState(true)
  const [picked, setPicked] = React.useState<SlashCommand>()
  const [active, setActive] = React.useState<string>()
  const menuRef = React.useRef<MentionMenuHandle>(null)
  const listId = "slash-menu-demo-list"

  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <div className="bg-(color:--chatcn-card) shadow-(--chatcn-shadow-sm) rounded-(--chatcn-radius-lg) flex h-10 items-center gap-1 px-3 focus-within:shadow-[0_0_0_1px_var(--chatcn-gray-900),0_0_0_4px_var(--chatcn-alpha-300)]">
        <span aria-hidden="true" className="text-(color:--chatcn-fg-subtle) text-[0.875rem]/[1.25rem] tracking-[-0.003em]">
          /
        </span>
        <input
          role="combobox"
          aria-label="Command"
          aria-expanded={open}
          aria-controls={listId}
          aria-autocomplete="list"
          aria-activedescendant={open ? active : undefined}
          value={query}
          placeholder="Filter commands…"
          className="text-[0.875rem]/[1.25rem] tracking-[-0.003em] text-(color:--chatcn-fg) placeholder:text-(color:--chatcn-fg-subtle) pointer-coarse:text-[1rem]/[1.5rem] pointer-coarse:tracking-[-0.01em] min-w-0 flex-1 bg-transparent outline-none"
          onChange={(event) => {
            setQuery(event.target.value.replace(/^\//, ""))
            setOpen(true)
          }}
          onKeyDown={(event) => {
            if (menuRef.current?.onKeyDown(event)) event.preventDefault()
            else if (event.key === "ArrowDown") setOpen(true)
          }}
        />
      </div>
      <SlashMenu
        open={open}
        onOpenChange={setOpen}
        listId={listId}
        query={query}
        commands={commands}
        recent={["review"]}
        menuRef={menuRef}
        onActiveChange={setActive}
        onSelect={(command) => {
          setPicked(command)
          setQuery("")
          setOpen(false)
        }}
        width={448}
      />
      {!open ? (
        <p className="text-[0.8125rem]/[1.25rem] text-(color:--chatcn-fg-muted) px-1" aria-live="polite">
          {picked ? (
            <>
              Picked <span className="text-(color:--chatcn-fg) font-medium">/{picked.name}</span>. Press{" "}
              <span className="text-(color:--chatcn-fg)">Down</span> to open the list again.
            </>
          ) : (
            "Press Down to open the list."
          )}
        </p>
      ) : null}
    </div>
  )
}

/** The line under each 21st demo that points back to the kit. */
function MoreOn({ slug, children }: { slug: string; children: React.ReactNode }) {
  return (
    <p data-fit-hide className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-faint) text-center text-balance">
      {children}{" "}
      <a
        href={`https://chatcn.dev/docs/components/${slug}`}
        target="_blank"
        rel="noopener"
        className="text-(color:--chatcn-fg-subtle) hover:text-(color:--chatcn-fg) underline underline-offset-2"
      >
        chatcn.dev
      </a>
    </p>
  )
}

/** The kit's own example, framed for the 21st preview. */
export default function SlashMenuPreview() {
  return (
    <FitFrame minWidth="38rem">
      <div className="flex w-full flex-col items-center justify-center gap-4 p-6">
        <div className="flex w-full max-w-2xl justify-center">
          <SlashMenuDemo />
        </div>
        <MoreOn slug="slash-menu">Slash commands with groups, usage and filtering. On</MoreOn>
      </div>
    </FitFrame>
  )
}