File size: 1,707 Bytes
f3269f9 | 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 | import { useState, useRef, useEffect } from 'react';
export default function ChatInput({ onSubmit, loading }) {
const [value, setValue] = useState('');
const textareaRef = useRef(null);
useEffect(() => {
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 160)}px`;
}
}, [value]);
const handleKeyDown = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
submit();
}
};
const submit = () => {
const trimmed = value.trim();
if (!trimmed || loading) return;
onSubmit(trimmed);
setValue('');
};
return (
<div className="input-wrapper">
<div className="input-box">
<textarea
ref={textareaRef}
className="input-textarea"
placeholder="Ask anything about your documents..."
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleKeyDown}
rows={1}
disabled={loading}
/>
<button
className={`send-btn ${value.trim() && !loading ? 'send-btn--active' : ''}`}
onClick={submit}
disabled={!value.trim() || loading}
aria-label="Send"
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<line x1="22" y1="2" x2="11" y2="13" />
<polygon points="22 2 15 22 11 13 2 9 22 2" />
</svg>
</button>
</div>
<p className="input-hint">Enter to send · Shift+Enter for new line</p>
</div>
);
}
|