42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
|
import { useState, useRef } from 'react';
|
||
|
|
import { Send } from 'lucide-react';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
|
||
|
|
export function ChatInput({ onSend }: { onSend: (content: string) => void }) {
|
||
|
|
const [input, setInput] = useState('');
|
||
|
|
const ref = useRef<HTMLTextAreaElement>(null);
|
||
|
|
|
||
|
|
const handleSend = () => {
|
||
|
|
if (!input.trim()) return;
|
||
|
|
onSend(input.trim());
|
||
|
|
setInput('');
|
||
|
|
ref.current?.focus();
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||
|
|
e.preventDefault();
|
||
|
|
handleSend();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-4 border-t border-zinc-800">
|
||
|
|
<div className="flex items-end gap-2 bg-zinc-900 rounded-lg border border-zinc-800 px-3 py-2">
|
||
|
|
<textarea
|
||
|
|
ref={ref}
|
||
|
|
value={input}
|
||
|
|
onChange={(e) => setInput(e.target.value)}
|
||
|
|
onKeyDown={handleKeyDown}
|
||
|
|
rows={1}
|
||
|
|
placeholder="输入指令..."
|
||
|
|
className="flex-1 bg-transparent text-sm resize-none outline-none placeholder:text-zinc-600"
|
||
|
|
/>
|
||
|
|
<Button size="icon" variant="ghost" className="h-8 w-8" onClick={handleSend}>
|
||
|
|
<Send size={14} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|