mirror of
https://github.com/langgenius/dify.git
synced 2026-05-04 17:38:04 +08:00
feat: update dataset creation UI
This commit is contained in:
nite-knite
@ -14,24 +14,7 @@
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sourceItem.error {
|
||||
background: #FEE4E2;
|
||||
}
|
||||
.sourceItem.success {
|
||||
background: #D1FADF;
|
||||
}
|
||||
.progressbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: #B2CCFF;
|
||||
}
|
||||
.sourceItem .info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sourceItem .info .name {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
@ -55,13 +38,6 @@
|
||||
color: #05603A;
|
||||
}
|
||||
|
||||
|
||||
.cost {
|
||||
@apply flex justify-between items-center text-xs text-gray-700;
|
||||
}
|
||||
.embeddingStatus {
|
||||
@apply flex items-center justify-between text-gray-900 font-medium text-sm mr-2;
|
||||
}
|
||||
.commonIcon {
|
||||
@apply w-3 h-3 mr-1 inline-block align-middle;
|
||||
}
|
||||
@ -81,35 +57,33 @@
|
||||
@apply text-xs font-medium;
|
||||
}
|
||||
|
||||
.fileIcon {
|
||||
@apply w-4 h-4 mr-1 bg-center bg-no-repeat;
|
||||
.unknownFileIcon {
|
||||
background-image: url(../assets/unknown.svg);
|
||||
background-size: 16px;
|
||||
}
|
||||
.fileIcon.csv {
|
||||
.csv {
|
||||
background-image: url(../assets/csv.svg);
|
||||
}
|
||||
.fileIcon.docx {
|
||||
.docx {
|
||||
background-image: url(../assets/docx.svg);
|
||||
}
|
||||
.fileIcon.xlsx,
|
||||
.fileIcon.xls {
|
||||
.xlsx,
|
||||
.xls {
|
||||
background-image: url(../assets/xlsx.svg);
|
||||
}
|
||||
.fileIcon.pdf {
|
||||
.pdf {
|
||||
background-image: url(../assets/pdf.svg);
|
||||
}
|
||||
.fileIcon.html,
|
||||
.fileIcon.htm {
|
||||
.html,
|
||||
.htm {
|
||||
background-image: url(../assets/html.svg);
|
||||
}
|
||||
.fileIcon.md,
|
||||
.fileIcon.markdown {
|
||||
.md,
|
||||
.markdown {
|
||||
background-image: url(../assets/md.svg);
|
||||
}
|
||||
.fileIcon.txt {
|
||||
.txt {
|
||||
background-image: url(../assets/txt.svg);
|
||||
}
|
||||
.fileIcon.json {
|
||||
.json {
|
||||
background-image: url(../assets/json.svg);
|
||||
}
|
||||
|
||||
@ -6,13 +6,15 @@ import { useTranslation } from 'react-i18next'
|
||||
import { omit } from 'lodash-es'
|
||||
import { ArrowRightIcon } from '@heroicons/react/24/solid'
|
||||
import {
|
||||
RiCheckboxCircleFill,
|
||||
RiErrorWarningFill,
|
||||
RiLoader2Fill,
|
||||
RiTerminalBoxLine,
|
||||
} from '@remixicon/react'
|
||||
import Image from 'next/image'
|
||||
import { indexMethodIcon, retrievalIcon } from '../icons'
|
||||
import s from './index.module.css'
|
||||
import { IndexingType } from '../step-two'
|
||||
import DocumentFileIcon from '../../common/document-file-icon'
|
||||
import cn from '@/utils/classnames'
|
||||
import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
|
||||
import Button from '@/app/components/base/button'
|
||||
@ -25,7 +27,6 @@ import { Plan } from '@/app/components/billing/type'
|
||||
import { ZapFast } from '@/app/components/base/icons/src/vender/solid/general'
|
||||
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { sleep } from '@/utils'
|
||||
import { RETRIEVE_METHOD } from '@/types/app'
|
||||
|
||||
@ -83,7 +84,7 @@ const RuleDetail: FC<{
|
||||
return value
|
||||
}, [sourceData])
|
||||
|
||||
return <div className='flex flex-col pt-8 pb-10 first:mt-0'>
|
||||
return <div className='flex flex-col gap-1'>
|
||||
{Object.keys(segmentationRuleMap).map((field) => {
|
||||
return <FieldInfo
|
||||
key={field}
|
||||
@ -93,11 +94,12 @@ const RuleDetail: FC<{
|
||||
})}
|
||||
<FieldInfo
|
||||
label={t('datasetCreation.stepTwo.indexMode')}
|
||||
displayedValue={t(`datasetCreation.stepTwo.${indexingType}`) as string}
|
||||
displayedValue={t(`datasetCreation.stepTwo.${indexingType === IndexingType.ECONOMICAL ? 'economical' : 'qualified'}`) as string}
|
||||
valueIcon={
|
||||
<Image
|
||||
className='size-4'
|
||||
src={
|
||||
indexingType === 'economy'
|
||||
indexingType === IndexingType.ECONOMICAL
|
||||
? indexMethodIcon.economical
|
||||
: indexMethodIcon.high_quality
|
||||
}
|
||||
@ -107,15 +109,17 @@ const RuleDetail: FC<{
|
||||
/>
|
||||
<FieldInfo
|
||||
label={t('datasetSettings.form.retrievalSetting.title')}
|
||||
displayedValue={t(`datasetSettings.form.retrievalSetting.${retrievalMethod}`) as string}
|
||||
// displayedValue={t(`datasetSettings.form.retrievalSetting.${retrievalMethod}`) as string}
|
||||
displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'invertedIndex' : retrievalMethod}.title`) as string}
|
||||
valueIcon={
|
||||
<Image
|
||||
className='size-4'
|
||||
src={
|
||||
retrievalMethod === RETRIEVE_METHOD.fullText
|
||||
? retrievalIcon.fullText
|
||||
: RETRIEVE_METHOD.semantic
|
||||
? retrievalIcon.vector
|
||||
: retrievalIcon.hybrid
|
||||
: retrievalMethod === RETRIEVE_METHOD.hybrid
|
||||
? retrievalIcon.hybrid
|
||||
: retrievalIcon.vector
|
||||
}
|
||||
alt=''
|
||||
/>
|
||||
@ -167,6 +171,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setIsStopQuery(false)
|
||||
startQueryStatus()
|
||||
return () => {
|
||||
stopQueryStatus()
|
||||
@ -225,8 +230,8 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='h-5 flex items-center mb-5'>
|
||||
<div className={s.embeddingStatus}>
|
||||
<div className="h-5 flex items-center mb-3">
|
||||
<div className="flex items-center justify-between text-gray-900 font-medium text-sm mr-2">
|
||||
{isEmbedding && <div className='flex items-center'>
|
||||
<RiLoader2Fill className='size-4 mr-1 animate-spin' />
|
||||
{t('datasetDocuments.embedding.processing')}
|
||||
@ -247,68 +252,68 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className={s.progressContainer}>
|
||||
<div className="flex flex-col gap-0.5 pb-2">
|
||||
{indexingStatusBatchDetail.map(indexingStatusDetail => (
|
||||
<div key={indexingStatusDetail.id} className={cn(
|
||||
s.sourceItem,
|
||||
indexingStatusDetail.indexing_status === 'error' && s.error,
|
||||
indexingStatusDetail.indexing_status === 'completed' && s.success,
|
||||
'relative h-[26px] bg-components-progress-bar-bg rounded-md overflow-hidden',
|
||||
indexingStatusDetail.indexing_status === 'error' && 'bg-state-destructive-hover-alt',
|
||||
// indexingStatusDetail.indexing_status === 'completed' && 's.success',
|
||||
)}>
|
||||
{isSourceEmbedding(indexingStatusDetail) && (
|
||||
<div className={s.progressbar} style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
|
||||
<div className="absolute top-0 left-0 h-full min-w-0.5 bg-components-progress-bar-progress border-r-[2px] border-r-components-progress-bar-progress-highlight" style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
|
||||
)}
|
||||
<div className={`${s.info} grow`}>
|
||||
<div className="flex gap-1 pl-[6px] pr-2 h-full items-center z-[1]">
|
||||
{getSourceType(indexingStatusDetail.id) === DataSourceType.FILE && (
|
||||
<div className={cn(s.fileIcon, s[getFileType(getSourceName(indexingStatusDetail.id))])} />
|
||||
// <div className={cn(
|
||||
// 'shrink-0 marker:size-4 bg-center bg-no-repeat bg-contain',
|
||||
// s[getFileType(getSourceName(indexingStatusDetail.id))] || s.unknownFileIcon,
|
||||
// )} />
|
||||
<DocumentFileIcon
|
||||
className="shrink-0 size-4"
|
||||
name={getSourceName(indexingStatusDetail.id)}
|
||||
extension={getFileType(getSourceName(indexingStatusDetail.id))}
|
||||
/>
|
||||
)}
|
||||
{getSourceType(indexingStatusDetail.id) === DataSourceType.NOTION && (
|
||||
<NotionIcon
|
||||
className='shrink-0 mr-1'
|
||||
className='shrink-0'
|
||||
type='page'
|
||||
src={getIcon(indexingStatusDetail.id)}
|
||||
/>
|
||||
)}
|
||||
<div className={`${s.name} truncate`} title={getSourceName(indexingStatusDetail.id)}>{getSourceName(indexingStatusDetail.id)}</div>
|
||||
{
|
||||
enableBilling && (
|
||||
<PriorityLabel />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className='shrink-0'>
|
||||
{isSourceEmbedding(indexingStatusDetail) && (
|
||||
<div className={s.percent}>{`${getSourcePercent(indexingStatusDetail)}%`}</div>
|
||||
)}
|
||||
{indexingStatusDetail.indexing_status === 'error' && indexingStatusDetail.error && (
|
||||
<Tooltip
|
||||
popupContent={(
|
||||
<div className='max-w-[400px]'>
|
||||
{indexingStatusDetail.error}
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className={cn(s.percent, s.error, 'flex items-center')}>
|
||||
Error
|
||||
<RiErrorWarningFill className='ml-1 w-4 h-4' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
{indexingStatusDetail.indexing_status === 'error' && !indexingStatusDetail.error && (
|
||||
<div className={cn(s.percent, s.error, 'flex items-center')}>
|
||||
Error
|
||||
<div className="grow flex items-center gap-1" title={getSourceName(indexingStatusDetail.id)}>
|
||||
<div className="text-xs truncate">
|
||||
{getSourceName(indexingStatusDetail.id)}
|
||||
</div>
|
||||
{
|
||||
enableBilling && (
|
||||
<PriorityLabel />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{isSourceEmbedding(indexingStatusDetail) && (
|
||||
<div className="shrink-0 text-xs">{`${getSourcePercent(indexingStatusDetail)}%`}</div>
|
||||
)}
|
||||
{indexingStatusDetail.indexing_status === 'error' && (
|
||||
<>
|
||||
<span className="flex items-center max-w-[200px] text-xs text-text-destructive truncate" title={indexingStatusDetail.error || ''}>
|
||||
{indexingStatusDetail.error || 'Error'}
|
||||
</span>
|
||||
<RiErrorWarningFill className='shrink-0 size-4 text-text-destructive' />
|
||||
</>
|
||||
)}
|
||||
{indexingStatusDetail.indexing_status === 'completed' && (
|
||||
<div className={cn(s.percent, s.success)}>100%</div>
|
||||
<RiCheckboxCircleFill className='shrink-0 size-4' />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<RuleDetail sourceData={ruleDetail} indexingType={
|
||||
indexingType
|
||||
}
|
||||
retrievalMethod={retrievalMethod}
|
||||
<hr className="my-3 h-[1px] bg-divider-subtle border-0" />
|
||||
<RuleDetail
|
||||
sourceData={ruleDetail}
|
||||
indexingType={indexingType}
|
||||
retrievalMethod={retrievalMethod}
|
||||
/>
|
||||
<div className='flex items-center gap-2 my-10'>
|
||||
<Button className='w-fit' onClick={navToApiDocs}>
|
||||
|
||||
@ -1,58 +1,3 @@
|
||||
.fileUploader {
|
||||
@apply mb-6;
|
||||
}
|
||||
|
||||
.fileUploader .title {
|
||||
@apply mb-2;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.fileUploader .tip {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.uploader {
|
||||
@apply relative box-border flex justify-center items-center mb-2 p-3;
|
||||
flex-direction: column;
|
||||
max-width: 640px;
|
||||
min-height: 80px;
|
||||
border-radius: 12px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.uploader .draggingCover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.uploader .uploadIcon {
|
||||
content: '';
|
||||
display: block;
|
||||
margin-right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: center no-repeat url(../assets/upload-cloud-01.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.uploader .browse {
|
||||
@apply pl-1 cursor-pointer;
|
||||
color: #155eef;
|
||||
}
|
||||
|
||||
.fileList {
|
||||
@apply space-y-2;
|
||||
}
|
||||
|
||||
.file {
|
||||
@apply box-border relative flex items-center justify-between;
|
||||
padding: 8px 12px 8px 8px;
|
||||
|
||||
@ -3,11 +3,12 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import useSWR from 'swr'
|
||||
import classNames from 'classnames'
|
||||
import s from './index.module.css'
|
||||
import { RiDeleteBinLine, RiUploadCloud2Line } from '@remixicon/react'
|
||||
import DocumentFileIcon from '../../common/document-file-icon'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { CustomFile as File, FileItem } from '@/models/datasets'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
import SimplePieChart from '@/app/components/base/simple-pie-chart'
|
||||
|
||||
import { upload } from '@/service/base'
|
||||
import { fetchFileUploadConfig } from '@/service/common'
|
||||
@ -15,6 +16,8 @@ import { fetchSupportFileTypes } from '@/service/datasets'
|
||||
import I18n from '@/context/i18n'
|
||||
import { LanguagesSupported } from '@/i18n/language'
|
||||
import { IS_CE_EDITION } from '@/config'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { Theme } from '@/types/app'
|
||||
|
||||
const FILES_NUMBER_LIMIT = 20
|
||||
|
||||
@ -223,6 +226,9 @@ const FileUploader = ({
|
||||
initialUpload(files.filter(isValid))
|
||||
}, [isValid, initialUpload])
|
||||
|
||||
const { theme } = useAppContext()
|
||||
const chartColor = useMemo(() => theme === Theme.dark ? '#5289ff' : '#296dff', [theme])
|
||||
|
||||
useEffect(() => {
|
||||
dropRef.current?.addEventListener('dragenter', handleDragEnter)
|
||||
dropRef.current?.addEventListener('dragover', handleDragOver)
|
||||
@ -237,12 +243,12 @@ const FileUploader = ({
|
||||
}, [handleDrop])
|
||||
|
||||
return (
|
||||
<div className={s.fileUploader}>
|
||||
<div className="mb-5">
|
||||
{!hideUpload && (
|
||||
<input
|
||||
ref={fileUploader}
|
||||
id="fileUploader"
|
||||
style={{ display: 'none' }}
|
||||
className="hidden"
|
||||
type="file"
|
||||
multiple={!notSupportBatchUpload}
|
||||
accept={ACCEPTS.join(',')}
|
||||
@ -250,52 +256,66 @@ const FileUploader = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={cn(s.title, titleClassName, 'text-text-secondary')}>{t('datasetCreation.stepOne.uploader.title')}</div>
|
||||
{!hideUpload && (
|
||||
<div className={cn('text-text-tertiary text-sm font-semibold leading-6 mb-1', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
|
||||
|
||||
<div ref={dropRef} className={cn(s.uploader, dragging && '', 'bg-components-dropzone-bg border border-components-dropzone-border')}>
|
||||
<div className='flex justify-center items-center min-h-6 mb-2'>
|
||||
<span className={classNames(s.uploadIcon, 'text-text-tertiary')} />
|
||||
<span className='text-text-secondary'>
|
||||
{!hideUpload && (
|
||||
<div ref={dropRef} className={cn('relative box-border flex flex-col justify-center items-center gap-1 mb-2 px-4 py-3 max-w-[640px] min-h-20 leading-4 text-xs text-text-tertiary bg-components-dropzone-bg border border-dashed border-components-dropzone-border rounded-xl', dragging && 'bg-components-dropzone-bg-accent border-components-dropzone-border-accent')}>
|
||||
<div className="flex justify-center items-center min-h-5 text-sm leading-4 text-text-secondary">
|
||||
<RiUploadCloud2Line className='mr-2 size-5' />
|
||||
<span>
|
||||
{t('datasetCreation.stepOne.uploader.button')}
|
||||
<label className={s.browse} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
|
||||
<label className="ml-1 text-text-accent cursor-pointer" onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
|
||||
</span>
|
||||
</div>
|
||||
<div className={classNames(s.tip, 'text-text-tertiary')}>{t('datasetCreation.stepOne.uploader.tip', {
|
||||
<div>{t('datasetCreation.stepOne.uploader.tip', {
|
||||
size: fileUploadConfig.file_size_limit,
|
||||
supportTypes: supportTypesShowNames,
|
||||
})}</div>
|
||||
{dragging && <div ref={dragRef} className={s.draggingCover} />}
|
||||
{dragging && <div ref={dragRef} className='absolute top-0 left-0 w-full h-full' />}
|
||||
</div>
|
||||
)}
|
||||
<div className={s.fileList}>
|
||||
<div className='space-y-1 max-w-[640px] cursor-default'>
|
||||
|
||||
{fileList.map((fileItem, index) => (
|
||||
<div
|
||||
key={`${fileItem.fileID}-${index}`}
|
||||
onClick={() => fileItem.file?.id && onPreview(fileItem.file)}
|
||||
className={cn(
|
||||
s.file,
|
||||
fileItem.progress < 100 && s.uploading,
|
||||
'flex items-center h-12 bg-components-panel-on-panel-item-bg text-xs leading-3 text-text-tertiary border border-components-panel-border rounded-lg shadow-xs',
|
||||
// 'border-state-destructive-border bg-state-destructive-hover',
|
||||
)}
|
||||
>
|
||||
{fileItem.progress < 100 && (
|
||||
<div className={s.progressbar} style={{ width: `${fileItem.progress}%` }} />
|
||||
)}
|
||||
<div className={s.fileInfo}>
|
||||
<div className={cn(s.fileIcon, s[getFileType(fileItem.file)])} />
|
||||
<div className={s.filename}>{fileItem.file.name}</div>
|
||||
<div className={s.size}>{getFileSize(fileItem.file.size)}</div>
|
||||
<div className="shrink-0 flex justify-center items-center w-12">
|
||||
<DocumentFileIcon
|
||||
className="shrink-0 size-6"
|
||||
name={fileItem.file.name}
|
||||
extension={getFileType(fileItem.file)}
|
||||
/>
|
||||
</div>
|
||||
<div className={s.actionWrapper}>
|
||||
<div className="grow shrink flex flex-col gap-0.5 pr-8">
|
||||
<div className="text-sm leading-4 text-text-secondary w-full whitespace-nowrap text-ellipsis overflow-hidden">{fileItem.file.name}</div>
|
||||
<div className="w-full leading-3 truncate text-text-tertiary">
|
||||
<span className='uppercase'>{getFileType(fileItem.file)}</span>
|
||||
<span className='px-1 text-text-quaternary'>·</span>
|
||||
<span>{getFileSize(fileItem.file.size)}</span>
|
||||
{/* <span className='px-1 text-text-quaternary'>·</span>
|
||||
<span>10k characters</span> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 flex items-center justify-end gap-1 pr-3 w-16">
|
||||
{/* <span className="flex justify-center items-center w-6 h-6 cursor-pointer">
|
||||
<RiErrorWarningFill className='size-4 text-text-warning' />
|
||||
</span> */}
|
||||
{(fileItem.progress < 100 && fileItem.progress >= 0) && (
|
||||
<div className={s.percent}>{`${fileItem.progress}%`}</div>
|
||||
)}
|
||||
{fileItem.progress === 100 && (
|
||||
<div className={s.remove} onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
removeFile(fileItem.fileID)
|
||||
}} />
|
||||
// <div className={s.percent}>{`${fileItem.progress}%`}</div>
|
||||
<SimplePieChart percentage={fileItem.progress} stroke={chartColor} fill={chartColor} animationDuration={0} />
|
||||
)}
|
||||
<span className="flex justify-center items-center w-6 h-6 cursor-pointer" onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
removeFile(fileItem.fileID)
|
||||
}}>
|
||||
<RiDeleteBinLine className='size-4 text-text-tertiary' />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -88,23 +88,6 @@
|
||||
background-color: #eaecf0;
|
||||
}
|
||||
|
||||
.OtherCreationOption {
|
||||
@apply flex items-center cursor-pointer;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #155EEF;
|
||||
}
|
||||
.OtherCreationOption::before {
|
||||
content: '';
|
||||
display: block;
|
||||
margin-right: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center no-repeat url(../assets/folder-plus.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.notionConnectionTip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowRightLine, RiFolder6Line } from '@remixicon/react'
|
||||
import FilePreview from '../file-preview'
|
||||
import FileUploader from '../file-uploader'
|
||||
import NotionPagePreview from '../notion-page-preview'
|
||||
@ -200,7 +201,15 @@ const StepOne = ({
|
||||
<VectorSpaceFull />
|
||||
</div>
|
||||
)}
|
||||
<Button disabled={nextDisabled} 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={!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 && (
|
||||
@ -249,7 +258,10 @@ const StepOne = ({
|
||||
{!datasetId && (
|
||||
<>
|
||||
<div className={s.dividerLine} />
|
||||
<div onClick={modalShowHandle} className={s.OtherCreationOption}>{t('datasetCreation.stepOne.emptyDatasetCreation')}</div>
|
||||
<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>
|
||||
|
||||
@ -24,29 +24,29 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
|
||||
const isMobile = media === MediaType.mobile
|
||||
|
||||
return (
|
||||
<div className='flex w-full max-h-full h-full overflow-y-auto'>
|
||||
<div className={'h-full w-full overflow-y-scroll px-6 sm:px-16'}>
|
||||
<div className='max-w-[636px]'>
|
||||
<div className="flex justify-center w-full max-h-full h-full overflow-y-auto">
|
||||
<div className="grow shrink-0 h-full max-w-[960px] overflow-y-scroll px-14 sm:px-16">
|
||||
<div className="mx-auto max-w-[640px]">
|
||||
{!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='flex gap-4'>
|
||||
<AppIcon {...creationCache?.dataset} className='size-14' />
|
||||
<div className='w-full'>
|
||||
<div className={s.label}>{t('datasetCreation.stepThree.label')}</div>
|
||||
<div className={s.datasetName}>{datasetName || creationCache?.dataset?.name}</div>
|
||||
<div className="pt-10">
|
||||
<div className="mb-1 text-xl leading-[22px] font-semibold text-text-primary">{t('datasetCreation.stepThree.creationTitle')}</div>
|
||||
<div className="mb-7 text-[13px] leading-4 text-text-tertiary">{t('datasetCreation.stepThree.creationContent')}</div>
|
||||
<div className="flex gap-4">
|
||||
<AppIcon {...creationCache?.dataset} className="size-14 text-2xl self-center" />
|
||||
<div className="grow flex flex-col gap-1">
|
||||
<div className="text-[13px] leading-6 font-semibold">{t('datasetCreation.stepThree.label')}</div>
|
||||
<div className="w-full px-3 py-2 text-[13px] leading-4 bg-components-input-bg-normal rounded-lg truncate">{datasetName || creationCache?.dataset?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.dividerLine} />
|
||||
<hr className="my-6 h-[1px] bg-divider-subtle border-0" />
|
||||
</>
|
||||
)}
|
||||
{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 className="pt-10">
|
||||
<div className="mb-1 text-xl leading-[22px] font-semibold text-text-primary">{t('datasetCreation.stepThree.additionTitle')}</div>
|
||||
<div className="mb-7 text-[13px] leading-4 text-text-tertiary">{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
|
||||
</div>
|
||||
)}
|
||||
<EmbeddingProcess
|
||||
|
||||
Reference in New Issue
Block a user