boocode/apps/web/src/components/AgentCommandsHint.tsx

import { ChevronDown } from 'lucide-react';
import { useState } from 'react';
import type { AgentCommand } from '@/api/types';
import { cn } from '@/lib/utils';

interface Props {
  commands: AgentCommand[];
}

export function AgentCommandsHint({ commands }: Props) {
  const [open, setOpen] = useState(false);
  const [expanded, setExpanded] = useState<string | null>(null);

  if (commands.length === 0) return null;

  return (
    <div className="mx-2 mb-1 rounded-md border border-border/60 bg-muted/30 text-xs">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-center justify-between px-2 py-1.5 text-muted-foreground hover:text-foreground max-md:min-h-[44px]"
      >
        <span>Slash commands ({commands.length})</span>
        <ChevronDown className={cn('size-3.5 transition-transform', open && 'rotate-180')} />
      </button>
      {open && (
        <ul className="px-2 pb-2 space-y-1 border-t border-border/40 max-h-48 overflow-y-auto overscroll-contain touch-pan-y">
          {commands.map((cmd) => (
            <li
              key={cmd.name}
              className="cursor-pointer"
              onClick={() => setExpanded((v) => v === cmd.name ? null : cmd.name)}
            >
              <span className="font-mono text-primary/80">/{cmd.name}</span>
              {cmd.description && (
                <span className={cn(
                  'ml-1.5 text-muted-foreground font-sans',
                  expanded === cmd.name ? '' : 'line-clamp-2',
                )}>
                  {cmd.description}
                </span>
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}