From ec1c03f0a340875c0cf863a5f85385ce74829ac0 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Mon, 9 Dec 2024 10:08:19 +0800
Subject: [PATCH] fix: i18n & option card props

---
 .../datasets/create/step-two/index.module.css |  4 ++++
 .../datasets/create/step-two/index.tsx        | 23 +++++++++++++++----
 .../datasets/create/step-two/option-card.tsx  |  6 ++---
 web/i18n/en-US/dataset-creation.ts            |  2 ++
 web/i18n/zh-Hans/dataset-creation.ts          |  2 ++
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/web/app/components/datasets/create/step-two/index.module.css b/web/app/components/datasets/create/step-two/index.module.css
index 85a7f8ab35..db4c616363 100644
--- a/web/app/components/datasets/create/step-two/index.module.css
+++ b/web/app/components/datasets/create/step-two/index.module.css
@@ -75,6 +75,10 @@
   cursor: pointer;
 }
 
+.disabled {
+  cursor: not-allowed;
+}
+
 .indexItem.disabled:hover {
   background-color: #fcfcfd;
   border-color: #f2f4f7;
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 3e1e9b6eba..fb2994cd26 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -505,6 +505,9 @@ const StepTwo = ({
   }
 
   const changeToEconomicalType = () => {
+    if (docForm === ChuckingMode.parentChild)
+      return
+
     if (!hasSetIndexType) {
       setIndexType(IndexingType.ECONOMICAL)
       if (docForm === ChuckingMode.qa)
@@ -557,8 +560,12 @@ const StepTwo = ({
                 icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
                 activeHeaderClassName='bg-gradient-to-r from-[#EFF0F9] to-[#F9FAFB]'
                 description={t('datasetCreation.stepTwo.generalTip')}
-                isActive={docForm === ChuckingMode.qa || docForm === ChuckingMode.text}
-                onSelect={() => handleChangeDocform(ChuckingMode.text)}
+                isActive={
+                  [ChuckingMode.text, ChuckingMode.qa].includes(docForm)
+                }
+                onSwitched={() =>
+                  handleChangeDocform(ChuckingMode.text)
+                }
                 actions={
                   <>
                     <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
@@ -653,7 +660,7 @@ const StepTwo = ({
                 activeHeaderClassName='bg-gradient-to-r from-[#F9F1EE] to-[#F9FAFB]'
                 description={t('datasetCreation.stepTwo.parentChildTip')}
                 isActive={docForm === ChuckingMode.parentChild}
-                onSelected={() => handleChangeDocform(ChuckingMode.parentChild)}
+                onSwitched={() => handleChangeDocform(ChuckingMode.parentChild)}
                 actions={
                   <>
                     <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
@@ -817,6 +824,7 @@ const StepTwo = ({
                     !hasSetIndexType && indexType === IndexingType.ECONOMICAL && s.active,
                     hasSetIndexType && s.disabled,
                     hasSetIndexType && '!w-full !min-h-[96px]',
+                    docForm === ChuckingMode.parentChild && s.disabled,
                   )}
                   onClick={changeToEconomicalType}
                 >
@@ -921,7 +929,10 @@ const StepTwo = ({
           >
             <div className='flex items-center gap-2'>
               <DocumentPicker datasetId={datasetId || ''} value={{}} onChange={console.log} />
-              <Badge text='276 Estimated chunks' />
+              <Badge text={t(
+                'datasetCreation.stepTwo.previewChunkCount', {
+                  count: estimate?.preview.length || estimate?.qa_preview?.length || 0,
+                }) as string} />
             </div>
           </PreviewHeader>}
           className={cn(s.previewWrap, isMobile && s.isMobile, 'relative h-full overflow-y-scroll')}
@@ -973,7 +984,9 @@ const StepTwo = ({
             <div className='h-full w-full flex items-center justify-center'>
               <div className='flex flex-col items-center justify-center gap-3'>
                 <RiSearchEyeLine className='size-10 text-text-empty-state-icon' />
-                <p className='text-sm text-text-tertiary'>{'Click the \'Preview Chunk\' button on the left to load the preview'}</p>
+                <p className='text-sm text-text-tertiary'>
+                  {t('datasetCreation.stepTwo.previewChunkTip')}
+                </p>
               </div>
             </div>
           )}
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index e8462159b8..7763da91f6 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -50,11 +50,11 @@ type OptionCardProps = {
   isActive?: boolean
   actions?: ReactNode
   effectImg?: string
-  onSelected?: () => void
+  onSwitched?: () => void
 } & Omit<ComponentProps<'div'>, 'title'>
 
 export const OptionCard: FC<OptionCardProps> = (props) => {
-  const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSelected, onClick, ...rest } = props
+  const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, ...rest } = props
   return <div
     className={classNames(
       'rounded-xl',
@@ -67,7 +67,7 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
     }}
     onClick={(e) => {
       if (!isActive)
-        onSelected?.()
+        onSwitched?.()
       onClick?.(e)
     }}
     {...rest}>
diff --git a/web/i18n/en-US/dataset-creation.ts b/web/i18n/en-US/dataset-creation.ts
index 00f390bfe2..014f9a1a93 100644
--- a/web/i18n/en-US/dataset-creation.ts
+++ b/web/i18n/en-US/dataset-creation.ts
@@ -164,6 +164,8 @@ const translation = {
     indexSettingTip: 'To change the index method & embedding model, please go to the ',
     retrievalSettingTip: 'To change the retrieval setting, please go to the ',
     datasetSettingLink: 'Knowledge settings.',
+    previewChunkTip: 'Click the \'Preview Chunk\' button on the left to load the preview',
+    previewChunkCount: '{{count}} Estimated chunks',
   },
   stepThree: {
     creationTitle: '🎉 Knowledge created',
diff --git a/web/i18n/zh-Hans/dataset-creation.ts b/web/i18n/zh-Hans/dataset-creation.ts
index ad73044110..c8f64777fb 100644
--- a/web/i18n/zh-Hans/dataset-creation.ts
+++ b/web/i18n/zh-Hans/dataset-creation.ts
@@ -164,6 +164,8 @@ const translation = {
     indexSettingTip: '要更改索引方法和 embedding 模型，请转到',
     retrievalSettingTip: '要更改检索方法，请转到',
     datasetSettingLink: '知识库设置。',
+    previewChunkTip: '点击左侧的“预览块”按钮来加载预览',
+    previewChunkCount: '{{count}} 预估块',
   },
   stepThree: {
     creationTitle: '🎉 知识库已创建',