From a5154e13492a526397990e28d44d86e9582ac34f Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 1 Apr 2025 09:15:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20feat:=20enhance=20UI=20component?=
 =?UTF-8?q?s=20and=20refactor=20settings=20(#6625)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🚀 feat: Add Save Badges State functionality to chat settings

* 🚀 feat: Remove individual chat setting components and introduce a reusable ToggleSwitch component

* 🚀 feat: Replace Switches with reusable ToggleSwitch component in General settings; style: improved HoverCard

* 🚀 feat: Refactor ChatForm and Footer components for improved layout and state management

* 🚀 feat: Add deprecation warning for GPT Plugins endpoint

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
---
 client/src/components/Chat/Footer.tsx         |   3 +-
 client/src/components/Chat/Input/ChatForm.tsx |  10 +-
 .../Endpoints/components/EndpointItem.tsx     |  14 +-
 .../Nav/SettingsTabs/Chat/CenterChatInput.tsx |  34 -----
 .../components/Nav/SettingsTabs/Chat/Chat.tsx | 121 ++++++++++++------
 .../Nav/SettingsTabs/Chat/EnterToSend.tsx     |  37 ------
 .../Nav/SettingsTabs/Chat/LaTeXParsing.tsx    |  37 ------
 .../SettingsTabs/Chat/MaximizeChatSpace.tsx   |  37 ------
 .../Nav/SettingsTabs/Chat/ModularChat.tsx     |  33 -----
 .../{SaveDraft.tsx => SaveBadgesState.tsx}    |  16 +--
 .../Nav/SettingsTabs/Chat/ScrollButton.tsx    |  35 -----
 .../Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx  |  34 -----
 .../General/AutoScrollSwitch.spec.tsx         |  38 ------
 .../Nav/SettingsTabs/General/General.tsx      |  46 +++++--
 .../Nav/SettingsTabs/ToggleSwitch.tsx         |  49 +++++++
 client/src/components/ui/HoverCard.tsx        |   2 +-
 client/src/hooks/useChatBadges.ts             |  12 ++
 client/src/hooks/useNewConvo.ts               |   7 +-
 client/src/locales/en/translation.json        |  11 ++
 client/src/store/settings.ts                  |   1 +
 20 files changed, 227 insertions(+), 350 deletions(-)
 delete mode 100644 client/src/components/Nav/SettingsTabs/Chat/CenterChatInput.tsx
 delete mode 100644 client/src/components/Nav/SettingsTabs/Chat/EnterToSend.tsx
 delete mode 100644 client/src/components/Nav/SettingsTabs/Chat/LaTeXParsing.tsx
 delete mode 100644 client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx
 delete mode 100644 client/src/components/Nav/SettingsTabs/Chat/ModularChat.tsx
 rename client/src/components/Nav/SettingsTabs/Chat/{SaveDraft.tsx => SaveBadgesState.tsx} (68%)
 delete mode 100644 client/src/components/Nav/SettingsTabs/Chat/ScrollButton.tsx
 delete mode 100644 client/src/components/Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx
 delete mode 100644 client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.spec.tsx
 create mode 100644 client/src/components/Nav/SettingsTabs/ToggleSwitch.tsx

diff --git a/client/src/components/Chat/Footer.tsx b/client/src/components/Chat/Footer.tsx
index 8bdebfb474..b2d7b12270 100644
--- a/client/src/components/Chat/Footer.tsx
+++ b/client/src/components/Chat/Footer.tsx
@@ -56,7 +56,6 @@ export default function Footer({ className }: { className?: string }) {
     <React.Fragment key={`main-content-part-${index}`}>
       <ReactMarkdown
         components={{
-
           a: ({ node: _n, href, children, ...otherProps }) => {
             return (
               <a
@@ -87,7 +86,7 @@ export default function Footer({ className }: { className?: string }) {
     <div
       className={
         className ??
-        'relative hidden items-center justify-center gap-2 px-2 py-2 text-center text-xs text-text-primary sm:flex md:px-[60px]'
+        'absolute bottom-0 left-0 right-0 hidden items-center justify-center gap-2 px-2 py-2 text-center text-xs text-text-primary sm:flex md:px-[60px]'
       }
       role="contentinfo"
     >
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index 751d7eb6d0..26cc3c8ce2 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/client/src/components/Chat/Input/ChatForm.tsx
@@ -43,12 +43,13 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   const [isTextAreaFocused, setIsTextAreaFocused] = useState(false);
   const [backupBadges, setBackupBadges] = useState<Pick<BadgeItem, 'id'>[]>([]);
 
+  const isSearching = useRecoilValue(store.isSearching);
   const SpeechToText = useRecoilValue(store.speechToText);
   const TextToSpeech = useRecoilValue(store.textToSpeech);
+  const chatDirection = useRecoilValue(store.chatDirection);
   const automaticPlayback = useRecoilValue(store.automaticPlayback);
   const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
-  const chatDirection = useRecoilValue(store.chatDirection);
-  const isSearching = useRecoilValue(store.isSearching);
+  const centerFormOnLanding = useRecoilValue(store.centerFormOnLanding);
 
   const [badges, setBadges] = useRecoilState(store.chatBadges);
   const [isEditingBadges, setIsEditingBadges] = useRecoilState(store.isEditingBadges);
@@ -190,8 +191,9 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
     <form
       onSubmit={methods.handleSubmit(submitMessage)}
       className={cn(
-        'mx-auto flex flex-row gap-3 transition-all duration-200 sm:mb-2 sm:px-2',
+        'mx-auto flex flex-row gap-3 transition-all duration-200 sm:px-2',
         maximizeChatSpace ? 'w-full max-w-full' : 'md:max-w-3xl xl:max-w-4xl',
+        centerFormOnLanding ? 'sm:mb-28' : 'sm:mb-10',
       )}
     >
       <div className="relative flex h-full flex-1 items-stretch md:flex-col">
@@ -217,7 +219,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
           <div
             onClick={handleContainerClick}
             className={cn(
-              'relative flex w-full flex-grow flex-col overflow-hidden rounded-t-3xl border border-border-light bg-surface-chat pb-4 text-text-primary transition-all duration-200 sm:rounded-3xl sm:pb-0',
+              'relative flex w-full flex-grow flex-col overflow-hidden rounded-t-3xl border border-border-medium bg-surface-chat pb-4 text-text-primary transition-all duration-200 sm:rounded-3xl sm:pb-0',
               isTextAreaFocused ? 'shadow-lg' : 'shadow-md',
             )}
           >
diff --git a/client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx b/client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx
index cece241a91..b003fd9231 100644
--- a/client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/components/EndpointItem.tsx
@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
 import { SettingsIcon } from 'lucide-react';
-import { Spinner } from '~/components';
 import { EModelEndpoint, isAgentsEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
 import type { Endpoint } from '~/common';
 import { CustomMenu as Menu, CustomMenuItem as MenuItem } from '../CustomMenu';
 import { useModelSelectorContext } from '../ModelSelectorContext';
 import { renderEndpointModels } from './EndpointModelItem';
+import { TooltipAnchor, Spinner } from '~/components';
 import { filterModels } from '../utils';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
@@ -84,6 +84,18 @@ export function EndpointItem({ endpoint }: EndpointItemProps) {
       >
         {endpoint.label}
       </span>
+      {/* TODO: remove this after deprecation */}
+      {endpoint.value === 'gptPlugins' && (
+        <TooltipAnchor
+          description={localize('com_endpoint_deprecated_info')}
+          aria-label={localize('com_endpoint_deprecated_info_a11y')}
+          render={
+            <span className="ml-2 rounded bg-amber-600/70 px-2 py-0.5 text-xs font-semibold text-white">
+              {localize('com_endpoint_deprecated')}
+            </span>
+          }
+        />
+      )}
     </div>
   );
 
diff --git a/client/src/components/Nav/SettingsTabs/Chat/CenterChatInput.tsx b/client/src/components/Nav/SettingsTabs/Chat/CenterChatInput.tsx
deleted file mode 100644
index dc1477e51a..0000000000
--- a/client/src/components/Nav/SettingsTabs/Chat/CenterChatInput.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useRecoilState } from 'recoil';
-import HoverCardSettings from '../HoverCardSettings';
-import { Switch } from '~/components/ui/Switch';
-import useLocalize from '~/hooks/useLocalize';
-import store from '~/store';
-
-export default function CenterChatInput({
-  onCheckedChange,
-}: {
-  onCheckedChange?: (value: boolean) => void;
-}) {
-  const [centerFormOnLanding, setcenterFormOnLanding] = useRecoilState(store.centerFormOnLanding);
-  const localize = useLocalize();
-
-  const handleCheckedChange = (value: boolean) => {
-    setcenterFormOnLanding(value);
-    if (onCheckedChange) {
-      onCheckedChange(value);
-    }
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div>{localize('com_nav_center_chat_input')}</div>
-      <Switch
-        id="centerFormOnLanding"
-        checked={centerFormOnLanding}
-        onCheckedChange={handleCheckedChange}
-        className="ml-4"
-        data-testid="centerFormOnLanding"
-      />
-    </div>
-  );
-}
diff --git a/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx b/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
index 7e5b19ed46..70858a9b72 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
+++ b/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
@@ -1,16 +1,82 @@
 import { memo } from 'react';
-import MaximizeChatSpace from './MaximizeChatSpace';
 import FontSizeSelector from './FontSizeSelector';
-import SendMessageKeyEnter from './EnterToSend';
-import CenterChatInput from './CenterChatInput';
-import ShowCodeSwitch from './ShowCodeSwitch';
 import { ForkSettings } from './ForkSettings';
 import ChatDirection from './ChatDirection';
-import ShowThinking from './ShowThinking';
-import LaTeXParsing from './LaTeXParsing';
-import ScrollButton from './ScrollButton';
-import ModularChat from './ModularChat';
-import SaveDraft from './SaveDraft';
+import ToggleSwitch from '../ToggleSwitch';
+import store from '~/store';
+
+const toggleSwitchConfigs = [
+  {
+    stateAtom: store.enterToSend,
+    localizationKey: 'com_nav_enter_to_send',
+    switchId: 'enterToSend',
+    hoverCardText: 'com_nav_info_enter_to_send',
+    key: 'enterToSend',
+  },
+  {
+    stateAtom: store.maximizeChatSpace,
+    localizationKey: 'com_nav_maximize_chat_space',
+    switchId: 'maximizeChatSpace',
+    hoverCardText: undefined,
+    key: 'maximizeChatSpace',
+  },
+  {
+    stateAtom: store.centerFormOnLanding,
+    localizationKey: 'com_nav_center_chat_input',
+    switchId: 'centerFormOnLanding',
+    hoverCardText: undefined,
+    key: 'centerFormOnLanding',
+  },
+  {
+    stateAtom: store.showThinking,
+    localizationKey: 'com_nav_show_thinking',
+    switchId: 'showThinking',
+    hoverCardText: undefined,
+    key: 'showThinking',
+  },
+  {
+    stateAtom: store.showCode,
+    localizationKey: 'com_nav_show_code',
+    switchId: 'showCode',
+    hoverCardText: undefined,
+    key: 'showCode',
+  },
+  {
+    stateAtom: store.LaTeXParsing,
+    localizationKey: 'com_nav_latex_parsing',
+    switchId: 'latexParsing',
+    hoverCardText: 'com_nav_info_latex_parsing',
+    key: 'latexParsing',
+  },
+  {
+    stateAtom: store.saveDrafts,
+    localizationKey: 'com_nav_save_drafts',
+    switchId: 'saveDrafts',
+    hoverCardText: 'com_nav_info_save_draft',
+    key: 'saveDrafts',
+  },
+  {
+    stateAtom: store.showScrollButton,
+    localizationKey: 'com_nav_scroll_button',
+    switchId: 'showScrollButton',
+    hoverCardText: undefined,
+    key: 'showScrollButton',
+  },
+  {
+    stateAtom: store.saveBadgesState,
+    localizationKey: 'com_nav_save_badges_state',
+    switchId: 'showBadges',
+    hoverCardText: 'com_nav_info_save_badges_state',
+    key: 'showBadges',
+  },
+  {
+    stateAtom: store.modularChat,
+    localizationKey: 'com_nav_modular_chat',
+    switchId: 'modularChat',
+    hoverCardText: undefined,
+    key: 'modularChat',
+  },
+];
 
 function Chat() {
   return (
@@ -21,34 +87,17 @@ function Chat() {
       <div className="pb-3">
         <ChatDirection />
       </div>
-      <div className="pb-3">
-        <CenterChatInput />
-      </div>
-      <div className="pb-3">
-        <SendMessageKeyEnter />
-      </div>
-      <div className="pb-3">
-        <MaximizeChatSpace />
-      </div>
-      <div className="pb-3">
-        <ShowCodeSwitch />
-      </div>
-      <div className="pb-3">
-        <SaveDraft />
-      </div>
-      <div className="pb-3">
-        <ScrollButton />
-      </div>
+      {toggleSwitchConfigs.map((config) => (
+        <div key={config.key} className="pb-3">
+          <ToggleSwitch
+            stateAtom={config.stateAtom}
+            localizationKey={config.localizationKey}
+            hoverCardText={config.hoverCardText}
+            switchId={config.switchId}
+          />
+        </div>
+      ))}
       <ForkSettings />
-      <div className="pb-3">
-        <ModularChat />
-      </div>
-      <div className="pb-3">
-        <LaTeXParsing />
-      </div>
-      <div className="pb-3">
-        <ShowThinking />
-      </div>
     </div>
   );
 }
diff --git a/client/src/components/Nav/SettingsTabs/Chat/EnterToSend.tsx b/client/src/components/Nav/SettingsTabs/Chat/EnterToSend.tsx
deleted file mode 100644
index b2e1931f65..0000000000
--- a/client/src/components/Nav/SettingsTabs/Chat/EnterToSend.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useRecoilState } from 'recoil';
-import HoverCardSettings from '../HoverCardSettings';
-import { Switch } from '~/components/ui/Switch';
-import useLocalize from '~/hooks/useLocalize';
-import store from '~/store';
-
-export default function SendMessageKeyEnter({
-  onCheckedChange,
-}: {
-  onCheckedChange?: (value: boolean) => void;
-}) {
-  const [enterToSend, setEnterToSend] = useRecoilState<boolean>(store.enterToSend);
-  const localize = useLocalize();
-
-  const handleCheckedChange = (value: boolean) => {
-    setEnterToSend(value);
-    if (onCheckedChange) {
-      onCheckedChange(value);
-    }
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center space-x-2">
-        <div>{localize('com_nav_enter_to_send')}</div>
-        <HoverCardSettings side="bottom" text="com_nav_info_enter_to_send" />
-      </div>
-      <Switch
-        id="enterToSend"
-        checked={enterToSend}
-        onCheckedChange={handleCheckedChange}
-        className="ml-4"
-        data-testid="enterToSend"
-      />
-    </div>
-  );
-}
diff --git a/client/src/components/Nav/SettingsTabs/Chat/LaTeXParsing.tsx b/client/src/components/Nav/SettingsTabs/Chat/LaTeXParsing.tsx
deleted file mode 100644
index cabe4f006a..0000000000
--- a/client/src/components/Nav/SettingsTabs/Chat/LaTeXParsing.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useRecoilState } from 'recoil';
-import HoverCardSettings from '../HoverCardSettings';
-import { Switch } from '~/components/ui';
-import { useLocalize } from '~/hooks';
-import store from '~/store';
-
-export default function LaTeXParsingSwitch({
-  onCheckedChange,
-}: {
-  onCheckedChange?: (value: boolean) => void;
-}) {
-  const [LaTeXParsing, setLaTeXParsing] = useRecoilState<boolean>(store.LaTeXParsing);
-  const localize = useLocalize();
-
-  const handleCheckedChange = (value: boolean) => {
-    setLaTeXParsing(value);
-    if (onCheckedChange) {
-      onCheckedChange(value);
-    }
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center space-x-2">
-        <div>{localize('com_nav_latex_parsing')}</div>
-        <HoverCardSettings side="bottom" text="com_nav_info_latex_parsing" />
-      </div>
-      <Switch
-        id="LaTeXParsing"
-        checked={LaTeXParsing}
-        onCheckedChange={handleCheckedChange}
-        className="ml-4"
-        data-testid="LaTeXParsing"
-      />
-    </div>
-  );
-}
diff --git a/client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx b/client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx
deleted file mode 100644
index e527eaf545..0000000000
--- a/client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useRecoilState } from 'recoil';
-import { Switch } from '~/components/ui/Switch';
-import useLocalize from '~/hooks/useLocalize';
-import store from '~/store';
-
-export default function MaximizeChatSpace({
-  onCheckedChange,
-}: {
-  onCheckedChange?: (value: boolean) => void;
-}) {
-  const [maximizeChatSpace, setmaximizeChatSpace] = useRecoilState<boolean>(
-    store.maximizeChatSpace,
-  );
-  const localize = useLocalize();
-
-  const handleCheckedChange = (value: boolean) => {
-    setmaximizeChatSpace(value);
-    if (onCheckedChange) {
-      onCheckedChange(value);
-    }
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center space-x-2">
-        <div>{localize('com_nav_maximize_chat_space')}</div>
-      </div>
-      <Switch
-        id="maximizeChatSpace"
-        checked={maximizeChatSpace}
-        onCheckedChange={handleCheckedChange}
-        className="ml-4"
-        data-testid="maximizeChatSpace"
-      />
-    </div>
-  );
-}
diff --git a/client/src/components/Nav/SettingsTabs/Chat/ModularChat.tsx b/client/src/components/Nav/SettingsTabs/Chat/ModularChat.tsx
deleted file mode 100644
index efb001d7ea..0000000000
--- a/client/src/components/Nav/SettingsTabs/Chat/ModularChat.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useRecoilState } from 'recoil';
-import { Switch } from '~/components/ui';
-import { useLocalize } from '~/hooks';
-import store from '~/store';
-
-export default function ModularChatSwitch({
-  onCheckedChange,
-}: {
-  onCheckedChange?: (value: boolean) => void;
-}) {
-  const [modularChat, setModularChat] = useRecoilState<boolean>(store.modularChat);
-  const localize = useLocalize();
-
-  const handleCheckedChange = (value: boolean) => {
-    setModularChat(value);
-    if (onCheckedChange) {
-      onCheckedChange(value);
-    }
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div> {localize('com_nav_modular_chat')} </div>
-      <Switch
-        id="modularChat"
-        checked={modularChat}
-        onCheckedChange={handleCheckedChange}
-        className="ml-4"
-        data-testid="modularChat"
-      />
-    </div>
-  );
-}
diff --git a/client/src/components/Nav/SettingsTabs/Chat/SaveDraft.tsx b/client/src/components/Nav/SettingsTabs/Chat/SaveBadgesState.tsx
similarity index 68%
rename from client/src/components/Nav/SettingsTabs/Chat/SaveDraft.tsx
rename to client/src/components/Nav/SettingsTabs/Chat/SaveBadgesState.tsx
index b5e64ebee7..1be0171117 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/SaveDraft.tsx
+++ b/client/src/components/Nav/SettingsTabs/Chat/SaveBadgesState.tsx
@@ -4,16 +4,16 @@ import { Switch } from '~/components/ui';
 import useLocalize from '~/hooks/useLocalize';
 import store from '~/store';
 
-export default function SaveDraft({
+export default function SaveBadgesState({
   onCheckedChange,
 }: {
   onCheckedChange?: (value: boolean) => void;
 }) {
-  const [saveDrafts, setSaveDrafts] = useRecoilState<boolean>(store.saveDrafts);
+  const [saveBadgesState, setSaveBadgesState] = useRecoilState<boolean>(store.saveBadgesState);
   const localize = useLocalize();
 
   const handleCheckedChange = (value: boolean) => {
-    setSaveDrafts(value);
+    setSaveBadgesState(value);
     if (onCheckedChange) {
       onCheckedChange(value);
     }
@@ -22,15 +22,15 @@ export default function SaveDraft({
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center space-x-2">
-        <div>{localize('com_nav_save_drafts')}</div>
-        <HoverCardSettings side="bottom" text="com_nav_info_save_draft" />
+        <div>{localize('com_nav_save_badges_state')}</div>
+        <HoverCardSettings side="bottom" text="com_nav_info_save_badges_state" />
       </div>
       <Switch
-        id="saveDrafts"
-        checked={saveDrafts}
+        id="saveBadgesState"
+        checked={saveBadgesState}
         onCheckedChange={handleCheckedChange}
         className="ml-4"
-        data-testid="saveDrafts"
+        data-testid="saveBadgesState"
       />
     </div>
   );
diff --git a/client/src/components/Nav/SettingsTabs/Chat/ScrollButton.tsx b/client/src/components/Nav/SettingsTabs/Chat/ScrollButton.tsx
deleted file mode 100644
index 5b87b18169..0000000000
--- a/client/src/components/Nav/SettingsTabs/Chat/ScrollButton.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useRecoilState } from 'recoil';
-import { Switch } from '~/components/ui/Switch';
-import useLocalize from '~/hooks/useLocalize';
-import store from '~/store';
-
-export default function ScrollButton({
-  onCheckedChange,
-}: {
-  onCheckedChange?: (value: boolean) => void;
-}) {
-  const [showScrollButton, setShowScrollButton] = useRecoilState<boolean>(store.showScrollButton);
-  const localize = useLocalize();
-
-  const handleCheckedChange = (value: boolean) => {
-    setShowScrollButton(value);
-    if (onCheckedChange) {
-      onCheckedChange(value);
-    }
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex items-center space-x-2">
-        <div>{localize('com_nav_scroll_button')}</div>
-      </div>
-      <Switch
-        id="scrollButton"
-        checked={showScrollButton}
-        onCheckedChange={handleCheckedChange}
-        className="ml-4"
-        data-testid="scrollButton"
-      />
-    </div>
-  );
-}
diff --git a/client/src/components/Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx b/client/src/components/Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx
deleted file mode 100644
index bb4f7f97f7..0000000000
--- a/client/src/components/Nav/SettingsTabs/Chat/ShowCodeSwitch.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useRecoilState } from 'recoil';
-import HoverCardSettings from '../HoverCardSettings';
-import { Switch } from '~/components/ui';
-import { useLocalize } from '~/hooks';
-import store from '~/store';
-
-export default function ShowCodeSwitch({
-  onCheckedChange,
-}: {
-  onCheckedChange?: (value: boolean) => void;
-}) {
-  const [showCode, setShowCode] = useRecoilState<boolean>(store.showCode);
-  const localize = useLocalize();
-
-  const handleCheckedChange = (value: boolean) => {
-    setShowCode(value);
-    if (onCheckedChange) {
-      onCheckedChange(value);
-    }
-  };
-
-  return (
-    <div className="flex items-center justify-between">
-      <div> {localize('com_nav_show_code')} </div>
-      <Switch
-        id="showCode"
-        checked={showCode}
-        onCheckedChange={handleCheckedChange}
-        className="ml-4"
-        data-testid="showCode"
-      />
-    </div>
-  );
-}
diff --git a/client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.spec.tsx b/client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.spec.tsx
deleted file mode 100644
index a4a4d69533..0000000000
--- a/client/src/components/Nav/SettingsTabs/General/AutoScrollSwitch.spec.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render, fireEvent } from 'test/layout-test-utils';
-import AutoScrollSwitch from './AutoScrollSwitch';
-import { RecoilRoot } from 'recoil';
-
-describe('AutoScrollSwitch', () => {
-  /**
-   * Mock function to set the auto-scroll state.
-   */
-  let mockSetAutoScroll: jest.Mock<void, [boolean]> | ((value: boolean) => void) | undefined;
-
-  beforeEach(() => {
-    mockSetAutoScroll = jest.fn();
-  });
-
-  it('renders correctly', () => {
-    const { getByTestId } = render(
-      <RecoilRoot>
-        <AutoScrollSwitch />
-      </RecoilRoot>,
-    );
-
-    expect(getByTestId('autoScroll')).toBeInTheDocument();
-  });
-
-  it('calls onCheckedChange when the switch is toggled', () => {
-    const { getByTestId } = render(
-      <RecoilRoot>
-        <AutoScrollSwitch onCheckedChange={mockSetAutoScroll} />
-      </RecoilRoot>,
-    );
-    const switchElement = getByTestId('autoScroll');
-    fireEvent.click(switchElement);
-
-    expect(mockSetAutoScroll).toHaveBeenCalledWith(true);
-  });
-});
diff --git a/client/src/components/Nav/SettingsTabs/General/General.tsx b/client/src/components/Nav/SettingsTabs/General/General.tsx
index 53750e7fb5..e62fd82966 100644
--- a/client/src/components/Nav/SettingsTabs/General/General.tsx
+++ b/client/src/components/Nav/SettingsTabs/General/General.tsx
@@ -6,9 +6,34 @@ import HideSidePanelSwitch from './HideSidePanelSwitch';
 import { ThemeContext, useLocalize } from '~/hooks';
 import AutoScrollSwitch from './AutoScrollSwitch';
 import ArchivedChats from './ArchivedChats';
-import { Dropdown } from '~/components/ui';
+import ToggleSwitch from '../ToggleSwitch';
+import { Dropdown } from '~/components';
 import store from '~/store';
 
+const toggleSwitchConfigs = [
+  {
+    stateAtom: store.enableUserMsgMarkdown,
+    localizationKey: 'com_nav_user_msg_markdown',
+    switchId: 'enableUserMsgMarkdown',
+    hoverCardText: undefined,
+    key: 'enableUserMsgMarkdown',
+  },
+  {
+    stateAtom: store.autoScroll,
+    localizationKey: 'com_nav_auto_scroll',
+    switchId: 'autoScroll',
+    hoverCardText: undefined,
+    key: 'autoScroll',
+  },
+  {
+    stateAtom: store.hideSidePanel,
+    localizationKey: 'com_nav_hide_panel',
+    switchId: 'hideSidePanel',
+    hoverCardText: undefined,
+    key: 'hideSidePanel',
+  },
+];
+
 export const ThemeSelector = ({
   theme,
   onChange,
@@ -127,15 +152,16 @@ function General() {
       <div className="pb-3">
         <LangSelector langcode={langcode} onChange={changeLang} />
       </div>
-      <div className="pb-3">
-        <UserMsgMarkdownSwitch />
-      </div>
-      <div className="pb-3">
-        <AutoScrollSwitch />
-      </div>
-      <div className="pb-3">
-        <HideSidePanelSwitch />
-      </div>
+      {toggleSwitchConfigs.map((config) => (
+        <div key={config.key} className="pb-3">
+          <ToggleSwitch
+            stateAtom={config.stateAtom}
+            localizationKey={config.localizationKey}
+            hoverCardText={config.hoverCardText}
+            switchId={config.switchId}
+          />
+        </div>
+      ))}
       <div className="pb-3">
         <ArchivedChats />
       </div>
diff --git a/client/src/components/Nav/SettingsTabs/ToggleSwitch.tsx b/client/src/components/Nav/SettingsTabs/ToggleSwitch.tsx
new file mode 100644
index 0000000000..4f6252f157
--- /dev/null
+++ b/client/src/components/Nav/SettingsTabs/ToggleSwitch.tsx
@@ -0,0 +1,49 @@
+import { useRecoilState } from 'recoil';
+import HoverCardSettings from './HoverCardSettings';
+import useLocalize from '~/hooks/useLocalize';
+import { Switch } from '~/components/ui';
+import { RecoilState } from 'recoil';
+
+interface ToggleSwitchProps {
+  stateAtom: RecoilState<boolean>;
+  localizationKey: string;
+  hoverCardText?: string;
+  switchId: string;
+  onCheckedChange?: (value: boolean) => void;
+}
+
+const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
+  stateAtom,
+  localizationKey,
+  hoverCardText,
+  switchId,
+  onCheckedChange,
+}) => {
+  const [switchState, setSwitchState] = useRecoilState<boolean>(stateAtom);
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setSwitchState(value);
+    if (onCheckedChange) {
+      onCheckedChange(value);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <div>{localize(localizationKey as any)}</div>
+        {hoverCardText && <HoverCardSettings side="bottom" text={hoverCardText} />}
+      </div>
+      <Switch
+        id={switchId}
+        checked={switchState}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4"
+        data-testid={switchId}
+      />
+    </div>
+  );
+};
+
+export default ToggleSwitch;
diff --git a/client/src/components/ui/HoverCard.tsx b/client/src/components/ui/HoverCard.tsx
index 5e973ed7bc..362ae47716 100644
--- a/client/src/components/ui/HoverCard.tsx
+++ b/client/src/components/ui/HoverCard.tsx
@@ -23,7 +23,7 @@ const HoverCardContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-64 rounded-md border border-none bg-surface-tertiary p-4 shadow-md outline-none animate-in fade-in-0',
+        'z-50 w-64 origin-[--radix-hover-card-content-transform-origin] rounded-xl border border-border-light bg-surface-secondary p-4 text-text-primary shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
       )}
       {...props}
diff --git a/client/src/hooks/useChatBadges.ts b/client/src/hooks/useChatBadges.ts
index ab22d5f13d..a6d20626f4 100644
--- a/client/src/hooks/useChatBadges.ts
+++ b/client/src/hooks/useChatBadges.ts
@@ -1,3 +1,4 @@
+import { useRecoilCallback } from 'recoil';
 import { useRecoilValue } from 'recoil';
 import { MessageCircleDashed, Box } from 'lucide-react';
 import type { BadgeItem } from '~/common';
@@ -33,3 +34,14 @@ export default function useChatBadges(): BadgeItem[] {
     isAvailable: activeBadgeIds.has(cfg.id),
   }));
 }
+
+export function useResetChatBadges() {
+  return useRecoilCallback(
+    ({ reset }) =>
+      () => {
+        badgeConfig.forEach(({ atom }) => reset(atom));
+        reset(store.chatBadges);
+      },
+    [],
+  );
+}
diff --git a/client/src/hooks/useNewConvo.ts b/client/src/hooks/useNewConvo.ts
index 16ec363402..158d0f153d 100644
--- a/client/src/hooks/useNewConvo.ts
+++ b/client/src/hooks/useNewConvo.ts
@@ -28,6 +28,7 @@ import {
 } from '~/utils';
 import { useDeleteFilesMutation, useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider';
 import useAssistantListMap from './Assistants/useAssistantListMap';
+import { useResetChatBadges } from './useChatBadges';
 import { usePauseGlobalAudio } from './Audio';
 import { mainTextareaId } from '~/common';
 import store from '~/store';
@@ -38,8 +39,8 @@ const useNewConvo = (index = 0) => {
   const clearAllConversations = store.useClearConvoState();
   const defaultPreset = useRecoilValue(store.defaultPreset);
   const { setConversation } = store.useCreateConversationAtom(index);
-  const [isTemporary, setIsTemporary] = useRecoilState(store.isTemporary);
   const [files, setFiles] = useRecoilState(store.filesByIndex(index));
+  const saveBadgesState = useRecoilValue<boolean>(store.saveBadgesState);
   const clearAllLatestMessages = store.useClearLatestMessages(`useNewConvo ${index}`);
   const setSubmission = useSetRecoilState<TSubmission | null>(store.submissionByIndex(index));
   const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
@@ -196,8 +197,8 @@ const useNewConvo = (index = 0) => {
       keepAddedConvos?: boolean;
     } = {}) {
       pauseGlobalAudio();
-      if (isTemporary) {
-        setIsTemporary(false);
+      if (!saveBadgesState) {
+        useResetChatBadges();
       }
 
       const templateConvoId = _template.conversationId ?? '';
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 4900ef741b..78575bfa52 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -356,6 +356,7 @@
   "com_nav_info_save_draft": "When enabled, the text and attachments you enter in the chat form will be automatically saved locally as drafts. These drafts will be available even if you reload the page or switch to a different conversation. Drafts are stored locally on your device and are deleted once the message is sent.",
   "com_nav_info_show_thinking": "When enabled, the chat will display the thinking dropdowns open by default, allowing you to view the AI's reasoning in real-time. When disabled, the thinking dropdowns will remain closed by default for a cleaner and more streamlined interface",
   "com_nav_info_user_name_display": "When enabled, the username of the sender will be shown above each message you send. When disabled, you will only see \"You\" above your messages.",
+  "com_nav_info_save_badges_state": "When enabled, the state of the chat badges will be saved. This means that if you create a new chat, the badges will remain in the same state as the previous chat. If you disable this option, the badges will reset to their default state every time you create a new chat",
   "com_nav_lang_arabic": "العربية",
   "com_nav_lang_auto": "Auto detect",
   "com_nav_lang_brazilian_portuguese": "Português Brasileiro",
@@ -402,6 +403,7 @@
   "com_nav_plus_command_description": "Toggle command \"+\" for adding a multi-response setting",
   "com_nav_profile_picture": "Profile Picture",
   "com_nav_save_drafts": "Save drafts locally",
+  "com_nav_save_badges_state": "Save badges state",
   "com_nav_scroll_button": "Scroll to the end button",
   "com_nav_search_placeholder": "Search messages",
   "com_nav_send_message": "Send message",
@@ -850,6 +852,15 @@
   "com_ui_write": "Writing",
   "com_ui_yes": "Yes",
   "com_ui_zoom": "Zoom",
+  "com_ui_save_badge_changes": "Save badge changes?",
+  "com_ui_late_night": "Happy late night",
+  "com_ui_weekend_morning": "Happy weekend",
+  "com_ui_good_morning": "Good morning",
+  "com_ui_good_afternoon": "Good afternoon",
+  "com_ui_good_evening": "Good evening",
+  "com_endpoint_deprecated": "Deprecated",
+  "com_endpoint_deprecated_info": "This endpoint is deprecated and may be removed in future versions, please use the agent endpoint instead",
+  "com_endpoint_deprecated_info_a11y": "The plugin endpoint is deprecated and may be removed in future versions, please use the agent endpoint instead",
   "com_user_message": "You",
   "com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint."
 }
\ No newline at end of file
diff --git a/client/src/store/settings.ts b/client/src/store/settings.ts
index 3fc49dc378..8fbce1b3db 100644
--- a/client/src/store/settings.ts
+++ b/client/src/store/settings.ts
@@ -38,6 +38,7 @@ const localStorageAtoms = {
   splitAtTarget: atomWithLocalStorage('splitAtTarget', false),
   rememberDefaultFork: atomWithLocalStorage(LocalStorageKeys.REMEMBER_FORK_OPTION, false),
   showThinking: atomWithLocalStorage('showThinking', false),
+  saveBadgesState: atomWithLocalStorage('saveBadgesState', false),
 
   // Beta features settings
   modularChat: atomWithLocalStorage('modularChat', true),