hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-23 17:55:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/app/components/datasets/create/embedding-process/index.tsx
View File

@@ -252,10 +252,10 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
return (
<>
<div className="h-5 flex items-center mb-3">
<div className="flex items-center justify-between text-text-secondary font-medium text-sm mr-2">
<div className="mb-3 flex h-5 items-center">
<div className="mr-2 flex items-center justify-between text-sm font-medium text-text-secondary">
{isEmbedding && <div className='flex items-center'>
<RiLoader2Fill className='size-4 mr-1 animate-spin text-text-secondary' />
<RiLoader2Fill className='mr-1 size-4 animate-spin text-text-secondary' />
{t('datasetDocuments.embedding.processing')}
</div>}
{isEmbeddingCompleted && t('datasetDocuments.embedding.completed')}
@@ -263,11 +263,11 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
</div>
{
enableBilling && plan.type !== Plan.team && (
<div className='flex items-center mb-3 p-3 h-14 bg-white border-[0.5px] border-black/5 shadow-md rounded-xl'>
<div className='shrink-0 flex items-center justify-center w-8 h-8 bg-[#FFF6ED] rounded-lg'>
<ZapFast className='w-4 h-4 text-[#FB6514]' />
<div className='mb-3 flex h-14 items-center rounded-xl border-[0.5px] border-black/5 bg-white p-3 shadow-md'>
<div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#FFF6ED]'>
<ZapFast className='h-4 w-4 text-[#FB6514]' />
</div>
<div className='grow mx-3 text-[13px] font-medium text-gray-700'>
<div className='mx-3 grow text-[13px] font-medium text-gray-700'>
{t('billing.plansCommon.documentProcessingPriorityUpgrade')}
</div>
<UpgradeBtn loc='knowledge-speed-up' />
@@ -277,21 +277,21 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
<div className="flex flex-col gap-0.5 pb-2">
{indexingStatusBatchDetail.map(indexingStatusDetail => (
<div key={indexingStatusDetail.id} className={cn(
'relative h-[26px] bg-components-progress-bar-bg rounded-md overflow-hidden',
'relative h-[26px] overflow-hidden rounded-md bg-components-progress-bar-bg',
indexingStatusDetail.indexing_status === 'error' && 'bg-state-destructive-hover-alt',
// indexingStatusDetail.indexing_status === 'completed' && 's.success',
)}>
{isSourceEmbedding(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="absolute left-0 top-0 h-full min-w-0.5 border-r-[2px] border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress" style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
)}
<div className="flex gap-1 pl-[6px] pr-2 h-full items-center z-[1]">
<div className="z-[1] flex h-full items-center gap-1 pl-[6px] pr-2">
{getSourceType(indexingStatusDetail.id) === DataSourceType.FILE && (
// <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"
className="size-4 shrink-0"
name={getSourceName(indexingStatusDetail.id)}
extension={getFileType(getSourceName(indexingStatusDetail.id))}
/>
@@ -303,8 +303,8 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
src={getIcon(indexingStatusDetail.id)}
/>
)}
<div className="grow flex items-center gap-1 w-0" title={getSourceName(indexingStatusDetail.id)}>
<div className="system-xs-medium text-text-secondary truncate">
<div className="flex w-0 grow items-center gap-1" title={getSourceName(indexingStatusDetail.id)}>
<div className="system-xs-medium truncate text-text-secondary">
{getSourceName(indexingStatusDetail.id)}
</div>
{
@@ -323,31 +323,31 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
popupContent={indexingStatusDetail.error}
>
<span>
<RiErrorWarningFill className='shrink-0 size-4 text-text-destructive' />
<RiErrorWarningFill className='size-4 shrink-0 text-text-destructive' />
</span>
</Tooltip>
)}
{indexingStatusDetail.indexing_status === 'completed' && (
<RiCheckboxCircleFill className='shrink-0 size-4 text-text-success' />
<RiCheckboxCircleFill className='size-4 shrink-0 text-text-success' />
)}
</div>
</div>
))}
</div>
<hr className="my-3 h-[1px] bg-divider-subtle border-0" />
<hr className="my-3 h-[1px] border-0 bg-divider-subtle" />
<RuleDetail
sourceData={ruleDetail}
indexingType={indexingType}
retrievalMethod={retrievalMethod}
/>
<div className='flex items-center gap-2 my-10'>
<div className='my-10 flex items-center gap-2'>
<Button className='w-fit' onClick={navToApiDocs}>
<RiTerminalBoxLine className='size-4 mr-2' />
<RiTerminalBoxLine className='mr-2 size-4' />
<span>Access the API</span>
</Button>
<Button className='w-fit' variant='primary' onClick={navToDocumentList}>
<span>{t('datasetCreation.stepThree.navTo')}</span>
<ArrowRightIcon className='size-4 ml-2 stroke-current stroke-1' />
<ArrowRightIcon className='ml-2 size-4 stroke-current stroke-1' />
</Button>
</div>
</>

4
web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
View File

@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
import { ToastContext } from '@/app/components/base/toast'
import { createEmptyDataset } from '@/service/datasets'
interface IProps {
type IProps = {
show: boolean
onHide: () => void
}
@@ -61,7 +61,7 @@ const EmptyDatasetCreationModal = ({
<Input value={inputValue} placeholder={t('datasetCreation.stepOne.modal.placeholder') || ''} onChange={e => setInputValue(e.target.value)} />
</div>
<div className='flex flex-row-reverse'>
<Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
<Button className='ml-2 w-24' variant='primary' onClick={submit}>{t('datasetCreation.stepOne.modal.confirmButton')}</Button>
<Button className='w-24' onClick={onHide}>{t('datasetCreation.stepOne.modal.cancelButton')}</Button>
</div>
</Modal>

2
web/app/components/datasets/create/file-preview/index.tsx
View File

@@ -48,7 +48,7 @@ const FilePreview = ({
<div className={cn(s.previewHeader)}>
<div className={cn(s.title, 'title-md-semi-bold')}>
<span>{t('datasetCreation.stepOne.filePreview')}</span>
<div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
<div className='flex h-6 w-6 cursor-pointer items-center justify-center' onClick={hidePreview}>
<XMarkIcon className='h-4 w-4'></XMarkIcon>
</div>
</div>

28
web/app/components/datasets/create/file-uploader/index.tsx
View File

@@ -256,17 +256,17 @@ const FileUploader = ({
/>
)}
<div className={cn('text-text-secondary text-sm font-semibold leading-6 mb-1', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
<div className={cn('mb-1 text-sm font-semibold leading-6 text-text-secondary', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
{!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">
<div ref={dropRef} className={cn('relative mb-2 box-border flex min-h-20 max-w-[640px] flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg px-4 py-3 text-xs leading-4 text-text-tertiary', dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
<div className="flex min-h-5 items-center justify-center text-sm leading-4 text-text-secondary">
<RiUploadCloud2Line className='mr-2 size-5' />
<span>
{t('datasetCreation.stepOne.uploader.button')}
{supportTypes.length > 0 && (
<label className="ml-1 text-text-accent cursor-pointer" onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
<label className="ml-1 cursor-pointer text-text-accent" onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
)}
</span>
</div>
@@ -274,32 +274,32 @@ const FileUploader = ({
size: fileUploadConfig.file_size_limit,
supportTypes: supportTypesShowNames,
})}</div>
{dragging && <div ref={dragRef} className='absolute top-0 left-0 w-full h-full' />}
{dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
</div>
)}
<div className='space-y-1 max-w-[640px] cursor-default'>
<div className='max-w-[640px] cursor-default space-y-1'>
{fileList.map((fileItem, index) => (
<div
key={`${fileItem.fileID}-${index}`}
onClick={() => fileItem.file?.id && onPreview(fileItem.file)}
className={cn(
'flex items-center h-12 max-w-[640px] bg-components-panel-on-panel-item-bg text-xs leading-3 text-text-tertiary border border-components-panel-border rounded-lg shadow-xs',
'flex h-12 max-w-[640px] items-center rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg text-xs leading-3 text-text-tertiary shadow-xs',
// 'border-state-destructive-border bg-state-destructive-hover',
)}
>
<div className="shrink-0 flex justify-center items-center w-12">
<div className="flex w-12 shrink-0 items-center justify-center">
<DocumentFileIcon
className="shrink-0 size-6"
className="size-6 shrink-0"
name={fileItem.file.name}
extension={getFileType(fileItem.file)}
/>
</div>
<div className="grow shrink flex flex-col gap-0.5">
<div className="flex shrink grow flex-col gap-0.5">
<div className='flex w-full'>
<div className="text-sm leading-4 text-text-secondary w-0 grow truncate">{fileItem.file.name}</div>
<div className="w-0 grow truncate text-sm leading-4 text-text-secondary">{fileItem.file.name}</div>
</div>
<div className="w-full leading-3 truncate text-text-tertiary">
<div className="w-full truncate leading-3 text-text-tertiary">
<span className='uppercase'>{getFileType(fileItem.file)}</span>
<span className='px-1 text-text-quaternary'>·</span>
<span>{getFileSize(fileItem.file.size)}</span>
@@ -307,7 +307,7 @@ const FileUploader = ({
<span>10k characters</span> */}
</div>
</div>
<div className="shrink-0 flex items-center justify-end gap-1 pr-3 w-16">
<div className="flex w-16 shrink-0 items-center justify-end gap-1 pr-3">
{/* <span className="flex justify-center items-center w-6 h-6 cursor-pointer">
<RiErrorWarningFill className='size-4 text-text-warning' />
</span> */}
@@ -315,7 +315,7 @@ const FileUploader = ({
// <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) => {
<span className="flex h-6 w-6 cursor-pointer items-center justify-center" onClick={(e) => {
e.stopPropagation()
removeFile(fileItem.fileID)
}}>

4
web/app/components/datasets/create/notion-page-preview/index.tsx
View File

@@ -48,13 +48,13 @@ const NotionPagePreview = ({
<div className={cn(s.previewHeader)}>
<div className={cn(s.title, 'title-md-semi-bold')}>
<span>{t('datasetCreation.stepOne.pagePreview')}</span>
<div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
<div className='flex h-6 w-6 cursor-pointer items-center justify-center' onClick={hidePreview}>
<XMarkIcon className='h-4 w-4'></XMarkIcon>
</div>
</div>
<div className={cn(s.fileName, 'system-xs-medium')}>
<NotionIcon
className='shrink-0 mr-1'
className='mr-1 shrink-0'
type='page'
src={currentPage?.page_icon}
/>

38
web/app/components/datasets/create/step-one/index.tsx
View File

@@ -49,14 +49,14 @@ export const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
const { t } = useTranslation()
return (
<div className='flex flex-col items-start p-6 w-[640px] rounded-2xl bg-workflow-process-bg'>
<span className={cn(s.notionIcon, 'w-12 h-12 p-3 border-[0.5px] border-components-card-border rounded-[10px] shadow-lg shadow-shadow-shadow-5 mb-2')} />
<div className='flex flex-col gap-y-1 pt-1 pb-3 mb-1'>
<span className='text-text-secondary system-md-semibold'>
<div className='flex w-[640px] flex-col items-start rounded-2xl bg-workflow-process-bg p-6'>
<span className={cn(s.notionIcon, 'mb-2 h-12 w-12 rounded-[10px] border-[0.5px] border-components-card-border p-3 shadow-lg shadow-shadow-shadow-5')} />
<div className='mb-1 flex flex-col gap-y-1 pb-3 pt-1'>
<span className='system-md-semibold text-text-secondary'>
{t('datasetCreation.stepOne.notionSyncTitle')}
<Icon3Dots className='inline relative -top-2.5 -left-1.5 w-4 h-4 text-text-secondary' />
<Icon3Dots className='relative -left-1.5 -top-2.5 inline h-4 w-4 text-text-secondary' />
</span>
<div className='text-text-tertiary system-sm-regular'>{t('datasetCreation.stepOne.notionSyncTip')}</div>
<div className='system-sm-regular text-text-tertiary'>{t('datasetCreation.stepOne.notionSyncTip')}</div>
</div>
<Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
</div>
@@ -132,9 +132,9 @@ const StepOne = ({
}, [files, isShowVectorSpaceFull])
return (
<div className='w-full h-full overflow-x-auto'>
<div className='flex w-full h-full min-w-[1440px]'>
<div className='w-1/2 h-full overflow-y-auto relative'>
<div className='h-full w-full overflow-x-auto'>
<div className='flex h-full w-full min-w-[1440px]'>
<div className='relative h-full w-1/2 overflow-y-auto'>
<div className='flex justify-end'>
<div className={classNames(s.form)}>
{
@@ -146,7 +146,7 @@ const StepOne = ({
}
{
shouldShowDataSourceTypeList && (
<div className='grid grid-cols-3 mb-8 gap-4'>
<div className='mb-8 grid grid-cols-3 gap-4'>
<div
className={cn(
s.dataSourceItem,
@@ -225,11 +225,11 @@ const StepOne = ({
notSupportBatchUpload={notSupportBatchUpload}
/>
{isShowVectorSpaceFull && (
<div className='max-w-[640px] mb-4'>
<div className='mb-4 max-w-[640px]'>
<VectorSpaceFull />
</div>
)}
<div className="flex justify-end gap-2 max-w-[640px]">
<div className="flex max-w-[640px] justify-end gap-2">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]">
@@ -253,11 +253,11 @@ const StepOne = ({
/>
</div>
{isShowVectorSpaceFull && (
<div className='max-w-[640px] mb-4'>
<div className='mb-4 max-w-[640px]'>
<VectorSpaceFull />
</div>
)}
<div className="flex justify-end gap-2 max-w-[640px]">
<div className="flex max-w-[640px] justify-end gap-2">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]">
@@ -284,11 +284,11 @@ const StepOne = ({
/>
</div>
{isShowVectorSpaceFull && (
<div className='max-w-[640px] mb-4'>
<div className='mb-4 max-w-[640px]'>
<VectorSpaceFull />
</div>
)}
<div className="flex justify-end gap-2 max-w-[640px]">
<div className="flex max-w-[640px] justify-end gap-2">
{/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
<Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
<span className="flex gap-0.5 px-[10px]">
@@ -302,8 +302,8 @@ const StepOne = ({
{!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" />
<span className="inline-flex cursor-pointer items-center text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
<RiFolder6Line className="mr-1 size-4" />
{t('datasetCreation.stepOne.emptyDatasetCreation')}
</span>
</>
@@ -312,7 +312,7 @@ const StepOne = ({
<EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
</div>
</div>
<div className='w-1/2 h-full overflow-y-auto'>
<div className='h-full w-1/2 overflow-y-auto'>
{currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
{currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
{currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}

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

@@ -23,28 +23,28 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
const isMobile = media === MediaType.mobile
return (
<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-auto px-14 sm:px-16">
<div className="flex h-full max-h-full w-full justify-center overflow-y-auto">
<div className="h-full max-w-[960px] shrink-0 grow overflow-y-auto px-14 sm:px-16">
<div className="mx-auto max-w-[640px]">
{!datasetId && (
<>
<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-1 text-xl font-semibold leading-[22px] 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 text-text-secondary">{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 text-components-input-text-filled">{datasetName || creationCache?.dataset?.name}</div>
<AppIcon {...creationCache?.dataset} className="size-14 self-center text-2xl" />
<div className="flex grow flex-col gap-1">
<div className="text-[13px] font-semibold leading-6 text-text-secondary">{t('datasetCreation.stepThree.label')}</div>
<div className="w-full truncate rounded-lg bg-components-input-bg-normal px-3 py-2 text-[13px] leading-4 text-components-input-text-filled">{datasetName || creationCache?.dataset?.name}</div>
</div>
</div>
</div>
<hr className="my-6 h-[1px] bg-divider-subtle border-0" />
<hr className="my-6 h-[1px] border-0 bg-divider-subtle" />
</>
)}
{datasetId && (
<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-1 text-xl font-semibold leading-[22px] 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>
)}
@@ -58,9 +58,9 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
</div>
</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">
<div className="shrink-0 pr-8 pt-[88px] text-xs">
<div className="flex w-[328px] flex-col gap-3 rounded-xl bg-background-section p-6 text-text-tertiary">
<div className="flex size-10 items-center justify-center rounded-[10px] bg-components-card-bg shadow-lg">
<RiBookOpenLine className="size-5 text-text-accent" />
</div>
<div className="text-base font-semibold text-text-secondary">{t('datasetCreation.stepThree.sideTipTitle')}</div>

58
web/app/components/datasets/create/step-two/index.tsx
View File

@@ -64,7 +64,7 @@ import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigge
import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
const TextLabel: FC<PropsWithChildren> = (props) => {
return <label className='text-text-secondary system-sm-semibold'>{props.children}</label>
return <label className='system-sm-semibold text-text-secondary'>{props.children}</label>
}
type StepTwoProps = {
@@ -579,14 +579,14 @@ const StepTwo = ({
const isModelAndRetrievalConfigDisabled = !!datasetId && !!currentDataset?.data_source_type
return (
<div className='flex w-full h-full'>
<div className={cn('relative h-full w-1/2 py-6 overflow-y-auto', isMobile ? 'px-4' : 'px-12')}>
<div className={'system-md-semibold text-text-secondary mb-1'}>{t('datasetCreation.stepTwo.segmentation')}</div>
<div className='flex h-full w-full'>
<div className={cn('relative h-full w-1/2 overflow-y-auto py-6', isMobile ? 'px-4' : 'px-12')}>
<div className={'system-md-semibold mb-1 text-text-secondary'}>{t('datasetCreation.stepTwo.segmentation')}</div>
{((isInUpload && [ChunkingMode.text, ChunkingMode.qa].includes(currentDataset!.doc_form))
|| isUploadInEmptyDataset
|| isInInit)
&& <OptionCard
className='bg-background-section mb-2'
className='mb-2 bg-background-section'
title={t('datasetCreation.stepTwo.general')}
icon={<Image width={20} height={20} src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
activeHeaderClassName='bg-dataset-option-card-blue-gradient'
@@ -600,7 +600,7 @@ const StepTwo = ({
actions={
<>
<Button variant={'secondary-accent'} onClick={() => updatePreview()}>
<RiSearchEyeLine className='h-4 w-4 mr-0.5' />
<RiSearchEyeLine className='mr-0.5 h-4 w-4' />
{t('datasetCreation.stepTwo.previewChunk')}
</Button>
<Button variant={'ghost'} onClick={resetRules}>
@@ -628,7 +628,7 @@ const StepTwo = ({
onChange={setOverlap}
/>
</div>
<div className='w-full flex flex-col'>
<div className='flex w-full flex-col'>
<div className='flex items-center gap-x-2'>
<div className='inline-flex shrink-0'>
<TextLabel>{t('datasetCreation.stepTwo.rules')}</TextLabel>
@@ -643,7 +643,7 @@ const StepTwo = ({
<Checkbox
checked={rule.enabled}
/>
<label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
<label className="system-sm-regular ml-2 cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
</div>
))}
{IS_CE_EDITION && <>
@@ -661,7 +661,7 @@ const StepTwo = ({
checked={currentDocForm === ChunkingMode.qa}
disabled={!!currentDataset?.doc_form}
/>
<label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">
<label className="system-sm-regular ml-2 cursor-pointer text-text-secondary">
{t('datasetCreation.stepTwo.useQALanguage')}
</label>
</div>
@@ -677,7 +677,7 @@ const StepTwo = ({
style={{
background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.1) 0%, rgba(255, 255, 255, 0.00) 100%)',
}}
className='h-10 mt-2 flex items-center gap-2 rounded-xl backdrop-blur-[5px] border-components-panel-border border shadow-xs px-3 text-xs'
className='mt-2 flex h-10 items-center gap-2 rounded-xl border border-components-panel-border px-3 text-xs shadow-xs backdrop-blur-[5px]'
>
<RiAlertFill className='size-4 text-text-warning-secondary' />
<span className='system-xs-medium text-text-primary'>
@@ -707,7 +707,7 @@ const StepTwo = ({
actions={
<>
<Button variant={'secondary-accent'} onClick={() => updatePreview()}>
<RiSearchEyeLine className='h-4 w-4 mr-0.5' />
<RiSearchEyeLine className='mr-0.5 h-4 w-4' />
{t('datasetCreation.stepTwo.previewChunk')}
</Button>
<Button variant={'ghost'} onClick={resetRules}>
@@ -784,7 +784,7 @@ const StepTwo = ({
</div>
<Divider className='grow' bgStyle='gradient' />
</div>
<div className='flex gap-3 mt-1'>
<div className='mt-1 flex gap-3'>
<DelimiterInput
value={parentChildConfig.child.delimiter}
tooltip={t('datasetCreation.stepTwo.parentChildChunkDelimiterTip')!}
@@ -824,7 +824,7 @@ const StepTwo = ({
<Checkbox
checked={rule.enabled}
/>
<label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
<label className="system-sm-regular ml-2 cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
</div>
))}
</div>
@@ -832,7 +832,7 @@ const StepTwo = ({
</div>
</OptionCard>}
<Divider className='my-5' />
<div className={'system-md-semibold text-text-secondary mb-1'}>{t('datasetCreation.stepTwo.indexMode')}</div>
<div className={'system-md-semibold mb-1 text-text-secondary'}>{t('datasetCreation.stepTwo.indexMode')}</div>
<div className='flex items-center gap-2'>
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
<OptionCard className='flex-1 self-stretch'
@@ -859,11 +859,11 @@ const StepTwo = ({
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
<>
<CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
<header className='pt-6 mb-4'>
<header className='mb-4 pt-6'>
<h2 className='text-lg font-semibold'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
</h2>
<p className='font-normal text-sm mt-2'>
<p className='mt-2 text-sm font-normal'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
</p>
</header>
@@ -903,7 +903,7 @@ const StepTwo = ({
/>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<div className='p-3 bg-components-tooltip-bg border-components-panel-border text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
<div className='rounded-lg border-components-panel-border bg-components-tooltip-bg p-3 text-xs font-medium text-text-secondary shadow-lg'>
{
docForm === ChunkingMode.qa
? t('datasetCreation.stepTwo.notAvailableForQA')
@@ -915,8 +915,8 @@ const StepTwo = ({
</>)}
</div>
{!hasSetIndexType && indexType === IndexingType.QUALIFIED && (
<div className='mt-2 h-10 p-2 flex items-center gap-x-0.5 rounded-xl border-[0.5px] border-components-panel-border overflow-hidden bg-components-panel-bg-blur backdrop-blur-[5px] shadow-xs'>
<div className='absolute top-0 left-0 right-0 bottom-0 bg-dataset-warning-message-bg opacity-40'></div>
<div className='mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]'>
<div className='absolute bottom-0 left-0 right-0 top-0 bg-dataset-warning-message-bg opacity-40'></div>
<div className='p-1'>
<AlertTriangle className='size-4 text-text-warning-secondary' />
</div>
@@ -924,7 +924,7 @@ const StepTwo = ({
</div>
)}
{hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
<div className='mt-2 system-xs-medium'>
<div className='system-xs-medium mt-2'>
{t('datasetCreation.stepTwo.indexSettingTip')}
<Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
</div>
@@ -932,7 +932,7 @@ const StepTwo = ({
{/* Embedding model */}
{indexType === IndexingType.QUALIFIED && (
<div className='mt-5'>
<div className={cn('system-md-semibold text-text-secondary mb-1', datasetId && 'flex justify-between items-center')}>{t('datasetSettings.form.embeddingModel')}</div>
<div className={cn('system-md-semibold mb-1 text-text-secondary', datasetId && 'flex items-center justify-between')}>{t('datasetSettings.form.embeddingModel')}</div>
<ModelSelector
readonly={isModelAndRetrievalConfigDisabled}
triggerClassName={isModelAndRetrievalConfigDisabled ? 'opacity-50' : ''}
@@ -943,7 +943,7 @@ const StepTwo = ({
}}
/>
{isModelAndRetrievalConfigDisabled && (
<div className='mt-2 system-xs-medium text-text-tertiary'>
<div className='system-xs-medium mt-2 text-text-tertiary'>
{t('datasetCreation.stepTwo.indexSettingTip')}
<Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
</div>
@@ -956,7 +956,7 @@ const StepTwo = ({
{!isModelAndRetrievalConfigDisabled
? (
<div className={'mb-1'}>
<div className='system-md-semibold text-text-secondary mb-0.5'>{t('datasetSettings.form.retrievalSetting.title')}</div>
<div className='system-md-semibold mb-0.5 text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
<div className='body-xs-regular text-text-tertiary'>
<a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
{t('datasetSettings.form.retrievalSetting.longDescription')}
@@ -964,7 +964,7 @@ const StepTwo = ({
</div>
)
: (
<div className={cn('system-md-semibold text-text-secondary mb-0.5', 'flex justify-between items-center')}>
<div className={cn('system-md-semibold mb-0.5 text-text-secondary', 'flex items-center justify-between')}>
<div>{t('datasetSettings.form.retrievalSetting.title')}</div>
</div>
)}
@@ -992,16 +992,16 @@ const StepTwo = ({
{!isSetting
? (
<div className='flex items-center mt-8 py-2'>
<div className='mt-8 flex items-center py-2'>
<Button onClick={() => onStepChange && onStepChange(-1)}>
<RiArrowLeftLine className='w-4 h-4 mr-1' />
<RiArrowLeftLine className='mr-1 h-4 w-4' />
{t('datasetCreation.stepTwo.previousStep')}
</Button>
<Button className='ml-auto' loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.nextStep')}</Button>
</div>
)
: (
<div className='flex items-center mt-8 py-2'>
<div className='mt-8 flex items-center py-2'>
<Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
<Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
</div>
@@ -1080,7 +1080,7 @@ const StepTwo = ({
}
</div>
</PreviewHeader>}
className={cn('flex shrink-0 w-1/2 p-4 pr-0 relative h-full', isMobile && 'w-full max-w-[524px]')}
className={cn('relative flex h-full w-1/2 shrink-0 p-4 pr-0', isMobile && 'w-full max-w-[524px]')}
mainClassName='space-y-6'
>
{currentDocForm === ChunkingMode.qa && estimate?.qa_preview && (
@@ -1137,7 +1137,7 @@ const StepTwo = ({
})
)}
{currentEstimateMutation.isIdle && (
<div className='h-full w-full flex items-center justify-center'>
<div className='flex h-full w-full items-center justify-center'>
<div className='flex flex-col items-center justify-center gap-3'>
<RiSearchEyeLine className='size-10 text-text-empty-state-icon' />
<p className='text-sm text-text-tertiary'>

10
web/app/components/datasets/create/step-two/inputs.tsx
View File

@@ -7,11 +7,11 @@ import type { InputNumberProps } from '@/app/components/base/input-number'
import { InputNumber } from '@/app/components/base/input-number'
const TextLabel: FC<PropsWithChildren> = (props) => {
return <label className='text-text-secondary text-xs font-semibold leading-none'>{props.children}</label>
return <label className='text-xs font-semibold leading-none text-text-secondary'>{props.children}</label>
}
const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
return <div className='space-y-2 flex-1'>
return <div className='flex-1 space-y-2'>
<TextLabel>{props.label}</TextLabel>
{props.children}
</div>
@@ -19,7 +19,7 @@ const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
export const DelimiterInput: FC<InputProps & { tooltip?: string }> = (props) => {
const { t } = useTranslation()
return <FormField label={<div className='flex items-center mb-1'>
return <FormField label={<div className='mb-1 flex items-center'>
<span className='system-sm-semibold mr-0.5'>{t('datasetCreation.stepTwo.separator')}</span>
<Tooltip
popupContent={
@@ -39,7 +39,7 @@ export const DelimiterInput: FC<InputProps & { tooltip?: string }> = (props) =>
}
export const MaxLengthInput: FC<InputNumberProps> = (props) => {
const maxValue = parseInt(globalThis.document?.body?.getAttribute('data-public-indexing-max-segmentation-tokens-length') || '4000', 10)
const maxValue = Number.parseInt(globalThis.document?.body?.getAttribute('data-public-indexing-max-segmentation-tokens-length') || '4000', 10)
const { t } = useTranslation()
return <FormField label={<div className='system-sm-semibold mb-1'>
@@ -58,7 +58,7 @@ export const MaxLengthInput: FC<InputNumberProps> = (props) => {
export const OverlapInput: FC<InputNumberProps> = (props) => {
const { t } = useTranslation()
return <FormField label={<div className='flex items-center mb-1'>
return <FormField label={<div className='mb-1 flex items-center'>
<span className='system-sm-semibold'>{t('datasetCreation.stepTwo.overlap')}</span>
<Tooltip
popupContent={

12
web/app/components/datasets/create/step-two/language-select/index.tsx
View File

@@ -6,7 +6,7 @@ import cn from '@/utils/classnames'
import Popover from '@/app/components/base/popover'
import { languages } from '@/i18n/language'
export interface ILanguageSelectProps {
export type ILanguageSelectProps = {
currentLanguage: string
onSelect: (language: string) => void
disabled?: boolean
@@ -28,10 +28,10 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
{languages.filter(language => language.supported).map(({ prompt_name }) => (
<div
key={prompt_name}
className='w-full py-2 px-3 inline-flex items-center justify-between hover:bg-state-base-hover rounded-lg cursor-pointer'
className='inline-flex w-full cursor-pointer items-center justify-between rounded-lg px-3 py-2 hover:bg-state-base-hover'
onClick={() => onSelect(prompt_name)}
>
<span className='text-text-secondary system-sm-medium'>{prompt_name}</span>
<span className='system-sm-medium text-text-secondary'>{prompt_name}</span>
{(currentLanguage === prompt_name) && <RiCheckLine className='size-4 text-text-accent' />}
</div>
))}
@@ -40,7 +40,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
btnElement={
<div className={cn('inline-flex items-center gap-x-[1px]', disabled && 'cursor-not-allowed')}>
<span className={cn(
'px-[3px] system-xs-semibold text-components-button-tertiary-text',
'system-xs-semibold px-[3px] text-components-button-tertiary-text',
disabled ? 'text-components-button-tertiary-text-disabled' : '',
)}>
{currentLanguage}
@@ -52,10 +52,10 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
</div>
}
btnClassName={() => cn(
'!border-0 rounded-md !px-1.5 !py-1 !mx-1 !bg-components-button-tertiary-bg !hover:bg-components-button-tertiary-bg',
'!hover:bg-components-button-tertiary-bg !mx-1 rounded-md !border-0 !bg-components-button-tertiary-bg !px-1.5 !py-1',
disabled ? 'bg-components-button-tertiary-bg-disabled' : '',
)}
className='!w-[140px] h-fit !z-20 !translate-x-0 !left-1'
className='!left-1 !z-20 h-fit !w-[140px] !translate-x-0'
/>
)
}

25
web/app/components/datasets/create/step-two/option-card.tsx
View File

@@ -1,4 +1,4 @@
import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
import type { ComponentProps, FC, ReactNode } from 'react'
import Image from 'next/image'
import classNames from '@/utils/classnames'
@@ -25,10 +25,10 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
isActive && activeClassName,
!disabled && 'cursor-pointer',
)}>
<div className='size-14 flex items-center justify-center relative overflow-hidden'>
{isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
<div className='relative flex size-14 items-center justify-center overflow-hidden'>
{isActive && effectImg && <Image src={effectImg} className='absolute left-0 top-0 h-full w-full' alt='' width={56} height={56} />}
<div className='p-1'>
<div className='size-8 rounded-lg border p-1.5 shadow-md border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
<div className='flex size-8 justify-center rounded-lg border border-components-panel-border-subtle bg-background-default-dodge p-1.5 shadow-md'>
{icon}
</div>
</div>
@@ -37,8 +37,8 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
className={classNames('absolute left-4 -bottom-1.5 text-transparent', isActive && 'text-components-panel-bg')}
/>
<div className='flex-1 space-y-0.5 py-3 pr-4'>
<div className='text-text-secondary system-md-semibold'>{title}</div>
<div className='text-text-tertiary system-xs-regular'>{description}</div>
<div className='system-md-semibold text-text-secondary'>{title}</div>
<div className='system-xs-regular text-text-tertiary'>{description}</div>
</div>
</div>
}
@@ -57,7 +57,12 @@ type OptionCardProps = {
disabled?: boolean
} & Omit<ComponentProps<'div'>, 'title' | 'onClick'>
export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
export const OptionCard: FC<OptionCardProps> = (
{
ref,
...props
},
) => {
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, noHighlight, disabled, ...rest } = props
return <div
className={classNames(
@@ -88,14 +93,14 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
disabled={disabled}
/>
{/** Body */}
{isActive && (children || actions) && <div className='py-3 px-4 bg-components-panel-bg rounded-b-xl'>
{isActive && (children || actions) && <div className='rounded-b-xl bg-components-panel-bg px-4 py-3'>
{children}
{actions && <div className='flex gap-2 mt-4'>
{actions && <div className='mt-4 flex gap-2'>
{actions}
</div>
}
</div>}
</div>
})
}
OptionCard.displayName = 'OptionCard'

12
web/app/components/datasets/create/step-two/preview-item/index.tsx
View File

@@ -44,9 +44,9 @@ const PreviewItem: FC<IPreviewItemProps> = ({
const formattedIndex = (() => String(index).padStart(3, '0'))()
return (
<div className='p-4 rounded-xl bg-gray-50'>
<div className='flex items-center justify-between h-5 text-xs text-gray-500'>
<div className='flex items-center h-[18px] space-x-1 border border-gray-200 box-border rounded-md italic pl-1 pr-1.5 font-medium'>
<div className='rounded-xl bg-gray-50 p-4'>
<div className='flex h-5 items-center justify-between text-xs text-gray-500'>
<div className='box-border flex h-[18px] items-center space-x-1 rounded-md border border-gray-200 pl-1 pr-1.5 font-medium italic'>
{sharpIcon}
<span>{formattedIndex}</span>
</div>
@@ -55,18 +55,18 @@ const PreviewItem: FC<IPreviewItemProps> = ({
<span>{charNums} {t('datasetCreation.stepTwo.characters')}</span>
</div>
</div>
<div className='mt-2 max-h-[120px] line-clamp-6 overflow-hidden text-sm text-gray-800'>
<div className='mt-2 line-clamp-6 max-h-[120px] overflow-hidden text-sm text-gray-800'>
{type === PreviewType.TEXT && (
<div style={{ whiteSpace: 'pre-line' }}>{content}</div>
)}
{type === PreviewType.QA && (
<div style={{ whiteSpace: 'pre-line' }}>
<div className='flex'>
<div className='shrink-0 mr-2 text-medium text-gray-400'>Q</div>
<div className='text-medium mr-2 shrink-0 text-gray-400'>Q</div>
<div style={{ whiteSpace: 'pre-line' }}>{qa?.question}</div>
</div>
<div className='flex'>
<div className='shrink-0 mr-2 text-medium text-gray-400'>A</div>
<div className='text-medium mr-2 shrink-0 text-gray-400'>A</div>
<div style={{ whiteSpace: 'pre-line' }}>{qa?.answer}</div>
</div>
</div>

4
web/app/components/datasets/create/step-two/unescape.ts
View File

@@ -31,8 +31,8 @@ const usualEscapeSequences: Record<string, string> = {
'\\': '\\',
}
const fromHex = (str: string) => String.fromCodePoint(parseInt(str, 16))
const fromOct = (str: string) => String.fromCodePoint(parseInt(str, 8))
const fromHex = (str: string) => String.fromCodePoint(Number.parseInt(str, 16))
const fromOct = (str: string) => String.fromCodePoint(Number.parseInt(str, 8))
const unescape = (str: string) => {
return str.replace(jsEscapeRegex, (_, __, varHex, longHex, shortHex, octal, specialCharacter, python) => {

2
web/app/components/datasets/create/stepper/index.tsx
View File

@@ -19,7 +19,7 @@ export const Stepper: FC<StepperProps> = (props) => {
activeIndex={activeIndex}
index={index}
/>
{!isLast && <div className='w-4 h-px bg-divider-deep' />}
{!isLast && <div className='h-px w-4 bg-divider-deep' />}
</Fragment>
)
})}

2
web/app/components/datasets/create/stop-embedding-modal/index.tsx
View File

@@ -35,7 +35,7 @@ const StopEmbeddingModal = ({
<div className={s.title}>{t('datasetCreation.stepThree.modelTitle')}</div>
<div className={s.content}>{t('datasetCreation.stepThree.modelContent')}</div>
<div className='flex flex-row-reverse'>
<Button className='w-24 ml-2' variant='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
<Button className='ml-2 w-24' variant='primary' onClick={submit}>{t('datasetCreation.stepThree.modelButtonConfirm')}</Button>
<Button className='w-24' onClick={onHide}>{t('datasetCreation.stepThree.modelButtonCancel')}</Button>
</div>
</Modal>

6
web/app/components/datasets/create/top-bar/index.tsx
View File

@@ -25,16 +25,16 @@ export const TopBar: FC<TopBarProps> = (props) => {
}, [datasetId])
return <div className={classNames('flex shrink-0 h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
<Link href={fallbackRoute} replace className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
<Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6">
<div className='p-2'>
<RiArrowLeftLine className='size-4 text-text-primary' />
</div>
<p className="text-text-primary system-sm-semibold-uppercase">
<p className="system-sm-semibold-uppercase text-text-primary">
{t('datasetCreation.steps.header.fallbackRoute')}
</p>
</Link>
<div className={
'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 absolute'
'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
}>
<Stepper
steps={Array.from({ length: 3 }, (_, i) => ({

2
web/app/components/datasets/create/website/base/checkbox-with-label.tsx
View File

@@ -23,7 +23,7 @@ const CheckboxWithLabel: FC<Props> = ({
tooltip,
}) => {
return (
<label className={cn(className, 'flex items-center h-7 space-x-2')}>
<label className={cn(className, 'flex h-7 items-center space-x-2')}>
<Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
<div className={cn('text-sm font-normal text-text-secondary', labelClassName)}>{label}</div>
{tooltip && (

8
web/app/components/datasets/create/website/base/crawled-result-item.tsx
View File

@@ -28,12 +28,12 @@ const CrawledResultItem: FC<Props> = ({
onCheckChange(!isChecked)
}, [isChecked, onCheckChange])
return (
<div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'rounded-lg p-2 cursor-pointer')}>
<div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'cursor-pointer rounded-lg p-2')}>
<div className='relative flex'>
<div className='h-5 flex items-center'>
<div className='flex h-5 items-center'>
<Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
</div>
<div className='flex flex-col grow min-w-0'>
<div className='flex min-w-0 grow flex-col'>
<div
className='truncate text-sm font-medium text-text-secondary'
title={payload.title}
@@ -49,7 +49,7 @@ const CrawledResultItem: FC<Props> = ({
</div>
<Button
onClick={onPreview}
className='hidden group-hover:block group-hover:absolute top-0 right-0 h-6 px-1.5 text-xs font-medium uppercase'
className='right-0 top-0 hidden h-6 px-1.5 text-xs font-medium uppercase group-hover:absolute group-hover:block'
>
{t('datasetCreation.stepOne.website.preview')}
</Button>

2
web/app/components/datasets/create/website/base/crawled-result.tsx
View File

@@ -58,7 +58,7 @@ const CrawledResult: FC<Props> = ({
return (
<div className={cn(className, 'border-t-[0.5px] border-divider-regular shadow-xs shadow-shadow-shadow-3')}>
<div className='flex items-center justify-between h-[34px] px-4'>
<div className='flex h-[34px] items-center justify-between px-4'>
<CheckboxWithLabel
isChecked={isCheckAll}
onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}

4
web/app/components/datasets/create/website/base/crawling.tsx
View File

@@ -19,8 +19,8 @@ const Crawling: FC<Props> = ({
return (
<div className={className}>
<div className='flex items-center h-[34px] px-4 shadow-xs shadow-shadow-shadow-3
border-y-[0.5px] border-divider-regular text-xs text-text-tertiary'>
<div className='flex h-[34px] items-center border-y-[0.5px] border-divider-regular px-4
text-xs text-text-tertiary shadow-xs shadow-shadow-shadow-3'>
{t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
</div>

8
web/app/components/datasets/create/website/base/error-message.tsx
View File

@@ -16,13 +16,13 @@ const ErrorMessage: FC<Props> = ({
errorMsg,
}) => {
return (
<div className={cn(className, 'py-2 px-4 border-t border-divider-subtle bg-dataset-warning-message-bg opacity-40')}>
<div className='flex items-center h-5'>
<AlertTriangle className='mr-2 w-4 h-4 text-text-warning-secondary' />
<div className={cn(className, 'border-t border-divider-subtle bg-dataset-warning-message-bg px-4 py-2 opacity-40')}>
<div className='flex h-5 items-center'>
<AlertTriangle className='mr-2 h-4 w-4 text-text-warning-secondary' />
<div className='system-md-medium text-text-warning'>{title}</div>
</div>
{errorMsg && (
<div className='mt-1 pl-6 system-xs-regular text-text-secondary'>{errorMsg}</div>
<div className='system-xs-regular mt-1 pl-6 text-text-secondary'>{errorMsg}</div>
)}
</div>
)

2
web/app/components/datasets/create/website/base/field.tsx
View File

@@ -31,7 +31,7 @@ const Field: FC<Props> = ({
return (
<div className={cn(className)}>
<div className='flex py-[7px]'>
<div className={cn(labelClassName, 'flex items-center h-[16px] text-[13px] font-semibold text-text-secondary')}>{label} </div>
<div className={cn(labelClassName, 'flex h-[16px] items-center text-[13px] font-semibold text-text-secondary')}>{label} </div>
{isRequired && <span className='ml-0.5 text-xs font-semibold text-text-destructive'>*</span>}
{tooltip && (
<Tooltip

10
web/app/components/datasets/create/website/base/input.tsx
View File

@@ -50,12 +50,12 @@ const Input: FC<Props> = ({
{...otherOption}
value={value}
onChange={handleChange}
className='flex h-8 w-full p-2 rounded-lg system-xs-regular text-components-input-text-filled bg-components-input-bg-normal
caret-[#295eff] border border-transparent
hover:bg-components-input-bg-hover hover:border hover:border-components-input-border-hover
focus-visible:outline-none focus:bg-components-inout-border-active focus:border focus:border-components-input-border-active
className='system-xs-regular focus:bg-components-inout-border-active flex h-8 w-full rounded-lg border border-transparent
bg-components-input-bg-normal p-2 text-components-input-text-filled
caret-[#295eff] placeholder:text-components-input-text-placeholder hover:border
hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border focus:border-components-input-border-active
focus:shadow-xs focus:shadow-shadow-shadow-3
placeholder:text-components-input-text-placeholder'
focus-visible:outline-none'
placeholder={placeholder}
/>
)

10
web/app/components/datasets/create/website/base/options-wrap.tsx
View File

@@ -34,14 +34,14 @@ const OptionsWrap: FC<Props> = ({
return (
<div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
<div
className='flex items-center gap-x-1 h-[26px] py-1 cursor-pointer select-none'
className='flex h-[26px] cursor-pointer select-none items-center gap-x-1 py-1'
onClick={foldToggle}
>
<div className='flex items-center grow'>
<RiEqualizer2Line className='mr-1 w-4 h-4 text-text-secondary' />
<span className='text-[13px] leading-[16px] font-semibold text-text-secondary uppercase'>{t(`${I18N_PREFIX}.options`)}</span>
<div className='flex grow items-center'>
<RiEqualizer2Line className='mr-1 h-4 w-4 text-text-secondary' />
<span className='text-[13px] font-semibold uppercase leading-[16px] text-text-secondary'>{t(`${I18N_PREFIX}.options`)}</span>
</div>
<ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 shrink-0 text-text-tertiary')} />
<ChevronRight className={cn(!fold && 'rotate-90', 'h-4 w-4 shrink-0 text-text-tertiary')} />
</div>
{!fold && (
<div className='mb-4'>

10
web/app/components/datasets/create/website/firecrawl/header.tsx
View File

@@ -20,10 +20,10 @@ const Header: FC<Props> = ({
<div className='flex h-6 items-center justify-between'>
<div className='flex items-center'>
<div className='text-base font-medium text-text-secondary'>{t(`${I18N_PREFIX}.firecrawlTitle`)}</div>
<div className='ml-2 mr-2 w-px h-3.5 bg-divider-regular' />
<Button className='flex items-center gap-x-[1px] h-6 px-1.5' onClick={onSetting}>
<RiEqualizer2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
<span className='text-components-button-secondary-text text-xs font-medium px-[3px]'>
<div className='ml-2 mr-2 h-3.5 w-px bg-divider-regular' />
<Button className='flex h-6 items-center gap-x-[1px] px-1.5' onClick={onSetting}>
<RiEqualizer2Line className='h-3.5 w-3.5 text-components-button-secondary-text' />
<span className='px-[3px] text-xs font-medium text-components-button-secondary-text'>
{t(`${I18N_PREFIX}.configureFirecrawl`)}
</span>
</Button>
@@ -34,7 +34,7 @@ const Header: FC<Props> = ({
rel='noopener noreferrer'
className='inline-flex items-center gap-x-1 text-xs font-medium text-text-accent'
>
<RiBookOpenLine className='w-3.5 h-3.5 text-text-accent' />
<RiBookOpenLine className='h-3.5 w-3.5 text-text-accent' />
<span>{t(`${I18N_PREFIX}.firecrawlDoc`)}</span>
</a>
</div>

4
web/app/components/datasets/create/website/firecrawl/index.tsx
View File

@@ -178,7 +178,7 @@ const FireCrawl: FC<Props> = ({
return (
<div>
<Header onSetting={handleSetting} />
<div className='mt-2 p-4 pb-0 rounded-xl border border-components-panel-border bg-background-default-subtle'>
<div className='mt-2 rounded-xl border border-components-panel-border bg-background-default-subtle p-4 pb-0'>
<UrlInput onRun={handleRun} isRunning={isRunning} />
<OptionsWrap
className='mt-4'
@@ -188,7 +188,7 @@ const FireCrawl: FC<Props> = ({
</OptionsWrap>
{!isInit && (
<div className='mt-3 relative left-[-16px] w-[calc(100%_+_32px)] rounded-b-xl'>
<div className='relative left-[-16px] mt-3 w-[calc(100%_+_32px)] rounded-b-xl'>
{isRunning
&& <Crawling
className='mt-2'

8
web/app/components/datasets/create/website/firecrawl/options.tsx
View File

@@ -40,7 +40,7 @@ const Options: FC<Props> = ({
/>
<div className='flex justify-between space-x-4'>
<Field
className='grow shrink-0'
className='shrink-0 grow'
label={t(`${I18N_PREFIX}.limit`)}
value={payload.limit}
onChange={handleChange('limit')}
@@ -48,7 +48,7 @@ const Options: FC<Props> = ({
isRequired
/>
<Field
className='grow shrink-0'
className='shrink-0 grow'
label={t(`${I18N_PREFIX}.maxDepth`)}
value={payload.max_depth}
onChange={handleChange('max_depth')}
@@ -59,14 +59,14 @@ const Options: FC<Props> = ({
<div className='flex justify-between space-x-4'>
<Field
className='grow shrink-0'
className='shrink-0 grow'
label={t(`${I18N_PREFIX}.excludePaths`)}
value={payload.excludes}
onChange={handleChange('excludes')}
placeholder='blog/*, /about/*'
/>
<Field
className='grow shrink-0'
className='shrink-0 grow'
label={t(`${I18N_PREFIX}.includeOnlyPaths`)}
value={payload.includes}
onChange={handleChange('includes')}

18
web/app/components/datasets/create/website/index.tsx
View File

@@ -73,16 +73,16 @@ const Website: FC<Props> = ({
return (
<div>
<div className="mb-4">
<div className="system-md-medium text-text-secondary mb-2">
<div className="system-md-medium mb-2 text-text-secondary">
{t('datasetCreation.stepOne.website.chooseProvider')}
</div>
<div className="flex space-x-2">
<button
className={cn('px-4 py-2 rounded-lg flex items-center justify-center',
className={cn('flex items-center justify-center rounded-lg px-4 py-2',
selectedProvider === DataSourceProvider.jinaReader
? 'system-sm-medium bg-components-option-card-option-selected-bg text-text-primary border-[1.5px] border-components-option-card-option-selected-border'
: `system-sm-regular bg-components-option-card-option-bg text-text-secondary border border-components-option-card-option-border
hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
? 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary'
: `system-sm-regular border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary
hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
)}
onClick={() => setSelectedProvider(DataSourceProvider.jinaReader)}
>
@@ -90,11 +90,11 @@ const Website: FC<Props> = ({
<span>Jina Reader</span>
</button>
<button
className={cn('px-4 py-2 rounded-lg',
className={cn('rounded-lg px-4 py-2',
selectedProvider === DataSourceProvider.fireCrawl
? 'system-sm-medium bg-components-option-card-option-selected-bg text-text-primary border-[1.5px] border-components-option-card-option-selected-border'
: `system-sm-regular bg-components-option-card-option-bg text-text-secondary border border-components-option-card-option-border
hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
? 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary'
: `system-sm-regular border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary
hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
)}
onClick={() => setSelectedProvider(DataSourceProvider.fireCrawl)}
>

2
web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx
View File

@@ -23,7 +23,7 @@ const CheckboxWithLabel: FC<Props> = ({
tooltip,
}) => {
return (
<label className={cn(className, 'flex items-center h-7 space-x-2')}>
<label className={cn(className, 'flex h-7 items-center space-x-2')}>
<Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
<div className={cn('text-sm font-normal text-gray-800', labelClassName)}>{label}</div>
{tooltip && (

10
web/app/components/datasets/create/website/jina-reader/base/error-message.tsx
View File

@@ -4,7 +4,7 @@ import React from 'react'
import cn from '@/utils/classnames'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
interface Props {
type Props = {
className?: string
title: string
errorMsg?: string
@@ -16,13 +16,13 @@ const ErrorMessage: FC<Props> = ({
errorMsg,
}) => {
return (
<div className={cn(className, 'py-2 px-4 border-t border-gray-200 bg-[#FFFAEB]')}>
<div className='flex items-center h-5'>
<AlertTriangle className='mr-2 w-4 h-4 text-[#F79009]' />
<div className={cn(className, 'border-t border-gray-200 bg-[#FFFAEB] px-4 py-2')}>
<div className='flex h-5 items-center'>
<AlertTriangle className='mr-2 h-4 w-4 text-[#F79009]' />
<div className='text-sm font-medium text-[#DC6803]'>{title}</div>
</div>
{errorMsg && (
<div className='mt-1 pl-6 leading-[18px] text-xs font-normal text-gray-700'>{errorMsg}</div>
<div className='mt-1 pl-6 text-xs font-normal leading-[18px] text-gray-700'>{errorMsg}</div>
)}
</div>
)

4
web/app/components/datasets/create/website/jina-reader/base/field.tsx
View File

@@ -5,7 +5,7 @@ import Input from './input'
import cn from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
interface Props {
type Props = {
className?: string
label: string
labelClassName?: string
@@ -31,7 +31,7 @@ const Field: FC<Props> = ({
return (
<div className={cn(className)}>
<div className='flex py-[7px]'>
<div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-gray-900')}>{label} </div>
<div className={cn(labelClassName, 'flex h-[18px] items-center text-[13px] font-medium text-gray-900')}>{label} </div>
{isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
{tooltip && (
<Tooltip

4
web/app/components/datasets/create/website/jina-reader/base/input.tsx
View File

@@ -2,7 +2,7 @@
import type { FC } from 'react'
import React, { useCallback } from 'react'
interface Props {
type Props = {
value: string | number
onChange: (value: string | number) => void
placeholder?: string
@@ -50,7 +50,7 @@ const Input: FC<Props> = ({
{...otherOption}
value={value}
onChange={handleChange}
className='flex h-9 w-full py-1 px-2 rounded-lg text-xs leading-normal bg-gray-100 caret-primary-600 hover:bg-gray-100 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none focus:bg-gray-50 placeholder:text-gray-400'
className='flex h-9 w-full rounded-lg bg-gray-100 px-2 py-1 text-xs leading-normal caret-primary-600 placeholder:text-gray-400 hover:bg-gray-100 focus:bg-gray-50 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none'
placeholder={placeholder}
/>
)

10
web/app/components/datasets/create/website/jina-reader/base/options-wrap.tsx
View File

@@ -8,7 +8,7 @@ import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
const I18N_PREFIX = 'datasetCreation.stepOne.website'
interface Props {
type Props = {
className?: string
children: React.ReactNode
controlFoldOptions?: number
@@ -34,14 +34,14 @@ const OptionsWrap: FC<Props> = ({
return (
<div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
<div
className='flex justify-between items-center h-[26px] py-1 cursor-pointer select-none'
className='flex h-[26px] cursor-pointer select-none items-center justify-between py-1'
onClick={foldToggle}
>
<div className='flex items-center text-gray-700'>
<Settings04 className='mr-1 w-4 h-4' />
<div className='text-[13px] font-semibold text-gray-800 uppercase'>{t(`${I18N_PREFIX}.options`)}</div>
<Settings04 className='mr-1 h-4 w-4' />
<div className='text-[13px] font-semibold uppercase text-gray-800'>{t(`${I18N_PREFIX}.options`)}</div>
</div>
<ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 text-gray-500')} />
<ChevronRight className={cn(!fold && 'rotate-90', 'h-4 w-4 text-gray-500')} />
</div>
{!fold && (
<div className='mb-4'>

2
web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
View File

@@ -7,7 +7,7 @@ import Button from '@/app/components/base/button'
const I18N_PREFIX = 'datasetCreation.stepOne.website'
interface Props {
type Props = {
isRunning: boolean
onRun: (url: string) => void
}

10
web/app/components/datasets/create/website/jina-reader/header.tsx
View File

@@ -20,10 +20,10 @@ const Header: FC<Props> = ({
<div className='flex h-6 items-center justify-between'>
<div className='flex items-center'>
<div className='text-sm font-semibold text-text-secondary'>{t(`${I18N_PREFIX}.jinaReaderTitle`)}</div>
<div className='ml-2 mr-2 w-px h-3.5 bg-divider-regular' />
<Button className='flex items-center gap-x-[1px] h-6 px-1.5' onClick={onSetting}>
<RiEqualizer2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
<span className='text-components-button-secondary-text text-xs font-medium px-[3px]'>
<div className='ml-2 mr-2 h-3.5 w-px bg-divider-regular' />
<Button className='flex h-6 items-center gap-x-[1px] px-1.5' onClick={onSetting}>
<RiEqualizer2Line className='h-3.5 w-3.5 text-components-button-secondary-text' />
<span className='px-[3px] text-xs font-medium text-components-button-secondary-text'>
{t(`${I18N_PREFIX}.configureJinaReader`)}
</span>
</Button>
@@ -34,7 +34,7 @@ const Header: FC<Props> = ({
rel='noopener noreferrer'
className='inline-flex items-center gap-x-1 text-xs font-medium text-text-accent'
>
<RiBookOpenLine className='w-3.5 h-3.5 text-text-accent' />
<RiBookOpenLine className='h-3.5 w-3.5 text-text-accent' />
<span>{t(`${I18N_PREFIX}.jinaReaderDoc`)}</span>
</a>
</div>

4
web/app/components/datasets/create/website/jina-reader/index.tsx
View File

@@ -191,7 +191,7 @@ const JinaReader: FC<Props> = ({
return (
<div>
<Header onSetting={handleSetting} />
<div className='mt-2 p-4 pb-0 rounded-xl border border-components-panel-border bg-background-default-subtle'>
<div className='mt-2 rounded-xl border border-components-panel-border bg-background-default-subtle p-4 pb-0'>
<UrlInput onRun={handleRun} isRunning={isRunning} />
<OptionsWrap
className='mt-4'
@@ -201,7 +201,7 @@ const JinaReader: FC<Props> = ({
</OptionsWrap>
{!isInit && (
<div className='mt-3 relative left-[-16px] w-[calc(100%_+_32px)] rounded-b-xl'>
<div className='relative left-[-16px] mt-3 w-[calc(100%_+_32px)] rounded-b-xl'>
{isRunning
&& <Crawling
className='mt-2'

2
web/app/components/datasets/create/website/jina-reader/options.tsx
View File

@@ -47,7 +47,7 @@ const Options: FC<Props> = ({
/>
<div className='flex justify-between space-x-4'>
<Field
className='grow shrink-0'
className='shrink-0 grow'
label={t(`${I18N_PREFIX}.limit`)}
value={payload.limit}
onChange={handleChange('limit')}

14
web/app/components/datasets/create/website/no-data.tsx
View File

@@ -37,17 +37,17 @@ const NoData: FC<Props> = ({
return (
<>
<div className='max-w-[640px] p-6 rounded-2xl bg-workflow-process-bg mt-4'>
<div className='flex w-12 h-12 items-center justify-center bg-components-card-bg rounded-[10px]
border-[0.5px] border-components-card-border shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
<div className='mt-4 max-w-[640px] rounded-2xl bg-workflow-process-bg p-6'>
<div className='flex h-12 w-12 items-center justify-center rounded-[10px] border-[0.5px]
border-components-card-border bg-components-card-bg shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
{currentProvider.emoji}
</div>
<div className='mt-2 mb-1 pt-1 pb-3 flex flex-col gap-y-1'>
<span className='text-text-secondary system-md-semibold'>
<div className='mb-1 mt-2 flex flex-col gap-y-1 pb-3 pt-1'>
<span className='system-md-semibold text-text-secondary'>
{currentProvider.title}
<Icon3Dots className='inline relative -top-2.5 -left-1.5' />
<Icon3Dots className='relative -left-1.5 -top-2.5 inline' />
</span>
<div className='text-text-tertiary system-sm-regular'>
<div className='system-sm-regular text-text-tertiary'>
{currentProvider.description}
</div>
</div>

6
web/app/components/datasets/create/website/preview.tsx
View File

@@ -22,14 +22,14 @@ const WebsitePreview = ({
<div className={cn(s.previewHeader)}>
<div className={cn(s.title, 'title-md-semi-bold')}>
<span>{t('datasetCreation.stepOne.pagePreview')}</span>
<div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
<div className='flex h-6 w-6 cursor-pointer items-center justify-center' onClick={hidePreview}>
<XMarkIcon className='h-4 w-4'></XMarkIcon>
</div>
</div>
<div className='title-sm-semi-bold text-text-primary break-words'>
<div className='title-sm-semi-bold break-words text-text-primary'>
{payload.title}
</div>
<div className='truncate system-xs-medium text-text-tertiary' title={payload.source_url}>{payload.source_url}</div>
<div className='system-xs-medium truncate text-text-tertiary' title={payload.source_url}>{payload.source_url}</div>
</div>
<div className={cn(s.previewContent, 'body-md-regular')}>
<div className={cn(s.fileContent)}>{payload.markdown}</div>