From 67ce78cac233e30fac126c3e19918fa69eb303fc Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Mon, 5 Feb 2024 20:33:17 +0700 Subject: [PATCH 1/3] 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 39abdd97b24..1c2ef9bec13 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 (
From e05af7589159ebb569fe76933e911eca53f5878c Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Mon, 5 Feb 2024 20:40:22 +0700 Subject: [PATCH 2/3] 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 1c2ef9bec13..5fe350a0bec 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -1044,10 +1044,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); } From 138548ad45b593f099f0f1f4554f20f0c4d11367 Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Mon, 5 Feb 2024 22:10:02 +0700 Subject: [PATCH 3/3] Feat [Terminal] [Chats] enhance local storage - [+] feat(chat.tsx): enhance local storage handling for chat input --- app/components/chat.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 5fe350a0bec..8df75b44b34 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -1052,8 +1052,12 @@ function _Chat() { // Save the current input to local storage only if it is not a command. // Use the captured value from the input reference. const currentInputValue = currentInputRef?.value ?? ""; - if (!currentInputValue.startsWith(ChatCommandPrefix)) { + // Save the input to local storage only if it's not empty and not a command. + if (currentInputValue && !currentInputValue.startsWith(ChatCommandPrefix)) { localStorage.setItem(key, currentInputValue); + } else { + // If there's no value, ensure we don't create an empty key in local storage. + localStorage.removeItem(key); } }; // The effect should depend on the session ID to ensure it runs when the session changes.