enhancement: reset textarea window size when sending a message

moderato-app · Nov 12, 2023 · d6855a4 · d6855a4
1 parent 0d3b8d4
commit d6855a4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/src/home/chat-window/message-list/message-list.tsx b/src/home/chat-window/message-list/message-list.tsx
@@ -5,7 +5,7 @@ import ErrorBoundary from "../compnent/error-boundary.tsx"
 import {maxLoadedVoice} from "../../../config.ts"
 import {cx} from "../../../util/util.tsx"
 import {useSnapshot} from "valtio/react"
-import {addToPlayList, clearPlayList} from "../../../state/control-state.ts"
+import {addToPlayList, clearPlayList, controlState} from "../../../state/control-state.ts"
 import {HiOutlineChevronDown} from "react-icons/hi2"
 import {Row} from "./row.tsx"
 import {subscribeKey} from "valtio/utils";
@@ -21,6 +21,7 @@ type MLProps = {
 
 export const MessageList: React.FC<MLProps> = ({chatProxy}) => {
     // console.info("MessageList rendered", new Date().toLocaleString())
+    const {sendingMessageSignal} = useSnapshot(controlState)
     const [messages, setMessages] = useState<Message[]>([])
     const containerRef = useRef<HTMLDivElement>(null)
     const scrollEndRef = useRef<HTMLDivElement>(null)
@@ -61,11 +62,16 @@ export const MessageList: React.FC<MLProps> = ({chatProxy}) => {
 
     const scrollToBottom = throttle((behavior?: 'instant' | 'smooth') => {
         if (!layoutState.isPAPinning && !layoutState.isPAFloating && scrollEndRef.current) {
-            // don't scroll message list because it pushed promptory outside screen.
+            // don't scroll message list if UI of Preview is showing, in case UI of Preview is pushed outside screen.
             scrollEndRef.current.scrollIntoView({behavior: behavior ?? "instant"})
         }
     }, 200)
 
+    useEffect(() => {
+        scrollToBottom()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sendingMessageSignal]);
+
     useEffect(() => {
         return subscribe(chatProxy.messages, () => {
             const len = chatProxy.messages.length

diff --git a/src/home/chat-window/text-area.tsx b/src/home/chat-window/text-area.tsx
@@ -29,6 +29,23 @@ const TextArea: React.FC<Props> = ({chatProxy}) => {
         event.stopPropagation()
     }, [])
 
+    const autoGrowHeight = useCallback((e: React.BaseSyntheticEvent) => {
+        e.currentTarget.style.height = "auto"
+        e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
+        if (textAreaRef.current) {
+            if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight) {
+                setInputAreaIsLarge(true)
+            }
+        }
+    }, [])
+
+    const resetHeight = useCallback(() => {
+        if (textAreaRef.current) {
+            textAreaRef.current.focus()
+            textAreaRef.current.style.height = `0px`
+        }
+    }, [])
+
     const sendAndClearText = useCallback(() => {
         if (sendButtonRef.current) {
             sendButtonRef.current.blur()
@@ -38,7 +55,8 @@ const TextArea: React.FC<Props> = ({chatProxy}) => {
             controlState.sendingMessageSignal++
             chatProxy.inputText = ""
         }
-        textAreaRef.current?.focus()
+        // reset window size of <textarea> after clearing text
+        resetHeight()
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
@@ -114,15 +132,6 @@ const TextArea: React.FC<Props> = ({chatProxy}) => {
         }
     }, [inputAreaIsLarge])
 
-    const autoGrowHeight = useCallback((e: React.BaseSyntheticEvent) => {
-        e.currentTarget.style.height = "auto"
-        e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
-        if (textAreaRef.current) {
-            if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight) {
-                setInputAreaIsLarge(true)
-            }
-        }
-    }, [])
 
     return (<div className="flex flex-col items-center w-full mt-auto bottom-0 max-w-4xl">
             <button