Fix: Optimize dataset page layout and internationalization and default values for multi selection #3221 (#9695)

### What problem does this PR solve?

Fix: Optimize dataset page layout and internationalization and Fix
setting default values for multi selection drop-down boxes #3221

-Adjust the style and layout of each component on the dataset page
-Add and update multilingual translation content

### Type of change

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

web/src/components/layout-recognize-form-field.tsx

@@ -68,7 +68,7 @@ export function LayoutRecognizeFormField() {
             <div className="flex items-center">
               <FormLabel
                 tooltip={t('layoutRecognizeTip')}
-                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                className="text-sm text-muted-foreground whitespace-wrap w-1/4"
               >
                 {t('layoutRecognize')}
               </FormLabel>

web/src/components/originui/select-with-search.tsx

@@ -28,6 +28,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
 import { RAGFlowSelectOptionType } from '../ui/select';
 import { Separator } from '../ui/separator';
 
@@ -114,7 +115,9 @@ export const SelectWithSearch = forwardRef<
                 <span className="leading-none truncate">{selectLabel}</span>
               </span>
             ) : (
-              <span className="text-muted-foreground">Select value</span>
+              <span className="text-muted-foreground">
+                {t('common.selectPlaceholder')}
+              </span>
             )}
             <div className="flex items-center justify-between">
               {value && allowClear && (

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

@@ -3,7 +3,7 @@ import { DocumentParserType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import random from 'lodash/random';
 import { Plus } from 'lucide-react';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { SliderInputFormField } from '../slider-input-form-field';
 import { Button } from '../ui/button';
@@ -57,15 +57,19 @@ const RaptorFormFields = () => {
   const form = useFormContext();
   const { t } = useTranslate('knowledgeConfiguration');
   const useRaptor = useWatch({ name: UseRaptorField });
-  useEffect(() => {
+
-    if (useRaptor) {
+  const changeRaptor = useCallback(
-      form.setValue(MaxTokenField, 256);
+    (isUseRaptor: boolean) => {
-      form.setValue(ThresholdField, 0.1);
+      if (isUseRaptor) {
-      form.setValue(MaxCluster, 64);
+        form.setValue(MaxTokenField, 256);
-      form.setValue(RandomSeedField, 0);
+        form.setValue(ThresholdField, 0.1);
-      form.setValue(Prompt, t('promptText'));
+        form.setValue(MaxCluster, 64);
-    }
+        form.setValue(RandomSeedField, 0);
-  }, [form, useRaptor, t]);
+        form.setValue(Prompt, t('promptText'));
+      }
+    },
+    [form],
+  );
 
   const handleGenerate = useCallback(() => {
     form.setValue(RandomSeedField, random(10000));
@@ -97,7 +101,10 @@ const RaptorFormFields = () => {
                   <FormControl>
                     <Switch
                       checked={field.value}
-                      onCheckedChange={field.onChange}
+                      onCheckedChange={(e) => {
+                        changeRaptor(e);
+                        field.onChange(e);
+                      }}
                     ></Switch>
                   </FormControl>
                 </div>
@@ -127,7 +134,13 @@ const RaptorFormFields = () => {
                     </FormLabel>
                     <div className="w-3/4">
                       <FormControl>
-                        <Textarea {...field} rows={8} />
+                        <Textarea
+                          {...field}
+                          rows={8}
+                          onChange={(e) => {
+                            field.onChange(e?.target?.value);
+                          }}
+                        />
                       </FormControl>
                     </div>
                   </div>

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

@@ -209,10 +209,16 @@ export const MultiSelect = React.forwardRef<
     const [isAnimating, setIsAnimating] = React.useState(false);
 
     React.useEffect(() => {
-      if (selectedValues === undefined) {
+      if (!selectedValues && props.value) {
+        setSelectedValues(props.value as string[]);
+      }
+    }, [props.value, selectedValues]);
+
+    React.useEffect(() => {
+      if (!selectedValues && !props.value && defaultValue) {
         setSelectedValues(defaultValue);
       }
-    }, [defaultValue, selectedValues]);
+    }, [defaultValue, props.value, selectedValues]);
 
     const flatOptions = React.useMemo(() => {
       return options.flatMap((option) =>
@@ -293,15 +299,18 @@ export const MultiSelect = React.forwardRef<
                         variant="secondary"
                         className={cn(
                           isAnimating ? 'animate-bounce' : '',
+                          'px-1',
                           multiSelectVariants({ variant }),
                         )}
                         style={{ animationDuration: `${animation}s` }}
                       >
-                        <div className="flex items-center gap-1">
+                        <div className="flex justify-between items-center gap-1">
                           {IconComponent && (
                             <IconComponent className="h-4 w-4" />
                           )}
-                          <div>{option?.label}</div>
+                          <div className="max-w-28 text-ellipsis overflow-hidden">
+                            {option?.label}
+                          </div>
                           <XCircle
                             className="h-4 w-4 cursor-pointer"
                             onClick={(event) => {

web/src/locales/en.ts

@@ -1,6 +1,7 @@
 export default {
   translation: {
     common: {
+      selectPlaceholder: 'select value',
       delete: 'Delete',
       deleteModalTitle: 'Are you sure to delete this item?',
       ok: 'Yes',
@@ -94,6 +95,16 @@ export default {
       noMoreData: `That's all. Nothing more.`,
     },
     knowledgeDetails: {
+      created: 'Created',
+      learnMore: 'Learn More',
+      general: 'General',
+      chunkMethodTab: 'Chunk Method',
+      testResults: 'Test Results',
+      testSetting: 'Test Setting',
+      retrievalTesting: 'Retrieval Testing',
+      retrievalTestingDescription:
+        'Conduct a retrieval test to check if RAGFlow can recover the intended content for the LLM.',
+      Parse: 'Parse',
       dataset: 'Dataset',
       testing: 'Retrieval testing',
       files: 'files',

web/src/locales/zh.ts

@@ -1,6 +1,7 @@
 export default {
   translation: {
     common: {
+      selectPlaceholder: '请选择',
       delete: '删除',
       deleteModalTitle: '确定删除吗?',
       ok: '是',
@@ -86,6 +87,16 @@ export default {
       noMoreData: '没有更多数据了',
     },
     knowledgeDetails: {
+      created: '创建于',
+      learnMore: '了解更多',
+      general: '通用',
+      chunkMethodTab: '切片方法',
+      testResults: '测试结果',
+      testSetting: '测试设置',
+      retrievalTesting: '知识检索测试',
+      retrievalTestingDescription:
+        '进行检索测试，检查 RAGFlow 是否能够为大语言模型（LLM）恢复预期的内容。',
+      Parse: '解析',
       dataset: '数据集',
       testing: '检索测试',
       configuration: '配置',

web/src/pages/dataset/index.tsx

@@ -30,7 +30,9 @@ export default function DatasetWrapper() {
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>
-              <BreadcrumbPage>{data.name}</BreadcrumbPage>
+              <BreadcrumbPage className="w-28 whitespace-nowrap text-ellipsis overflow-hidden">
+                {data.name}
+              </BreadcrumbPage>
             </BreadcrumbItem>
           </BreadcrumbList>
         </Breadcrumb>

web/src/pages/dataset/setting/chunk-method-learn-more.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import { t } from 'i18next';
 import { X } from 'lucide-react';
 import { useState } from 'react';
 import CategoryPanel from './category-panel';
@@ -26,7 +27,7 @@ export default ({
             setVisible(!visible);
           }}
         >
-          Learn More
+          {t('knowledgeDetails.learnMore')}
         </Button>
       </div>
       <div

web/src/pages/dataset/setting/configuration/common-item.tsx

@@ -29,7 +29,7 @@ export function ChunkMethodItem() {
           <div className="flex items-center">
             <FormLabel
               tooltip={t('chunkMethodTip')}
-              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+              className="text-sm text-muted-foreground whitespace-wrap w-1/4"
             >
               {t('chunkMethod')}
             </FormLabel>
@@ -69,7 +69,7 @@ export function EmbeddingModelItem() {
           <div className="flex items-center">
             <FormLabel
               tooltip={t('embeddingModelTip')}
-              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+              className="text-sm text-muted-foreground whitespace-wrap w-1/4"
             >
               {t('embeddingModel')}
             </FormLabel>

web/src/pages/dataset/setting/index.tsx

@@ -107,7 +107,7 @@ export default function DatasetSettings() {
                 >
                   <div className="flex w-full h-full justify-center	items-center">
                     <span className="h-full group-data-[state=active]:border-b-2 border-foreground	">
-                      General
+                      {t('knowledgeDetails.general')}
                     </span>
                   </div>
                 </TabsTrigger>
@@ -117,7 +117,7 @@ export default function DatasetSettings() {
                 >
                   <div className="flex w-full h-full justify-center	items-center">
                     <span className="h-full group-data-[state=active]:border-b-2 border-foreground	">
-                      Chunk Method
+                      {t('knowledgeDetails.chunkMethodTab')}
                     </span>
                   </div>
                 </TabsTrigger>

web/src/pages/dataset/sidebar/index.tsx

@@ -67,10 +67,14 @@ export function SideBar({ refreshCount }: PropType) {
             {data.name}
           </h3>
           <div className="flex justify-between">
-            <span>{data.doc_num} files</span>
+            <span>
+              {data.doc_num} {t('knowledgeDetails.files')}
+            </span>
             <span>{formatBytes(data.size)}</span>
           </div>
-          <div>Created {formatPureDate(data.create_time)}</div>
+          <div>
+            {t('knowledgeDetails.created')} {formatPureDate(data.create_time)}
+          </div>
         </div>
       </div>
 

web/src/pages/dataset/testing/index.tsx

@@ -1,4 +1,5 @@
 import { useTestRetrieval } from '@/hooks/use-knowledge-request';
+import { t } from 'i18next';
 import { useState } from 'react';
 import { TopTitle } from '../dataset-title';
 import TestingForm from './testing-form';
@@ -23,8 +24,8 @@ export default function RetrievalTesting() {
     <div className="p-5">
       <section className="flex justify-between items-center">
         <TopTitle
-          title={'Retrieval testing'}
+          title={t('knowledgeDetails.retrievalTesting')}
-          description={`Conduct a retrieval test to check if RAGFlow can recover the intended content for the LLM.`}
+          description={t('knowledgeDetails.retrievalTestingDescription')}
         ></TopTitle>
         {/* <Button>Save as Preset</Button> */}
       </section>
@@ -33,7 +34,7 @@ export default function RetrievalTesting() {
           <div className="p-4 flex-1">
             <div className="flex justify-between pb-2.5">
               <span className="text-text-primary font-semibold text-2xl">
-                Test setting
+                {t('knowledgeDetails.testSetting')}
               </span>
               {/* <Button variant={'outline'} onClick={addCount}>
                 <Plus /> Add New Test

web/src/pages/dataset/testing/testing-result.tsx

@@ -6,6 +6,7 @@ import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useTestRetrieval } from '@/hooks/use-knowledge-request';
 import { ITestingChunk } from '@/interfaces/database/knowledge';
+import { t } from 'i18next';
 import camelCase from 'lodash/camelCase';
 import { useMemo } from 'react';
 
@@ -66,7 +67,7 @@ export function TestingResult({
     <div className="p-4 flex-1">
       <div className="flex justify-between pb-2.5">
         <span className="text-text-primary font-semibold text-2xl">
-          Test results
+          {t('knowledgeDetails.testResults')}
         </span>
         <FilterPopover
           filters={filters}

web/src/pages/datasets/dataset-card.tsx

@@ -39,7 +39,7 @@ export function SeeAllCard() {
   const { navigateToDatasetList } = useNavigatePage();
 
   return (
-    <Card className="w-40 flex-none" onClick={navigateToDatasetList}>
+    <Card className="w-40 flex-none h-full" onClick={navigateToDatasetList}>
       <CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
         See All <ChevronRight className="size-4" />
       </CardContent>

web/src/pages/home/datasets.tsx

@@ -31,16 +31,20 @@ export function Datasets() {
           </div>
         ) : (
           <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 max-h-[78vh] overflow-auto">
-            {kbs.slice(0, 6).map((dataset) => (
+            {kbs
-              <DatasetCard
+              ?.slice(0, 6)
-                key={dataset.id}
+              .map((dataset) => (
-                dataset={dataset}
+                <DatasetCard
-                showDatasetRenameModal={showDatasetRenameModal}
+                  key={dataset.id}
-              ></DatasetCard>
+                  dataset={dataset}
-            ))}
+                  showDatasetRenameModal={showDatasetRenameModal}
+                ></DatasetCard>
+              ))}
+            <div className="min-h-24">
+              <SeeAllCard></SeeAllCard>
+            </div>
           </div>
         )}
-        <SeeAllCard></SeeAllCard>
       </div>
       {datasetRenameVisible && (
         <RenameDialog