fix: Optimize internationalization configuration #3221 (#9924)

### What problem does this PR solve?

fix: Optimize internationalization configuration

- Update multi-language options, adding general translations for
functions like Select All and Clear
- Add internationalization support for modules like Chat, Search, and
Datasets

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

Author: dcc123456

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

@@ -6,6 +6,8 @@ import {
 } from '@/components/ui/form';
 import { MultiSelect } from '@/components/ui/multi-select';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
+import { toLower } from 'lodash';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -20,7 +22,10 @@ const Languages = [
   'Vietnamese',
 ];
 
-const options = Languages.map((x) => ({ label: x, value: x }));
+const options = Languages.map((x) => ({
+  label: t('language.' + toLower(x)),
+  value: x,
+}));
 
 type CrossLanguageItemProps = {
   name?: string;

web/src/components/delimiter-form-field.tsx

@@ -52,6 +52,7 @@ export function DelimiterFormField() {
           <FormItem className=" items-center space-y-0 ">
             <div className="flex items-center gap-1">
               <FormLabel
+                required
                 tooltip={t('knowledgeDetails.delimiterTip')}
                 className="text-sm text-muted-foreground whitespace-break-spaces w-1/4"
               >

web/src/components/indented-tree/indented-tree.tsx

@@ -18,6 +18,7 @@ import { TreeData } from '@antv/g6/lib/types';
 import isEmpty from 'lodash/isEmpty';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { useIsDarkTheme } from '../theme-provider';
 
 const rootId = 'root';
 
@@ -322,7 +323,7 @@ const IndentedTree = ({ data, show, style = {} }: IProps) => {
       node.children.forEach((child, idx) => assignIds(child, node.id, idx));
     }
   }, []);
-
+  const isDark = useIsDarkTheme();
   const render = useCallback(
     async (data: TreeData) => {
       const graph: Graph = new Graph({
@@ -335,7 +336,8 @@ const IndentedTree = ({ data, show, style = {} }: IProps) => {
             labelBackground: (datum) => datum.id === rootId,
             labelBackgroundRadius: 0,
             labelBackgroundFill: '#576286',
-            labelFill: (datum) => (datum.id === rootId ? '#fff' : '#666'),
+            labelFill: isDark ? '#fff' : '#333',
+            // labelFill: (datum) => (datum.id === rootId ? '#fff' : '#666'),
             labelText: (d) => d.style?.labelText || d.id,
             labelTextAlign: (datum) =>
               datum.id === rootId ? 'center' : 'left',

web/src/components/knowledge-base-item.tsx

@@ -134,7 +134,9 @@ export function KnowledgeBaseFormField({
       name="kb_ids"
       render={({ field }) => (
         <FormItem>
-          <FormLabel>{t('chat.knowledgeBases')}</FormLabel>
+          <FormLabel tooltip={t('chat.knowledgeBasesTip')}>
+            {t('chat.knowledgeBases')}
+          </FormLabel>
           <FormControl>
             <MultiSelect
               options={options}

web/src/components/list-filter-bar/filter-popover.tsx

@@ -18,6 +18,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
+import { t } from 'i18next';
 import { FilterChange, FilterCollection, FilterValue } from './interface';
 
 export type CheckboxFormMultipleProps = {
@@ -134,10 +135,10 @@ function CheckboxFormMultiple({
             size={'sm'}
             onClick={onReset}
           >
-            Clear
+            {t('common.clear')}
           </Button>
           <Button type="submit" size={'sm'}>
-            Submit
+            {t('common.submit')}
           </Button>
         </div>
       </form>

web/src/components/max-token-number-from-field.tsx

@@ -14,6 +14,7 @@ export function MaxTokenNumberFormField({ max = 2048, initialValue }: IProps) {
     <SliderInputFormField
       name={'parser_config.chunk_token_num'}
       label={t('chunkTokenNumber')}
+      tooltip={t('chunkTokenNumberTip')}
       max={max}
       defaultValue={initialValue ?? 0}
       layout={FormLayout.Horizontal}

web/src/components/message-input/next.tsx

@@ -15,6 +15,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
 import { CircleStop, Paperclip, Send, Upload, X } from 'lucide-react';
 import * as React from 'react';
 import { toast } from 'sonner';
@@ -141,7 +142,7 @@ export function NextMessageInput({
         <Textarea
           value={value}
           onChange={onInputChange}
-          placeholder="Type your message here..."
+          placeholder={t('chat.messagePlaceholder')}
           className="field-sizing-content min-h-10 w-full resize-none border-0 bg-transparent p-0 shadow-none focus-visible:ring-0 dark:bg-transparent"
           disabled={isUploading || disabled || sendLoading}
           onKeyDown={handleKeyDown}

web/src/components/parse-configuration/raptor-form-fields.tsx

@@ -95,7 +95,9 @@ const RaptorFormFields = () => {
                   tooltip={t('useRaptorTip')}
                   className="text-sm text-muted-foreground w-1/4 whitespace-break-spaces"
                 >
-                  {t('useRaptor')}
+                  <div className="w-auto xl:w-20 2xl:w-24 3xl:w-28 4xl:w-auto ">
+                    {t('useRaptor')}
+                  </div>
                 </FormLabel>
                 <div className="w-3/4">
                   <FormControl>

web/src/components/ui/form.tsx

@@ -94,8 +94,9 @@ const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
     tooltip?: React.ReactNode;
+    required?: boolean;
   }
->(({ className, tooltip, ...props }, ref) => {
+>(({ className, tooltip, required = false, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
   return (
@@ -105,6 +106,7 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     >
+      {required && <span className="text-destructive">*</span>}
       {props.children}
       {tooltip && <FormTooltip tooltip={tooltip}></FormTooltip>}
     </Label>

web/src/components/ui/multi-select.tsx

@@ -29,6 +29,7 @@ import {
 } from '@/components/ui/popover';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
 import { isEmpty } from 'lodash';
 
 export type MultiSelectOptionType = {
@@ -193,7 +194,7 @@ export const MultiSelect = React.forwardRef<
       onValueChange,
       variant,
       defaultValue = [],
-      placeholder = 'Select options',
+      placeholder = t('common.selectPlaceholder'),
       animation = 0,
       maxCount = 3,
       modalPopover = false,
@@ -379,7 +380,7 @@ export const MultiSelect = React.forwardRef<
         >
           <Command>
             <CommandInput
-              placeholder="Search..."
+              placeholder={t('common.search') + '...'}
               onKeyDown={handleInputKeyDown}
             />
             <CommandList>
@@ -401,7 +402,7 @@ export const MultiSelect = React.forwardRef<
                     >
                       <CheckIcon className="h-4 w-4" />
                     </div>
-                    <span>(Select All)</span>
+                    <span>({t('common.selectAll')})</span>
                   </CommandItem>
                 )}
                 {!options.some((x) => 'options' in x) &&
@@ -457,7 +458,7 @@ export const MultiSelect = React.forwardRef<
                     onSelect={() => setIsPopoverOpen(false)}
                     className="flex-1 justify-center cursor-pointer max-w-full"
                   >
-                    Close
+                    {t('common.close')}
                   </CommandItem>
                 </div>
               </CommandGroup>