53 lines
1.6 KiB
React
53 lines
1.6 KiB
React
|
import { Send } from 'lucide-react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Chat Input component with send button
|
||
|
|
*
|
||
|
|
* @param {string} value - Input value
|
||
|
|
* @param {function} onChange - Change handler for input
|
||
|
|
* @param {function} onSubmit - Submit handler for form
|
||
|
|
* @param {boolean} disabled - Whether input is disabled (e.g., when not connected)
|
||
|
|
* @param {string} placeholder - Placeholder text (default: "Write a message...")
|
||
|
|
* @param {string} className - Additional classes for the form
|
||
|
|
* @param {boolean} autoFocus - Whether to autofocus the input
|
||
|
|
*/
|
||
|
|
const ChatInput = ({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
onSubmit,
|
||
|
|
disabled = false,
|
||
|
|
placeholder = 'Write a message...',
|
||
|
|
className = '',
|
||
|
|
autoFocus = false
|
||
|
|
}) => {
|
||
|
|
const handleSubmit = (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (!value.trim() || disabled) return;
|
||
|
|
onSubmit(e);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form onSubmit={handleSubmit} className={`flex space-x-2 ${className}`}>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={value}
|
||
|
|
onChange={onChange}
|
||
|
|
placeholder={placeholder}
|
||
|
|
disabled={disabled}
|
||
|
|
autoFocus={autoFocus}
|
||
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
disabled={disabled || !value.trim()}
|
||
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
|
aria-label="Send message"
|
||
|
|
>
|
||
|
|
<Send className="w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ChatInput;
|