claude-code/packages/remote-control-server/web/components/chat/CommandMenu.tsx

import { useMemo, useRef, useEffect, useState } from 'react';
import { cn } from '../../src/lib/utils';
import type { AvailableCommand } from '../../src/acp/types';

// =============================================================================
// Slash command picker — floating above ChatInput
// =============================================================================

interface CommandMenuProps {
  commands: AvailableCommand[];
  /** Text after "/" used for filtering */
  filter: string;
  onSelect: (command: AvailableCommand) => void;
  onClose: () => void;
  className?: string;
}

/**
 * Prefix match — checks if the text starts with the query.
 */
function prefixMatch(query: string, text: string): boolean {
  if (!query) return true;
  return text.toLowerCase().startsWith(query.toLowerCase());
}

export function CommandMenu({ commands, filter, onSelect, onClose, className }: CommandMenuProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [activeIndex, setActiveIndex] = useState(0);

  // Filter commands by current input
  const filtered = useMemo(() => {
    if (!filter) return commands;
    return commands.filter(cmd => prefixMatch(filter, cmd.name));
  }, [commands, filter]);

  // Reset active index when filter changes
  useEffect(() => {
    setActiveIndex(0);
  }, [filter]);

  // Close on outside click
  useEffect(() => {
    const handleClick = (e: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        onClose();
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [onClose]);

  // Handle keyboard navigation (ArrowUp/ArrowDown/Enter) via document-level listener
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (filtered.length === 0) return;

      if (e.key === 'ArrowDown') {
        e.preventDefault();
        setActiveIndex(prev => (prev + 1) % filtered.length);
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        setActiveIndex(prev => (prev - 1 + filtered.length) % filtered.length);
      } else if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        const cmd = filtered[activeIndex];
        if (cmd) onSelect(cmd);
      }
    };

    document.addEventListener('keydown', handleKeyDown, true); // capture phase
    return () => document.removeEventListener('keydown', handleKeyDown, true);
  }, [filtered, activeIndex, onSelect]);

  // Scroll active item into view
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    const active = container.querySelector("[data-active='true']");
    active?.scrollIntoView({ block: 'nearest' });
  }, [activeIndex]);

  return (
    <div ref={containerRef} className={cn('rounded-xl border border-border bg-surface-2 shadow-lg', className)}>
      <div className="max-h-[320px] overflow-y-auto py-1">
        {filtered.length === 0 ? (
          <div className="text-xs text-text-muted font-display py-3 text-center">没有匹配的命令</div>
        ) : (
          filtered.map((cmd, index) => (
            <button
              key={cmd.name}
              type="button"
              data-active={index === activeIndex}
              onClick={() => onSelect(cmd)}
              onMouseEnter={() => setActiveIndex(index)}
              className={cn(
                'flex w-full items-center gap-2 px-3 py-2 cursor-pointer rounded-lg mx-1 text-left',
                'transition-colors',
                index === activeIndex ? 'bg-brand/10 text-text-primary' : 'text-text-secondary hover:bg-surface-1/50',
              )}
              style={{ width: 'calc(100% - 8px)' }}
            >
              <span className="text-sm font-display font-medium text-brand">/{cmd.name}</span>
              <span className="text-xs text-text-muted truncate flex-1">{cmd.description}</span>
              {cmd.input?.hint && <span className="text-[10px] text-text-muted italic">{cmd.input.hint}</span>}
            </button>
          ))
        )}
      </div>
    </div>
  );
}