feat: add options config spell check for chat input (#3131)

web/helpers/atoms/Setting.atom.ts

@@ -10,6 +10,7 @@ export const janSettingScreenAtom = atom<SettingScreen[]>([])
 
 export const THEME = 'themeAppearance'
 export const REDUCE_TRANSPARENT = 'reduceTransparent'
+export const SPELL_CHECKING = 'spellChecking'
 export const themesOptionsAtom = atom<{ name: string; value: string }[]>([])
 export const janThemesPathAtom = atom<string | undefined>(undefined)
 export const selectedThemeIdAtom = atomWithStorage<string>(THEME, '')
@@ -18,3 +19,4 @@ export const reduceTransparentAtom = atomWithStorage<boolean>(
   REDUCE_TRANSPARENT,
   false
 )
+export const spellCheckAtom = atomWithStorage<boolean>(SPELL_CHECKING, true)

web/screens/Settings/Appearance/index.tsx

@@ -3,13 +3,14 @@ import { useCallback } from 'react'
 import { useTheme } from 'next-themes'
 
 import { fs, joinPath } from '@janhq/core'
-import { Button, Select } from '@janhq/joi'
+import { Button, Select, Switch } from '@janhq/joi'
 import { useAtom, useAtomValue } from 'jotai'
 
 import {
   janThemesPathAtom,
   reduceTransparentAtom,
   selectedThemeIdAtom,
+  spellCheckAtom,
   themeDataAtom,
   themesOptionsAtom,
 } from '@/helpers/atoms/Setting.atom'
@@ -23,6 +24,7 @@ export default function AppearanceOptions() {
   const [reduceTransparent, setReduceTransparent] = useAtom(
     reduceTransparentAtom
   )
+  const [spellCheck, setSpellCheck] = useAtom(spellCheckAtom)
 
   const handleClickTheme = useCallback(
     async (e: string) => {
@@ -90,12 +92,26 @@ export default function AppearanceOptions() {
               Transparent
             </Button>
           </div>
-          {/* <Switch
-            checked={reduceTransparent}
-            onChange={(e) => setReduceTransparent(e.target.checked)}
-          /> */}
         </div>
       )}
+      <div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
+        <div className="w-full space-y-1 lg:w-3/4">
+          <div className="flex gap-x-2">
+            <h6 className="font-semibold capitalize">Spell checking</h6>
+          </div>
+          <p className=" font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
+            Disable if you prefer to type without spell checking interruptions
+            or if you are using non-standard language/terminology that the spell
+            checker may not recognize.
+          </p>
+        </div>
+        <div className="flex-shrink-0">
+          <Switch
+            checked={spellCheck}
+            onChange={(e) => setSpellCheck(e.target.checked)}
+          />
+        </div>
+      </div>
     </div>
   )
 }

web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx

@@ -38,6 +38,7 @@ import ImageUploadPreview from '../ImageUploadPreview'
 import { showRightPanelAtom } from '@/helpers/atoms/App.atom'
 import { experimentalFeatureEnabledAtom } from '@/helpers/atoms/AppConfig.atom'
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
+import { spellCheckAtom } from '@/helpers/atoms/Setting.atom'
 import {
   activeThreadAtom,
   getActiveThreadIdAtom,
@@ -52,6 +53,7 @@ const ChatInput = () => {
   const { stateModel } = useActiveModel()
   const messages = useAtomValue(getCurrentChatMessagesAtom)
   const [activeSetting, setActiveSetting] = useState(false)
+  const spellCheck = useAtomValue(spellCheckAtom)
 
   const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
   const { sendChatMessage } = useSendChatMessage()
@@ -162,6 +164,7 @@ const ChatInput = () => {
             experimentalFeature && 'pl-10',
             activeSetting && 'pb-14 pr-16'
           )}
+          spellCheck={spellCheck}
           data-testid="txt-input-chat"
           style={{ height: activeSetting ? '100px' : '40px' }}
           ref={textareaRef}

web/screens/Thread/ThreadCenterPanel/EditChatInput/index.tsx

@@ -26,6 +26,7 @@ import {
   getCurrentChatMessagesAtom,
   setConvoMessagesAtom,
 } from '@/helpers/atoms/ChatMessage.atom'
+import { spellCheckAtom } from '@/helpers/atoms/Setting.atom'
 import {
   activeThreadAtom,
   getActiveThreadIdAtom,
@@ -45,7 +46,7 @@ const EditChatInput: React.FC<Props> = ({ message }) => {
   const { sendChatMessage } = useSendChatMessage()
   const setMessages = useSetAtom(setConvoMessagesAtom)
   const activeThreadId = useAtomValue(getActiveThreadIdAtom)
-
+  const spellCheck = useAtomValue(spellCheckAtom)
   const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const setEditMessage = useSetAtom(editMessageAtom)
@@ -127,6 +128,7 @@ const EditChatInput: React.FC<Props> = ({ message }) => {
           className={twMerge('max-h-[400px] resize-none pr-20')}
           style={{ height: '40px' }}
           ref={textareaRef}
+          spellCheck={spellCheck}
           onKeyDown={onKeyDown}
           placeholder="Enter your message..."
           disabled={stateModel.loading || !activeThread}