From a01a28997ed989bab60f69387846785dd334b4b4 Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Mon, 16 Dec 2024 17:54:48 +0800
Subject: [PATCH] fix: update datasource Step1 style

---
 .../create/file-preview/index.module.css      |   2 +-
 .../datasets/create/step-one/index.module.css |  17 +-
 .../datasets/create/step-one/index.tsx        | 302 +++++++++---------
 .../datasets/create/stepper/index.tsx         |   2 +-
 .../datasets/create/stepper/step.tsx          |  13 +-
 .../datasets/create/top-bar/index.tsx         |   4 +-
 web/i18n/en-US/app.ts                         |   2 +-
 web/i18n/en-US/dataset-creation.ts            |  11 +-
 8 files changed, 185 insertions(+), 168 deletions(-)

diff --git a/web/app/components/datasets/create/file-preview/index.module.css b/web/app/components/datasets/create/file-preview/index.module.css
index d87522e6d0..2ddc73160b 100644
--- a/web/app/components/datasets/create/file-preview/index.module.css
+++ b/web/app/components/datasets/create/file-preview/index.module.css
@@ -1,6 +1,6 @@
 .filePreview {
     @apply flex flex-col border-l border-gray-200 shrink-0;
-    width: 528px;
+    width: 50%;
     background-color: #fcfcfd;
   }
   
diff --git a/web/app/components/datasets/create/step-one/index.module.css b/web/app/components/datasets/create/step-one/index.module.css
index a76e951d5d..811728315a 100644
--- a/web/app/components/datasets/create/step-one/index.module.css
+++ b/web/app/components/datasets/create/step-one/index.module.css
@@ -2,7 +2,7 @@
   position: sticky;
   top: 0;
   left: 0;
-  padding: 42px 64px 12px;
+  padding: 42px 64px 12px 0;
   font-weight: 600;
   font-size: 18px;
   line-height: 28px;
@@ -14,7 +14,7 @@
 }
 
 .dataSourceItem {
-  @apply box-border relative shrink-0 flex items-center mr-3 p-3 h-14 bg-white rounded-xl cursor-pointer;
+  @apply box-border relative grow shrink-0 flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   font-weight: 500;
@@ -22,27 +22,32 @@
   line-height: 20px;
   color: #101828;
 }
+
 .dataSourceItem:hover {
   background-color: #f5f8ff;
   border: 0.5px solid #B2CCFF;
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
+
 .dataSourceItem.active {
   background-color: #f5f8ff;
   border: 1.5px solid #528BFF;
   box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
 }
+
 .dataSourceItem.disabled {
   background-color: #f9fafb;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   cursor: default;
 }
+
 .dataSourceItem.disabled:hover {
   background-color: #f9fafb;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
 }
+
 .comingTag {
   @apply flex justify-center items-center bg-white;
   position: absolute;
@@ -57,6 +62,7 @@
   line-height: 18px;
   color: #444CE7;
 }
+
 .datasetIcon {
   @apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
   background-color: #F5FAFF;
@@ -64,15 +70,18 @@
   background-size: 16px;
   border: 0.5px solid #D1E9FF;
 }
+
 .dataSourceItem:active .datasetIcon,
 .dataSourceItem:hover .datasetIcon {
   background-color: #F5F8FF;
   border: 0.5px solid #E0EAFF;
 }
+
 .datasetIcon.notion {
   background-image: url(../assets/notion.svg);
   background-size: 20px;
 }
+
 .datasetIcon.web {
   background-image: url(../assets/web.svg);
 }
@@ -119,6 +128,7 @@
   line-height: 24px;
   color: #374151;
 }
+
 .notionConnectionTip .title::after {
   content: '';
   position: absolute;
@@ -129,6 +139,7 @@
   background: center no-repeat url(../assets/Icon-3-dots.svg);
   background-size: contain;
 }
+
 .notionConnectionTip .tip {
   margin-bottom: 20px;
   font-style: normal;
@@ -136,4 +147,4 @@
   font-size: 13px;
   line-height: 18px;
   color: #6B7280;
-}
+}
\ No newline at end of file
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 5c492c7902..7793fcfafc 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -127,161 +127,163 @@ const StepOne = ({
 
   return (
     <div className='flex w-full h-full'>
-      <div className='grow overflow-y-auto relative'>
-        {
-          shouldShowDataSourceTypeList && (
-            <div className={classNames(s.stepHeader, 'text-text-secondary')}>{t('datasetCreation.steps.one')}</div>
-          )
-        }
-        <div className={classNames(s.form)}>
-          {
-            shouldShowDataSourceTypeList && (
-              <div className='flex items-center mb-8 flex-wrap gap-y-4'>
-                <div
-                  className={cn(
-                    s.dataSourceItem,
-                    dataSourceType === DataSourceType.FILE && s.active,
-                    dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
-                  )}
-                  onClick={() => {
-                    if (dataSourceTypeDisable)
-                      return
-                    changeType(DataSourceType.FILE)
-                    hideFilePreview()
-                    hideNotionPagePreview()
-                  }}
-                >
-                  <span className={cn(s.datasetIcon)} />
-                  {t('datasetCreation.stepOne.dataSourceType.file')}
-                </div>
-                <div
-                  className={cn(
-                    s.dataSourceItem,
-                    dataSourceType === DataSourceType.NOTION && s.active,
-                    dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
-                  )}
-                  onClick={() => {
-                    if (dataSourceTypeDisable)
-                      return
-                    changeType(DataSourceType.NOTION)
-                    hideFilePreview()
-                    hideNotionPagePreview()
-                  }}
-                >
-                  <span className={cn(s.datasetIcon, s.notion)} />
-                  {t('datasetCreation.stepOne.dataSourceType.notion')}
-                </div>
-                <div
-                  className={cn(
-                    s.dataSourceItem,
-                    dataSourceType === DataSourceType.WEB && s.active,
-                    dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
-                  )}
-                  onClick={() => changeType(DataSourceType.WEB)}
-                >
-                  <span className={cn(s.datasetIcon, s.web)} />
-                  {t('datasetCreation.stepOne.dataSourceType.web')}
-                </div>
-              </div>
-            )
-          }
-          {dataSourceType === DataSourceType.FILE && (
-            <>
-              <FileUploader
-                fileList={files}
-                titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
-                prepareFileList={updateFileList}
-                onFileListUpdate={updateFileList}
-                onFileUpdate={updateFile}
-                onPreview={updateCurrentFile}
-                notSupportBatchUpload={notSupportBatchUpload}
-              />
-              {isShowVectorSpaceFull && (
-                <div className='max-w-[640px] mb-4'>
-                  <VectorSpaceFull />
-                </div>
-              )}
-              <div className="flex justify-end gap-2 max-w-[640px]">
-                {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
-                <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" />
-                  </span>
-                </Button>
-              </div>
-            </>
-          )}
-          {dataSourceType === DataSourceType.NOTION && (
-            <>
-              {!hasConnection && <NotionConnector onSetting={onSetting} />}
-              {hasConnection && (
-                <>
-                  <div className='mb-8 w-[640px]'>
-                    <NotionPageSelector
-                      value={notionPages.map(page => page.page_id)}
-                      onSelect={updateNotionPages}
-                      onPreview={updateCurrentPage}
-                    />
+      <div className='w-1/2 overflow-y-auto relative'>
+        <div className='flex justify-end'>
+          <div className={classNames(s.form)}>
+            {
+              shouldShowDataSourceTypeList && (
+                <div className={classNames(s.stepHeader, 'text-text-secondary')}>{t('datasetCreation.steps.one')}</div>
+              )
+            }
+            {
+              shouldShowDataSourceTypeList && (
+                <div className='flex items-center mb-8 flex-wrap gap-4'>
+                  <div
+                    className={cn(
+                      s.dataSourceItem,
+                      dataSourceType === DataSourceType.FILE && s.active,
+                      dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
+                    )}
+                    onClick={() => {
+                      if (dataSourceTypeDisable)
+                        return
+                      changeType(DataSourceType.FILE)
+                      hideFilePreview()
+                      hideNotionPagePreview()
+                    }}
+                  >
+                    <span className={cn(s.datasetIcon)} />
+                    {t('datasetCreation.stepOne.dataSourceType.file')}
                   </div>
-                  {isShowVectorSpaceFull && (
-                    <div className='max-w-[640px] mb-4'>
-                      <VectorSpaceFull />
-                    </div>
-                  )}
-                  <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
+                    className={cn(
+                      s.dataSourceItem,
+                      dataSourceType === DataSourceType.NOTION && s.active,
+                      dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
+                    )}
+                    onClick={() => {
+                      if (dataSourceTypeDisable)
+                        return
+                      changeType(DataSourceType.NOTION)
+                      hideFilePreview()
+                      hideNotionPagePreview()
+                    }}
+                  >
+                    <span className={cn(s.datasetIcon, s.notion)} />
+                    {t('datasetCreation.stepOne.dataSourceType.notion')}
                   </div>
-                </>
-              )}
-            </>
-          )}
-          {dataSourceType === DataSourceType.WEB && (
-            <>
-              <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
-                <Website
-                  onPreview={setCurrentWebsite}
-                  checkedCrawlResult={websitePages}
-                  onCheckedCrawlResultChange={updateWebsitePages}
-                  onCrawlProviderChange={onWebsiteCrawlProviderChange}
-                  onJobIdChange={onWebsiteCrawlJobIdChange}
-                  crawlOptions={crawlOptions}
-                  onCrawlOptionsChange={onCrawlOptionsChange}
+                  <div
+                    className={cn(
+                      s.dataSourceItem,
+                      dataSourceType === DataSourceType.WEB && s.active,
+                      dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
+                    )}
+                    onClick={() => changeType(DataSourceType.WEB)}
+                  >
+                    <span className={cn(s.datasetIcon, s.web)} />
+                    {t('datasetCreation.stepOne.dataSourceType.web')}
+                  </div>
+                </div>
+              )
+            }
+            {dataSourceType === DataSourceType.FILE && (
+              <>
+                <FileUploader
+                  fileList={files}
+                  titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
+                  prepareFileList={updateFileList}
+                  onFileListUpdate={updateFileList}
+                  onFileUpdate={updateFile}
+                  onPreview={updateCurrentFile}
+                  notSupportBatchUpload={notSupportBatchUpload}
                 />
-              </div>
-              {isShowVectorSpaceFull && (
-                <div className='max-w-[640px] mb-4'>
-                  <VectorSpaceFull />
+                {isShowVectorSpaceFull && (
+                  <div className='max-w-[640px] mb-4'>
+                    <VectorSpaceFull />
+                  </div>
+                )}
+                <div className="flex justify-end gap-2 max-w-[640px]">
+                  {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                  <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" />
+                    </span>
+                  </Button>
                 </div>
-              )}
-              <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 && (
-            <>
-              <div className={s.dividerLine} />
-              <span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
-                <RiFolder6Line className="size-4 mr-1" />
-                {t('datasetCreation.stepOne.emptyDatasetCreation')}
-              </span>
-            </>
-          )}
+              </>
+            )}
+            {dataSourceType === DataSourceType.NOTION && (
+              <>
+                {!hasConnection && <NotionConnector onSetting={onSetting} />}
+                {hasConnection && (
+                  <>
+                    <div className='mb-8 w-[640px]'>
+                      <NotionPageSelector
+                        value={notionPages.map(page => page.page_id)}
+                        onSelect={updateNotionPages}
+                        onPreview={updateCurrentPage}
+                      />
+                    </div>
+                    {isShowVectorSpaceFull && (
+                      <div className='max-w-[640px] mb-4'>
+                        <VectorSpaceFull />
+                      </div>
+                    )}
+                    <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>
+                  </>
+                )}
+              </>
+            )}
+            {dataSourceType === DataSourceType.WEB && (
+              <>
+                <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
+                  <Website
+                    onPreview={setCurrentWebsite}
+                    checkedCrawlResult={websitePages}
+                    onCheckedCrawlResultChange={updateWebsitePages}
+                    onCrawlProviderChange={onWebsiteCrawlProviderChange}
+                    onJobIdChange={onWebsiteCrawlJobIdChange}
+                    crawlOptions={crawlOptions}
+                    onCrawlOptionsChange={onCrawlOptionsChange}
+                  />
+                </div>
+                {isShowVectorSpaceFull && (
+                  <div className='max-w-[640px] mb-4'>
+                    <VectorSpaceFull />
+                  </div>
+                )}
+                <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 && (
+              <>
+                <div className={s.dividerLine} />
+                <span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
+                  <RiFolder6Line className="size-4 mr-1" />
+                  {t('datasetCreation.stepOne.emptyDatasetCreation')}
+                </span>
+              </>
+            )}
+          </div>
+          <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
         </div>
-        <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
       </div>
       {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
       {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
diff --git a/web/app/components/datasets/create/stepper/index.tsx b/web/app/components/datasets/create/stepper/index.tsx
index 30cf9bd0e4..317c1a76ee 100644
--- a/web/app/components/datasets/create/stepper/index.tsx
+++ b/web/app/components/datasets/create/stepper/index.tsx
@@ -19,7 +19,7 @@ export const Stepper: FC<StepperProps> = (props) => {
             activeIndex={activeIndex}
             index={index}
           />
-          {!isLast && <div className="w-4 h-px bg-text-quaternary" />}
+          {!isLast && <div className='w-4 h-px bg-divider-deep' />}
         </Fragment>
       )
     })}
diff --git a/web/app/components/datasets/create/stepper/step.tsx b/web/app/components/datasets/create/stepper/step.tsx
index 69f524ea66..c230de1a6e 100644
--- a/web/app/components/datasets/create/stepper/step.tsx
+++ b/web/app/components/datasets/create/stepper/step.tsx
@@ -21,27 +21,26 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
       isActive
         ? 'bg-state-accent-solid'
         : !isDisabled
-          ? 'border border-text-tertiary'
+          ? 'border border-text-quaternary'
           : 'border border-divider-deep',
     )}>
       <div className={classNames(
-        'text-center text-[10px] font-semibold uppercase leading-3',
+        'text-center system-2xs-semibold-uppercase',
         isActive
           ? 'text-text-primary-on-surface'
           : !isDisabled
             ? 'text-text-tertiary'
-            : 'text-text-tertiary opacity-30',
+            : 'text-text-quaternary',
       )}>
         {label}
       </div>
     </div>
-    <div className={classNames(
-      ' text-xs font-medium uppercase leading-none',
+    <div className={classNames('system-xs-medium-uppercase',
       isActive
-        ? 'text-text-accent'
+        ? 'text-text-accent system-xs-semibold-uppercase'
         : !isDisabled
           ? 'text-text-tertiary'
-          : 'text-text-tertiary opacity-30',
+          : 'text-text-quaternary',
     )}>{name}</div>
   </div>
 }
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index 74be673efd..1488d57b8d 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -18,10 +18,10 @@ const STEP_T_MAP: Record<number, string> = {
 export const Topbar: FC<TopbarProps> = (props) => {
   const { className, ...rest } = props
   const { t } = useTranslation()
-  return <div className={classNames('flex items-center justify-between relative border-b border-b-divider-subtle', className)}>
+  return <div className={classNames('flex h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
     <Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
       <RiArrowLeftLine className='size-4 mr-2 text-text-primary' />
-      <p className="text-text-primary text-[13px] font-semibold uppercase leading-none">
+      <p className="text-text-primary system-sm-semibold-uppercase">
         {t('datasetCreation.steps.header.creation')}
       </p>
     </Link>
diff --git a/web/i18n/en-US/app.ts b/web/i18n/en-US/app.ts
index 704f37bf52..4978bed69b 100644
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@@ -98,7 +98,7 @@ const translation = {
   removeOriginal: 'Delete the original app',
   switchStart: 'Start switch',
   typeSelector: {
-    all: 'ALL Types',
+    all: 'All Types',
     chatbot: 'Chatbot',
     agent: 'Agent',
     workflow: 'Workflow',
diff --git a/web/i18n/en-US/dataset-creation.ts b/web/i18n/en-US/dataset-creation.ts
index a05a683d0f..1f6e257648 100644
--- a/web/i18n/en-US/dataset-creation.ts
+++ b/web/i18n/en-US/dataset-creation.ts
@@ -4,9 +4,9 @@ const translation = {
       creation: 'Create Knowledge',
       update: 'Add data',
     },
-    one: 'Choose data source',
-    two: 'Text Preprocessing and Cleaning',
-    three: 'Execute and finish',
+    one: 'Data Source',
+    two: 'Document Processing',
+    three: 'Execute & Finish',
   },
   error: {
     unavailable: 'This Knowledge is not available',
@@ -190,6 +190,11 @@ const translation = {
     modelButtonConfirm: 'Confirm',
     modelButtonCancel: 'Cancel',
   },
+  otherDataSource: {
+    title: 'Connect to other data sources?',
+    description: 'Currently, Dify\'s knowledge base only has limited data sources. Contributing a data source to the Dify knowledge base is a fantastic way to help enhance the platform\'s flexibility and power for all users. Our contribution guide makes it easy to get started. Please click on the link below to learn more.',
+    learnMore: 'Learn more',
+  },
 }
 
 export default translation