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)

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>