From e206866908351bed16ad33d06c775373b089e129 Mon Sep 17 00:00:00 2001
From: nite-knite <nkCoding@gmail.com>
Date: Mon, 16 Dec 2024 17:15:47 +0800
Subject: [PATCH] feat: update UI for dataset creation step three

---
 .../billing/priority-label/index.tsx          | 11 ++++++++---
 .../create/embedding-process/index.tsx        |  2 +-
 .../datasets/create/step-three/index.tsx      | 19 +++++++++++--------
 .../documents/detail/metadata/index.tsx       |  2 +-
 web/i18n/en-US/dataset-creation.ts            |  2 +-
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/web/app/components/billing/priority-label/index.tsx b/web/app/components/billing/priority-label/index.tsx
index 75237e632a..6ecac4a79e 100644
--- a/web/app/components/billing/priority-label/index.tsx
+++ b/web/app/components/billing/priority-label/index.tsx
@@ -4,6 +4,7 @@ import {
   DocumentProcessingPriority,
   Plan,
 } from '../type'
+import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import {
   ZapFast,
@@ -11,7 +12,11 @@ import {
 } from '@/app/components/base/icons/src/vender/solid/general'
 import Tooltip from '@/app/components/base/tooltip'
 
-const PriorityLabel = () => {
+type PriorityLabelProps = {
+  className?: string
+}
+
+const PriorityLabel = ({ className }: PriorityLabelProps) => {
   const { t } = useTranslation()
   const { plan } = useProviderContext()
 
@@ -37,10 +42,10 @@ const PriorityLabel = () => {
         }
       </div>
     }>
-      <span className={`
+      <span className={cn(`
         shrink-0 flex items-center ml-1 px-1 h-[18px] rounded-[5px] border border-text-accent-secondary
         text-2xs font-medium text-text-accent-secondary
-      `}>
+      `, className)}>
         {
           plan.type === Plan.professional && (
             <ZapNarrow className='mr-0.5 size-3' />
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index b3ee0dc739..aca9fa502b 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -287,7 +287,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                 </div>
                 {
                   enableBilling && (
-                    <PriorityLabel />
+                    <PriorityLabel className='ml-0' />
                   )
                 }
               </div>
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index e2bc7f5881..9be35b2730 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -1,10 +1,9 @@
 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiBookOpenLine } from '@remixicon/react'
 import EmbeddingProcess from '../embedding-process'
 
-import s from './index.module.css'
-import cn from '@/utils/classnames'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import type { FullDocumentDetail, createDocumentResponse } from '@/models/datasets'
 import AppIcon from '@/app/components/base/app-icon'
@@ -58,13 +57,17 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
           />
         </div>
       </div>
-      {!isMobile && <div className={cn(s.sideTip)}>
-        <div className={s.tipCard}>
-          <span className={s.icon} />
-          <div className={s.title}>{t('datasetCreation.stepThree.sideTipTitle')}</div>
-          <div className={s.content}>{t('datasetCreation.stepThree.sideTipContent')}</div>
+      {!isMobile && (
+        <div className="shrink-0 pt-[88px] pr-8 text-xs">
+          <div className="flex flex-col gap-3 w-[328px] p-6 text-text-tertiary bg-background-section rounded-xl">
+            <div className="flex justify-center items-center size-10 bg-components-card-bg rounded-[10px] shadow-lg">
+              <RiBookOpenLine className="size-5 text-text-accent" />
+            </div>
+            <div className="text-base text-text-secondary">{t('datasetCreation.stepThree.sideTipTitle')}</div>
+            <div className="text-text-tertiary">{t('datasetCreation.stepThree.sideTipContent')}</div>
+          </div>
         </div>
-      </div>}
+      )}
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index b0599a8dbe..87e5a8bc8a 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -59,7 +59,7 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
 
   return (
     <div className={cn('flex items-center gap-1 py-0.5 min-h-5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
-      <div className={cn('w-[200px] text-text-tertiary font-medium overflow-hidden text-ellipsis whitespace-nowrap', editAlignTop && 'pt-1')}>{label}</div>
+      <div className={cn('w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap', editAlignTop && 'pt-1')}>{label}</div>
       <div className="grow flex items-center gap-1 text-text-secondary">
         {valueIcon}
         {!showEdit
diff --git a/web/i18n/en-US/dataset-creation.ts b/web/i18n/en-US/dataset-creation.ts
index a05a683d0f..7c2220acb6 100644
--- a/web/i18n/en-US/dataset-creation.ts
+++ b/web/i18n/en-US/dataset-creation.ts
@@ -175,7 +175,7 @@ const translation = {
   },
   stepThree: {
     creationTitle: '🎉 Knowledge created',
-    creationContent: 'We automatically named the Knowledge, you can modify it at any time',
+    creationContent: 'We automatically named the Knowledge, you can modify it at any time.',
     label: 'Knowledge name',
     additionTitle: '🎉 Document uploaded',
     additionP1: 'The document has been uploaded to the Knowledge',