From 6dc20ee80973bc9b9c045b1098fa5e0228561043 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Fri, 13 Dec 2024 14:57:13 +0800
Subject: [PATCH 1/5] fix: unique key

---
 .../datasets/create/stepper/index.tsx         | 35 ++++++++-----------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/web/app/components/datasets/create/stepper/index.tsx b/web/app/components/datasets/create/stepper/index.tsx
index 4c120e4d48..30cf9bd0e4 100644
--- a/web/app/components/datasets/create/stepper/index.tsx
+++ b/web/app/components/datasets/create/stepper/index.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import { type FC, Fragment } from 'react'
 import type { Step } from './step'
 import { StepperStep } from './step'
 
@@ -7,28 +7,21 @@ export type StepperProps = {
   activeIndex: number
 }
 
-function join<T, R = T>(array: T[], sep: R): Array<T | R> {
-  return array.reduce((acc, item, index) => {
-    if (index === 0)
-      return [item]
-
-    return acc.concat([sep, item])
-  }, [] as Array<T | R>)
-}
-
 export const Stepper: FC<StepperProps> = (props) => {
   const { steps, activeIndex } = props
   return <div className='flex items-center gap-3'>
-    {join(
-      steps.map((step, index) => (
-        <StepperStep
-          key={index}
-          {...step}
-          activeIndex={activeIndex}
-          index={index}
-        />
-      )),
-      <div className="w-4 h-px bg-text-quaternary" />,
-    )}
+    {steps.map((step, index) => {
+      const isLast = index === steps.length - 1
+      return (
+        <Fragment key={index}>
+          <StepperStep
+            {...step}
+            activeIndex={activeIndex}
+            index={index}
+          />
+          {!isLast && <div className="w-4 h-px bg-text-quaternary" />}
+        </Fragment>
+      )
+    })}
   </div>
 }

From f304976715644462efca4184fce54e0f8469b670 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Fri, 13 Dec 2024 15:13:06 +0800
Subject: [PATCH 2/5] fix: create dataset step one next

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

diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index a5f5a48f85..7587be2e72 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -203,7 +203,7 @@ const StepOne = ({
               )}
               <div className="flex justify-end gap-2 max-w-[640px]">
                 {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
-                <Button disabled={!nextDisabled} variant='primary' onClick={onStepChange}>
+                <Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
                   <span className="flex gap-0.5 px-[10px]">
                     <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
                     <RiArrowRightLine className="size-4" />

From 8f178290bedbe11182b2eb4cd30da6e1dd79e20b Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Fri, 13 Dec 2024 15:20:37 +0800
Subject: [PATCH 3/5] fix: preview document picker label overflow

---
 .../datasets/common/document-picker/preview-document-picker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index 0177177665..2a35b75471 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -54,7 +54,7 @@ const PreviewDocumentPicker: FC<Props> = ({
           <FileIcon name={name} extension={extension} size='md' />
           <div className='flex flex-col items-start ml-1'>
             <div className='flex items-center space-x-0.5'>
-              <span className={cn('system-md-semibold max-w-[200px] overflow-clip text-text-primary')}> {name || '--'}</span>
+              <span className={cn('system-md-semibold max-w-[200px] truncate text-text-primary')}> {name || '--'}</span>
               <ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
             </div>
           </div>

From 7d673e7f14c94faa0075b98b71d45ee7f5cc2bf5 Mon Sep 17 00:00:00 2001
From: nite-knite <nkCoding@gmail.com>
Date: Fri, 13 Dec 2024 15:28:02 +0800
Subject: [PATCH 4/5] feat: dataset creation UI tinkering

---
 .../create/embedding-process/index.tsx        |  2 +-
 .../datasets/create/step-one/index.tsx        | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index 64f2570b4a..b3ee0dc739 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -303,7 +303,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                 </>
               )}
               {indexingStatusDetail.indexing_status === 'completed' && (
-                <RiCheckboxCircleFill className='shrink-0 size-4' />
+                <RiCheckboxCircleFill className='shrink-0 size-4 text-text-success' />
               )}
             </div>
           </div>
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 7587be2e72..5c492c7902 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -122,9 +122,9 @@ const StepOne = ({
       return true
     if (isShowVectorSpaceFull)
       return true
-
     return false
-  }, [files])
+  }, [files, isShowVectorSpaceFull])
+
   return (
     <div className='flex w-full h-full'>
       <div className='grow overflow-y-auto relative'>
@@ -229,7 +229,15 @@ const StepOne = ({
                       <VectorSpaceFull />
                     </div>
                   )}
-                  <Button disabled={isShowVectorSpaceFull || !notionPages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+                  <div className="flex justify-end gap-2 max-w-[640px]">
+                    {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                    <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
+                      <span className="flex gap-0.5 px-[10px]">
+                        <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                        <RiArrowRightLine className="size-4" />
+                      </span>
+                    </Button>
+                  </div>
                 </>
               )}
             </>
@@ -252,7 +260,15 @@ const StepOne = ({
                   <VectorSpaceFull />
                 </div>
               )}
-              <Button disabled={isShowVectorSpaceFull || !websitePages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+              <div className="flex justify-end gap-2 max-w-[640px]">
+                {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                <Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
+                  <span className="flex gap-0.5 px-[10px]">
+                    <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                    <RiArrowRightLine className="size-4" />
+                  </span>
+                </Button>
+              </div>
             </>
           )}
           {!datasetId && (

From fe2d60dfc9f58cae37cfc23ec7ab481aaf969b79 Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Fri, 13 Dec 2024 15:47:29 +0800
Subject: [PATCH 5/5] fix: option card gradient & tailwind config

---
 .../common/economical-retrieval-method-config/index.tsx  | 2 +-
 .../datasets/common/retrieval-method-config/index.tsx    | 4 ++--
 .../components/datasets/create/step-two/option-card.tsx  | 9 ++++-----
 web/tailwind.config.js                                   | 3 +++
 web/themes/manual-dark.css                               | 6 +++---
 web/themes/manual-light.css                              | 6 +++---
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
index 49f090786e..9236858ae4 100644
--- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
@@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
       <OptionCard icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
         title={t('dataset.retrieval.invertedIndex.title')}
         description={t('dataset.retrieval.invertedIndex.description')} isActive
-        activeHeaderClassName='dataset-option-card-purple-gradient'
+        activeHeaderClassName='bg-dataset-option-card-purple-gradient'
       >
         <RetrievalParamConfig
           type={RETRIEVE_METHOD.invertedIndex}
diff --git a/web/app/components/datasets/common/retrieval-method-config/index.tsx b/web/app/components/datasets/common/retrieval-method-config/index.tsx
index fab0cad597..aeeb7235e4 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -69,7 +69,7 @@ const RetrievalMethodConfig: FC<Props> = ({
             search_method: RETRIEVE_METHOD.semantic,
           })}
           effectImg={Effect.src}
-          activeHeaderClassName='dataset-option-card-purple-gradient'
+          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
         >
           <RetrievalParamConfig
             type={RETRIEVE_METHOD.semantic}
@@ -90,7 +90,7 @@ const RetrievalMethodConfig: FC<Props> = ({
             search_method: RETRIEVE_METHOD.fullText,
           })}
           effectImg={Effect.src}
-          activeHeaderClassName='dataset-option-card-purple-gradient'
+          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
         >
           <RetrievalParamConfig
             type={RETRIEVE_METHOD.fullText}
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 bb339b4a41..80bdce9c07 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -1,6 +1,5 @@
 import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
 import Image from 'next/image'
-import Effect from '../assets/option-card-effect-blue.svg'
 import classNames from '@/utils/classnames'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
@@ -25,7 +24,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
     isActive && activeClassName,
   )}>
     <div className='size-14 flex items-center justify-center relative overflow-hidden'>
-      {isActive && <Image src={effectImg || Effect.src} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
+      {isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
       <div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
         {icon}
       </div>
@@ -58,10 +57,10 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
   const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
   return <div
     className={classNames(
-      'rounded-xl border',
+      'rounded-xl border bg-components-option-card-option-bg',
       (isActive && !noHighlight)
-        ? 'border-components-option-card-option-selected-border bg-components-panel-bg'
-        : 'border-components-option-card-option-border bg-components-option-card-option-bg',
+        ? 'border-components-option-card-option-selected-border'
+        : 'border-components-option-card-option-border',
       disabled && 'opacity-50',
       className,
     )}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 8f289c784d..a632d5ff3a 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -102,6 +102,9 @@ const config = {
         'dataset-chunk-process-error-bg': 'var(--color-dataset-chunk-process-error-bg)',
         'dataset-chunk-detail-card-hover-bg': 'var(--color-dataset-chunk-detail-card-hover-bg)',
         'dataset-child-chunk-expand-btn-bg': 'var(--color-dataset-child-chunk-expand-btn-bg)',
+        'dataset-option-card-blue-gradient': 'var(--color-dataset-option-card-blue-gradient)',
+        'dataset-option-card-purple-gradient': 'var(--color-dataset-option-card-purple-gradient)',
+        'dataset-option-card-orange-gradient': 'var(--color-dataset-option-card-orange-gradient)',
       },
       lineClamp: {
         20: '20',
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 9a342897b2..8150069625 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -6,7 +6,7 @@ html[data-theme="dark"] {
   --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
   --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
   --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
-  --color-dataset-option-card-blue-gradient: linear-gradient(180deg, #24252E 0%, #1E1E21 100%);
-  --color-dataset-option-card-purple-gradient: linear-gradient(180deg, #25242E 0%, #1E1E21 100%);
-  --color-dataset-option-card-orange-gradient: linear-gradient(180deg, #2B2322 0%, #1E1E21 100%);
+  --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
+  --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
+  --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
 }
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index 2de9edda1e..13f208e728 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -6,7 +6,7 @@ html[data-theme="light"] {
   --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
   --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
   --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
-  --color-dataset-option-card-blue-gradient: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
-  --color-dataset-option-card-purple-gradient: linear-gradient(180deg, #F0EEFA 0%, #F9FAFB 100%);
-  --color-dataset-option-card-orange-gradient: linear-gradient(180deg, #F8F2EE 0%, #F9FAFB 100%);
+  --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #F2F4F7 0%, #F9FAFB 100%);
+  --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
+  --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
 }