🛠️ refactor: Improve Input Placeholder Handling and Error Management 🔄 (#1296)

* 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

@@ -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 ',

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()}

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"

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"
     >