Prompt Composer

"use client";

import * as React from "react";
import { createPortal } from "react-dom";

import { cn } from "@/lib/utils";

/**
 * PromptComposer — the chat input from AI apps: a textarea with a caret-anchored
 * @-mention menu, wrapped by a row of controls that all read and write one value.
 *
 * Two hard parts:
 *
 *  1. **Caret-anchored @-menu.** A textarea gives you a caret *offset*, not a
 *     pixel position — so we mirror the textarea into a hidden div with identical
 *     typography and box metrics, drop a marker span at the caret, and read the
 *     span's offset. That's the exact on-screen caret; the menu (portaled, so no
 *     overflow clips it) is placed just below it and clamped to the viewport.
 *  2. **Several controlled widgets over one value.** Model, temperature, tools,
 *     attachments, and the text are one `state` object. Every widget is fully
 *     controlled from it and writes back through one `patch()` — the composed
 *     request payload is always exactly what you see.
 *
 * Keyboard-first (arrows/enter/esc drive the menu), monochrome, reduced-motion
 * aware.
 */

interface Mention {
  id: string;
  label: string;
  detail: string;
  kind: "person" | "file";
}

const MENTIONS: Mention[] = [
  { id: "u-dana", label: "dana", detail: "Dana Ito · design", kind: "person" },
  {
    id: "u-rafa",
    label: "rafael",
    detail: "Rafael Cruz · eng",
    kind: "person",
  },
  { id: "u-sam", label: "sam", detail: "Sam Okoro · pm", kind: "person" },
  { id: "f-readme", label: "README.md", detail: "root", kind: "file" },
  { id: "f-api", label: "api/routes.ts", detail: "src/server", kind: "file" },
  { id: "f-theme", label: "theme.css", detail: "src/styles", kind: "file" },
];

const MODELS = ["Fast", "Balanced", "Max"] as const;
const TOOLS = ["Web", "Code", "Images"] as const;

interface State {
  text: string;
  model: (typeof MODELS)[number];
  temperature: number;
  tools: string[];
  attachments: string[];
}

// The box + typography properties the mirror div must copy to measure the caret.
const MIRROR_PROPS = [
  "box-sizing",
  "width",
  "padding-top",
  "padding-right",
  "padding-bottom",
  "padding-left",
  "border-top-width",
  "border-right-width",
  "border-bottom-width",
  "border-left-width",
  "font-family",
  "font-size",
  "font-weight",
  "font-style",
  "font-variant",
  "letter-spacing",
  "line-height",
  "text-transform",
  "word-spacing",
  "tab-size",
];

/** Pixel position of the caret at `pos`, relative to the textarea's border box. */
function caretCoords(ta: HTMLTextAreaElement, pos: number) {
  const cs = window.getComputedStyle(ta);
  const div = document.createElement("div");
  const style = div.style;
  style.position = "absolute";
  style.visibility = "hidden";
  style.whiteSpace = "pre-wrap";
  style.wordWrap = "break-word";
  style.overflowWrap = "break-word";
  for (const p of MIRROR_PROPS) style.setProperty(p, cs.getPropertyValue(p));

  div.textContent = ta.value.slice(0, pos);
  const marker = document.createElement("span");
  marker.textContent = ta.value.slice(pos) || ".";
  div.appendChild(marker);
  document.body.appendChild(div);

  const top = marker.offsetTop;
  const left = marker.offsetLeft;
  const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.4;
  document.body.removeChild(div);
  return { top, left, lineHeight };
}

/** The @-token immediately before the caret, if any. */
function activeMention(
  text: string,
  caret: number,
): { start: number; query: string } | null {
  let i = caret - 1;
  while (i >= 0) {
    const ch = text[i];
    if (ch === "@") {
      if (i === 0 || /\s/.test(text[i - 1])) {
        return { start: i, query: text.slice(i + 1, caret) };
      }
      return null;
    }
    if (/\s/.test(ch)) return null;
    i -= 1;
  }
  return null;
}

const useIsoLayoutEffect =
  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

export function PromptComposer() {
  const taRef = React.useRef<HTMLTextAreaElement>(null);
  const pendingCaret = React.useRef<number | null>(null);

  const [state, setState] = React.useState<State>({
    text: "",
    model: "Balanced",
    temperature: 0.7,
    tools: ["Web"],
    attachments: [],
  });
  const [sent, setSent] = React.useState<State | null>(null);
  const [menu, setMenu] = React.useState<{
    start: number;
    query: string;
    top: number;
    left: number;
  } | null>(null);
  const [menuIndex, setMenuIndex] = React.useState(0);

  const mounted = React.useSyncExternalStore(
    () => () => {},
    () => true,
    () => false,
  );

  const patch = (p: Partial<State>) => setState((s) => ({ ...s, ...p }));

  const items = React.useMemo(() => {
    if (!menu) return [];
    const q = menu.query.toLowerCase();
    return MENTIONS.filter((m) => m.label.toLowerCase().includes(q)).slice(
      0,
      6,
    );
  }, [menu]);

  // Restore the caret after a programmatic text edit (mention insert).
  useIsoLayoutEffect(() => {
    if (pendingCaret.current != null && taRef.current) {
      const c = pendingCaret.current;
      pendingCaret.current = null;
      taRef.current.focus();
      taRef.current.setSelectionRange(c, c);
    }
  }, [state.text]);

  const syncMenu = (ta: HTMLTextAreaElement) => {
    const caret = ta.selectionStart;
    const found = activeMention(ta.value, caret);
    if (!found) {
      setMenu(null);
      return;
    }
    const { top, left, lineHeight } = caretCoords(ta, caret);
    const r = ta.getBoundingClientRect();
    setMenu({
      start: found.start,
      query: found.query,
      top: r.top + top - ta.scrollTop + lineHeight + 4,
      left: r.left + left - ta.scrollLeft,
    });
    setMenuIndex(0);
  };

  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    patch({ text: e.target.value });
    syncMenu(e.target);
  };

  const insertMention = (m: Mention) => {
    if (!menu) return;
    const caret = menu.start + 1 + menu.query.length;
    const before = state.text.slice(0, menu.start);
    const after = state.text.slice(caret);
    const inserted = `@${m.label} `;
    pendingCaret.current = (before + inserted).length;
    patch({ text: before + inserted + after });
    setMenu(null);
  };

  const send = () => {
    if (!state.text.trim()) return;
    setSent(state);
  };

  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (menu && items.length > 0) {
      if (e.key === "ArrowDown") {
        e.preventDefault();
        setMenuIndex((i) => (i + 1) % items.length);
        return;
      }
      if (e.key === "ArrowUp") {
        e.preventDefault();
        setMenuIndex((i) => (i - 1 + items.length) % items.length);
        return;
      }
      if (e.key === "Enter" || e.key === "Tab") {
        e.preventDefault();
        insertMention(items[Math.min(menuIndex, items.length - 1)]);
        return;
      }
      if (e.key === "Escape") {
        e.preventDefault();
        setMenu(null);
        return;
      }
    }
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      send();
    }
  };

  const toggleTool = (t: string) =>
    setState((s) => ({
      ...s,
      tools: s.tools.includes(t)
        ? s.tools.filter((x) => x !== t)
        : [...s.tools, t],
    }));

  const addAttachment = () =>
    setState((s) => ({
      ...s,
      attachments: [...s.attachments, `file-${s.attachments.length + 1}.png`],
    }));

  const removeAttachment = (name: string) =>
    setState((s) => ({
      ...s,
      attachments: s.attachments.filter((a) => a !== name),
    }));

  const canSend = state.text.trim().length > 0;

  return (
    <section className="bg-zinc-50 px-6 py-16 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50">
      <div className="mx-auto max-w-xl">
        <div className="rounded-2xl border border-zinc-200 bg-white shadow-sm focus-within:border-zinc-950/30 dark:border-zinc-800 dark:bg-zinc-900 dark:focus-within:border-zinc-50/30">
          {state.attachments.length > 0 ? (
            <div className="flex flex-wrap gap-1.5 px-3 pt-3">
              {state.attachments.map((a) => (
                <span
                  key={a}
                  className="inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-100 py-1 pr-1.5 pl-2.5 text-xs text-zinc-950 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-50"
                >
                  {a}
                  <button
                    type="button"
                    onClick={() => removeAttachment(a)}
                    aria-label={`Remove ${a}`}
                    className="grid size-4 place-items-center rounded-full text-zinc-500 transition-colors hover:bg-white hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-zinc-50"
                  >
                    <svg
                      viewBox="0 0 24 24"
                      className="size-3"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth={2.5}
                      strokeLinecap="round"
                      aria-hidden="true"
                    >
                      <path d="M18 6 6 18M6 6l12 12" />
                    </svg>
                  </button>
                </span>
              ))}
            </div>
          ) : null}

          <textarea
            ref={taRef}
            value={state.text}
            onChange={onChange}
            onKeyDown={onKeyDown}
            onScroll={() => menu && taRef.current && syncMenu(taRef.current)}
            onBlur={() => setMenu(null)}
            rows={3}
            placeholder="Ask anything…  type @ to mention a person or file"
            aria-label="Prompt"
            className="block max-h-52 min-h-18 w-full resize-none bg-transparent px-4 py-3.5 text-sm leading-relaxed text-zinc-950 outline-none placeholder:text-zinc-500 dark:text-zinc-50 dark:placeholder:text-zinc-400"
          />

          {/* Toolbar — every control is bound to `state`. */}
          <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-zinc-200 px-3 py-2.5 dark:border-zinc-800">
            <div
              role="radiogroup"
              aria-label="Model"
              className="inline-flex rounded-md border border-zinc-200 bg-zinc-50 p-0.5 dark:border-zinc-800 dark:bg-zinc-950"
            >
              {MODELS.map((m) => (
                <button
                  key={m}
                  type="button"
                  role="radio"
                  aria-checked={state.model === m}
                  onClick={() => patch({ model: m })}
                  className={cn(
                    "rounded px-2 py-1 text-xs transition-colors",
                    state.model === m
                      ? "bg-zinc-950 text-zinc-50 dark:bg-zinc-50 dark:text-zinc-950"
                      : "text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-zinc-50",
                  )}
                >
                  {m}
                </button>
              ))}
            </div>

            <label className="flex items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400">
              temp
              <input
                type="range"
                min={0}
                max={1}
                step={0.1}
                value={state.temperature}
                onChange={(e) => patch({ temperature: Number(e.target.value) })}
                aria-label="Temperature"
                className="h-1 w-24 cursor-pointer accent-zinc-950 dark:accent-zinc-50"
              />
              <span className="w-6 font-mono text-zinc-950 tabular-nums dark:text-zinc-50">
                {state.temperature.toFixed(1)}
              </span>
            </label>

            <div className="flex items-center gap-1">
              {TOOLS.map((t) => {
                const on = state.tools.includes(t);
                return (
                  <button
                    key={t}
                    type="button"
                    aria-pressed={on}
                    onClick={() => toggleTool(t)}
                    className={cn(
                      "rounded-full border px-2 py-1 text-xs transition-colors",
                      on
                        ? "border-zinc-950/40 bg-zinc-100 text-zinc-950 dark:border-zinc-50/40 dark:bg-zinc-800 dark:text-zinc-50"
                        : "border-zinc-200 text-zinc-500 hover:text-zinc-950 dark:border-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-50",
                    )}
                  >
                    {t}
                  </button>
                );
              })}
            </div>

            <div className="ml-auto flex items-center gap-2">
              <button
                type="button"
                onClick={addAttachment}
                aria-label="Attach file"
                className="grid size-8 place-items-center rounded-md text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-950 focus-visible:ring-2 focus-visible:ring-zinc-950/50 focus-visible:outline-none dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:focus-visible:ring-zinc-50/50"
              >
                <svg
                  viewBox="0 0 24 24"
                  className="size-4"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={2}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  aria-hidden="true"
                >
                  <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
                </svg>
              </button>
              <button
                type="button"
                onClick={send}
                disabled={!canSend}
                className="inline-flex items-center gap-1.5 rounded-md bg-zinc-950 px-3 py-1.5 text-xs font-medium text-zinc-50 transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-zinc-950/50 focus-visible:outline-none disabled:opacity-40 dark:bg-zinc-50 dark:text-zinc-950 dark:focus-visible:ring-zinc-50/50"
              >
                Send
                <kbd className="font-mono text-[10px] opacity-70">⌘↵</kbd>
              </button>
            </div>
          </div>
        </div>

        {/* The single value, made visible. */}
        <pre className="mt-4 overflow-x-auto rounded-xl border border-zinc-200 bg-zinc-100 p-3 font-mono text-[11px] leading-relaxed text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400">
          {JSON.stringify(
            {
              model: state.model,
              temperature: state.temperature,
              tools: state.tools,
              attachments: state.attachments,
              prompt: state.text,
            },
            null,
            2,
          )}
        </pre>
        {sent ? (
          <p className="mt-2 text-center text-xs text-zinc-500 dark:text-zinc-400">
            Sent {sent.text.trim().length} chars to {sent.model}.
          </p>
        ) : null}
      </div>

      {/* Caret-anchored mention menu. */}
      {mounted && menu && items.length > 0
        ? createPortal(
            <ul
              role="listbox"
              aria-label="Mentions"
              style={{ position: "fixed", top: menu.top, left: menu.left }}
              className="z-50 w-64 max-w-[calc(100vw-16px)] overflow-hidden rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-800 dark:bg-zinc-900"
            >
              {items.map((m, i) => (
                <li key={m.id}>
                  <button
                    type="button"
                    role="option"
                    aria-selected={i === menuIndex}
                    onMouseDown={(e) => {
                      e.preventDefault();
                      insertMention(m);
                    }}
                    onMouseEnter={() => setMenuIndex(i)}
                    className={cn(
                      "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm",
                      i === menuIndex ? "bg-zinc-100 dark:bg-zinc-800" : "",
                    )}
                  >
                    <span
                      aria-hidden="true"
                      className="grid size-6 shrink-0 place-items-center rounded-md border border-zinc-200 bg-zinc-50 font-mono text-[10px] text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400"
                    >
                      {m.kind === "person" ? "@" : "#"}
                    </span>
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-zinc-950 dark:text-zinc-50">
                        {m.label}
                      </span>
                      <span className="block truncate text-xs text-zinc-500 dark:text-zinc-400">
                        {m.detail}
                      </span>
                    </span>
                  </button>
                </li>
              ))}
            </ul>,
            document.body,
          )
        : null}
    </section>
  );
}

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

/** Merge conditional class names and resolve Tailwind conflicts. */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

/** Shared view-transition name so a card preview morphs into the detail
 *  page's preview. Must match on both ends; unique per registry entry. */
export function previewTransitionName(name: string) {
  return `preview-${name}`;
}