estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: dark mode for knowledge (#15236)

Browse Source
This commit is contained in:
Wu Tianwei
2025-03-19 11:19:57 +08:00
committed by GitHub
parent 97eadb867c
commit 411e332f1b
72 changed files with 473 additions and 761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -253,9 +253,9 @@ 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-gray-900 font-medium text-sm mr-2">
<div className="flex items-center justify-between text-text-secondary font-medium text-sm mr-2">
{isEmbedding && <div className='flex items-center'>
<RiLoader2Fill className='size-4 mr-1 animate-spin' />
<RiLoader2Fill className='size-4 mr-1 animate-spin text-text-secondary' />
{t('datasetDocuments.embedding.processing')}
</div>}
{isEmbeddingCompleted && t('datasetDocuments.embedding.completed')}
@@ -304,7 +304,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
/>
)}
<div className="grow flex items-center gap-1 w-0" title={getSourceName(indexingStatusDetail.id)}>
<div className="text-xs truncate">
<div className="system-xs-medium text-text-secondary truncate">
{getSourceName(indexingStatusDetail.id)}
</div>
{
@@ -314,7 +314,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
}
</div>
{isSourceEmbedding(indexingStatusDetail) && (
<div className="shrink-0 text-xs">{`${getSourcePercent(indexingStatusDetail)}%`}</div>
<div className="shrink-0 text-xs text-text-secondary">{`${getSourcePercent(indexingStatusDetail)}%`}</div>
)}
{indexingStatusDetail.indexing_status === 'error' && (
<Tooltip

9
web/app/components/datasets/create/empty-dataset-creation-modal/index.module.css
View File

@@ -6,11 +6,10 @@
@apply flex items-center place-content-between h-8;
}
.modalHeader .title {
@apply grow;
@apply grow text-text-primary;
font-weight: 600;
font-size: 20px;
line-height: 32px;
color: #101828;
}
.modalHeader .close {
@apply shrink-0 h-4 w-4 bg-center bg-no-repeat cursor-pointer;
@@ -19,20 +18,18 @@
}
.modal .tip {
@apply mt-1 mb-8;
@apply mt-1 mb-8 text-text-tertiary;
font-weight: 400;
font-size: 13px;
line-height: 18px;
color: #667085;
}
.form {
@apply mb-8;
}
.form .label {
@apply mb-2;
@apply mb-2 text-text-primary;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #101828;
}

27
web/app/components/datasets/create/file-preview/index.module.css
View File

@@ -1,43 +1,29 @@
.filePreview {
@apply flex flex-col border-l border-gray-200 shrink-0;
@apply flex flex-col border-l border-components-panel-border shrink-0 bg-background-default-lighter;
width: 100%;
background-color: #fcfcfd;
}
.previewHeader {
@apply border-b border-gray-200 shrink-0;
@apply border-b border-divider-subtle shrink-0;
margin: 42px 32px 0;
padding-bottom: 16px;
}
.previewHeader .title {
display: flex;
justify-content: space-between;
align-items: center;
color: #101828;
font-weight: 600;
font-size: 18px;
line-height: 28px;
@apply flex justify-between items-center text-text-primary;
}
.previewHeader .fileName {
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: #1D2939;
@apply text-text-tertiary;
}
.previewHeader .filetype {
color: #667085;
@apply text-text-tertiary;
}
.previewContent {
@apply overflow-y-auto grow;
@apply overflow-y-auto grow text-text-secondary;
padding: 20px 32px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #344054;
}
.previewContent .loading {
@@ -46,6 +32,7 @@
background: #f9fafb center no-repeat url(../assets/Loading.svg);
background-size: contain;
}
.fileContent {
white-space: pre-line;
word-break: break-all;

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

@@ -46,13 +46,13 @@ const FilePreview = ({
return (
<div className={cn(s.filePreview, 'h-full')}>
<div className={cn(s.previewHeader)}>
<div className={cn(s.title)}>
<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}>
<XMarkIcon className='h-4 w-4'></XMarkIcon>
</div>
</div>
<div className={cn(s.fileName)}>
<div className={cn(s.fileName, 'system-xs-medium')}>
<span>{getFileName(file)}</span><span className={cn(s.filetype)}>.{file?.extension}</span>
</div>
</div>

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

@@ -256,7 +256,7 @@ const FileUploader = ({
/>
)}
<div className={cn('text-text-tertiary text-sm font-semibold leading-6 mb-1', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
<div className={cn('text-text-secondary text-sm font-semibold leading-6 mb-1', 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')}>

84
web/app/components/datasets/create/notion-page-preview/index.module.css
View File

@@ -1,54 +1,34 @@
.filePreview {
@apply flex flex-col border-l border-gray-200 shrink-0;
width: 528px;
background-color: #fcfcfd;
}
.previewHeader {
@apply border-b border-gray-200 shrink-0;
margin: 42px 32px 0;
padding-bottom: 16px;
}
.previewHeader .title {
display: flex;
justify-content: space-between;
align-items: center;
color: #101828;
font-weight: 600;
font-size: 18px;
line-height: 28px;
}
.previewHeader .fileName {
display: flex;
align-items: center;
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: #1D2939;
}
.previewHeader .filetype {
color: #667085;
}
.previewContent {
@apply overflow-y-auto grow;
padding: 20px 32px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #344054;
}
.previewContent .loading {
width: 100%;
height: 180px;
background: #f9fafb center no-repeat url(../assets/Loading.svg);
background-size: contain;
}
.fileContent {
white-space: pre-line;
}
@apply flex flex-col border-l border-components-panel-border shrink-0 bg-background-default-lighter;
width: 528px;
}
.previewHeader {
@apply border-b border-divider-subtle shrink-0;
margin: 42px 32px 0;
padding-bottom: 16px;
}
.previewHeader .title {
@apply flex justify-between items-center text-text-primary;
}
.previewHeader .fileName {
@apply flex items-center text-text-tertiary;
}
.previewContent {
@apply overflow-y-auto grow text-text-secondary;
padding: 20px 32px;
}
.previewContent .loading {
width: 100%;
height: 180px;
background: #f9fafb center no-repeat url(../assets/Loading.svg);
background-size: contain;
}
.fileContent {
white-space: pre-line;
}

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

@@ -46,13 +46,13 @@ const NotionPagePreview = ({
return (
<div className={cn(s.filePreview, 'h-full')}>
<div className={cn(s.previewHeader)}>
<div className={cn(s.title)}>
<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}>
<XMarkIcon className='h-4 w-4'></XMarkIcon>
</div>
</div>
<div className={cn(s.fileName)}>
<div className={cn(s.fileName, 'system-xs-medium')}>
<NotionIcon
className='shrink-0 mr-1'
type='page'
@@ -61,7 +61,7 @@ const NotionPagePreview = ({
{currentPage?.page_name}
</div>
</div>
<div className={cn(s.previewContent)}>
<div className={cn(s.previewContent, 'body-md-regular')}>
{loading && <div className={cn(s.loading)} />}
{!loading && (
<div className={cn(s.fileContent, 'body-md-regular')}>{previewContent}</div>

95
web/app/components/datasets/create/step-one/index.module.css
View File

@@ -1,11 +1,5 @@
.stepHeader {
position: sticky;
top: 0;
left: 0;
padding: 42px 64px 12px 0;
font-weight: 600;
font-size: 18px;
line-height: 28px;
}
.form {
@@ -14,38 +8,22 @@
}
.dataSourceItem {
@apply w-full box-border relative flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
border: 0.5px solid #EAECF0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #101828;
@apply w-full relative flex items-center p-3 h-14 bg-components-option-card-option-bg rounded-xl
cursor-pointer border border-components-option-card-option-border text-text-secondary;
}
.dataSourceItem:hover {
background-color: #f5f8ff;
border: 0.5px solid #B2CCFF;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
@apply bg-components-option-card-option-bg-hover border border-components-option-card-option-border-hover shadow-xs shadow-shadow-shadow-3;
}
.dataSourceItem.active {
background-color: #f5f8ff;
border: 1.5px solid #528BFF;
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
}
.dataSourceItem.disabled {
background-color: #f9fafb;
border: 0.5px solid #EAECF0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
cursor: default;
@apply bg-components-option-card-option-selected-bg border border-components-option-card-option-selected-border
ring-[0.5px] ring-components-option-card-option-selected-border;
}
.dataSourceItem.disabled,
.dataSourceItem.disabled:hover {
background-color: #f9fafb;
border: 0.5px solid #EAECF0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
@apply bg-components-option-card-option-bg border-[0.5px] border-components-option-card-option-border cursor-not-allowed text-text-disabled shadow-none;
}
.comingTag {
@@ -64,17 +42,9 @@
}
.datasetIcon {
@apply flex shrink-0 mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
background-color: #F5FAFF;
@apply flex shrink-0 mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat bg-text-primary-on-surface border-[0.5px] border-divider-regular backdrop-blur-sm;
background-image: url(../assets/file.svg);
background-size: 16px;
border: 0.5px solid #D1E9FF;
}
.dataSourceItem:active .datasetIcon,
.dataSourceItem:hover .datasetIcon {
background-color: #F5F8FF;
border: 0.5px solid #E0EAFF;
}
.datasetIcon.notion {
@@ -97,54 +67,7 @@
background-color: #eaecf0;
}
.notionConnectionTip {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px;
width: 640px;
background: #F9FAFB;
border-radius: 16px;
}
.notionIcon {
display: flex;
padding: 12px;
width: 48px;
height: 48px;
background: #fff center no-repeat url(../assets/notion.svg);
background: var(--color-components-card-bg) center no-repeat url(../assets/notion.svg);
background-size: 24px;
border: 0.5px solid #EAECF5;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
border-radius: 12px;
}
.notionConnectionTip .title {
position: relative;
margin: 24px 0 4px;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #374151;
}
.notionConnectionTip .title::after {
content: '';
position: absolute;
top: -6px;
right: -12px;
width: 16px;
height: 16px;
background: center no-repeat url(../assets/Icon-3-dots.svg);
background-size: contain;
}
.notionConnectionTip .tip {
margin-bottom: 20px;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
color: #6B7280;
}

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

@@ -19,6 +19,7 @@ import { useDatasetDetailContext } from '@/context/dataset-detail'
import { useProviderContext } from '@/context/provider-context'
import VectorSpaceFull from '@/app/components/billing/vector-space-full'
import classNames from '@/utils/classnames'
import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
type IStepOneProps = {
datasetId?: string
@@ -48,10 +49,15 @@ export const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
const { t } = useTranslation()
return (
<div className={s.notionConnectionTip}>
<span className={s.notionIcon} />
<div className={s.title}>{t('datasetCreation.stepOne.notionSyncTitle')}</div>
<div className={s.tip}>{t('datasetCreation.stepOne.notionSyncTip')}</div>
<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'>
{t('datasetCreation.stepOne.notionSyncTitle')}
<Icon3Dots className='inline relative -top-2.5 -left-1.5 w-4 h-4 text-text-secondary' />
</span>
<div className='text-text-tertiary system-sm-regular'>{t('datasetCreation.stepOne.notionSyncTip')}</div>
</div>
<Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
</div>
)
@@ -132,7 +138,9 @@ const StepOne = ({
<div className={classNames(s.form)}>
{
shouldShowDataSourceTypeList && (
<div className={classNames(s.stepHeader, 'z-10 text-text-secondary bg-components-panel-bg-blur')}>{t('datasetCreation.steps.one')}</div>
<div className={classNames(s.stepHeader, 'text-text-secondary system-md-semibold')}>
{t('datasetCreation.steps.one')}
</div>
)
}
{
@@ -141,6 +149,7 @@ const StepOne = ({
<div
className={cn(
s.dataSourceItem,
'system-sm-medium',
dataSourceType === DataSourceType.FILE && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
)}
@@ -163,6 +172,7 @@ const StepOne = ({
<div
className={cn(
s.dataSourceItem,
'system-sm-medium',
dataSourceType === DataSourceType.NOTION && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
)}
@@ -185,6 +195,7 @@ const StepOne = ({
<div
className={cn(
s.dataSourceItem,
'system-sm-medium',
dataSourceType === DataSourceType.WEB && s.active,
dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
)}
@@ -205,7 +216,7 @@ const StepOne = ({
<>
<FileUploader
fileList={files}
titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg' : undefined}
prepareFileList={updateFileList}
onFileListUpdate={updateFileList}
onFileUpdate={updateFile}

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

@@ -34,8 +34,8 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
<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 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>
</div>
</div>
</div>

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

@@ -581,7 +581,7 @@ const StepTwo = ({
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 mb-1'}>{t('datasetCreation.stepTwo.segmentation')}</div>
<div className={'system-md-semibold text-text-secondary mb-1'}>{t('datasetCreation.stepTwo.segmentation')}</div>
{((isInUpload && [ChunkingMode.text, ChunkingMode.qa].includes(currentDataset!.doc_form))
|| isUploadInEmptyDataset
|| isInInit)
@@ -832,10 +832,10 @@ const StepTwo = ({
</div>
</OptionCard>}
<Divider className='my-5' />
<div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.indexMode')}</div>
<div className={'system-md-semibold text-text-secondary mb-1'}>{t('datasetCreation.stepTwo.indexMode')}</div>
<div className='flex items-center gap-2'>
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
<OptionCard className='flex-1'
<OptionCard className='flex-1 self-stretch'
title={<div className='flex items-center'>
{t('datasetCreation.stepTwo.qualified')}
<Badge className={cn('ml-1 h-[18px]', (!hasSetIndexType && indexType === IndexingType.QUALIFIED) ? 'border-text-accent-secondary text-text-accent-secondary' : '')} uppercase>
@@ -889,7 +889,7 @@ const StepTwo = ({
placement={'top'}
>
<PortalToFollowElemTrigger asChild>
<OptionCard className='flex-1'
<OptionCard className='flex-1 self-stretch'
title={t('datasetCreation.stepTwo.economical')}
description={t('datasetCreation.stepTwo.economicalTip')}
icon={<Image src={indexMethodIcon.economical} alt='' />}
@@ -916,11 +916,11 @@ 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-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40'></div>
<div className='absolute top-0 left-0 right-0 bottom-0 bg-dataset-warning-message-bg opacity-40'></div>
<div className='p-1'>
<AlertTriangle className='size-4 text-text-warning-secondary' />
</div>
<span className='system-xs-medium'>{t('datasetCreation.stepTwo.highQualityTip')}</span>
<span className='system-xs-medium text-text-primary'>{t('datasetCreation.stepTwo.highQualityTip')}</span>
</div>
)}
{hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
@@ -932,7 +932,7 @@ const StepTwo = ({
{/* Embedding model */}
{indexType === IndexingType.QUALIFIED && (
<div className='mt-5'>
<div className={cn('system-md-semibold mb-1', datasetId && 'flex justify-between items-center')}>{t('datasetSettings.form.embeddingModel')}</div>
<div className={cn('system-md-semibold text-text-secondary mb-1', datasetId && 'flex justify-between items-center')}>{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'>
<div className='mt-2 system-xs-medium 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 mb-0.5'>{t('datasetSettings.form.retrievalSetting.title')}</div>
<div className='system-md-semibold text-text-secondary mb-0.5'>{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 mb-0.5', 'flex justify-between items-center')}>
<div className={cn('system-md-semibold text-text-secondary mb-0.5', 'flex justify-between items-center')}>
<div>{t('datasetSettings.form.retrievalSetting.title')}</div>
</div>
)}

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

@@ -34,7 +34,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
</div>
</div>
<TriangleArrow
className='absolute left-4 -bottom-1.5 text-components-panel-bg'
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>

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

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

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

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
import Checkbox from '@/app/components/base/checkbox'
import Button from '@/app/components/base/button'
type Props = {
payload: CrawlResultItemType
@@ -27,13 +28,32 @@ const CrawledResultItem: FC<Props> = ({
onCheckChange(!isChecked)
}, [isChecked, onCheckChange])
return (
<div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
<div className='flex items-center h-5'>
<Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
<div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
<div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
<div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'rounded-lg p-2 cursor-pointer')}>
<div className='relative flex'>
<div className='h-5 flex items-center'>
<Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
</div>
<div className='flex flex-col grow min-w-0'>
<div
className='truncate text-sm font-medium text-text-secondary'
title={payload.title}
>
{payload.title}
</div>
<div
className='mt-0.5 truncate text-xs text-text-tertiary'
title={payload.source_url}
>
{payload.source_url}
</div>
</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'
>
{t('datasetCreation.stepOne.website.preview')}
</Button>
</div>
<div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
</div>
)
}

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

@@ -57,17 +57,19 @@ const CrawledResult: FC<Props> = ({
}, [list, onPreview])
return (
<div className={cn(className, 'border-t border-gray-200')}>
<div className='flex items-center justify-between h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
<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'>
<CheckboxWithLabel
isChecked={isCheckAll}
onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
labelClassName='!font-medium'
labelClassName='system-[13px] leading-[16px] font-medium text-text-secondary'
/>
<div>{t(`${I18N_PREFIX}.scrapTimeInfo`, {
total: list.length,
time: usedTime.toFixed(1),
})}</div>
<div className='text-xs text-text-tertiary'>
{t(`${I18N_PREFIX}.scrapTimeInfo`, {
total: list.length,
time: usedTime.toFixed(1),
})}
</div>
</div>
<div className='p-2'>
{list.map((item, index) => (

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

@@ -2,7 +2,6 @@
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import { RowStruct } from '@/app/components/base/icons/src/public/other'
type Props = {
@@ -19,15 +18,16 @@ const Crawling: FC<Props> = ({
const { t } = useTranslation()
return (
<div className={cn(className, 'border-t border-gray-200')}>
<div className='flex items-center h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
<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'>
{t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
</div>
<div className='p-2'>
{['', '', '', ''].map((item, index) => (
<div className='py-[5px]' key={index}>
<RowStruct />
<RowStruct className='text-text-quaternary' />
</div>
))}
</div>

6
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-gray-200 bg-[#FFFAEB]')}>
<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='text-sm font-medium text-[#DC6803]'>{title}</div>
<div className='system-md-medium text-text-warning'>{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 system-xs-regular text-text-secondary'>{errorMsg}</div>
)}
</div>
)

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

@@ -31,8 +31,8 @@ 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-text-primary')}>{label} </div>
{isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
<div className={cn(labelClassName, 'flex items-center h-[16px] 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
popupContent={

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

@@ -20,7 +20,7 @@ const Input: FC<Props> = ({
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value
if (isNumber) {
let numberValue = parseInt(value, 10) // integer only
let numberValue = Number.parseInt(value, 10) // integer only
if (isNaN(numberValue)) {
onChange('')
return
@@ -50,7 +50,12 @@ 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-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
focus:shadow-xs focus:shadow-shadow-shadow-3
placeholder:text-components-input-text-placeholder'
placeholder={placeholder}
/>
)

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

@@ -3,8 +3,8 @@ import { useBoolean } from 'ahooks'
import type { FC } from 'react'
import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { RiEqualizer2Line } from '@remixicon/react'
import cn from '@/utils/classnames'
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'
@@ -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 items-center gap-x-1 h-[26px] py-1 cursor-pointer select-none'
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>
<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>
<ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 text-gray-500')} />
<ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 shrink-0 text-text-tertiary')} />
</div>
{!fold && (
<div className='mb-4'>

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

@@ -28,7 +28,7 @@ const UrlInput: FC<Props> = ({
}, [isRunning, onRun, url])
return (
<div className='flex items-center justify-between'>
<div className='flex items-center justify-between gap-x-2'>
<Input
value={url}
onChange={handleUrlChange}
@@ -37,8 +37,8 @@ const UrlInput: FC<Props> = ({
<Button
variant='primary'
onClick={handleOnRun}
className='ml-2'
loading={isRunning}
spinnerClassName='!ml-0'
>
{!isRunning ? t(`${I18N_PREFIX}.run`) : ''}
</Button>

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

@@ -2,8 +2,8 @@
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
import Button from '@/app/components/base/button'
const I18N_PREFIX = 'datasetCreation.stepOne.website'
@@ -19,22 +19,23 @@ const Header: FC<Props> = ({
return (
<div className='flex h-6 items-center justify-between'>
<div className='flex items-center'>
<div className='text-base font-medium text-gray-700'>{t(`${I18N_PREFIX}.firecrawlTitle`)}</div>
<div className='ml-2 mr-1 w-px h-3.5 bg-gray-200'></div>
<div
className='p-1 rounded-md hover:bg-black/5 cursor-pointer'
onClick={onSetting}
>
<Settings01 className='w-3.5 h-3.5 text-gray-500' />
</div>
<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]'>
{t(`${I18N_PREFIX}.configureFirecrawl`)}
</span>
</Button>
</div>
<a
href='https://docs.firecrawl.dev/introduction'
target='_blank' rel='noopener noreferrer'
className='flex items-center text-xs text-primary-600'
target='_blank'
rel='noopener noreferrer'
className='inline-flex items-center gap-x-1 text-xs font-medium text-text-accent'
>
<BookOpen01 className='mr-1 w-3.5 h-3.5 text-primary-600' />
{t(`${I18N_PREFIX}.firecrawlDoc`)}
<RiBookOpenLine className='w-3.5 h-3.5 text-text-accent' />
<span>{t(`${I18N_PREFIX}.firecrawlDoc`)}</span>
</a>
</div>
)

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

@@ -9,7 +9,6 @@ import Crawling from '../base/crawling'
import ErrorMessage from '../base/error-message'
import Header from './header'
import Options from './options'
import cn from '@/utils/classnames'
import { useModalContext } from '@/context/modal-context'
import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
import Toast from '@/app/components/base/toast'
@@ -99,7 +98,7 @@ const FireCrawl: FC<Props> = ({
isError: false,
data: {
...res,
total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
},
}
}
@@ -116,7 +115,7 @@ const FireCrawl: FC<Props> = ({
// update the progress
setCrawlResult({
...res,
total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
})
onCheckedCrawlResultChange(res.data || []) // default select the crawl result
await sleep(2500)
@@ -179,10 +178,10 @@ const FireCrawl: FC<Props> = ({
return (
<div>
<Header onSetting={handleSetting} />
<div className={cn('mt-2 p-4 pb-0 rounded-xl border border-gray-200')}>
<div className='mt-2 p-4 pb-0 rounded-xl border border-components-panel-border bg-background-default-subtle'>
<UrlInput onRun={handleRun} isRunning={isRunning} />
<OptionsWrap
className={cn('mt-4')}
className='mt-4'
controlFoldOptions={controlFoldOptions}
>
<Options className='mt-2' payload={crawlOptions} onChange={onCrawlOptionsChange} />
@@ -194,7 +193,7 @@ const FireCrawl: FC<Props> = ({
&& <Crawling
className='mt-2'
crawledNum={crawlResult?.current || 0}
totalNum={crawlResult?.total || parseFloat(crawlOptions.limit as string) || 0}
totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0}
/>}
{showError && (
<ErrorMessage className='rounded-b-xl' title={t(`${I18N_PREFIX}.exceptionErrorTitle`)} errorMsg={crawlErrorMessage} />
@@ -206,7 +205,7 @@ const FireCrawl: FC<Props> = ({
checkedList={checkedCrawlResult}
onSelectedChange={onCheckedCrawlResultChange}
onPreview={onPreview}
usedTime={parseFloat(crawlResult?.time_consuming as string) || 0}
usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
/>
}
</div>

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

@@ -36,6 +36,7 @@ const Options: FC<Props> = ({
label={t(`${I18N_PREFIX}.crawlSubPage`)}
isChecked={payload.crawl_sub_pages}
onChange={handleChange('crawl_sub_pages')}
labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
/>
<div className='flex justify-between space-x-4'>
<Field
@@ -76,6 +77,7 @@ const Options: FC<Props> = ({
label={t(`${I18N_PREFIX}.extractOnlyMainContent`)}
isChecked={payload.only_main_content}
onChange={handleChange('only_main_content')}
labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
/>
</div>
)

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

@@ -73,27 +73,29 @@ const Website: FC<Props> = ({
return (
<div>
<div className="mb-4">
<div className="font-medium text-gray-700 mb-2 h-6">
<div className="system-md-medium text-text-secondary mb-2">
{t('datasetCreation.stepOne.website.chooseProvider')}
</div>
<div className="flex space-x-2">
<button
className={`px-4 py-2 text-sm font-medium rounded-md flex items-center justify-center ${
className={cn('px-4 py-2 rounded-lg flex items-center justify-center',
selectedProvider === DataSourceProvider.jinaReader
? 'bg-primary-50 text-primary-600'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
? '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`,
)}
onClick={() => setSelectedProvider(DataSourceProvider.jinaReader)}
>
<span className={cn(s.jinaLogo, 'mr-2')} />
<span>Jina Reader</span>
</button>
<button
className={`px-4 py-2 text-sm font-medium rounded-md ${
className={cn('px-4 py-2 rounded-lg',
selectedProvider === DataSourceProvider.fireCrawl
? 'bg-primary-50 text-primary-600'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
? '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`,
)}
onClick={() => setSelectedProvider(DataSourceProvider.fireCrawl)}
>
🔥 Firecrawl

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

@@ -5,7 +5,7 @@ import cn from '@/utils/classnames'
import Checkbox from '@/app/components/base/checkbox'
import Tooltip from '@/app/components/base/tooltip'
interface Props {
type Props = {
className?: string
isChecked: boolean
onChange: (isChecked: boolean) => void
@@ -25,7 +25,7 @@ const CheckboxWithLabel: FC<Props> = ({
return (
<label className={cn(className, 'flex items-center h-7 space-x-2')}>
<Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
<div className={cn(labelClassName, 'text-sm font-normal text-gray-800')}>{label}</div>
<div className={cn('text-sm font-normal text-gray-800', labelClassName)}>{label}</div>
{tooltip && (
<Tooltip
popupContent={

40
web/app/components/datasets/create/website/jina-reader/crawled-result-item.tsx
View File

@@ -1,40 +0,0 @@
'use client'
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
import Checkbox from '@/app/components/base/checkbox'
interface Props {
payload: CrawlResultItemType
isChecked: boolean
isPreview: boolean
onCheckChange: (checked: boolean) => void
onPreview: () => void
}
const CrawledResultItem: FC<Props> = ({
isPreview,
payload,
isChecked,
onCheckChange,
onPreview,
}) => {
const { t } = useTranslation()
const handleCheckChange = useCallback(() => {
onCheckChange(!isChecked)
}, [isChecked, onCheckChange])
return (
<div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
<div className='flex items-center h-5'>
<Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
<div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
<div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
</div>
<div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
</div>
)
}
export default React.memo(CrawledResultItem)

87
web/app/components/datasets/create/website/jina-reader/crawled-result.tsx
View File

@@ -1,87 +0,0 @@
'use client'
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import CheckboxWithLabel from './base/checkbox-with-label'
import CrawledResultItem from './crawled-result-item'
import cn from '@/utils/classnames'
import type { CrawlResultItem } from '@/models/datasets'
const I18N_PREFIX = 'datasetCreation.stepOne.website'
interface Props {
className?: string
list: CrawlResultItem[]
checkedList: CrawlResultItem[]
onSelectedChange: (selected: CrawlResultItem[]) => void
onPreview: (payload: CrawlResultItem) => void
usedTime: number
}
const CrawledResult: FC<Props> = ({
className = '',
list,
checkedList,
onSelectedChange,
onPreview,
usedTime,
}) => {
const { t } = useTranslation()
const isCheckAll = checkedList.length === list.length
const handleCheckedAll = useCallback(() => {
if (!isCheckAll)
onSelectedChange(list)
else
onSelectedChange([])
}, [isCheckAll, list, onSelectedChange])
const handleItemCheckChange = useCallback((item: CrawlResultItem) => {
return (checked: boolean) => {
if (checked)
onSelectedChange([...checkedList, item])
else
onSelectedChange(checkedList.filter(checkedItem => checkedItem.source_url !== item.source_url))
}
}, [checkedList, onSelectedChange])
const [previewIndex, setPreviewIndex] = React.useState<number>(-1)
const handlePreview = useCallback((index: number) => {
return () => {
setPreviewIndex(index)
onPreview(list[index])
}
}, [list, onPreview])
return (
<div className={cn(className, 'border-t border-gray-200')}>
<div className='flex items-center justify-between h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
<CheckboxWithLabel
isChecked={isCheckAll}
onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
labelClassName='!font-medium'
/>
<div>{t(`${I18N_PREFIX}.scrapTimeInfo`, {
total: list.length,
time: usedTime.toFixed(1),
})}</div>
</div>
<div className='p-2'>
{list.map((item, index) => (
<CrawledResultItem
key={item.source_url}
isPreview={index === previewIndex}
onPreview={handlePreview(index)}
payload={item}
isChecked={checkedList.some(checkedItem => checkedItem.source_url === item.source_url)}
onCheckChange={handleItemCheckChange(item)}
/>
))}
</div>
</div>
)
}
export default React.memo(CrawledResult)

37
web/app/components/datasets/create/website/jina-reader/crawling.tsx
View File

@@ -1,37 +0,0 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import { RowStruct } from '@/app/components/base/icons/src/public/other'
interface Props {
className?: string
crawledNum: number
totalNum: number
}
const Crawling: FC<Props> = ({
className = '',
crawledNum,
totalNum,
}) => {
const { t } = useTranslation()
return (
<div className={cn(className, 'border-t border-gray-200')}>
<div className='flex items-center h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
{t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
</div>
<div className='p-2'>
{['', '', '', ''].map((item, index) => (
<div className='py-[5px]' key={index}>
<RowStruct />
</div>
))}
</div>
</div>
)
}
export default React.memo(Crawling)

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

@@ -2,8 +2,8 @@
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
import Button from '@/app/components/base/button'
const I18N_PREFIX = 'datasetCreation.stepOne.website'
@@ -19,22 +19,23 @@ const Header: FC<Props> = ({
return (
<div className='flex h-6 items-center justify-between'>
<div className='flex items-center'>
<div className='text-base font-medium text-gray-700'>{t(`${I18N_PREFIX}.jinaReaderTitle`)}</div>
<div className='ml-2 mr-1 w-px h-3.5 bg-gray-200'></div>
<div
className='p-1 rounded-md hover:bg-black/5 cursor-pointer'
onClick={onSetting}
>
<Settings01 className='w-3.5 h-3.5 text-gray-500' />
</div>
<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]'>
{t(`${I18N_PREFIX}.configureJinaReader`)}
</span>
</Button>
</div>
<a
href='https://jina.ai/reader'
target='_blank' rel='noopener noreferrer'
className='flex items-center text-xs text-primary-600'
target='_blank'
rel='noopener noreferrer'
className='inline-flex items-center gap-x-1 text-xs font-medium text-text-accent'
>
<BookOpen01 className='mr-1 w-3.5 h-3.5 text-primary-600' />
{t(`${I18N_PREFIX}.jinaReaderDoc`)}
<RiBookOpenLine className='w-3.5 h-3.5 text-text-accent' />
<span>{t(`${I18N_PREFIX}.jinaReaderDoc`)}</span>
</a>
</div>
)

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

@@ -9,7 +9,6 @@ import Crawling from '../base/crawling'
import ErrorMessage from '../base/error-message'
import Header from './header'
import Options from './options'
import cn from '@/utils/classnames'
import { useModalContext } from '@/context/modal-context'
import Toast from '@/app/components/base/toast'
import { checkJinaReaderTaskStatus, createJinaReaderTask } from '@/service/datasets'
@@ -99,7 +98,7 @@ const JinaReader: FC<Props> = ({
isError: false,
data: {
...res,
total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
},
}
}
@@ -115,7 +114,7 @@ const JinaReader: FC<Props> = ({
// update the progress
setCrawlResult({
...res,
total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
})
onCheckedCrawlResultChange(res.data || []) // default select the crawl result
await sleep(2500)
@@ -192,10 +191,10 @@ const JinaReader: FC<Props> = ({
return (
<div>
<Header onSetting={handleSetting} />
<div className={cn('mt-2 p-4 pb-0 rounded-xl border border-gray-200')}>
<div className='mt-2 p-4 pb-0 rounded-xl border border-components-panel-border bg-background-default-subtle'>
<UrlInput onRun={handleRun} isRunning={isRunning} />
<OptionsWrap
className={cn('mt-4')}
className='mt-4'
controlFoldOptions={controlFoldOptions}
>
<Options className='mt-2' payload={crawlOptions} onChange={onCrawlOptionsChange} />
@@ -207,7 +206,7 @@ const JinaReader: FC<Props> = ({
&& <Crawling
className='mt-2'
crawledNum={crawlResult?.current || 0}
totalNum={crawlResult?.total || parseFloat(crawlOptions.limit as string) || 0}
totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0}
/>}
{showError && (
<ErrorMessage className='rounded-b-xl' title={t(`${I18N_PREFIX}.exceptionErrorTitle`)} errorMsg={crawlErrorMessage} />
@@ -219,7 +218,7 @@ const JinaReader: FC<Props> = ({
checkedList={checkedCrawlResult}
onSelectedChange={onCheckedCrawlResultChange}
onPreview={onPreview}
usedTime={parseFloat(crawlResult?.time_consuming as string) || 0}
usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
/>
}
</div>

24
web/app/components/datasets/create/website/jina-reader/mock-crawl-result.ts
View File

@@ -1,24 +0,0 @@
import type { CrawlResultItem } from '@/models/datasets'
const result: CrawlResultItem[] = [
{
title: 'Start the frontend Docker container separately',
markdown: 'Markdown 1',
description: 'Description 1',
source_url: 'https://example.com/1',
},
{
title: 'Advanced Tool Integration',
markdown: 'Markdown 2',
description: 'Description 2',
source_url: 'https://example.com/2',
},
{
title: 'Local Source Code Start | English | Dify',
markdown: 'Markdown 3',
description: 'Description 3',
source_url: 'https://example.com/3',
},
]
export default result

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

@@ -36,12 +36,14 @@ const Options: FC<Props> = ({
label={t(`${I18N_PREFIX}.crawlSubPage`)}
isChecked={payload.crawl_sub_pages}
onChange={handleChange('crawl_sub_pages')}
labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
/>
<CheckboxWithLabel
label={t(`${I18N_PREFIX}.useSitemap`)}
isChecked={payload.use_sitemap}
onChange={handleChange('use_sitemap')}
tooltip={t(`${I18N_PREFIX}.useSitemapTooltip`) as string}
labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
/>
<div className='flex justify-between space-x-4'>
<Field

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

@@ -37,13 +37,17 @@ const NoData: FC<Props> = ({
return (
<>
<div className='max-w-[640px] p-6 rounded-2xl bg-gray-50 mt-4'>
<div className='flex w-11 h-11 items-center justify-center bg-gray-50 rounded-xl border-[0.5px] border-gray-100 shadow-lg'>
<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]'>
{currentProvider.emoji}
</div>
<div className='my-2'>
<span className='text-gray-700 font-semibold'>{currentProvider.title}<Icon3Dots className='inline relative -top-3 -left-1.5' /></span>
<div className='mt-1 pb-3 text-gray-500 text-[13px] font-normal'>
<div className='mt-2 mb-1 pt-1 pb-3 flex flex-col gap-y-1'>
<span className='text-text-secondary system-md-semibold'>
{currentProvider.title}
<Icon3Dots className='inline relative -top-2.5 -left-1.5' />
</span>
<div className='text-text-tertiary system-sm-regular'>
{currentProvider.description}
</div>
</div>

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

@@ -20,19 +20,19 @@ const WebsitePreview = ({
return (
<div className={cn(s.filePreview, 'h-full')}>
<div className={cn(s.previewHeader)}>
<div className={cn(s.title)}>
<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}>
<XMarkIcon className='h-4 w-4'></XMarkIcon>
</div>
</div>
<div className='leading-5 text-sm font-medium text-gray-900 break-words'>
<div className='title-sm-semi-bold text-text-primary break-words'>
{payload.title}
</div>
<div className='truncate leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
<div className='truncate system-xs-medium text-text-tertiary' title={payload.source_url}>{payload.source_url}</div>
</div>
<div className={cn(s.previewContent)}>
<div className={cn(s.fileContent, 'body-md-regular')}>{payload.markdown}</div>
<div className={cn(s.previewContent, 'body-md-regular')}>
<div className={cn(s.fileContent)}>{payload.markdown}</div>
</div>
</div>
)