UHD_Media_Tool/apps/web/app/components/agentui/prompt-input.tsx

// Adapted from agentui (https://github.com/ashish200729/agentui), components/agents/prompt-input.tsx
// Copyright (c) 2026 Saurabh Chauhan. MIT License, see ./LICENSE-agentui.md
// 改造:保留自增高(隐藏测量层 + minRows/maxRows)、Enter 发送 / Shift+Enter 换行 / 输入法组字中不发送、
// loading 时发送键换成"停止";去掉模型选择与 MorphPopover 动作菜单;
// AGUI-3:输入区只留输入框和发送 / 停止,新增 `/` 指令菜单(commands)与上下文标签(context,可移除);
// 外框用 border + focus-within 提亮(不做玻璃叠玻璃),按钮用项目 <Button>。
import { ArrowUp, Square, X } from "lucide-react";
import {
  type FormEvent,
  type KeyboardEvent,
  type TextareaHTMLAttributes,
  useCallback,
  useId,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import { Button } from "~/components/ui/button.tsx";
import { cn } from "~/lib/utils.ts";

export type PromptCommand = { name: string; description: string };

export interface PromptInputProps
  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "onSubmit" | "children"> {
  value: string;
  onValueChange: (v: string) => void;
  onSubmit: (v: string) => void;
  /** 运行中:发送键旁出现"停止" */
  loading?: boolean;
  onStop?: () => void;
  /** 提交中(禁用发送) */
  pending?: boolean;
  minRows?: number;
  maxRows?: number;
  submitLabel?: string;
  stopLabel?: string;
  /** 以 / 开头时弹出的指令菜单 */
  commands?: PromptCommand[];
  /** 上下文标签(对象名称);给了 onClearContext 就带 × */
  context?: string | null;
  onClearContext?: () => void;
  className?: string;
}

/** 行高 24px(text-sm leading-6),与测量层一致 */
const LINE = 24;

/** 正在输入指令(以 / 开头、还没空格)时匹配的指令 */
export function commandMatches(value: string, commands: PromptCommand[]): PromptCommand[] {
  if (!value.startsWith("/") || /\s/.test(value)) return [];
  return commands.filter((c) => c.name.startsWith(value));
}

export function PromptInput({
  value,
  onValueChange,
  onSubmit,
  loading = false,
  onStop,
  pending = false,
  minRows = 2,
  maxRows = 8,
  submitLabel = "发送",
  stopLabel = "停止",
  commands = [],
  context,
  onClearContext,
  className,
  disabled,
  placeholder,
  "aria-label": ariaLabel = "输入",
  ...rest
}: PromptInputProps) {
  const ta = useRef<HTMLTextAreaElement>(null);
  const measure = useRef<HTMLDivElement>(null);
  const menuId = useId();
  const [active, setActive] = useState(0);
  const [dismissed, setDismissed] = useState<string | null>(null);
  const resize = useCallback(() => {
    const t = ta.current;
    const m = measure.current;
    if (!t || !m) return;
    const h = Math.min(Math.max(m.scrollHeight, minRows * LINE), maxRows * LINE);
    t.style.height = `${h}px`;
  }, [minRows, maxRows]);
  // biome-ignore lint/correctness/useExhaustiveDependencies: 内容变化时重新测量
  useLayoutEffect(resize, [value, resize]);

  const matches = dismissed === value ? [] : commandMatches(value, commands);
  const menuOpen = matches.length > 0;
  const pick = (c: PromptCommand) => {
    onValueChange(`${c.name} `);
    setActive(0);
    requestAnimationFrame(() => ta.current?.focus());
  };

  const canSubmit = !!value.trim() && !disabled && !pending;
  const submit = (e?: FormEvent) => {
    e?.preventDefault();
    if (!canSubmit) return;
    onSubmit(value.trim());
  };
  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (menuOpen) {
      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
        e.preventDefault();
        setActive((i) => (i + (e.key === "ArrowDown" ? 1 : -1) + matches.length) % matches.length);
        return;
      }
      if ((e.key === "Enter" || e.key === "Tab") && !e.shiftKey && !e.nativeEvent.isComposing) {
        e.preventDefault();
        pick(matches[Math.min(active, matches.length - 1)]!);
        return;
      }
      if (e.key === "Escape") {
        e.preventDefault();
        setDismissed(value);
        return;
      }
    }
    if (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing) return;
    e.preventDefault();
    submit();
  };

  return (
    <form
      onSubmit={submit}
      className={cn(
        "relative w-full min-w-0 rounded-2xl border border-border/80 p-2 transition-colors duration-base focus-within:border-foreground/30",
        disabled && "opacity-60",
        className,
      )}
    >
      {menuOpen ? (
        <div
          id={menuId}
          role="listbox"
          aria-label="指令"
          className="pg-float absolute inset-x-2 bottom-full z-20 mb-1.5 flex flex-col gap-0.5 rounded-xl p-1"
        >
          {matches.map((c, i) => (
            <div
              key={c.name}
              role="option"
              tabIndex={-1}
              aria-selected={i === active}
              // 按下就选(不等 click),避免输入框先失焦
              onMouseDown={(e) => {
                e.preventDefault();
                pick(c);
              }}
              className={cn(
                "flex w-full cursor-pointer items-baseline gap-2 rounded-lg px-2.5 py-1.5 text-left text-caption outline-none",
                i === active ? "bg-foreground/[0.06] text-foreground" : "text-foreground/85",
              )}
            >
              <span className="shrink-0 font-medium">{c.name}</span>
              <span className="min-w-0 truncate text-meta text-muted-foreground">{c.description}</span>
            </div>
          ))}
        </div>
      ) : null}
      {context ? (
        <div className="mb-1 flex px-1">
          <span className="inline-flex max-w-full min-w-0 items-center gap-1 rounded-full border border-border/70 py-0.5 pr-1 pl-2 text-meta text-muted-foreground">
            <span className="min-w-0 truncate" title={context}>
              {context}
            </span>
            {onClearContext ? (
              <button
                type="button"
                aria-label={`去掉上下文「${context}」`}
                onClick={onClearContext}
                className="grid size-4 shrink-0 cursor-pointer place-items-center rounded-full outline-none hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
              >
                <X aria-hidden className="size-3" />
              </button>
            ) : null}
          </span>
        </div>
      ) : null}
      <div className="flex items-end gap-1.5">
        <div className="relative min-w-0 flex-1">
          <div
            ref={measure}
            aria-hidden
            className="pointer-events-none invisible absolute inset-x-0 top-0 px-2 py-1 text-sm leading-6 break-words whitespace-pre-wrap"
          >
            {`${value}​`}
          </div>
          <textarea
            ref={ta}
            value={value}
            disabled={disabled}
            placeholder={placeholder}
            aria-label={ariaLabel}
            aria-autocomplete={commands.length ? "list" : undefined}
            aria-controls={menuOpen ? menuId : undefined}
            rows={minRows}
            {...rest}
            onChange={(e) => {
              onValueChange(e.target.value);
              setActive(0);
            }}
            onKeyDown={onKeyDown}
            className="block w-full resize-none overflow-y-auto bg-transparent px-2 py-1 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground/70"
          />
        </div>
        {loading && onStop ? (
          <Button type="button" size="sm" variant="destructive" onClick={onStop} aria-label={stopLabel}>
            <Square className="size-3.5" />
            {stopLabel}
          </Button>
        ) : null}
        <Button
          type="submit"
          size="icon-sm"
          disabled={!canSubmit}
          aria-label={submitLabel}
          title={`${submitLabel}(Enter)`}
        >
          <ArrowUp />
        </Button>
      </div>
    </form>
  );
}