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

import { useState, useRef, useEffect } from 'react';
import { Terminal, Image, Play, FileText, ArrowUp } from 'lucide-react';

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);

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

  // Auto-show/hide slash command menu
  useEffect(() => {
    if (input.startsWith('/') && matchingCmds.length > 0) {
      setShowCmds(true);
      setCmdIdx(0);
    } else {
      setShowCmds(false);
    }
  }, [input, matchingCmds.length]);

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

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (showCmds && matchingCmds.length > 0) {
      if (e.key === 'Tab') { e.preventDefault(); setInput(matchingCmds[cmdIdx % matchingCmds.length].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();
    }
  };

  const canSend = input.trim().length > 0 && !disabled;

  return (
    <div className="relative">
      {/* Slash command menu */}
      {showCmds && matchingCmds.length > 0 && (
        <div className="mx-6 mb-0.5 bg-white border border-zinc-200 rounded-xl shadow-lg overflow-hidden animate-in slide-in-from-bottom-2">
          {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.5 px-3.5 py-2 text-sm transition-colors ${
                  i === (cmdIdx % matchingCmds.length) ? 'bg-indigo-50 text-indigo-700' : 'text-zinc-600 hover:bg-zinc-50'
                }`}
              >
                <Icon size={15} className="text-zinc-400" />
                <span className="font-mono font-semibold text-xs">{c.cmd}</span>
                <span className="text-zinc-400 text-xs">{c.desc}</span>
              </button>
            );
          })}
        </div>
      )}

      {/* Input bar */}
      <div className="px-4 pb-4 pt-2 bg-gradient-to-t from-white via-white to-transparent">
        <div className={`
          flex items-end gap-2 bg-zinc-50 rounded-2xl border transition-all duration-200 px-4 py-3
          ${disabled ? 'border-zinc-200 opacity-60' : 'border-zinc-200 focus-within:border-indigo-300 focus-within:shadow-md focus-within:shadow-indigo-50 focus-within:bg-white'}
        `}>
          <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 min-h-[24px] max-h-[120px]"
            disabled={disabled}
            style={{ height: 'auto' }}
            onInput={(e) => {
              const el = e.currentTarget;
              el.style.height = 'auto';
              el.style.height = Math.min(el.scrollHeight, 120) + 'px';
            }}
          />
          <button
            onClick={handleSend}
            disabled={!canSend}
            className={`
              w-8 h-8 rounded-xl flex items-center justify-center transition-all flex-shrink-0
              ${canSend
                ? 'bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm'
                : 'bg-zinc-200 text-zinc-400 cursor-not-allowed'}
            `}
          >
            <ArrowUp size={16} strokeWidth={2.5} />
          </button>
        </div>
        <p className="text-[10px] text-zinc-400 text-center mt-1.5">
          美图 Agent 可能会产生错误内容，请核实重要信息
        </p>
      </div>
    </div>
  );
}