From 9b2359fc2724b807cba18c3a33f69f91ebaf521e Mon Sep 17 00:00:00 2001
From: Danny Avila <110412045+danny-avila@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:10:06 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20refactor:=20Improve=20I?=
 =?UTF-8?q?nput=20Placeholder=20Handling=20and=20Error=20Management=20?=
 =?UTF-8?q?=F0=9F=94=84=20(#1296)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: identify new chat buttons with testid

* fix: avoid parsing error in useSSE, which causes errorHandler to fail

* fix: ensure last message isn't setting latestMessage when conversationId is `new` and text is the same due to possible re-renders

* refactor: set placeholder through inputRef and useEffect

* Update useSSE.ts

* Update useSSE.ts
---
 client/src/components/Chat/Input/Textarea.tsx |  2 -
 client/src/components/Chat/Menus/NewChat.tsx  |  3 +-
 client/src/components/Nav/MobileNav.tsx       |  7 ++-
 client/src/components/Nav/NewChat.tsx         |  2 +-
 client/src/hooks/Input/useTextarea.ts         | 56 ++++++++++++++-----
 .../src/hooks/Messages/useMessageHelpers.ts   | 12 +++-
 client/src/hooks/useSSE.ts                    |  5 ++
 7 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Chat/Input/Textarea.tsx b/client/src/components/Chat/Input/Textarea.tsx
index 7050fef349..70cd0dee41 100644
--- a/client/src/components/Chat/Input/Textarea.tsx
+++ b/client/src/components/Chat/Input/Textarea.tsx
@@ -11,7 +11,6 @@ export default function Textarea({ value, disabled, onChange, setText, submitMes
     handleKeyDown,
     handleCompositionStart,
     handleCompositionEnd,
-    placeholder,
   } = useTextarea({ setText, submitMessage, disabled });
 
   return (
@@ -31,7 +30,6 @@ export default function Textarea({ value, disabled, onChange, setText, submitMes
       data-testid="text-input"
       style={{ height: 44, overflowY: 'auto' }}
       rows={1}
-      placeholder={placeholder}
       className={cn(
         supportsFiles[endpoint] ? ' pl-10 md:pl-[55px]' : 'pl-3 md:pl-4',
         'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5 md:pr-12 ',
diff --git a/client/src/components/Chat/Menus/NewChat.tsx b/client/src/components/Chat/Menus/NewChat.tsx
index 28af271c64..4035714f9c 100644
--- a/client/src/components/Chat/Menus/NewChat.tsx
+++ b/client/src/components/Chat/Menus/NewChat.tsx
@@ -1,7 +1,7 @@
 import { useChatContext } from '~/Providers';
 import { useMediaQuery } from '~/hooks';
 
-export default function Header() {
+export default function NewChat() {
   const { newConversation } = useChatContext();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   if (isSmallScreen) {
@@ -9,6 +9,7 @@ export default function Header() {
   }
   return (
     <button
+      data-testid="wide-header-new-chat-button"
       type="button"
       className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0 md:flex"
       onClick={() => newConversation()}
diff --git a/client/src/components/Nav/MobileNav.tsx b/client/src/components/Nav/MobileNav.tsx
index c100fb6a54..847ef66a9a 100644
--- a/client/src/components/Nav/MobileNav.tsx
+++ b/client/src/components/Nav/MobileNav.tsx
@@ -18,6 +18,7 @@ export default function MobileNav({
     <div className="text-token-primary border-token-border-medium bg-token-surface-primary dark:bg-token-surface-secondary sticky top-0 z-10 flex min-h-[40px] items-center border-b dark:text-white md:hidden">
       <button
         type="button"
+        data-testid="mobile-header-new-chat-button"
         className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
         onClick={() => setNavVisible((prev) => !prev)}
       >
@@ -41,7 +42,11 @@ export default function MobileNav({
       <h1 className="flex-1 text-center text-base font-normal">
         {title || localize('com_ui_new_chat')}
       </h1>
-      <button type="button" className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white" onClick={() => newConversation()}>
+      <button
+        type="button"
+        className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
+        onClick={() => newConversation()}
+      >
         <svg
           width="24"
           height="24"
diff --git a/client/src/components/Nav/NewChat.tsx b/client/src/components/Nav/NewChat.tsx
index b8928cb0e9..873aab2e1c 100644
--- a/client/src/components/Nav/NewChat.tsx
+++ b/client/src/components/Nav/NewChat.tsx
@@ -15,7 +15,7 @@ export default function NewChat({ toggleNav }: { toggleNav: () => void }) {
 
   return (
     <a
-      data-testid="new-chat-button"
+      data-testid="nav-new-chat-button"
       onClick={clickHandler}
       className="flex h-11 flex-shrink-0 flex-grow cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
     >
diff --git a/client/src/hooks/Input/useTextarea.ts b/client/src/hooks/Input/useTextarea.ts
index e80e3fd20d..9d5e5cf819 100644
--- a/client/src/hooks/Input/useTextarea.ts
+++ b/client/src/hooks/Input/useTextarea.ts
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react';
+import debounce from 'lodash/debounce';
 import { TEndpointOption, getResponseSender } from 'librechat-data-provider';
 import type { KeyboardEvent } from 'react';
 import { useChatContext } from '~/Providers/ChatContext';
@@ -15,8 +16,9 @@ export default function useTextarea({ setText, submitMessage, disabled = false }
   const { handleFiles } = useFileHandling();
   const localize = useLocalize();
 
-  const isNotAppendable = (latestMessage?.unfinished && !isSubmitting) || latestMessage?.error;
   const { conversationId, jailbreak } = conversation || {};
+  const isNotAppendable = (latestMessage?.unfinished && !isSubmitting) || latestMessage?.error;
+  // && (conversationId?.length ?? 0) > 6; // also ensures that we don't show the wrong placeholder
 
   // auto focus to input, when enter a conversation.
   useEffect(() => {
@@ -44,6 +46,44 @@ export default function useTextarea({ setText, submitMessage, disabled = false }
     return () => clearTimeout(timeoutId);
   }, [isSubmitting]);
 
+  useEffect(() => {
+    if (inputRef.current?.value) {
+      return;
+    }
+
+    const getPlaceholderText = () => {
+      if (disabled) {
+        return localize('com_endpoint_config_placeholder');
+      }
+      if (isNotAppendable) {
+        return localize('com_endpoint_message_not_appendable');
+      }
+
+      const sender = getResponseSender(conversation as TEndpointOption);
+
+      return `${localize('com_endpoint_message')} ${sender ? sender : 'ChatGPT'}…`;
+    };
+
+    const placeholder = getPlaceholderText();
+
+    if (inputRef.current?.getAttribute('placeholder') === placeholder) {
+      return;
+    }
+
+    const setPlaceholder = () => {
+      const placeholder = getPlaceholderText();
+
+      if (inputRef.current?.getAttribute('placeholder') !== placeholder) {
+        inputRef.current?.setAttribute('placeholder', placeholder);
+      }
+    };
+
+    const debouncedSetPlaceholder = debounce(setPlaceholder, 80);
+    debouncedSetPlaceholder();
+
+    return () => debouncedSetPlaceholder.cancel();
+  }, [conversation, disabled, latestMessage, isNotAppendable, localize]);
+
   const handleKeyDown = (e: KeyEvent) => {
     if (e.key === 'Enter' && isSubmitting) {
       return;
@@ -82,19 +122,6 @@ export default function useTextarea({ setText, submitMessage, disabled = false }
     isComposing.current = false;
   };
 
-  const getPlaceholderText = () => {
-    if (disabled) {
-      return localize('com_endpoint_config_placeholder');
-    }
-    if (isNotAppendable) {
-      return localize('com_endpoint_message_not_appendable');
-    }
-
-    const sender = getResponseSender(conversation as TEndpointOption);
-
-    return `${localize('com_endpoint_message')} ${sender ? sender : 'ChatGPT'}…`;
-  };
-
   const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
     if (e.clipboardData && e.clipboardData.files.length > 0) {
       e.preventDefault();
@@ -110,6 +137,5 @@ export default function useTextarea({ setText, submitMessage, disabled = false }
     handlePaste,
     handleCompositionStart,
     handleCompositionEnd,
-    placeholder: getPlaceholderText(),
   };
 }
diff --git a/client/src/hooks/Messages/useMessageHelpers.ts b/client/src/hooks/Messages/useMessageHelpers.ts
index 54e9924d74..a6c0346250 100644
--- a/client/src/hooks/Messages/useMessageHelpers.ts
+++ b/client/src/hooks/Messages/useMessageHelpers.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import copy from 'copy-to-clipboard';
 import type { TMessage } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
@@ -6,6 +6,7 @@ import Icon from '~/components/Endpoints/Icon';
 import { useChatContext } from '~/Providers';
 
 export default function useMessageHelpers(props: TMessageProps) {
+  const latestText = useRef('');
   const { message, currentEditId, setCurrentEditId } = props;
 
   const {
@@ -26,10 +27,15 @@ export default function useMessageHelpers(props: TMessageProps) {
   useEffect(() => {
     if (!message) {
       return;
-    } else if (isLast) {
+    } else if (
+      isLast &&
+      conversation?.conversationId !== 'new' &&
+      latestText.current !== message.text
+    ) {
       setLatestMessage({ ...message });
+      latestText.current = message.text;
     }
-  }, [isLast, message, setLatestMessage]);
+  }, [isLast, message, setLatestMessage, conversation?.conversationId]);
 
   const enterEdit = (cancel?: boolean) =>
     setCurrentEditId && setCurrentEditId(cancel ? -1 : messageId);
diff --git a/client/src/hooks/useSSE.ts b/client/src/hooks/useSSE.ts
index e50070c145..c03fc0eefa 100644
--- a/client/src/hooks/useSSE.ts
+++ b/client/src/hooks/useSSE.ts
@@ -210,6 +210,11 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
   const errorHandler = (data: TResData, submission: TSubmission) => {
     const { messages, message } = submission;
 
+    if (!data.conversationId) {
+      setIsSubmitting(false);
+      return;
+    }
+
     console.log('Error:', data);
     const errorResponse = tMessageSchema.parse({
       ...data,