File size: 1,331 Bytes
b9fe2b4 |
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 |
import { useEventListener } from 'ahooks';
import { Mic, Paperclip, Send } from 'lucide-react';
import { useRef, useState } from 'react';
import { Button } from './ui/button';
import { Textarea } from './ui/textarea';
export function ChatInput() {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const [textareaHeight, setTextareaHeight] = useState<number>(40);
useEventListener(
'keydown',
(ev) => {
if (ev.shiftKey && ev.code === 'Enter') {
setTextareaHeight((h) => {
return h + 10;
});
}
},
{
target: textareaRef,
},
);
return (
<section className="flex items-end bg-colors-background-neutral-strong px-4 py-3 rounded-xl m-8">
<Button variant={'icon'} className="w-10 h-10">
<Mic />
</Button>
<Textarea
ref={textareaRef}
placeholder="Tell us a little bit about yourself "
className="resize-none focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent border-none min-h-0 max-h-20"
style={{ height: textareaHeight }}
/>
<div className="flex gap-2">
<Button variant={'icon'} size={'icon'}>
<Paperclip />
</Button>
<Button variant={'tertiary'} size={'icon'}>
<Send />
</Button>
</div>
</section>
);
}
|