From b2729c32293e897c62c69f5cf95b73283eedf1d5 Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Mon, 5 Feb 2024 20:33:17 +0700 Subject: [PATCH 1/2] Improve [UI/UX] [Chat] [Front End] unfinished input - [+] refactor(chat.tsx): improve unfinished input handling in chat component - [+] feat(chat.tsx): add session id dependency to useEffect for better session handling - [+] feat(chat.tsx): skip saving commands to local storage --- app/components/chat.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 7f4818a2fbf..61e2e00abec 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -1246,20 +1246,28 @@ function _Chat() { // remember unfinished input useEffect(() => { - // try to load from local storage + // Define the key for storing unfinished input based on the session ID. const key = UNFINISHED_INPUT(session.id); + + // Attempt to load unfinished input from local storage. const mayBeUnfinishedInput = localStorage.getItem(key); if (mayBeUnfinishedInput && userInput.length === 0) { setUserInput(mayBeUnfinishedInput); + // Clear the unfinished input from local storage after loading it. localStorage.removeItem(key); } - const dom = inputRef.current; + // This function will be called when the component unmounts. return () => { - localStorage.setItem(key, dom?.value ?? ""); + // Save the current input to local storage only if it is not a command. + const currentInputValue = inputRef.current?.value ?? ""; + if (!currentInputValue.startsWith(ChatCommandPrefix)) { + localStorage.setItem(key, currentInputValue); + } }; + // The effect should depend on the session ID to ensure it runs when the session changes. // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [session.id]); return (
From 5e1eb88328700a75086eea036e799d6d38c14073 Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Mon, 5 Feb 2024 20:40:22 +0700 Subject: [PATCH 2/2] Fix [UI/UX] [Chat] [Front End] React Warning - [+] refactor(chat.tsx): capture current input reference value for use in component unmount or dependencies change --- app/components/chat.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 61e2e00abec..338734a85fa 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -1257,10 +1257,14 @@ function _Chat() { localStorage.removeItem(key); } - // This function will be called when the component unmounts. + // Capture the current value of the input reference. + const currentInputRef = inputRef.current; + + // This function will be called when the component unmounts or dependencies change. return () => { // Save the current input to local storage only if it is not a command. - const currentInputValue = inputRef.current?.value ?? ""; + // Use the captured value from the input reference. + const currentInputValue = currentInputRef?.value ?? ""; if (!currentInputValue.startsWith(ChatCommandPrefix)) { localStorage.setItem(key, currentInputValue); }