62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import React, { useState, useRef, KeyboardEvent } from 'react';
|
|
import { Send } from 'lucide-react';
|
|
|
|
interface ChatInputProps {
|
|
onSendMessage: (message: string) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const ChatInput: React.FC<ChatInputProps> = ({ onSendMessage, disabled = false }) => {
|
|
const [message, setMessage] = useState('');
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleSend = () => {
|
|
if (message.trim() && !disabled) {
|
|
onSendMessage(message.trim());
|
|
setMessage('');
|
|
setTimeout(() => {
|
|
if (inputRef.current) {
|
|
inputRef.current.focus();
|
|
}
|
|
}, 0);
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
handleSend();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="border-t p-3 bg-white">
|
|
<div className="flex gap-2">
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Type a message..."
|
|
className="flex-1 px-3 py-2 border rounded-lg text-sm"
|
|
disabled={disabled}
|
|
autoFocus
|
|
/>
|
|
<button
|
|
onClick={handleSend}
|
|
className={`px-3 py-2 rounded-lg ${
|
|
disabled || !message.trim()
|
|
? 'bg-gray-300 text-gray-500 cursor-not-allowed'
|
|
: 'bg-blue-500 hover:bg-blue-600 text-white'
|
|
}`}
|
|
disabled={disabled || !message.trim()}
|
|
>
|
|
<Send className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChatInput; |