Feat/arabic language support (#13516)

### What problem does this PR solve?

This PR implements comprehensive Arabic language support for the RAGFlow
application. The changes include:
- Complete Arabic translation of all UI text elements in the web
interface
- RTL (right-to-left) layout support for Arabic content
- Localization updates for all supported languages (ar, bg, de, en, es,
fr, id, it, ja, pt-br, ru, vi, zh-traditional, zh)
- UI component adjustments to properly display Arabic text and support
RTL layout

The implementation ensures that Arabic-speaking users can fully interact
with the application in their native language with proper text rendering
and layout direction.

### Type of change

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

<img width="2866" height="1617" alt="image"
src="https://github.com/user-attachments/assets/f2751b34-1b65-4867-b81d-a1068c17b9b7"
/>

---------

Co-authored-by: Yingfeng <yingfeng.zhang@gmail.com>

web/src/pages/agent/canvas/context-menu/index.module.less

@@ -8,7 +8,7 @@
     border: none;
     display: block;
     padding: 0.5em;
-    text-align: left;
+    text-align: start;
     width: 100%;
   }
 

web/src/pages/agent/canvas/node/index.module.less

@@ -19,7 +19,7 @@
   .categorizeAnchorPointText {
     position: absolute;
     top: -4px;
-    left: 8px;
+    inset-inline-start: 8px;
     white-space: nowrap;
   }
 }
@@ -33,8 +33,8 @@
 
 .selectedIterationNode {
   border-bottom: 1.5px solid rgb(59, 118, 244);
-  border-left: 1.5px solid rgb(59, 118, 244);
-  border-right: 1.5px solid rgb(59, 118, 244);
+  border-inline-start: 1.5px solid rgb(59, 118, 244);
+  border-inline-end: 1.5px solid rgb(59, 118, 244);
 }
 
 .iterationHeader {
@@ -43,8 +43,8 @@
 
 .selectedHeader {
   border-top: 1.9px solid rgb(59, 118, 244);
-  border-left: 1.9px solid rgb(59, 118, 244);
-  border-right: 1.9px solid rgb(59, 118, 244);
+  border-inline-start: 1.9px solid rgb(59, 118, 244);
+  border-inline-end: 1.9px solid rgb(59, 118, 244);
 }
 
 .handle {
@@ -88,7 +88,7 @@
   .categorizeAnchorPointText {
     position: absolute;
     top: -4px;
-    left: 8px;
+    inset-inline-start: 8px;
     white-space: nowrap;
   }
   .relevantSourceLabel {
@@ -108,22 +108,22 @@
     background-color: #edfcff;
     font-size: 12px;
     padding: 6px 6px 4px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+    border-start-start-radius: 10px;
+    border-start-end-radius: 10px;
   }
   .noteTitleDark {
     background-color: #edfcff;
     font-size: 12px;
     padding: 6px 6px 4px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+    border-start-start-radius: 10px;
+    border-start-end-radius: 10px;
   }
   .noteForm {
     margin-top: 4px;
     height: calc(100% - 50px);
   }
   .noteName {
-    padding: 0px 4px;
+    padding-inline: 4px;
   }
   .noteTextarea {
     resize: none;
@@ -139,8 +139,8 @@
 
 .iterationNode {
   .commonNodeShadow();
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-end-start-radius: 10px;
+  border-end-end-radius: 10px;
 }
 
 .nodeText {
@@ -183,7 +183,7 @@
 }
 
 .relevantLabel {
-  text-align: right;
+  text-align: end;
 }
 
 .knowledgeNodeName {
@@ -246,7 +246,7 @@
 
     .expandIcon {
       position: absolute;
-      right: 8px;
+      inset-inline-end: 8px;
       top: 50%;
       transform: translateY(-50%);
       color: #666;

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.module.less

@@ -25,7 +25,7 @@
   .pageContent {
     flex: 1;
     width: 100%;
-    padding-right: 12px;
+    padding-inline-end: 12px;
     overflow-y: auto;
 
     .spin {
@@ -50,7 +50,7 @@
 
   .pageFooter {
     padding-top: 10px;
-    padding-right: 10px;
+    padding-inline-end: 10px;
     height: 32px;
   }
 }
@@ -77,7 +77,7 @@
     height: 20px;
 
     .text {
-      margin-left: 10px;
+      margin-inline-start: 10px;
     }
   }
 }

web/src/pages/dataflow-result/index.module.less

@@ -25,7 +25,7 @@
   .pageContent {
     flex: 1;
     width: 100%;
-    padding-right: 12px;
+    padding-inline-end: 12px;
     overflow-y: auto;
 
     .spin {
@@ -50,7 +50,7 @@
 
   .pageFooter {
     padding-top: 10px;
-    padding-right: 10px;
+    padding-inline-end: 10px;
     height: 32px;
   }
 }
@@ -77,7 +77,7 @@
     height: 20px;
 
     .text {
-      margin-left: 10px;
+      margin-inline-start: 10px;
     }
   }
 }

web/src/pages/home/banner.tsx

@@ -40,9 +40,12 @@ export function Banner() {
 }
 
 export function NextBanner() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   return (
-    <h1 className="text-5xl leading-normal">
+    <h1 
+      className="text-5xl leading-normal text-left" 
+      dir={i18n.language?.startsWith('ar') ? 'rtl' : 'ltr'}
+    >
       <span className="font-semibold text-text-primary">
         {t('header.welcome')}{' '}
       </span>

web/src/pages/login-next/index.less

@@ -4,7 +4,7 @@
     content: '';
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     stroke-dasharray: 660;

web/src/pages/next-search/retrieval-documents/index.less

@@ -1,11 +1,11 @@
 .selectFilesCollapse {
   :global(.ant-collapse-header) {
-    padding-left: 22px;
+    padding-inline-start: 22px;
   }
   margin-bottom: 32px;
   overflow-y: auto;
 }
 
 .selectFilesTitle {
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }

web/src/pages/user-setting/setting-model/index.less

@@ -1,7 +1,7 @@
 .modelContainer {
   width: 100%;
   .factoryOperationWrapper {
-    text-align: right;
+    text-align: end;
   }
   .llmList {
     padding-top: 10px;