michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Disable Spellcheck Option (#3795)

Browse Source 
* Implemented spellcheck toggle in Settings

* ran yarn lint

* reduce read complexity for appearance spellcheck
lint

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
This commit is contained in:
Colin Perry 2025-05-09 09:51:06 -07:00 committed by GitHub
parent cfb47a12c2
commit e2eca2ccb3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 140 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx
View File

@ -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}

2
frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
View File

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

4
frontend/src/locales/ar/common.js
View File

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

4
frontend/src/locales/da/common.js
View File

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

4
frontend/src/locales/de/common.js
View File

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

4
frontend/src/locales/en/common.js
View File

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

4
frontend/src/locales/es/common.js
View File

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

4
frontend/src/locales/fa/common.js
View File

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

4
frontend/src/locales/fr/common.js
View File

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

4
frontend/src/locales/he/common.js
View File

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

4
frontend/src/locales/it/common.js
View File

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

4
frontend/src/locales/ja/common.js
View File

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

4
frontend/src/locales/ko/common.js
View File

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

4
frontend/src/locales/nl/common.js
View File

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

4
frontend/src/locales/pt_BR/common.js
View File

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

4
frontend/src/locales/ru/common.js
View File

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

4
frontend/src/locales/tr/common.js
View File

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

4
frontend/src/locales/vn/common.js
View File

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

4
frontend/src/locales/zh/common.js
View File

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

4
frontend/src/locales/zh_TW/common.js
View File

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

15
frontend/src/models/appearance.js
View File

@ -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}
*/

2
frontend/src/pages/GeneralSettings/Settings/Chat/index.jsx
View File

@ -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>

50
frontend/src/pages/GeneralSettings/Settings/components/SpellCheck/index.jsx Normal file
View File

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