Improve [UI/UX] [Chat] [Front End] unfinished input

app/components/chat.tsx

@@ -1033,20 +1033,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]);
 
  return (
  <div className={styles.chat} key={session.id}>