video-create/web/client/src/components/chat/ChatInput.tsx

import { useState, useRef, useEffect } from 'react';
import { Send, Terminal, Image, Play, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';

const SLASH_COMMANDS = [
  { cmd: '/run', desc: '执行 pipeline 阶段', icon: Play },
  { cmd: '/status', desc: '查看管线进度', icon: Terminal },
  { cmd: '/images', desc: '生成图片', icon: Image },
  { cmd: '/list', desc: '列出可用账号', icon: FileText },
  { cmd: '/help', desc: '显示帮助', icon: Terminal },
];

export function ChatInput({ onSend, disabled }: { onSend: (content: string) => void; disabled?: boolean }) {
  const [input, setInput] = useState('');
  const [showCmds, setShowCmds] = useState(false);
  const [cmdIdx, setCmdIdx] = useState(0);
  const ref = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (input.startsWith('/')) {
      setShowCmds(true);
      setCmdIdx(0);
    } else {
      setShowCmds(false);
    }
  }, [input]);

  const matchingCmds = input.startsWith('/')
    ? SLASH_COMMANDS.filter((c) => c.cmd.startsWith(input.split(' ')[0]))
    : [];

  const handleSend = () => {
    if (!input.trim()) return;
    onSend(input.trim());
    setInput('');
    ref.current?.focus();
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (showCmds && matchingCmds.length > 0) {
      if (e.key === 'Tab' || e.key === 'Enter') {
        e.preventDefault();
        const cmd = matchingCmds[cmdIdx % matchingCmds.length].cmd;
        setInput(cmd + ' ');
        setShowCmds(false);
        return;
      }
      if (e.key === 'ArrowDown') { e.preventDefault(); setCmdIdx((i) => (i + 1) % matchingCmds.length); return; }
      if (e.key === 'ArrowUp') { e.preventDefault(); setCmdIdx((i) => (i - 1 + matchingCmds.length) % matchingCmds.length); return; }
    }
    if (e.key === 'Escape') { setShowCmds(false); return; }
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="relative">
      {showCmds && matchingCmds.length > 0 && (
        <div className="mx-4 mb-0.5 bg-white border border-zinc-200 rounded-lg shadow-lg overflow-hidden">
          {matchingCmds.map((c, i) => {
            const Icon = c.icon;
            return (
              <button
                key={c.cmd}
                onClick={() => { setInput(c.cmd + ' '); setShowCmds(false); ref.current?.focus(); }}
                className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm transition-colors ${
                  i === (cmdIdx % matchingCmds.length) ? 'bg-indigo-50 text-indigo-700' : 'text-zinc-600 hover:bg-zinc-50'
                }`}
              >
                <Icon size={14} />
                <span className="font-mono font-medium">{c.cmd}</span>
                <span className="text-zinc-400">{c.desc}</span>
              </button>
            );
          })}
        </div>
      )}
      <div className="p-4 border-t border-zinc-200 bg-white">
        <div className="flex items-end gap-2 bg-zinc-50 rounded-xl border border-zinc-200 px-4 py-2.5 focus-within:border-indigo-300 transition-colors">
          <textarea
            ref={ref}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            rows={1}
            placeholder={disabled ? '等待回复中...' : '输入指令或 / 查看命令...'}
            className="flex-1 bg-transparent text-sm resize-none outline-none placeholder:text-zinc-400 text-zinc-700"
            disabled={disabled}
          />
          <Button size="icon" variant="ghost" className="h-8 w-8 text-zinc-400 hover:text-indigo-600" onClick={handleSend} disabled={disabled}>
            <Send size={16} />
          </Button>
        </div>
      </div>
    </div>
  );
}