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/components/api-service/chat-overview-modal/index.module.less

@@ -10,7 +10,7 @@
 
 .chartLabel {
   display: inline-block;
-  padding-left: 60px;
+  padding-inline-start: 60px;
   padding-bottom: 20px;
 }
 .apiLinkText {

web/src/components/cross-language-form-field.tsx

@@ -20,6 +20,7 @@ const Languages = [
   'Japanese',
   'Korean',
   'Vietnamese',
+  'Arabic',
 ];
 
 export const crossLanguageOptions = Languages.map((x) => ({

web/src/components/message-input/index.less

@@ -1,5 +1,5 @@
 .messageInputWrapper {
-  margin-right: 20px;
+  margin-inline-end: 20px;
   padding: '0px 0px 10px 0px';
   border: 1px solid #d9d9d9;
   &:hover {
@@ -8,8 +8,8 @@
   }
   border-radius: 8px;
   :global(.ant-input-affix-wrapper) {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
   }
 }
 
@@ -31,7 +31,7 @@
 }
 .deleteIcon {
   position: absolute;
-  right: -4px;
+  inset-inline-end: -4px;
   top: -4px;
   color: #d92d20;
 }

web/src/components/message-item/index.module.less

@@ -36,7 +36,7 @@
     word-break: break-word;
     :global(section.think) {
       color: rgb(166, 166, 166);
-      border-left-color: rgb(78, 78, 86);
+      border-inline-start-color: rgb(78, 78, 86);
     }
   }
 
@@ -57,9 +57,9 @@
 }
 
 .messageItemLeft {
-  text-align: left;
+  text-align: start;
 }
 
 .messageItemRight {
-  text-align: right;
+  text-align: end;
 }

web/src/components/next-message-item/index.module.less

@@ -39,7 +39,7 @@
     word-break: break-word;
     :global(section.think) {
       color: rgb(166, 166, 166);
-      border-left-color: rgb(78, 78, 86);
+      border-inline-start-color: rgb(78, 78, 86);
     }
 
     // RTL Support
@@ -47,13 +47,13 @@
       text-align: right;
 
       :global(section.think) {
-        border-left-color: transparent;
-        border-right-color: rgb(78, 78, 86);
-        border-right-width: 2px;
-        border-right-style: solid;
-        border-left: none;
-        padding-left: 0;
-        padding-right: 10px;
+        border-inline-start-color: transparent;
+        border-inline-end-color: rgb(78, 78, 86);
+        border-inline-end-width: 2px;
+        border-inline-end-style: solid;
+        border-inline-start: none;
+        padding-inline-start: 0;
+        padding-inline-end: 10px;
       }
     }
   }
@@ -79,9 +79,9 @@
 }
 
 .messageItemLeft {
-  text-align: left;
+  text-align: start;
 }
 
 .messageItemRight {
-  text-align: right;
+  text-align: end;
 }