Initial commit

web/app/components/datasets/create/step-three/index.module.css

@@ -0,0 +1,75 @@
+.creationInfo {
+  padding-top: 42px;
+}
+.creationInfo .title {
+  @apply mb-2;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 30px;
+  color: #101828;
+}
+.creationInfo .content {
+  margin-bottom: 44px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #667085;
+}
+.creationInfo .label {
+  @apply mb-2;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #101828;
+}
+.datasetName {
+  padding: 8px 12px;
+  background: #F9FAFB;
+  border-radius: 8px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #101828;
+  word-break: break-all;
+}
+
+.dividerLine {
+  margin: 24px 0;
+  height: 1px;
+  background-color: #eaecf0;
+}
+
+.sideTip {
+  @apply flex flex-col items-center shrink-0 ;
+  padding-top: 108px;
+  width: 524px;
+  border-left: 0.5px solid #F2F4F7;
+}
+.tipCard {
+  @apply flex flex-col items-start p-6;
+  width: 320px;
+  background-color: #F9FAFB;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  border-radius: 12px;
+}
+.tipCard .icon {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #EAECF0;
+  border-radius: 6px;
+  background: center no-repeat url(../assets/book-open-01.svg);
+  background-size: 16px;
+}
+.tipCard .title {
+  margin: 12px 0;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: #344054;
+}
+.tipCard .content {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #344054;
+}

web/app/components/datasets/create/step-three/index.tsx

@@ -0,0 +1,61 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import type { createDocumentResponse } from '@/models/datasets'
+import EmbeddingDetail from '../../documents/detail/embedding'
+
+import cn from 'classnames'
+import s from './index.module.css'
+
+type StepThreeProps = {
+  datasetId?: string,
+  datasetName?: string,
+  indexingType?: string,
+  creationCache?: createDocumentResponse
+}
+
+const StepThree = ({ datasetId, datasetName, indexingType, creationCache }: StepThreeProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex w-full h-full'>
+      <div className={'h-full w-full overflow-y-scroll px-16'}>
+        <div className='max-w-[636px]'>
+          {!datasetId && (
+            <>
+              <div className={s.creationInfo}>
+                <div className={s.title}>{t('datasetCreation.stepThree.creationTitle')}</div>
+                <div className={s.content}>{t('datasetCreation.stepThree.creationContent')}</div>
+                <div className={s.label}>{t('datasetCreation.stepThree.label')}</div>
+                <div className={s.datasetName}>{datasetName || creationCache?.dataset?.name}</div>
+              </div>
+              <div className={s.dividerLine}/>
+            </>
+          )}
+          {datasetId && (
+            <div className={s.creationInfo}>
+              <div className={s.title}>{t('datasetCreation.stepThree.additionTitle')}</div>
+              <div className={s.content}>{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
+            </div>
+          )}
+          <EmbeddingDetail
+            datasetId={datasetId || creationCache?.dataset?.id}
+            documentId={creationCache?.document.id}
+            indexingType={indexingType || creationCache?.dataset?.indexing_technique}
+            stopPosition='bottom'
+            detail={creationCache?.document}
+          />
+        </div>
+      </div>
+      <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>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default StepThree;