Mintplex-Labs · Saidoua · Mar 7, 2025 · Mar 7, 2025 · Mar 9, 2025 · Mar 9, 2025
diff --git a/frontend/public/fonts/Amiri-Bold.ttf b/frontend/public/fonts/Amiri-Bold.ttf
diff --git a/frontend/public/fonts/Amiri-BoldItalic.ttf b/frontend/public/fonts/Amiri-BoldItalic.ttf
diff --git a/frontend/public/fonts/Amiri-Italic.ttf b/frontend/public/fonts/Amiri-Italic.ttf
diff --git a/frontend/public/fonts/Amiri-Regular.ttf b/frontend/public/fonts/Amiri-Regular.ttf
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,6 +1,6 @@
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
-import { I18nextProvider } from "react-i18next";
+import { I18nextProvider, useTranslation } from "react-i18next";
 import { ContextWrapper } from "@/AuthContext";
 import PrivateRoute, {
   AdminRoute,
@@ -80,6 +80,17 @@ const CommunityHubImportItem = lazy(
 );
 
 export default function App() {
+  const { i18n } = useTranslation();
+  useEffect(() => {
+    if (i18n.resolvedLanguage) {
+      // Set the <html lang> attribute.
+      document.documentElement.lang = i18n.resolvedLanguage;
+
+      // Set the <html dir> attribute.
+      document.documentElement.dir = i18n.dir(i18n.resolvedLanguage);
+    }
+  }, [i18n, i18n.resolvedLanguage]);
+
   return (
     <ThemeProvider>
       <Suspense fallback={<FullScreenLoader />}>

diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx
@@ -16,6 +16,7 @@ import SettingsButton from "../SettingsButton";
 import { isMobile } from "react-device-detect";
 import { Tooltip } from "react-tooltip";
 import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 export const MAX_ICONS = 3;
 export const ICON_COMPONENTS = {
@@ -32,6 +33,7 @@ export const ICON_COMPONENTS = {
 
 export default function Footer() {
   const [footerData, setFooterData] = useState(false);
+  const { t } = useTranslation();
 
   useEffect(() => {
     async function fetchFooterData() {
@@ -57,7 +59,7 @@ export default function Footer() {
               className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
               aria-label="Find us on GitHub"
               data-tooltip-id="footer-item"
-              data-tooltip-content="View source code on GitHub"
+              data-tooltip-content={t("settings.GitHubCode")}
             >
               <GithubLogo
                 weight="fill"
@@ -74,7 +76,7 @@ export default function Footer() {
               className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
               aria-label="Docs"
               data-tooltip-id="footer-item"
-              data-tooltip-content="Open AnythingLLM help docs"
+              data-tooltip-content={t("settings.helpDocs")}
             >
               <BookOpen
                 weight="fill"
@@ -91,7 +93,7 @@ export default function Footer() {
               className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
               aria-label="Join our Discord server"
               data-tooltip-id="footer-item"
-              data-tooltip-content="Join the AnythingLLM Discord"
+              data-tooltip-content={t("settings.JoinDiscord")}
             >
               <DiscordLogo
                 weight="fill"

diff --git a/frontend/src/components/Modals/NewWorkspace.jsx b/frontend/src/components/Modals/NewWorkspace.jsx
@@ -74,7 +74,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
                 type="submit"
                 className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
               >
-                Save
+                {t("new-workspace.create")}
               </button>
             </div>
           </form>

diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
@@ -3,10 +3,12 @@ import paths from "@/utils/paths";
 import { ArrowUUpLeft, Wrench } from "@phosphor-icons/react";
 import { Link } from "react-router-dom";
 import { useMatch } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 export default function SettingsButton() {
   const isInSettings = !!useMatch("/settings/*");
   const { user } = useUser();
+  const { t } = useTranslation();
 
   if (user && user?.role === "default") return null;
 
@@ -18,7 +20,7 @@ export default function SettingsButton() {
           className="transition-all duration-300 p-2 rounded-full bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
           aria-label="Home"
           data-tooltip-id="footer-item"
-          data-tooltip-content="Back to workspaces"
+          data-tooltip-content={t("settings.ToWorkspaces")}
         >
           <ArrowUUpLeft
             className="h-5 w-5"
@@ -37,7 +39,7 @@ export default function SettingsButton() {
         // className="transition-all duration-300 p-2 rounded-full  bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
         aria-label="Settings"
         data-tooltip-id="footer-item"
-        data-tooltip-content="Open settings"
+        data-tooltip-content={t("settings.OpenSettings")}
       >
         <Wrench
           className="h-5 w-5"

diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
@@ -293,23 +293,23 @@ const SidebarOptions = ({ user = null, t }) => (
           roles={["admin"]}
         />
         <Option
-          btnText="Community Hub"
+          btnText={t("settings.CommunityHub")}
           icon={<Globe className="h-5 w-5 flex-shrink-0" />}
           childOptions={[
             {
-              btnText: "Explore Trending",
+              btnText: t("settings.Explore-Trending"),
               href: paths.communityHub.trending(),
               flex: true,
               roles: ["admin"],
             },
             {
-              btnText: "Your Account",
+              btnText: t("settings.Your-Account"),
               href: paths.communityHub.authentication(),
               flex: true,
               roles: ["admin"],
             },
             {
-              btnText: "Import Item",
+              btnText: t("settings.Import-Item"),
               href: paths.communityHub.importItem(),
               flex: true,
               roles: ["admin"],

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
@@ -6,12 +6,14 @@ import { useEffect, useState } from "react";
 import ThreadItem from "./ThreadItem";
 import { useParams } from "react-router-dom";
 export const THREAD_RENAME_EVENT = "renameThread";
+import { useTranslation } from "react-i18next";
 
 export default function ThreadContainer({ workspace }) {
   const { threadSlug = null } = useParams();
   const [threads, setThreads] = useState([]);
   const [loading, setLoading] = useState(true);
   const [ctrlPressed, setCtrlPressed] = useState(false);
+  const { t } = useTranslation();
 
   useEffect(() => {
     const chatHandler = (event) => {
@@ -112,7 +114,9 @@ export default function ThreadContainer({ workspace }) {
   if (loading) {
     return (
       <div className="flex flex-col bg-pulse w-full h-10 items-center justify-center">
-        <p className="text-xs text-white animate-pulse">loading threads....</p>
+        <p className="text-xs text-white animate-pulse">
+          {t("new-workspace.loadingThreads")}
+        </p>
       </div>
     );
   }
@@ -129,7 +133,7 @@ export default function ThreadContainer({ workspace }) {
         idx={0}
         activeIdx={activeThreadIdx}
         isActive={activeThreadIdx === 0}
-        thread={{ slug: null, name: "default" }}
+        thread={{ slug: null, name: t("new-workspace.default") }}
         hasNext={threads.length > 0}
       />
       {threads.map((thread, i) => (
@@ -158,6 +162,7 @@ export default function ThreadContainer({ workspace }) {
 
 function NewThreadButton({ workspace }) {
   const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
   const onClick = async () => {
     setLoading(true);
     const { thread, error } = await Workspace.threads.new(workspace.slug);
@@ -195,11 +200,11 @@ function NewThreadButton({ workspace }) {
 
         {loading ? (
           <p className="text-left text-white light:text-theme-text-primary text-sm">
-            Starting Thread...
+            {t("new-workspace.StartThread")}
           </p>
         ) : (
           <p className="text-left text-white light:text-theme-text-primary text-sm">
-            New Thread
+            {t("new-workspace.NewThread")}
           </p>
         )}
       </div>
@@ -208,6 +213,7 @@ function NewThreadButton({ workspace }) {
 }
 
 function DeleteAllThreadButton({ ctrlPressed, threads, onDelete }) {
+  const { t } = useTranslation();
   if (!ctrlPressed || threads.filter((t) => t.deleted).length === 0)
     return null;
   return (
@@ -225,7 +231,7 @@ function DeleteAllThreadButton({ ctrlPressed, threads, onDelete }) {
           />
         </div>
         <p className="text-white light:text-theme-text-secondary text-left text-sm group-hover:text-red-400">
-          Delete Selected
+          {t("new-workspace.DeleteSelected")}
         </p>
       </div>
     </button>

diff --git a/frontend/src/components/Sidebar/SidebarToggle/index.jsx b/frontend/src/components/Sidebar/SidebarToggle/index.jsx
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import { SidebarSimple } from "@phosphor-icons/react";
 import paths from "@/utils/paths";
 import { Tooltip } from "react-tooltip";
+import { useTranslation } from "react-i18next";
+
 const SIDEBAR_TOGGLE_STORAGE_KEY = "anythingllm_sidebar_toggle";
 
 /**
@@ -70,6 +72,7 @@ export function useSidebarToggle() {
 export function ToggleSidebarButton({ showSidebar, setShowSidebar }) {
   const isMac = navigator.userAgent.includes("Mac");
   const shortcut = isMac ? "⌘ + Shift + S" : "Ctrl + Shift + S";
+  const { t } = useTranslation();
 
   return (
     <>
@@ -80,13 +83,13 @@ export function ToggleSidebarButton({ showSidebar, setShowSidebar }) {
         data-tooltip-id="sidebar-toggle"
         data-tooltip-content={
           showSidebar
-            ? `Hide Sidebar (${shortcut})`
-            : `Show Sidebar (${shortcut})`
+            ? `${t("settings.HideSidebar")} ( ${shortcut})`
+            : `${t("settings.ShowSidebar")} ( ${shortcut})`
         }
         aria-label={
           showSidebar
-            ? `Hide Sidebar (${shortcut})`
-            : `Show Sidebar (${shortcut})`
+            ? `${t("settings.HideSidebar")} ( ${shortcut})`
+            : `${t("settings.ShowSidebar")} ( ${shortcut})`
         }
       >
         <SidebarSimple

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -73,6 +73,7 @@ const HistoricalMessage = ({
 
   return (
     <div
+      dir="auto"
       key={uuid}
       onAnimationEnd={onEndAnimation}
       className={`${

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -85,6 +85,7 @@ export default function PromptInput({
   function resetTextAreaHeight() {
     if (!textareaRef.current) return;
     textareaRef.current.style.height = "auto";
+    textareaRef.current.dir = document.dir;
   }
 
   function checkForSlash(e) {
@@ -170,6 +171,11 @@ export default function PromptInput({
     const element = event.target;
     element.style.height = "auto";
     element.style.height = `${element.scrollHeight}px`;
+    if (element.value == "") {
+      element.dir = document.dir;
+    } else {
+      element.dir = "auto";
+    }
   }
 
   function handlePasteEvent(e) {

diff --git a/frontend/src/hooks/useTheme.js b/frontend/src/hooks/useTheme.js
@@ -1,10 +1,6 @@
 import { REFETCH_LOGO_EVENT } from "@/LogoContext";
 import { useState, useEffect } from "react";
-
-const availableThemes = {
-  default: "Default",
-  light: "Light",
-};
+import { useTranslation } from "react-i18next";
 
 /**
  * Determines the current theme of the application
@@ -14,7 +10,11 @@ export function useTheme() {
   const [theme, _setTheme] = useState(() => {
     return localStorage.getItem("theme") || "default";
   });
-
+  const { t } = useTranslation();
+  const availableThemes = {
+    default: t("appearance.themePreference.default"),
+    light: t("appearance.themePreference.light"),
+  };
   useEffect(() => {
     if (localStorage.getItem("theme") !== null) return;
     if (!window.matchMedia) return;

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -136,6 +136,7 @@ body {
   padding: 0;
   margin: 0;
   font-family:
+    "Amiri",
     "plus-jakarta-sans",
     -apple-system,
     BlinkMacSystemFont,
@@ -164,7 +165,7 @@ a {
   border-color: #302f30;
 }
 
-@font-face {
+ @font-face {
   font-family: "plus-jakarta-sans";
   src: url("../public/fonts/PlusJakartaSans.ttf");
   font-display: swap;
@@ -991,3 +992,80 @@ does not extend the close button beyond the viewport. */
 .animate-thoughtTransition {
   animation: thoughtTransition 0.5s ease-out forwards;
 }
+
+/*RTL **********************************************************/
+[dir="rtl"] div.relative :nth-child(2).white-scrollbar {
+  left: auto;
+}
+
+[dir="rtl"] div.border-theme-modal-border button {
+  left: 1rem;
+  right: auto;
+}
+
+[dir="rtl"] [data-tooltip-id="sidebar-toggle"]  {
+  right: 30px;
+  left: auto;
+}
+
+
+[dir="rtl"] div.w-screen :nth-child(2).bg-theme-bg-secondary {
+  right: -18px;
+  left: 14px;
+}
+
+[dir="rtl"] tr {
+  text-align: right;
+}
+
+[dir="rtl"] div:has(> a[aria-label="Find us on GitHub"]) {
+  padding-left: 16px;
+}
+
+[dir="rtl"] .pr-2 {
+  padding-left: 0.5rem;
+}
+
+/*RTL end *****************************************************/
+
+/*Arabic ******************************************************/
+
+[lang="ar"] {
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+@font-face {
+  font-family: "Amiri";
+  src: url("../public/fonts/Amiri-Regular.ttf");
+  unicode-range: U+600-65F;
+  font-weight: normal;
+  size-adjust: 111%;
+}
+
+@font-face {
+  font-family: "Amiri";
+  src: url("../public/fonts/Amiri-Bold.ttf");
+  unicode-range: U+600-65F;
+  font-weight: bold;
+  size-adjust: 111%;
+}
+
+@font-face {
+  font-family: "Amiri";
+  src: url("../public/fonts/Amiri-Italic.ttf");
+  unicode-range: U+600-65F;
+  font-style: italic;
+  size-adjust: 111%;
+}
+
+@font-face {
+  font-family: "Amiri";
+  src: url("../public/fonts/Amiri-BoldItalic.ttf");
+  unicode-range: U+600-65F;
+  font-weight: bold;
+  font-style: italic;
+  size-adjust: 111%;
+}
+
+/*Arabic end ***************************************************/