From e2eca2ccb3f51c3b1693e1c77c9259152c17e490 Mon Sep 17 00:00:00 2001
From: Colin Perry <55003831+17ColinMiPerry@users.noreply.github.com>
Date: Fri, 9 May 2025 09:51:06 -0700
Subject: [PATCH] Add Disable Spellcheck Option (#3795)

* Implemented spellcheck toggle in Settings

* ran yarn lint

* reduce read complexity for appearance spellcheck
lint

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
---
 .../Actions/EditMessage/index.jsx             |  2 +
 .../ChatContainer/PromptInput/index.jsx       |  2 +
 frontend/src/locales/ar/common.js             |  4 ++
 frontend/src/locales/da/common.js             |  4 ++
 frontend/src/locales/de/common.js             |  4 ++
 frontend/src/locales/en/common.js             |  4 ++
 frontend/src/locales/es/common.js             |  4 ++
 frontend/src/locales/fa/common.js             |  4 ++
 frontend/src/locales/fr/common.js             |  4 ++
 frontend/src/locales/he/common.js             |  4 ++
 frontend/src/locales/it/common.js             |  4 ++
 frontend/src/locales/ja/common.js             |  4 ++
 frontend/src/locales/ko/common.js             |  4 ++
 frontend/src/locales/nl/common.js             |  4 ++
 frontend/src/locales/pt_BR/common.js          |  4 ++
 frontend/src/locales/ru/common.js             |  4 ++
 frontend/src/locales/tr/common.js             |  4 ++
 frontend/src/locales/vn/common.js             |  4 ++
 frontend/src/locales/zh/common.js             |  4 ++
 frontend/src/locales/zh_TW/common.js          |  4 ++
 frontend/src/models/appearance.js             | 15 ++++--
 .../GeneralSettings/Settings/Chat/index.jsx   |  2 +
 .../Settings/components/SpellCheck/index.jsx  | 50 +++++++++++++++++++
 23 files changed, 140 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
index 3c1fd16a..6967f120 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
@@ -1,5 +1,6 @@
 import { Pencil } from "@phosphor-icons/react";
 import { useState, useEffect, useRef } from "react";
+import Appearance from "@/models/appearance";
 
 const EDIT_EVENT = "toggle-message-edit";
 
@@ -98,6 +99,7 @@ export function EditMessageForm({
       <textarea
         ref={formRef}
         name="editedMessage"
+        spellCheck={Appearance.get("enableSpellCheck")}
         className="text-white w-full rounded bg-theme-bg-secondary border border-white/20 active:outline-none focus:outline-none focus:ring-0 pr-16 pl-1.5 pt-1.5 resize-y"
         defaultValue={message}
         onChange={adjustTextArea}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index d490a794..795ad133 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -18,6 +18,7 @@ import AttachItem from "./AttachItem";
 import { PASTE_ATTACHMENT_EVENT } from "../DnDWrapper";
 import useTextSize from "@/hooks/useTextSize";
 import { useTranslation } from "react-i18next";
+import Appearance from "@/models/appearance";
 
 export const PROMPT_INPUT_EVENT = "set_prompt_input";
 const MAX_EDIT_STACK_SIZE = 100;
@@ -268,6 +269,7 @@ export default function PromptInput({
                   adjustTextArea(e);
                 }}
                 value={promptInput}
+                spellCheck={Appearance.get("enableSpellCheck")}
                 className={`border-none cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 pt-[12px] w-full leading-5 md:text-md text-white bg-transparent placeholder:text-white/60 light:placeholder:text-theme-text-primary resize-none active:outline-none focus:outline-none flex-grow ${textSizeClass}`}
                 placeholder={t("chat_window.send_message")}
               />
diff --git a/frontend/src/locales/ar/common.js b/frontend/src/locales/ar/common.js
index dec22f16..1d9dcd09 100644
--- a/frontend/src/locales/ar/common.js
+++ b/frontend/src/locales/ar/common.js
@@ -690,6 +690,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/da/common.js b/frontend/src/locales/da/common.js
index 23c9316e..ecb556e7 100644
--- a/frontend/src/locales/da/common.js
+++ b/frontend/src/locales/da/common.js
@@ -729,6 +729,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/de/common.js b/frontend/src/locales/de/common.js
index 40ab0bd9..032957b8 100644
--- a/frontend/src/locales/de/common.js
+++ b/frontend/src/locales/de/common.js
@@ -727,6 +727,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/en/common.js b/frontend/src/locales/en/common.js
index 5a6d31b9..2be459e2 100644
--- a/frontend/src/locales/en/common.js
+++ b/frontend/src/locales/en/common.js
@@ -483,6 +483,10 @@ const TRANSLATIONS = {
         title: "Auto-Speak Responses",
         description: "Automatically speak responses from the AI",
       },
+      spellcheck: {
+        title: "Enable Spellcheck",
+        description: "Enable or disable spellcheck in the chat input field",
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/es/common.js b/frontend/src/locales/es/common.js
index f73c5817..019454c1 100644
--- a/frontend/src/locales/es/common.js
+++ b/frontend/src/locales/es/common.js
@@ -689,6 +689,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/fa/common.js b/frontend/src/locales/fa/common.js
index effb8818..98b88e58 100644
--- a/frontend/src/locales/fa/common.js
+++ b/frontend/src/locales/fa/common.js
@@ -682,6 +682,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/fr/common.js b/frontend/src/locales/fr/common.js
index d3c51c32..76b89d9c 100644
--- a/frontend/src/locales/fr/common.js
+++ b/frontend/src/locales/fr/common.js
@@ -690,6 +690,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/he/common.js b/frontend/src/locales/he/common.js
index c412330a..7e8abd7a 100644
--- a/frontend/src/locales/he/common.js
+++ b/frontend/src/locales/he/common.js
@@ -675,6 +675,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/it/common.js b/frontend/src/locales/it/common.js
index cb8ecb29..f2030a67 100644
--- a/frontend/src/locales/it/common.js
+++ b/frontend/src/locales/it/common.js
@@ -688,6 +688,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/ja/common.js b/frontend/src/locales/ja/common.js
index 2f6bcc71..84a4bf8d 100644
--- a/frontend/src/locales/ja/common.js
+++ b/frontend/src/locales/ja/common.js
@@ -721,6 +721,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/ko/common.js b/frontend/src/locales/ko/common.js
index 830303df..c83e0ad2 100644
--- a/frontend/src/locales/ko/common.js
+++ b/frontend/src/locales/ko/common.js
@@ -675,6 +675,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/nl/common.js b/frontend/src/locales/nl/common.js
index 7321e743..1dbb3bc7 100644
--- a/frontend/src/locales/nl/common.js
+++ b/frontend/src/locales/nl/common.js
@@ -685,6 +685,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/pt_BR/common.js b/frontend/src/locales/pt_BR/common.js
index 8b7a4503..9262deaf 100644
--- a/frontend/src/locales/pt_BR/common.js
+++ b/frontend/src/locales/pt_BR/common.js
@@ -694,6 +694,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/ru/common.js b/frontend/src/locales/ru/common.js
index b85502b8..8cc1c94b 100644
--- a/frontend/src/locales/ru/common.js
+++ b/frontend/src/locales/ru/common.js
@@ -730,6 +730,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/tr/common.js b/frontend/src/locales/tr/common.js
index 755d1ee4..78ad528e 100644
--- a/frontend/src/locales/tr/common.js
+++ b/frontend/src/locales/tr/common.js
@@ -685,6 +685,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/vn/common.js b/frontend/src/locales/vn/common.js
index cfe5497e..f22e1895 100644
--- a/frontend/src/locales/vn/common.js
+++ b/frontend/src/locales/vn/common.js
@@ -684,6 +684,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/zh/common.js b/frontend/src/locales/zh/common.js
index abdfb076..b83112db 100644
--- a/frontend/src/locales/zh/common.js
+++ b/frontend/src/locales/zh/common.js
@@ -446,6 +446,10 @@ const TRANSLATIONS = {
         title: "自动语音回复",
         description: "自动朗读 AI 的回复内容",
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/locales/zh_TW/common.js b/frontend/src/locales/zh_TW/common.js
index 3470d377..7a6cd0c4 100644
--- a/frontend/src/locales/zh_TW/common.js
+++ b/frontend/src/locales/zh_TW/common.js
@@ -687,6 +687,10 @@ const TRANSLATIONS = {
         title: "自動語音回應",
         description: "自動朗讀 AI 的回應內容",
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {
diff --git a/frontend/src/models/appearance.js b/frontend/src/models/appearance.js
index a066bdfe..e1e45b45 100644
--- a/frontend/src/models/appearance.js
+++ b/frontend/src/models/appearance.js
@@ -1,10 +1,19 @@
 import { APPEARANCE_SETTINGS } from "@/utils/constants";
 
+/**
+ * @typedef { 'showScrollbar' |
+ * 'autoSubmitSttInput' |
+ * 'autoPlayAssistantTtsResponse' |
+ * 'enableSpellCheck'
+ * } AvailableSettings - The supported settings for the appearance model.
+ */
+
 const Appearance = {
   defaultSettings: {
     showScrollbar: false,
     autoSubmitSttInput: true,
     autoPlayAssistantTtsResponse: false,
+    enableSpellCheck: true,
   },
 
   /**
@@ -22,8 +31,8 @@ const Appearance = {
 
   /**
    * Fetches a specific setting from the user's settings
-   * @param {string} key - The key of the setting to fetch
-   * @returns {any} - a default value if the setting is not found or the current value
+   * @param {AvailableSettings} key - The key of the setting to fetch
+   * @returns {boolean} - a default value if the setting is not found or the current value
    */
   get: (key) => {
     const settings = Appearance.getSettings();
@@ -34,7 +43,7 @@ const Appearance = {
 
   /**
    * Updates a specific setting from the user's settings
-   * @param {string} key - The key of the setting to update
+   * @param {AvailableSettings} key - The key of the setting to update
    * @param {any} value - The value to update the setting to
    * @returns {object}
    */
diff --git a/frontend/src/pages/GeneralSettings/Settings/Chat/index.jsx b/frontend/src/pages/GeneralSettings/Settings/Chat/index.jsx
index 1e3a0562..b82b864f 100644
--- a/frontend/src/pages/GeneralSettings/Settings/Chat/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Settings/Chat/index.jsx
@@ -3,6 +3,7 @@ import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import AutoSubmit from "../components/AutoSubmit";
 import AutoSpeak from "../components/AutoSpeak";
+import SpellCheck from "../components/SpellCheck";
 
 export default function ChatSettings() {
   const { t } = useTranslation();
@@ -27,6 +28,7 @@ export default function ChatSettings() {
           </div>
           <AutoSubmit />
           <AutoSpeak />
+          <SpellCheck />
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx b/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
new file mode 100644
index 00000000..933c4800
--- /dev/null
+++ b/frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx
@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from "react";
+import Appearance from "@/models/appearance";
+import { useTranslation } from "react-i18next";
+
+export default function SpellCheck() {
+  const { t } = useTranslation();
+  const [saving, setSaving] = useState(false);
+  const [enableSpellCheck, setEnableSpellCheck] = useState(
+    Appearance.get("enableSpellCheck")
+  );
+
+  const handleChange = async (e) => {
+    const newValue = e.target.checked;
+    setEnableSpellCheck(newValue);
+    setSaving(true);
+    try {
+      Appearance.set("enableSpellCheck", newValue);
+    } catch (error) {
+      console.error("Failed to update appearance settings:", error);
+      setEnableSpellCheck(!newValue);
+    }
+    setSaving(false);
+  };
+
+  return (
+    <div className="flex flex-col gap-y-0.5 my-4">
+      <p className="text-sm leading-6 font-semibold text-white">
+        {t("customization.chat.spellcheck.title")}
+      </p>
+      <p className="text-xs text-white/60">
+        {t("customization.chat.spellcheck.description")}
+      </p>
+      <div className="flex items-center gap-x-4">
+        <label className="relative inline-flex cursor-pointer items-center">
+          <input
+            id="spellcheck"
+            type="checkbox"
+            name="spellcheck"
+            value="yes"
+            checked={enableSpellCheck}
+            onChange={handleChange}
+            disabled={saving}
+            className="peer sr-only"
+          />
+          <div className="pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
+        </label>
+      </div>
+    </div>
+  );
+}