From 67ce78cac233e30fac126c3e19918fa69eb303fc Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Mon, 5 Feb 2024 20:33:17 +0700 Subject: [PATCH] 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 39abdd97b..1c2ef9bec 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -1033,20 +1033,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 (