From b7d9987953360d9c589149077625f1fb8aad8280 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Tue, 26 Nov 2024 14:48:49 +0800
Subject: [PATCH 1/5] chore: align design token

---
 .../datasets/create/step-two/index.tsx        | 34 ++++++++++---------
 .../datasets/create/step-two/option-card.tsx  |  2 +-
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index dc5258e509..fb2c47ca89 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -666,7 +666,7 @@ const StepTwo = ({
                 }
               >
                 <div className='space-y-4'>
-                  <div className='flex gap-2'>
+                  <div className='flex gap-3'>
                     <DelimiterInput
                       value={segmentIdentifier}
                       onChange={e => setSegmentIdentifier(e.target.value)}
@@ -775,11 +775,11 @@ const StepTwo = ({
                     />
                   </div>
 
-                  <div className='space-y-2'>
+                  <div className='space-y-4'>
                     <TextLabel>
                       {t('datasetCreation.stepTwo.childChunkForRetrieval')}
                     </TextLabel>
-                    <div className='flex gap-2 mt-2'>
+                    <div className='flex gap-3 mt-2'>
                       <DelimiterInput
                         value={parentChildConfig.child.delimiter}
                         onChange={e => setParentChildConfig({
@@ -803,20 +803,22 @@ const StepTwo = ({
                       />
                     </div>
 
-                    <TextLabel>
-                      {t('datasetCreation.stepTwo.rules')}
-                    </TextLabel>
                     <div className='space-y-2'>
-                      {rules.map(rule => (
-                        <div key={rule.id} className={s.ruleItem} onClick={() => {
-                          ruleChangeHandle(rule.id)
-                        }}>
-                          <Checkbox
-                            checked={rule.enabled}
-                          />
-                          <label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
-                        </div>
-                      ))}
+                      <TextLabel>
+                        {t('datasetCreation.stepTwo.rules')}
+                      </TextLabel>
+                      <div className='space-y-2 mt-2'>
+                        {rules.map(rule => (
+                          <div key={rule.id} className={s.ruleItem} onClick={() => {
+                            ruleChangeHandle(rule.id)
+                          }}>
+                            <Checkbox
+                              checked={rule.enabled}
+                            />
+                            <label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
+                          </div>
+                        ))}
+                      </div>
                     </div>
                   </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 5aa398f0f2..da0486d204 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -75,7 +75,7 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
     />
     {/** Body */}
     {isActive && <div className='p-3'>{children}
-      {actions && <div className='flex gap-2 mt-3'>
+      {actions && <div className='flex gap-2 mt-4'>
         {actions}
       </div>}
     </div>}

From 1843f6ccb60d50a6c5edbbe6fe5b3f92e933d2fd Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Tue, 26 Nov 2024 15:29:31 +0800
Subject: [PATCH 2/5] refactor: input number component

---
 web/app/components/base/input-number/index.tsx     | 14 ++++++--------
 web/app/components/base/param-item/index.tsx       |  4 +---
 .../components/datasets/create/step-two/index.tsx  |  9 ++++-----
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index 222686a0a8..e9792f48ef 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import type { FC, SetStateAction } from 'react'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import Input, { type InputProps } from '../input'
@@ -6,35 +5,34 @@ import classNames from '@/utils/classnames'
 
 export type InputNumberProps = {
   unit?: string
+  value: number
   onChange: (value: number) => void
   amount?: number
   size?: 'sm' | 'md'
 } & Omit<InputProps, 'value' | 'onChange' | 'size'>
 
 export const InputNumber: FC<InputNumberProps> = (props) => {
-  const { unit, className, onChange, defaultValue = 0, amount = 1, size = 'sm', max, min, ...rest } = props
-  const [val, setVal] = useState<number>(defaultValue as number)
-  const update = (value: SetStateAction<number>) => {
-    const current = typeof value === 'function' ? value(val) : value as number
+  const { unit, className, onChange, amount = 1, value, size = 'sm', max, min, ...rest } = props
+  const update = (input: SetStateAction<number>) => {
+    const current = typeof input === 'function' ? input(value) : input as number
     if (max && current >= (max as number))
       return
     if (min && current <= (min as number))
       return
-    setVal(value)
+    onChange(current)
   }
   const inc = () => update(val => val + amount)
   const dec = () => update(val => val - amount)
   return <div className='flex'>
     <Input {...rest}
       className={classNames('rounded-r-none', className)}
-      value={val}
+      value={value}
       max={max}
       min={min}
       onChange={(e) => {
         const parsed = Number(e.target.value)
         if (Number.isNaN(parsed))
           return
-        setVal(parsed)
         onChange(parsed)
       }}
     />
diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index bd18d35ebc..771893b6a1 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -55,10 +55,8 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             max={max}
             step={step}
             size='sm'
+            value={value}
             onChange={(value) => {
-              if (value < min || value > max)
-                return
-
               onChange(id, value)
             }}
           />
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index fb2c47ca89..f42261b348 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -672,11 +672,11 @@ const StepTwo = ({
                       onChange={e => setSegmentIdentifier(e.target.value)}
                     />
                     <MaxLengthInput
-                      defaultValue={max}
+                      value={max}
                       onChange={setMax}
                     />
                     <OverlapInput
-                      defaultValue={overlap}
+                      value={overlap}
                       min={1}
                       onChange={setOverlap}
                     />
@@ -749,7 +749,7 @@ const StepTwo = ({
                             })}
                           />
                           <MaxLengthInput
-                            defaultValue={parentChildConfig.parent.maxLength}
+                            value={parentChildConfig.parent.maxLength}
                             onChange={value => setParentChildConfig({
                               ...parentChildConfig,
                               parent: {
@@ -791,8 +791,7 @@ const StepTwo = ({
                         })}
                       />
                       <MaxLengthInput
-                        defaultValue={parentChildConfig.child.maxLength}
-
+                        value={parentChildConfig.child.maxLength}
                         onChange={value => setParentChildConfig({
                           ...parentChildConfig,
                           child: {

From 9aceceda2cbc9a157484fc3129cd59ec2640d97b Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 26 Nov 2024 15:33:58 +0800
Subject: [PATCH 3/5] fix: css var value

---
 web/app/components/datasets/create/stepper/step.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/app/components/datasets/create/stepper/step.tsx b/web/app/components/datasets/create/stepper/step.tsx
index f40a275b04..69f524ea66 100644
--- a/web/app/components/datasets/create/stepper/step.tsx
+++ b/web/app/components/datasets/create/stepper/step.tsx
@@ -27,7 +27,7 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
       <div className={classNames(
         'text-center text-[10px] font-semibold uppercase leading-3',
         isActive
-          ? 'text-white'
+          ? 'text-text-primary-on-surface'
           : !isDisabled
             ? 'text-text-tertiary'
             : 'text-text-tertiary opacity-30',

From db1956ed54425390109ea081685c1ac03fbc907d Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Tue, 26 Nov 2024 15:37:57 +0800
Subject: [PATCH 4/5] feat: dataset creation form reset

---
 .../datasets/create/step-two/index.tsx        | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index f42261b348..0f929888c8 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -119,6 +119,19 @@ type ParentChildConfig = {
   rules: PreProcessingRule[]
 }
 
+const defaultParentChildConfig: ParentChildConfig = {
+  chunkForContext: 'paragraph',
+  parent: {
+    delimiter: '\\n\\n',
+    maxLength: 4000,
+  },
+  child: {
+    delimiter: '\\n\\n',
+    maxLength: 4000,
+  },
+  rules: [],
+}
+
 const StepTwo = ({
   isSetting,
   documentDetail,
@@ -186,18 +199,7 @@ const StepTwo = ({
   })()
   const [isCreating, setIsCreating] = useState(false)
 
-  const [parentChildConfig, setParentChildConfig] = useState<ParentChildConfig>({
-    chunkForContext: 'paragraph',
-    parent: {
-      delimiter: '\\n\\n',
-      maxLength: 4000,
-    },
-    child: {
-      delimiter: '\\n\\n',
-      maxLength: 4000,
-    },
-    rules: [],
-  })
+  const [parentChildConfig, setParentChildConfig] = useState<ParentChildConfig>(defaultParentChildConfig)
 
   const scrollHandle = (e: Event) => {
     if ((e.target as HTMLDivElement).scrollTop > 0)
@@ -248,6 +250,7 @@ const StepTwo = ({
       setOverlap(defaultConfig.segmentation.chunk_overlap)
       setRules(defaultConfig.pre_processing_rules)
     }
+    setParentChildConfig(defaultParentChildConfig)
   }
 
   const fetchFileIndexingEstimate = async (docForm = DocForm.TEXT, language?: string) => {
@@ -659,7 +662,7 @@ const StepTwo = ({
                       <RiSearchEyeLine className='h-4 w-4 mr-1.5' />
                       {t('datasetCreation.stepTwo.previewChunk')}
                     </Button>
-                    <Button variant={'ghost'} disabled>
+                    <Button variant={'ghost'} onClick={resetRules}>
                       {t('datasetCreation.stepTwo.reset')}
                     </Button>
                   </>

From e26a963163a9a55c2f6cbedb625195844c5bfaaa Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Tue, 26 Nov 2024 16:05:14 +0800
Subject: [PATCH 5/5] fix: missing translation

---
 web/i18n/en-US/dataset-creation.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/i18n/en-US/dataset-creation.ts b/web/i18n/en-US/dataset-creation.ts
index 1f0bac376b..749e9e7410 100644
--- a/web/i18n/en-US/dataset-creation.ts
+++ b/web/i18n/en-US/dataset-creation.ts
@@ -122,6 +122,7 @@ const translation = {
     removeUrlEmails: 'Delete all URLs and email addresses',
     removeStopwords: 'Remove stopwords such as "a", "an", "the"',
     preview: 'Confirm & Preview',
+    previewChunk: 'Preview Chunk',
     reset: 'Reset',
     indexMode: 'Index mode',
     qualified: 'High Quality',