feat: inline LaTeX toggle

fixes #237

public/locales/da/main.json

@@ -25,6 +25,7 @@
   "image": "Billede",
   "autoTitle": "Auto generer titel",
   "advancedMode": "Avanceret tilstand",
+  "inlineLatex": "Indlejret LaTeX",
   "prompt": "Opgave",
   "promptLibrary": "Opgavebibliotek",
   "name": "Navn",

public/locales/en-US/main.json

@@ -25,6 +25,7 @@
   "image": "Image",
   "autoTitle": "Auto generate title",
   "advancedMode": "Advanced mode",
+  "inlineLatex": "Inline Latex",
   "prompt": "Prompt",
   "promptLibrary": "Prompt Library",
   "name": "Name",

public/locales/en/main.json

@@ -25,6 +25,7 @@
   "image": "Image",
   "autoTitle": "Auto generate title",
   "advancedMode": "Advanced mode",
+  "inlineLatex": "Inline Latex",
   "prompt": "Prompt",
   "promptLibrary": "Prompt Library",
   "name": "Name",

public/locales/es/main.json

@@ -25,6 +25,7 @@
   "image": "Imagen",
   "autoTitle": "Generar automáticamente el título de la conversación.",
   "advancedMode": "Modo avanzado",
+  "inlineLatex": "Latex en línea",
   "prompt": "Prompt",
   "promptLibrary": "Librería de Prompts",
   "name": "Nombre",

public/locales/fr/main.json

@@ -25,6 +25,7 @@
   "image": "Image",
   "autoTitle": "Générer le titre automatiquement",
   "advancedMode": "Mode avancé",
+  "inlineLatex": "Latex en ligne",
   "prompt": "Incitation",
   "promptLibrary": "Bibliothèque de prompt",
   "name": "Nom",

public/locales/it/main.json

@@ -25,6 +25,7 @@
   "image": "Immagine",
   "autoTitle": "Genera automaticamente il titolo",
   "advancedMode": "Modalità avanzata",
+  "inlineLatex": "Latex in linea",
   "prompt": "Prompt",
   "promptLibrary": "Libreria Prompt",
   "name": "Nome",

public/locales/ja/main.json

@@ -25,6 +25,7 @@
   "image": "画像",
   "autoTitle": "タイトルを自動生成",
   "advancedMode": "上級モード",
+  "inlineLatex": "インライン LaTeX",
   "prompt": "プロンプト",
   "promptLibrary": "プロンプトライブラリ",
   "name": "名前",

public/locales/ms/main.json

@@ -25,6 +25,7 @@
   "image": "Imej",
   "autoTitle": "Jana tajuk secara automatik",
   "advancedMode": "Mod lanjutan",
+  "inlineLatex": "Latex Sebaris",
   "prompt": "Arahan",
   "promptLibrary": "Pustaka Arahan",
   "name": "Nama",

public/locales/nb/main.json

@@ -25,6 +25,7 @@
   "image": "Bilde",
   "autoTitle": "Auto generer tittel",
   "advancedMode": "Avansert modus",
+  "inlineLatex": "Inline Latex",
   "prompt": "Oppgave",
   "promptLibrary": "Oppgavebibliotek",
   "name": "Navn",

public/locales/sv/main.json

@@ -25,6 +25,7 @@
   "image": "Bild",
   "autoTitle": "Auto generera titel",
   "advancedMode": "Avancerat läge",
+  "inlineLatex": "Inline Latex",
   "prompt": "Uppmaning",
   "promptLibrary": "Uppmaningsbibliotek",
   "name": "Namn",

public/locales/zh-CN/main.json

@@ -25,6 +25,7 @@
   "image": "图片",
   "autoTitle": "自动生成标题",
   "advancedMode": "高级模式",
+  "inlineLatex": "行内 Latex",
   "prompt": "提示词",
   "promptLibrary": "提示词资料库",
   "name": "名称",

public/locales/zh-HK/main.json

@@ -25,6 +25,7 @@
   "image": "圖片",
   "autoTitle": "自動生成標題",
   "advancedMode": "高級模式",
+  "inlineLatex": "行內 Latex",
   "prompt": "Prompt",
   "promptLibrary": "Prompt 資料庫",
   "name": "名",

public/locales/zh-TW/main.json

@@ -25,6 +25,7 @@
   "image": "圖片",
   "autoTitle": "自動生成標題",
   "advancedMode": "高級模式",
+  "inlineLatex": "行內 Latex",
   "prompt": "提示詞",
   "promptLibrary": "提示詞資料庫",
   "name": "名稱",

src/components/Chat/ChatContent/Message/MessageContent.tsx

@@ -86,6 +86,7 @@ const ContentView = React.memo(
     const lastMessageIndex = useStore((state) =>
       state.chats ? state.chats[state.currentChatIndex].messages.length - 1 : 0
     );
+    const inlineLatex = useStore((state) => state.inlineLatex);
 
     const handleDelete = () => {
       const updatedChats: ChatInterface[] = JSON.parse(
@@ -139,7 +140,7 @@ const ContentView = React.memo(
           <ReactMarkdown
             remarkPlugins={[
               remarkGfm,
-              [remarkMath, { singleDollarTextMath: false }],
+              [remarkMath, { singleDollarTextMath: inlineLatex }],
             ]}
             rehypePlugins={[
               rehypeKatex,

src/components/SettingsMenu/InlineLatexToggle.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useStore from '@store/store';
+import Toggle from '@components/Toggle';
+
+const InlineLatexToggle = () => {
+  const { t } = useTranslation();
+
+  const setInlineLatex = useStore((state) => state.setInlineLatex);
+
+  const [isChecked, setIsChecked] = useState<boolean>(
+    useStore.getState().inlineLatex
+  );
+
+  useEffect(() => {
+    setInlineLatex(isChecked);
+  }, [isChecked]);
+
+  return (
+    <Toggle
+      label={t('inlineLatex') as string}
+      isChecked={isChecked}
+      setIsChecked={setIsChecked}
+    />
+  );
+};
+
+export default InlineLatexToggle;

src/components/SettingsMenu/SettingsMenu.tsx

@@ -9,11 +9,12 @@ import ThemeSwitcher from '@components/Menu/MenuOptions/ThemeSwitcher';
 import LanguageSelector from '@components/LanguageSelector';
 import AutoTitleToggle from './AutoTitleToggle';
 import AdvancedModeToggle from './AdvencedModeToggle';
+import InlineLatexToggle from './InlineLatexToggle';
+
 import PromptLibraryMenu from '@components/PromptLibraryMenu';
 import ChatConfigMenu from '@components/ChatConfigMenu';
 import EnterToSubmitToggle from './EnterToSubmitToggle';
 
-
 const SettingsMenu = () => {
   const { t } = useTranslation();
 
@@ -45,6 +46,7 @@ const SettingsMenu = () => {
             <div className='flex flex-col gap-3'>
               <AutoTitleToggle />
               <EnterToSubmitToggle />
+              <InlineLatexToggle />
               <AdvancedModeToggle />
             </div>
             <PromptLibraryMenu />

src/store/config-slice.ts

@@ -13,6 +13,7 @@ export interface ConfigSlice {
   defaultSystemMessage: string;
   hideSideMenu: boolean;
   enterToSubmit: boolean;
+  inlineLatex: boolean;
   setOpenConfig: (openConfig: boolean) => void;
   setTheme: (theme: Theme) => void;
   setAutoTitle: (autoTitle: boolean) => void;
@@ -22,6 +23,7 @@ export interface ConfigSlice {
   setHideMenuOptions: (hideMenuOptions: boolean) => void;
   setHideSideMenu: (hideSideMenu: boolean) => void;
   setEnterToSubmit: (enterToSubmit: boolean) => void;
+  setInlineLatex: (inlineLatex: boolean) => void;
 }
 
 export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
@@ -34,6 +36,7 @@ export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
   advancedMode: true,
   defaultChatConfig: _defaultChatConfig,
   defaultSystemMessage: _defaultSystemMessage,
+  inlineLatex: false,
   setOpenConfig: (openConfig: boolean) => {
     set((prev: ConfigSlice) => ({
       ...prev,
@@ -88,4 +91,10 @@ export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
       enterToSubmit: enterToSubmit,
     }));
   },
+  setInlineLatex: (inlineLatex: boolean) => {
+    set((prev: ConfigSlice) => ({
+      ...prev,
+      inlineLatex: inlineLatex,
+    }));
+  },
 });

src/store/store.ts

@@ -55,6 +55,7 @@ export const createPartializedState = (state: StoreState) => ({
   hideSideMenu: state.hideSideMenu,
   folders: state.folders,
   enterToSubmit: state.enterToSubmit,
+  inlineLatex: state.inlineLatex,
 });
 
 const useStore = create<StoreState>()(