Add Persian (fa) locale with RTL support

README.md

@@ -223,6 +223,8 @@ For more information: [chatboxai.app](https://chatboxai.app/)
     -   Deutsch (German)
     -   Русский (Russian)
     -   Español (Spanish)
+    -   العربية (Arabic)
+    -   فارسی (Persian)
 
 ### ✨ More Features
 -   **And More...**  
@@ -250,7 +252,7 @@ We welcome contributions from the community! Here's how you can help make Chatbo
 
 ### 🌍 Translations
 Help make Chatbox accessible to more people by contributing translations:
-- Translation files are located in the `src/locales` directory
+- Translation files are located in the `src/renderer/i18n/locales` directory
 - Follow the existing translation format
 - Submit a PR with your translation improvements
 

doc/README-CN.md

@@ -170,6 +170,7 @@
     -   Français (French)
     -   Deutsch (German)
     -   Русский (Russian)
+    -   فارسی (Persian)
 
 -   **更多...**  
     :sparkles: 不断增强体验，加入新功能！

i18next-parser.config.mjs

@@ -1,7 +1,7 @@
 export default {
   input: ['src/renderer/**/*.{js,jsx,ts,tsx}'],
   output: 'src/renderer/i18n/locales/$LOCALE/$NAMESPACE.json',
-  locales: ['en', 'ar', 'de', 'es', 'fr', 'it-IT', 'ja', 'ko', 'nb-NO', 'pt-PT', 'ru', 'sv', 'zh-Hans', 'zh-Hant'],
+  locales: ['en', 'ar', 'de', 'es', 'fa', 'fr', 'it-IT', 'ja', 'ko', 'nb-NO', 'pt-PT', 'ru', 'sv', 'zh-Hans', 'zh-Hant'],
   createOldCatalogs: false,
   keepRemoved: false,
   pluralSeparator: false,

script/translate.mjs

@@ -84,7 +84,7 @@ const instruction = process.argv[2] || ''
 
 try {
   await pMap(
-    ['en', 'ar', 'de', 'es', 'fr', 'it-IT', 'ja', 'ko', 'nb-NO', 'pt-PT', 'ru', 'sv', 'zh-Hans', 'zh-Hant'],
+    ['en', 'ar', 'de', 'es', 'fa', 'fr', 'it-IT', 'ja', 'ko', 'nb-NO', 'pt-PT', 'ru', 'sv', 'zh-Hans', 'zh-Hant'],
     async (locale) => {
       try {
         await translateFile(locale, instruction)

src/renderer/Sidebar.tsx

@@ -31,6 +31,7 @@ import platform from './platform'
 import { featureFlags } from './utils/feature-flags'
 import icon from './static/icon.png'
 import { settingsStore, useLanguage } from './stores/settingsStore'
+import { isRtlLanguage } from './i18n/rtl'
 import { taskSessionStore } from './stores/taskSessionStore'
 import { useUIStore } from './stores/uiStore'
 import { installUpdate, useUpdateStore } from './stores/updateStore'
@@ -104,7 +105,7 @@ export default function Sidebar() {
     if (!isResizing) return
 
     const handleMouseMove = (e: MouseEvent) => {
-      const isRTL = language === 'ar'
+      const isRTL = isRtlLanguage(language)
       const deltaX = isRTL ? resizeStartX.current - e.clientX : e.clientX - resizeStartX.current
       const newWidth = Math.max(200, Math.min(500, resizeStartWidth.current + deltaX))
       setSidebarWidth(newWidth)
@@ -125,7 +126,7 @@ export default function Sidebar() {
 
   return (
     <SwipeableDrawer
-      anchor={language === 'ar' ? 'right' : 'left'}
+      anchor={isRtlLanguage(language) ? 'right' : 'left'}
       variant={isSmallScreen ? 'temporary' : 'persistent'}
       open={showSidebar}
       onClose={() => setShowSidebar(false)}
@@ -143,9 +144,9 @@ export default function Sidebar() {
           maxWidth: '75vw',
         },
       }}
-      SlideProps={language === 'ar' ? { direction: 'left' } : undefined}
+      SlideProps={isRtlLanguage(language) ? { direction: 'left' } : undefined}
       PaperProps={
-        language === 'ar' ? { sx: { direction: 'rtl', overflowY: 'initial' } } : { sx: { overflowY: 'initial' } }
+        isRtlLanguage(language) ? { sx: { direction: 'rtl', overflowY: 'initial' } } : { sx: { overflowY: 'initial' } }
       }
       disableSwipeToOpen={CHATBOX_BUILD_PLATFORM !== 'ios'} // 只在iOS设备上启用SwipeToOpen
     >
@@ -350,7 +351,7 @@ export default function Sidebar() {
             onMouseDown={handleResizeStart}
             className={clsx(
               `sidebar-resizer absolute top-0 bottom-0 w-1 cursor-col-resize z-[1] bg-chatbox-border-primary opacity-0 hover:opacity-70 transition-opacity duration-200`,
-              language === 'ar' ? '-left-1' : '-right-1'
+              isRtlLanguage(language) ? '-left-1' : '-right-1'
             )}
           />
         )}

src/renderer/components/StyledMenu.tsx

@@ -2,12 +2,13 @@ import { Menu, type MenuProps } from '@mui/material'
 import 'katex/dist/katex.min.css'
 import { alpha, styled } from '@mui/material/styles'
 import { useLanguage } from '@/stores/settingsStore'
+import { isRtlLanguage } from '@/i18n/rtl'
 
 const StyledMenu = styled((props: MenuProps) => {
   const language = useLanguage()
   return (
     <Menu
-      dir={language === 'ar' ? 'rtl' : 'ltr'}
+      dir={isRtlLanguage(language) ? 'rtl' : 'ltr'}
       elevation={0}
       anchorOrigin={{
         vertical: 'bottom',

src/renderer/components/session/ThreadHistoryDrawer.tsx

@@ -12,6 +12,7 @@ import { scrollToIndex } from '@/stores/scrollActions'
 import { removeCurrentThread, removeThread, switchThread as switchThreadAction } from '@/stores/sessionActions'
 import { getAllMessageList, getCurrentThreadHistoryHash } from '@/stores/sessionHelpers'
 import { useLanguage } from '@/stores/settingsStore'
+import { isRtlLanguage } from '@/i18n/rtl'
 import { CHATBOX_BUILD_PLATFORM } from '@/variables'
 import ActionMenu from '../ActionMenu'
 import { ScalableIcon } from '../common/ScalableIcon'
@@ -54,7 +55,7 @@ export default function ThreadHistoryDrawer({ session }: { session: Session }) {
 
   return (
     <SwipeableDrawer
-      anchor={language === 'ar' ? 'left' : 'right'}
+      anchor={isRtlLanguage(language) ? 'left' : 'right'}
       variant="temporary"
       open={!!showDrawer}
       onClose={() => setShowDrawer(false)}
@@ -67,9 +68,9 @@ export default function ThreadHistoryDrawer({ session }: { session: Session }) {
         paper:
           'bg-none box-border max-w-75vw min-w-[240px] flex flex-col gap-0 pt-[var(--mobile-safe-area-inset-top)] pb-[var(--mobile-safe-area-inset-bottom)]',
       }}
-      SlideProps={language === 'ar' ? { direction: 'right' } : undefined}
+      SlideProps={isRtlLanguage(language) ? { direction: 'right' } : undefined}
       PaperProps={
-        language === 'ar' ? { sx: { direction: 'rtl', overflowY: 'initial' } } : { sx: { overflowY: 'initial' } }
+        isRtlLanguage(language) ? { sx: { direction: 'rtl', overflowY: 'initial' } } : { sx: { overflowY: 'initial' } }
       }
       disableSwipeToOpen={CHATBOX_BUILD_PLATFORM !== 'ios'} // 只在iOS设备上启用SwipeToOpen
       disableEnforceFocus={true} // 关闭 focus trap，避免在侧边栏打开时弹出的 modal 中 input 无法点击

src/renderer/hooks/useAppTheme.ts

@@ -3,6 +3,7 @@ import { useLayoutEffect, useMemo } from 'react'
 import { settingsStore, useLanguage, useSettingsStore } from '@/stores/settingsStore'
 import { uiStore, useUIStore } from '@/stores/uiStore'
 import { type Language, Theme } from '../../shared/types'
+import { isRtlLanguage } from '../i18n/rtl'
 import platform from '../platform'
 import DesktopPlatform from '../platform/desktop_platform'
 
@@ -80,14 +81,14 @@ export function getThemeDesign(realTheme: 'light' | 'dark', language: Language):
     typography: {
       // In Chinese and Japanese the characters are usually larger,
       // so a smaller fontsize may be appropriate.
-      ...(language === 'ar'
+      ...(isRtlLanguage(language)
         ? {
             fontFamily: 'Cairo, Arial, sans-serif',
           }
         : {}),
       fontSize: 14,
     },
-    direction: language === 'ar' ? 'rtl' : 'ltr',
+    direction: isRtlLanguage(language) ? 'rtl' : 'ltr',
     breakpoints: {
       values: {
         xs: 0,

src/renderer/i18n/index.ts

@@ -7,6 +7,7 @@ import changelogZhHans from './changelogs/changelog_zh_Hans'
 import changelogZhHant from './changelogs/changelog_zh_Hant'
 import ar from './locales/ar/translation.json'
 import de from './locales/de/translation.json'
+import fa from './locales/fa/translation.json'
 import en from './locales/en/translation.json'
 import es from './locales/es/translation.json'
 import fr from './locales/fr/translation.json'
@@ -55,6 +56,9 @@ i18n.use(initReactI18next).init({
     ar: {
       translation: ar,
     },
+    fa: {
+      translation: fa,
+    },
     'it-IT': {
       translation: itIT,
     },

src/renderer/i18n/locales.ts

@@ -12,6 +12,7 @@ export const languageNameMap: Record<Language, string> = {
   'pt-PT': 'Português', // Portuguese
   es: 'Español', // Spanish
   ar: 'العربية', // Arabic
+  fa: 'فارسی', // Persian
   'it-IT': 'Italiano', // Italian
   sv: 'Svenska', // Swedish 瑞典语
   'nb-NO': 'Norsk', // Norwegian 挪威语