Spaces:
Running
Running
File size: 2,693 Bytes
27127dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import React, { useState, useRef, useEffect } from 'react';
import { ChatInputFormProps } from '@/lib/types';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
const ChatInputForm: React.FC<ChatInputFormProps> = ({ onSendMessage, isLoading }) => {
const [input, setInput] = useState('');
const inputRef = useRef<HTMLInputElement>(null);
// Focus input on component mount
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const message = input.trim();
if (!message || isLoading) return;
onSendMessage(message);
setInput('');
};
const handleClear = () => {
setInput('');
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
<form onSubmit={handleSubmit} className="flex items-center space-x-2">
<div className="relative flex-1">
<Input
ref={inputRef}
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Type your message here..."
className="w-full py-3 px-4 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white"
disabled={isLoading}
/>
{input && (
<button
type="button"
onClick={handleClear}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
aria-label="Clear input"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
</svg>
</button>
)}
</div>
<Button
type="submit"
disabled={isLoading || !input.trim()}
className="bg-primary text-white p-3 rounded-full hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors duration-200"
>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
</svg>
</Button>
</form>
);
};
export default ChatInputForm;
|