✏️ feat: LaTeX parsing for Messages (#1585)

* feat: Beta features tab in Settings and LaTeX Parsing toggle

* feat: LaTex parsing with spec

client/src/components/Nav/SettingsTabs/Beta/Beta.tsx

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import * as Tabs from '@radix-ui/react-tabs';
+import { SettingsTabValues } from 'librechat-data-provider';
+import LaTeXParsing from './LaTeXParsing';
+import ModularChat from './ModularChat';
+
+function Beta() {
+  return (
+    <Tabs.Content
+      value={SettingsTabValues.BETA}
+      role="tabpanel"
+      className="w-full md:min-h-[300px]"
+    >
+      <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-300">
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+          <ModularChat />
+        </div>
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+          <LaTeXParsing />
+        </div>
+      </div>
+    </Tabs.Content>
+  );
+}
+
+export default memo(Beta);

client/src/components/Nav/SettingsTabs/Beta/LaTeXParsing.tsx

@@ -0,0 +1,33 @@
+import { useRecoilState } from 'recoil';
+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>{localize('com_nav_latex_parsing')} </div>
+      <Switch
+        id="LaTeXParsing"
+        checked={LaTeXParsing}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4 mt-2"
+        data-testid="LaTeXParsing"
+      />
+    </div>
+  );
+}

client/src/components/Nav/SettingsTabs/Beta/ModularChat.tsx

@@ -0,0 +1,33 @@
+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 mt-2"
+        data-testid="modularChat"
+      />
+    </div>
+  );
+}