diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 6691403e6..1a15915b7 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -1494,20 +1494,36 @@ 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; + // 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 () => { - localStorage.setItem(key, dom?.value ?? ""); + // 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 ?? ""; + // 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. // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [session.id]); const handlePaste = useCallback( async (event: React.ClipboardEvent) => {