feat: enable Arabic in production UI and add complete Arabic documentation (#13315)

### What problem does this PR solve?

This PR adds end-to-end Arabic support in production. It also adds a
full Arabic README

### Type of change

 - [x] New Feature (non-breaking change which adds functionality)
 - [x] Documentation Update

web/src/components/empty/constant.tsx

@@ -1,4 +1,3 @@
-import { t } from 'i18next';
 import { HomeIcon } from '../svg-icon';
 
 export enum EmptyType {
@@ -17,27 +16,27 @@ export enum EmptyCardType {
 export const EmptyCardData = {
   [EmptyCardType.Agent]: {
     icon: <HomeIcon name="agents" width={'24'} />,
-    title: t('empty.agentTitle'),
-    notFound: t('empty.notFoundAgent'),
+    titleKey: 'empty.agentTitle',
+    notFoundKey: 'empty.notFoundAgent',
   },
   [EmptyCardType.Dataset]: {
     icon: <HomeIcon name="datasets" width={'24'} />,
-    title: t('empty.datasetTitle'),
-    notFound: t('empty.notFoundDataset'),
+    titleKey: 'empty.datasetTitle',
+    notFoundKey: 'empty.notFoundDataset',
   },
   [EmptyCardType.Chat]: {
     icon: <HomeIcon name="chats" width={'24'} />,
-    title: t('empty.chatTitle'),
-    notFound: t('empty.notFoundChat'),
+    titleKey: 'empty.chatTitle',
+    notFoundKey: 'empty.notFoundChat',
   },
   [EmptyCardType.Search]: {
     icon: <HomeIcon name="searches" width={'24'} />,
-    title: t('empty.searchTitle'),
-    notFound: t('empty.notFoundSearch'),
+    titleKey: 'empty.searchTitle',
+    notFoundKey: 'empty.notFoundSearch',
   },
   [EmptyCardType.Memory]: {
     icon: <HomeIcon name="memory" width={'24'} />,
-    title: t('empty.memoryTitle'),
-    notFound: t('empty.notFoundMemory'),
+    titleKey: 'empty.memoryTitle',
+    notFoundKey: 'empty.notFoundMemory',
   },
 };

web/src/components/empty/empty.tsx

@@ -4,6 +4,7 @@ import { useIsDarkTheme } from '../theme-provider';
 
 import { Plus } from 'lucide-react';
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import SvgIcon from '../svg-icon';
 import { EmptyCardData, EmptyCardType, EmptyType } from './constant';
 import { EmptyCardProps, EmptyProps } from './interface';
@@ -82,8 +83,13 @@ export const EmptyAppCard = (props: {
   testId?: string;
 }) => {
   const { type, showIcon, className, isSearch, children, testId } = props;
+  const { t } = useTranslation();
   let defaultClass = '';
   let style = {};
+  const cardData = EmptyCardData[type];
+  const title = t(cardData.titleKey);
+  const notFound = t(cardData.notFoundKey);
+
   switch (props.size) {
     case 'small':
       style = { width: '256px' };
@@ -100,10 +106,8 @@ export const EmptyAppCard = (props: {
   return (
     <div onClick={isSearch ? undefined : props.onClick} data-testid={testId}>
       <EmptyCard
-        icon={showIcon ? EmptyCardData[type].icon : undefined}
-        title={
-          isSearch ? EmptyCardData[type].notFound : EmptyCardData[type].title
-        }
+        icon={showIcon ? cardData.icon : undefined}
+        title={isSearch ? notFound : title}
         className={cn('cursor-pointer ', className)}
         style={style}
         // description={EmptyCardData[type].description}