Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: autoresize chatbox textarea

Browse Source
This commit is contained in:
Faisal Amir 2023-12-18 22:41:12 +07:00
parent 55ab4ae70f
commit 87facacb9a
1 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/screens/Chat/index.tsx
View File

@ -75,19 +75,14 @@ const ChatScreen = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [waitingToSendMessage, activeThreadId]) }, [waitingToSendMessage, activeThreadId])
useEffect(() => { const resizeTextArea = () => {
if (textareaRef.current !== null) { if (textareaRef.current) {
const scrollHeight = textareaRef.current.scrollHeight textareaRef.current.style.height = '40px'
if (currentPrompt.length === 0) { textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'
textareaRef.current.style.height = '40px'
} else {
textareaRef.current.style.height = `${
scrollHeight < 40 ? 40 : scrollHeight
}px`
}
} }
// eslint-disable-next-line react-hooks/exhaustive-deps }
}, [currentPrompt])
useEffect(resizeTextArea, [currentPrompt])
const onKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => { const onKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@ -155,7 +150,8 @@ const ChatScreen = () => {
)} )}
<div className="mx-auto flex w-full flex-shrink-0 items-end justify-center space-x-4 px-8 py-4"> <div className="mx-auto flex w-full flex-shrink-0 items-end justify-center space-x-4 px-8 py-4">
<Textarea <Textarea
className="min-h-10 h-10 max-h-[400px] resize-none pr-20" className="max-h-[400px] resize-none overflow-y-hidden pr-20"
style={{ height: '40px' }}
ref={textareaRef} ref={textareaRef}
onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) =>
onKeyDown(e) onKeyDown(e)