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>

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}

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")}
               />

frontend/src/locales/ar/common.js

@@ -690,6 +690,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/da/common.js

@@ -729,6 +729,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/de/common.js

@@ -727,6 +727,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

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: {

frontend/src/locales/es/common.js

@@ -689,6 +689,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/fa/common.js

@@ -682,6 +682,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/fr/common.js

@@ -690,6 +690,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/he/common.js

@@ -675,6 +675,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/it/common.js

@@ -688,6 +688,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/ja/common.js

@@ -721,6 +721,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/ko/common.js

@@ -675,6 +675,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/nl/common.js

@@ -685,6 +685,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/pt_BR/common.js

@@ -694,6 +694,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/ru/common.js

@@ -730,6 +730,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/tr/common.js

@@ -685,6 +685,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/vn/common.js

@@ -684,6 +684,10 @@ const TRANSLATIONS = {
         title: null,
         description: null,
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/zh/common.js

@@ -446,6 +446,10 @@ const TRANSLATIONS = {
         title: "自动语音回复",
         description: "自动朗读 AI 的回复内容",
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

frontend/src/locales/zh_TW/common.js

@@ -687,6 +687,10 @@ const TRANSLATIONS = {
         title: "自動語音回應",
         description: "自動朗讀 AI 的回應內容",
       },
+      spellcheck: {
+        title: null,
+        description: null,
+      },
     },
     items: {
       theme: {

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
+   * @param {AvailableSettings} key - The key of the setting to fetch
-   * @returns {any} - a default value if the setting is not found or the current value
+   * @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}
    */

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>

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>
+  );
+}