jprdonnelly/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2025-12-25 01:00:42 -05: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

14
web/app/components/datasets/chunk.tsx
View File

@@ -9,9 +9,9 @@ export type ChunkLabelProps = {
export const ChunkLabel: FC<ChunkLabelProps> = (props) => {
const { label, characterCount } = props
return <div className='flex items-center text-text-tertiary text-xs font-medium'>
return <div className='flex items-center text-xs font-medium text-text-tertiary'>
<SelectionMod className='size-[10px]' />
<p className='flex gap-2 ml-0.5'>
<p className='ml-0.5 flex gap-2'>
<span>
{label}
</span>
@@ -31,7 +31,7 @@ export const ChunkContainer: FC<ChunkContainerProps> = (props) => {
const { label, characterCount, children } = props
return <div className='space-y-2'>
<ChunkLabel label={label} characterCount={characterCount} />
<div className='text-text-secondary body-md-regular'>
<div className='body-md-regular text-text-secondary'>
{children}
</div>
</div>
@@ -45,12 +45,12 @@ export const QAPreview: FC<QAPreviewProps> = (props) => {
const { qa } = props
return <div className='flex flex-col gap-y-2'>
<div className='flex gap-x-1'>
<label className='text-text-tertiary text-[13px] font-medium leading-[20px] shrink-0'>Q</label>
<p className='text-text-secondary body-md-regular'>{qa.question}</p>
<label className='shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>Q</label>
<p className='body-md-regular text-text-secondary'>{qa.question}</p>
</div>
<div className='flex gap-x-1'>
<label className='text-text-tertiary text-[13px] font-medium leading-[20px] shrink-0'>A</label>
<p className='text-text-secondary body-md-regular'>{qa.answer}</p>
<label className='shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>A</label>
<p className='body-md-regular text-text-secondary'>{qa.answer}</p>
</div>
</div>
}

4
web/app/components/datasets/common/chunking-mode-label.tsx
View File

@@ -19,8 +19,8 @@ const ChunkingModeLabel: FC<Props> = ({
return (
<Badge>
<div className='flex items-center h-full space-x-0.5 text-text-tertiary'>
<TypeIcon className='w-3 h-3' />
<div className='flex h-full items-center space-x-0.5 text-text-tertiary'>
<TypeIcon className='h-3 w-3' />
<span className='system-2xs-medium-uppercase'>{isGeneralMode ? `${t('dataset.chunkingMode.general')}${isQAMode ? ' · QA' : ''}` : t('dataset.chunkingMode.parentChild')}</span>
</div>
</Badge>

4
web/app/components/datasets/common/document-picker/document-list.tsx
View File

@@ -27,11 +27,11 @@ const DocumentList: FC<Props> = ({
return (
<div
key={id}
className='flex items-center h-8 px-2 hover:bg-state-base-hover rounded-lg space-x-2 cursor-pointer'
className='flex h-8 cursor-pointer items-center space-x-2 rounded-lg px-2 hover:bg-state-base-hover'
onClick={handleChange(item)}
>
<FileIcon name={item.name} extension={extension} size='md' />
<div className='truncate text-text-secondary text-sm'>{name}</div>
<div className='truncate text-sm text-text-secondary'>{name}</div>
</div>
)
})}

12
web/app/components/datasets/common/document-picker/index.tsx
View File

@@ -74,15 +74,15 @@ const DocumentPicker: FC<Props> = ({
placement='bottom-start'
>
<PortalToFollowElemTrigger onClick={togglePopup}>
<div className={cn('flex items-center ml-1 px-2 py-0.5 rounded-lg hover:bg-state-base-hover select-none cursor-pointer', open && 'bg-state-base-hover')}>
<div className={cn('ml-1 flex cursor-pointer select-none items-center rounded-lg px-2 py-0.5 hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
<FileIcon name={name} extension={extension} size='lg' />
<div className='flex flex-col items-start ml-1 mr-0.5'>
<div className='ml-1 mr-0.5 flex flex-col items-start'>
<div className='flex items-center space-x-0.5'>
<span className={cn('system-md-semibold text-text-primary')}> {name || '--'}</span>
<ArrowIcon className={'h-4 w-4 text-text-primary'} />
</div>
<div className='flex items-center h-3 text-text-tertiary space-x-0.5'>
<TypeIcon className='w-3 h-3' />
<div className='flex h-3 items-center space-x-0.5 text-text-tertiary'>
<TypeIcon className='h-3 w-3' />
<span className={cn('system-2xs-medium-uppercase', isParentChild && 'mt-0.5' /* to icon problem cause not ver align */)}>
{isParentChild ? t('dataset.chunkingMode.parentChild') : t('dataset.chunkingMode.general')}
{isParentChild && ` · ${!parentMode ? '--' : parentMode === 'paragraph' ? t('dataset.parentMode.paragraph') : t('dataset.parentMode.fullDoc')}`}
@@ -92,7 +92,7 @@ const DocumentPicker: FC<Props> = ({
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='w-[360px] p-1 pt-2 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
<div className='w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pt-2 shadow-lg backdrop-blur-[5px]'>
<SearchInput value={query} onChange={setQuery} className='mx-1' />
{documentsList
? (
@@ -106,7 +106,7 @@ const DocumentPicker: FC<Props> = ({
onChange={handleChange}
/>
)
: (<div className='mt-2 flex items-center justify-center w-[360px] h-[100px]'>
: (<div className='mt-2 flex h-[100px] w-[360px] items-center justify-center'>
<Loading />
</div>)}
</div>

10
web/app/components/datasets/common/document-picker/preview-document-picker.tsx
View File

@@ -50,9 +50,9 @@ const PreviewDocumentPicker: FC<Props> = ({
offset={4}
>
<PortalToFollowElemTrigger onClick={togglePopup}>
<div className={cn('flex items-center h-6 px-1 rounded-md hover:bg-state-base-hover select-none', open && 'bg-state-base-hover', className)}>
<div className={cn('flex h-6 select-none items-center rounded-md px-1 hover:bg-state-base-hover', open && 'bg-state-base-hover', className)}>
<FileIcon name={name} extension={extension} size='md' />
<div className='flex flex-col items-start ml-1'>
<div className='ml-1 flex flex-col items-start'>
<div className='flex items-center space-x-0.5'>
<span className={cn('system-md-semibold max-w-[200px] truncate text-text-primary')}> {name || '--'}</span>
<ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
@@ -61,8 +61,8 @@ const PreviewDocumentPicker: FC<Props> = ({
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='w-[392px] p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
{files?.length > 1 && <div className='pl-2 flex items-center h-8 system-xs-medium-uppercase text-text-tertiary'>{t('dataset.preprocessDocument', { num: files.length })}</div>}
<div className='w-[392px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'>
{files?.length > 1 && <div className='system-xs-medium-uppercase flex h-8 items-center pl-2 text-text-tertiary'>{t('dataset.preprocessDocument', { num: files.length })}</div>}
{files?.length > 0
? (
<DocumentList
@@ -70,7 +70,7 @@ const PreviewDocumentPicker: FC<Props> = ({
onChange={handleChange}
/>
)
: (<div className='mt-2 flex items-center justify-center w-[360px] h-[100px]'>
: (<div className='mt-2 flex h-[100px] w-[360px] items-center justify-center'>
<Loading />
</div>)}
</div>

8
web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
View File

@@ -46,21 +46,21 @@ const StatusAction: FC<Props> = ({
}) => {
const { Icon, color } = getIcon(type)
return (
<div className='relative flex items-center h-[34px] rounded-lg pl-2 pr-3 border border-components-panel-border bg-components-panel-bg-blur shadow-xs'>
<div className='relative flex h-[34px] items-center rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2 pr-3 shadow-xs'>
<div className={
`absolute inset-0 opacity-40 rounded-lg ${(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
`absolute inset-0 rounded-lg opacity-40 ${(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|| (type === 'warning' && 'bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|| (type === 'error' && 'bg-[linear-gradient(92deg,rgba(240,68,56,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|| (type === 'info' && 'bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
}`}
/>
<div className='relative z-10 flex h-full items-center space-x-2'>
<Icon className={cn('w-4 h-4', color)} />
<Icon className={cn('h-4 w-4', color)} />
<div className='text-[13px] font-normal text-text-secondary'>{description}</div>
{onAction && (
<>
<Divider type='vertical' className='!h-4' />
<div onClick={onAction} className={cn('text-text-accent font-semibold text-[13px] cursor-pointer', disabled && 'text-text-disabled cursor-not-allowed')}>{actionText}</div>
<div onClick={onAction} className={cn('cursor-pointer text-[13px] font-semibold text-text-accent', disabled && 'cursor-not-allowed text-text-disabled')}>{actionText}</div>
</>
)}
</div>

2
web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
View File

@@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
return (
<div className='space-y-2'>
<OptionCard
disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.vector} alt='' />}
title={t('dataset.retrieval.invertedIndex.title')}
description={t('dataset.retrieval.invertedIndex.description')} isActive
activeHeaderClassName='bg-dataset-option-card-purple-gradient'

8
web/app/components/datasets/common/retrieval-method-config/index.tsx
View File

@@ -94,7 +94,7 @@ const RetrievalMethodConfig: FC<Props> = ({
return (
<div className='space-y-2'>
{supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && (
<OptionCard disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
<OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.vector} alt='' />}
title={t('dataset.retrieval.semantic_search.title')}
description={t('dataset.retrieval.semantic_search.description')}
isActive={
@@ -112,7 +112,7 @@ const RetrievalMethodConfig: FC<Props> = ({
</OptionCard>
)}
{supportRetrievalMethods.includes(RETRIEVE_METHOD.fullText) && (
<OptionCard disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.fullText} alt='' />}
<OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.fullText} alt='' />}
title={t('dataset.retrieval.full_text_search.title')}
description={t('dataset.retrieval.full_text_search.description')}
isActive={
@@ -130,11 +130,11 @@ const RetrievalMethodConfig: FC<Props> = ({
</OptionCard>
)}
{supportRetrievalMethods.includes(RETRIEVE_METHOD.hybrid) && (
<OptionCard disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.hybrid} alt='' />}
<OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.hybrid} alt='' />}
title={
<div className='flex items-center space-x-1'>
<div>{t('dataset.retrieval.hybrid_search.title')}</div>
<Badge text={t('dataset.retrieval.hybrid_search.recommend')!} className='border-text-accent-secondary text-text-accent-secondary ml-1 h-[18px]' uppercase />
<Badge text={t('dataset.retrieval.hybrid_search.recommend')!} className='ml-1 h-[18px] border-text-accent-secondary text-text-accent-secondary' uppercase />
</div>
}
description={t('dataset.retrieval.hybrid_search.description')} isActive={

2
web/app/components/datasets/common/retrieval-method-info/index.tsx
View File

@@ -38,7 +38,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
noRadio
chosenConfigWrapClassName='!pb-3'
chosenConfig={
<div className='flex flex-wrap leading-[18px] text-xs font-normal'>
<div className='flex flex-wrap text-xs font-normal leading-[18px]'>
{value.reranking_model.reranking_model_name && (
<div className='mr-8 flex space-x-1'>
<div className='text-gray-500'>{t('common.modelProvider.rerankModel.key')}</div>

10
web/app/components/datasets/common/retrieval-param-config/index.tsx
View File

@@ -115,7 +115,7 @@ const RetrievalParamConfig: FC<Props> = ({
<div>
{!isEconomical && !isHybridSearch && (
<div>
<div className='flex items-center space-x-2 mb-2'>
<div className='mb-2 flex items-center space-x-2'>
{canToggleRerankModalEnable && (
<Switch
size='md'
@@ -124,7 +124,7 @@ const RetrievalParamConfig: FC<Props> = ({
/>
)}
<div className='flex items-center'>
<span className='mr-0.5 system-sm-semibold text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
<span className='system-sm-semibold mr-0.5 text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
<Tooltip
popupContent={
<div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>
@@ -153,7 +153,7 @@ const RetrievalParamConfig: FC<Props> = ({
)}
{
!isHybridSearch && (
<div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-4')}>
<div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-4')}>
<TopKItem
className='grow'
value={value.top_k}
@@ -191,7 +191,7 @@ const RetrievalParamConfig: FC<Props> = ({
{
isHybridSearch && (
<>
<div className='flex gap-2 mb-4'>
<div className='mb-4 flex gap-2'>
{
rerankingModeOptions.map(option => (
<RadioCard
@@ -255,7 +255,7 @@ const RetrievalParamConfig: FC<Props> = ({
/>
)
}
<div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-6')}>
<div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-6')}>
<TopKItem
className='grow'
value={value.top_k}

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>

24
web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
View File

@@ -50,20 +50,20 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
return (
<div className='mt-6'>
<div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div>
<div className='text-sm font-medium text-gray-900'>{t('share.generation.csvStructureTitle')}</div>
<div className='mt-2 max-h-[500px] overflow-auto'>
{docForm === ChunkingMode.qa && (
<table className='table-fixed w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
<table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-gray-200 text-xs'>
<thead className='text-gray-500'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('datasetDocuments.list.batchModal.question')}</td>
<td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('datasetDocuments.list.batchModal.answer')}</td>
<td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.question')}</td>
<td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.answer')}</td>
</tr>
</thead>
<tbody className='text-gray-700'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 1</td>
<td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('datasetDocuments.list.batchModal.answer')} 1</td>
<td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 1</td>
<td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.answer')} 1</td>
</tr>
<tr>
<td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 2</td>
@@ -73,15 +73,15 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
</table>
)}
{docForm === ChunkingMode.text && (
<table className='table-fixed w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
<table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-gray-200 text-xs'>
<thead className='text-gray-500'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('datasetDocuments.list.batchModal.contentTitle')}</td>
<td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.contentTitle')}</td>
</tr>
</thead>
<tbody className='text-gray-700'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 1</td>
<td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 1</td>
</tr>
<tr>
<td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 2</td>
@@ -91,14 +91,14 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
)}
</div>
<CSVDownloader
className="block mt-2 cursor-pointer"
className="mt-2 block cursor-pointer"
type={Type.Link}
filename={'template'}
bom={true}
data={getTemplate()}
>
<div className='flex items-center h-[18px] space-x-1 text-text-accent text-xs font-medium'>
<DownloadIcon className='w-3 h-3 mr-1' />
<div className='flex h-[18px] items-center space-x-1 text-xs font-medium text-text-accent'>
<DownloadIcon className='mr-1 h-3 w-3' />
{t('datasetDocuments.list.batchModal.template')}
</div>
</CSVDownloader>

22
web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
View File

@@ -93,29 +93,29 @@ const CSVUploader: FC<Props> = ({
/>
<div ref={dropRef}>
{!file && (
<div className={cn('flex items-center h-20 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}>
<div className='w-full flex items-center justify-center space-x-2'>
<div className={cn('flex h-20 items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 text-sm font-normal', dragging && 'border border-[#B2CCFF] bg-[#F5F8FF]')}>
<div className='flex w-full items-center justify-center space-x-2'>
<CSVIcon className="shrink-0" />
<div className='text-gray-500'>
{t('datasetDocuments.list.batchModal.csvUploadTitle')}
<span className='text-primary-400 cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
<span className='cursor-pointer text-primary-400' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
</div>
</div>
{dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
{dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
</div>
)}
{file && (
<div className={cn('flex items-center h-20 px-6 rounded-xl bg-gray-50 border border-gray-200 text-sm font-normal group', 'hover:bg-[#F5F8FF] hover:border-[#B2CCFF]')}>
<div className={cn('group flex h-20 items-center rounded-xl border border-gray-200 bg-gray-50 px-6 text-sm font-normal', 'hover:border-[#B2CCFF] hover:bg-[#F5F8FF]')}>
<CSVIcon className="shrink-0" />
<div className='flex ml-2 w-0 grow'>
<span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800'>{file.name.replace(/.csv$/, '')}</span>
<div className='ml-2 flex w-0 grow'>
<span className='max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-gray-800'>{file.name.replace(/.csv$/, '')}</span>
<span className='shrink-0 text-gray-500'>.csv</span>
</div>
<div className='hidden group-hover:flex items-center'>
<div className='hidden items-center group-hover:flex'>
<Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
<div className='mx-2 w-px h-4 bg-gray-200' />
<div className='p-2 cursor-pointer' onClick={removeFile}>
<RiDeleteBinLine className='w-4 h-4 text-gray-500' />
<div className='mx-2 h-4 w-px bg-gray-200' />
<div className='cursor-pointer p-2' onClick={removeFile}>
<RiDeleteBinLine className='h-4 w-4 text-gray-500' />
</div>
</div>
</div>

8
web/app/components/datasets/documents/detail/batch-modal/index.tsx
View File

@@ -39,10 +39,10 @@ const BatchModal: FC<IBatchModalProps> = ({
}, [isShow])
return (
<Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
<Modal isShow={isShow} onClose={() => { }} className='!max-w-[520px] !rounded-xl px-8 py-6'>
<div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetDocuments.list.batchModal.title')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-gray-500' />
<div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onCancel}>
<RiCloseLine className='h-4 w-4 text-gray-500' />
</div>
<CSVUploader
file={currentCSV}
@@ -51,7 +51,7 @@ const BatchModal: FC<IBatchModalProps> = ({
<CSVDownloader
docForm={docForm}
/>
<div className='mt-[28px] pt-6 flex justify-end'>
<div className='mt-[28px] flex justify-end pt-6'>
<Button className='mr-2' onClick={onCancel}>
{t('datasetDocuments.list.batchModal.cancel')}
</Button>

20
web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
View File

@@ -73,16 +73,16 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
}, [childChunkInfo?.updated_at])
return (
<div className={'flex flex-col h-full'}>
<div className={'flex h-full flex-col'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{t('datasetDocuments.segment.editChildChunk')}</div>
<div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.editChildChunk')}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag positionId={childChunkInfo?.position || ''} labelPrefix={t('datasetDocuments.segment.childChunk') as string} />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{wordCountText}</span>
<span className='system-xs-medium text-text-tertiary'>{wordCountText}</span>
<Dot />
<span className='text-text-tertiary system-xs-medium'>
<span className='system-xs-medium text-text-tertiary'>
{EditTimeText}
</span>
</div>
@@ -96,14 +96,14 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
loading={loading}
isChildChunk={true}
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
<Divider type='vertical' className='ml-4 mr-2 h-3.5 bg-divider-regular' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
{fullScreen ? <RiCollapseDiagonalLine className='w-4 h-4 text-text-tertiary' /> : <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />}
<div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
{fullScreen ? <RiCollapseDiagonalLine className='h-4 w-4 text-text-tertiary' /> : <RiExpandDiagonalLine className='h-4 w-4 text-text-tertiary' />}
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={onCancel}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
@@ -118,7 +118,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
</div>
</div>
{!fullScreen && (
<div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<div className='flex items-center justify-end border-t-[1px] border-t-divider-subtle p-4 pt-3'>
<ActionButtons
handleCancel={handleCancel}
handleSave={handleSave}

10
web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
View File

@@ -94,7 +94,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
isParagraphMode ? 'pt-1 pb-2' : 'px-3 grow',
(isFullDocMode && isLoading) && 'overflow-y-hidden',
)}>
{isFullDocMode ? <Divider type='horizontal' className='h-[1px] bg-divider-subtle my-1' /> : null}
{isFullDocMode ? <Divider type='horizontal' className='my-1 h-[1px] bg-divider-subtle' /> : null}
<div className={classNames('flex items-center justify-between', isFullDocMode ? 'pt-2 pb-3 sticky -top-2 left-0 bg-background-default' : '')}>
<div className={classNames(
'h-7 flex items-center pl-1 pr-3 rounded-lg',
@@ -111,12 +111,12 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
isParagraphMode
? collapsed
? (
<RiArrowRightSLine className='w-4 h-4 text-text-secondary opacity-50 mr-0.5' />
<RiArrowRightSLine className='mr-0.5 h-4 w-4 text-text-secondary opacity-50' />
)
: (<RiArrowDownSLine className='w-4 h-4 text-text-secondary mr-0.5' />)
: (<RiArrowDownSLine className='mr-0.5 h-4 w-4 text-text-secondary' />)
: null
}
<span className='text-text-secondary system-sm-semibold-uppercase'>{totalText}</span>
<span className='system-sm-semibold-uppercase text-text-secondary'>{totalText}</span>
<span className={classNames('text-text-quaternary text-xs font-medium pl-1.5', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}>·</span>
<button
type='button'
@@ -150,7 +150,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'grow mb-6' : 'items-center')}>
{isParagraphMode && (
<div className='self-stretch'>
<Divider type='vertical' className='w-[2px] mx-[7px] bg-text-accent-secondary' />
<Divider type='vertical' className='mx-[7px] w-[2px] bg-text-accent-secondary' />
</div>
)}
{childChunks.length > 0

14
web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
View File

@@ -36,8 +36,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
if (loading)
return
handleSave()
}
, { exactMatch: true, useCapture: true })
},
{ exactMatch: true, useCapture: true })
const isParentChildParagraphMode = useMemo(() => {
return mode === 'hierarchical' && parentMode === 'paragraph'
@@ -49,8 +49,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
onClick={handleCancel}
>
<div className='flex items-center gap-x-1'>
<span className='text-components-button-secondary-text system-sm-medium'>{t('common.operation.cancel')}</span>
<span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
<span className='system-sm-medium text-components-button-secondary-text'>{t('common.operation.cancel')}</span>
<span className='system-kbd rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-tertiary'>ESC</span>
</div>
</Button>
{(isParentChildParagraphMode && actionType === 'edit' && !isChildChunk)
@@ -58,7 +58,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
onClick={handleRegeneration}
disabled={loading}
>
<span className='text-components-button-secondary-text system-sm-medium'>
<span className='system-sm-medium text-components-button-secondary-text'>
{t('common.operation.saveAndRegenerate')}
</span>
</Button>
@@ -72,8 +72,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
<div className='flex items-center gap-x-1'>
<span className='text-components-button-primary-text'>{t('common.operation.save')}</span>
<div className='flex items-center gap-x-0.5'>
<span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd capitalize'>{getKeyboardKeyNameBySystem('ctrl')}</span>
<span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd'>S</span>
<span className='system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white capitalize text-text-primary-on-surface'>{getKeyboardKeyNameBySystem('ctrl')}</span>
<span className='system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface'>S</span>
</div>
</div>
</Button>

2
web/app/components/datasets/documents/detail/completed/common/add-another.tsx
View File

@@ -24,7 +24,7 @@ const AddAnother: FC<AddAnotherProps> = ({
checked={isChecked}
onCheck={onCheck}
/>
<span className='text-text-tertiary system-xs-medium'>{t('datasetDocuments.segment.addAnother')}</span>
<span className='system-xs-medium text-text-tertiary'>{t('datasetDocuments.segment.addAnother')}</span>
</div>
)
}

30
web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
View File

@@ -44,30 +44,30 @@ const BatchAction: FC<IBatchActionProps> = ({
}
return (
<div className={classNames('w-full flex justify-center gap-x-2', className)}>
<div className='flex items-center gap-x-1 p-1 rounded-[10px] bg-components-actionbar-bg-accent border border-components-actionbar-border-accent shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
<div className='inline-flex items-center gap-x-2 pl-2 pr-3 py-1'>
<span className='w-5 h-5 flex items-center justify-center px-1 py-0.5 bg-text-accent rounded-md text-text-primary-on-surface text-xs font-medium'>
<div className='flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
<div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
<span className='flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface'>
{selectedIds.length}
</span>
<span className='text-text-accent text-[13px] font-semibold leading-[16px]'>{t(`${i18nPrefix}.selected`)}</span>
<span className='text-[13px] font-semibold leading-[16px] text-text-accent'>{t(`${i18nPrefix}.selected`)}</span>
</div>
<Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiCheckboxCircleLine className='w-4 h-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchEnable}>
<RiCheckboxCircleLine className='h-4 w-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchEnable}>
{t(`${i18nPrefix}.enable`)}
</button>
</div>
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiCloseCircleLine className='w-4 h-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchDisable}>
<RiCloseCircleLine className='h-4 w-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchDisable}>
{t(`${i18nPrefix}.disable`)}
</button>
</div>
{onEditMetadata && (
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiDraftLine className='w-4 h-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onEditMetadata}>
<RiDraftLine className='h-4 w-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onEditMetadata}>
{t('dataset.metadata.metadata')}
</button>
</div>
@@ -75,21 +75,21 @@ const BatchAction: FC<IBatchActionProps> = ({
{onArchive && (
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiArchive2Line className='w-4 h-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onArchive}>
<RiArchive2Line className='h-4 w-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onArchive}>
{t(`${i18nPrefix}.archive`)}
</button>
</div>
)}
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiDeleteBinLine className='w-4 h-4 text-components-button-destructive-ghost-text' />
<button type='button' className='px-0.5 text-components-button-destructive-ghost-text text-[13px] font-medium leading-[16px]' onClick={showDeleteConfirm}>
<RiDeleteBinLine className='h-4 w-4 text-components-button-destructive-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-destructive-ghost-text' onClick={showDeleteConfirm}>
{t(`${i18nPrefix}.delete`)}
</button>
</div>
<Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
<button type='button' className='px-3.5 py-2 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onCancel}>
<button type='button' className='px-3.5 py-2 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onCancel}>
{t(`${i18nPrefix}.cancel`)}
</button>
</div>

10
web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
View File

@@ -120,9 +120,9 @@ const QATextArea: FC<IQATextAreaProps> = React.memo(({
return (
<div ref={containerRef} className='h-full overflow-hidden'>
<div ref={labelRef} className='text-text-tertiary text-xs font-medium mb-1'>QUESTION</div>
<div ref={labelRef} className='mb-1 text-xs font-medium text-text-tertiary'>QUESTION</div>
<AutoResizeTextArea
className='text-text-secondary text-sm tracking-[-0.07px] caret-[#295EFF]'
className='text-sm tracking-[-0.07px] text-text-secondary caret-[#295EFF]'
value={question}
placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
onChange={e => onQuestionChange(e.target.value)}
@@ -130,9 +130,9 @@ const QATextArea: FC<IQATextAreaProps> = React.memo(({
containerRef={containerRef}
labelRef={labelRef}
/>
<div className='text-text-tertiary text-xs font-medium mb-1 mt-6'>ANSWER</div>
<div className='mb-1 mt-6 text-xs font-medium text-text-tertiary'>ANSWER</div>
<AutoResizeTextArea
className='text-text-secondary text-sm tracking-[-0.07px] caret-[#295EFF]'
className='text-sm tracking-[-0.07px] text-text-secondary caret-[#295EFF]'
value={answer}
placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
onChange={e => onAnswerChange?.(e.target.value)}
@@ -188,7 +188,7 @@ const ChunkContent: FC<IChunkContentProps> = ({
return (
<Textarea
className='h-full w-full pb-6 body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]'
className='body-md-regular h-full w-full pb-6 tracking-[-0.07px] text-text-secondary caret-[#295EFF]'
value={question}
placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
onChange={e => onQuestionChange(e.target.value)}

2
web/app/components/datasets/documents/detail/completed/common/dot.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
const Dot = () => {
return (
<div className='text-text-quaternary system-xs-medium'>·</div>
<div className='system-xs-medium text-text-quaternary'>·</div>
)
}

20
web/app/components/datasets/documents/detail/completed/common/empty.tsx
View File

@@ -8,7 +8,7 @@ type IEmptyProps = {
const EmptyCard = React.memo(() => {
return (
<div className='w-full h-32 rounded-xl opacity-30 bg-background-section-burn shrink-0' />
<div className='h-32 w-full shrink-0 rounded-xl bg-background-section-burn opacity-30' />
)
})
@@ -43,34 +43,34 @@ const Empty: FC<IEmptyProps> = ({
const { t } = useTranslation()
return (
<div className={'h-full relative flex items-center justify-center z-0'}>
<div className={'relative z-0 flex h-full items-center justify-center'}>
<div className='flex flex-col items-center'>
<div className='relative z-10 flex items-center justify-center w-14 h-14 border border-divider-subtle bg-components-card-bg rounded-xl shadow-lg shadow-shadow-shadow-5'>
<RiFileList2Line className='w-6 h-6 text-text-secondary' />
<div className='relative z-10 flex h-14 w-14 items-center justify-center rounded-xl border border-divider-subtle bg-components-card-bg shadow-lg shadow-shadow-shadow-5'>
<RiFileList2Line className='h-6 w-6 text-text-secondary' />
<Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' />
<Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' />
<Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
</div>
<div className='text-text-tertiary system-md-regular mt-3'>
<div className='system-md-regular mt-3 text-text-tertiary'>
{t('datasetDocuments.segment.empty')}
</div>
<button
type='button'
className='text-text-accent system-sm-medium mt-1'
className='system-sm-medium mt-1 text-text-accent'
onClick={onClearFilter}
>
{t('datasetDocuments.segment.clearFilter')}
</button>
</div>
<div className='h-full w-full absolute top-0 left-0 flex flex-col gap-y-3 -z-20 overflow-hidden'>
<div className='absolute left-0 top-0 -z-20 flex h-full w-full flex-col gap-y-3 overflow-hidden'>
{
Array.from({ length: 10 }).map((_, i) => (
<EmptyCard key={i} />
))
}
</div>
<div className='h-full w-full absolute top-0 left-0 bg-dataset-chunk-list-mask-bg -z-10' />
<div className='absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-list-mask-bg' />
</div>
)
}

4
web/app/components/datasets/documents/detail/completed/common/keywords.tsx
View File

@@ -24,8 +24,8 @@ const Keywords: FC<IKeywordsProps> = ({
const { t } = useTranslation()
return (
<div className={classNames('flex flex-col', className)}>
<div className='text-text-tertiary system-xs-medium-uppercase'>{t('datasetDocuments.segment.keywords')}</div>
<div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
<div className='system-xs-medium-uppercase text-text-tertiary'>{t('datasetDocuments.segment.keywords')}</div>
<div className='flex max-h-[200px] w-full flex-wrap gap-1 overflow-auto text-text-tertiary'>
{(!segInfo?.keywords?.length && actionType === 'view')
? '-'
: (

14
web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
View File

@@ -20,8 +20,8 @@ const DefaultContent: FC<IDefaultContentProps> = React.memo(({
return (
<>
<div className='pb-4'>
<span className='text-text-primary title-2xl-semi-bold'>{t('datasetDocuments.segment.regenerationConfirmTitle')}</span>
<p className='text-text-secondary system-md-regular'>{t('datasetDocuments.segment.regenerationConfirmMessage')}</p>
<span className='title-2xl-semi-bold text-text-primary'>{t('datasetDocuments.segment.regenerationConfirmTitle')}</span>
<p className='system-md-regular text-text-secondary'>{t('datasetDocuments.segment.regenerationConfirmMessage')}</p>
</div>
<div className='flex justify-end gap-x-2 pt-6'>
<Button onClick={onCancel}>
@@ -43,12 +43,12 @@ const RegeneratingContent: FC = React.memo(() => {
return (
<>
<div className='pb-4'>
<span className='text-text-primary title-2xl-semi-bold'>{t('datasetDocuments.segment.regeneratingTitle')}</span>
<p className='text-text-secondary system-md-regular'>{t('datasetDocuments.segment.regeneratingMessage')}</p>
<span className='title-2xl-semi-bold text-text-primary'>{t('datasetDocuments.segment.regeneratingTitle')}</span>
<p className='system-md-regular text-text-secondary'>{t('datasetDocuments.segment.regeneratingMessage')}</p>
</div>
<div className='flex justify-end pt-6'>
<Button variant='warning' destructive disabled className='inline-flex items-center gap-x-0.5'>
<RiLoader2Line className='w-4 h-4 text-components-button-destructive-primary-text-disabled animate-spin' />
<RiLoader2Line className='h-4 w-4 animate-spin text-components-button-destructive-primary-text-disabled' />
<span>{t('common.operation.regenerate')}</span>
</Button>
</div>
@@ -77,8 +77,8 @@ const RegenerationCompletedContent: FC<IRegenerationCompletedContentProps> = Rea
return (
<>
<div className='pb-4'>
<span className='text-text-primary title-2xl-semi-bold'>{t('datasetDocuments.segment.regenerationSuccessTitle')}</span>
<p className='text-text-secondary system-md-regular'>{t('datasetDocuments.segment.regenerationSuccessMessage')}</p>
<span className='title-2xl-semi-bold text-text-primary'>{t('datasetDocuments.segment.regenerationSuccessTitle')}</span>
<p className='system-md-regular text-text-secondary'>{t('datasetDocuments.segment.regenerationSuccessMessage')}</p>
</div>
<div className='flex justify-end pt-6'>
<Button variant='primary' onClick={onClose}>

4
web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
View File

@@ -27,8 +27,8 @@ export const SegmentIndexTag: FC<ISegmentIndexTagProps> = ({
}, [positionId, labelPrefix])
return (
<div className={cn('flex items-center', className)}>
<Chunk className={cn('w-3 h-3 p-[1px] text-text-tertiary mr-0.5', iconClassName)} />
<div className={cn('text-text-tertiary system-xs-medium', labelClassName)}>
<Chunk className={cn('mr-0.5 h-3 w-3 p-[1px] text-text-tertiary', iconClassName)} />
<div className={cn('system-xs-medium text-text-tertiary', labelClassName)}>
{label || localPositionId}
</div>
</div>

4
web/app/components/datasets/documents/detail/completed/common/tag.tsx
View File

@@ -4,8 +4,8 @@ import cn from '@/utils/classnames'
const Tag = ({ text, className }: { text: string; className?: string }) => {
return (
<div className={cn('inline-flex items-center gap-x-0.5', className)}>
<span className='text-text-quaternary text-xs font-medium'>#</span>
<span className='text-text-tertiary text-xs max-w-12 line-clamp-1 shrink-0'>{text}</span>
<span className='text-xs font-medium text-text-quaternary'>#</span>
<span className='line-clamp-1 max-w-12 shrink-0 text-xs text-text-tertiary'>{text}</span>
</div>
)
}

8
web/app/components/datasets/documents/detail/completed/display-toggle.tsx
View File

@@ -22,14 +22,14 @@ const DisplayToggle: FC<DisplayToggleProps> = ({
>
<button
type='button'
className='flex items-center justify-center p-2 rounded-lg bg-components-button-secondary-bg
border-[0.5px] border-components-button-secondary-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
className='flex items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border
bg-components-button-secondary-bg p-2 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
onClick={toggleCollapsed}
>
{
isCollapsed
? <RiLineHeight className='w-4 h-4 text-components-button-secondary-text' />
: <Collapse className='w-4 h-4 text-components-button-secondary-text' />
? <RiLineHeight className='h-4 w-4 text-components-button-secondary-text' />
: <Collapse className='h-4 w-4 text-components-button-secondary-text' />
}
</button>

14
web/app/components/datasets/documents/detail/completed/index.tsx
View File

@@ -410,9 +410,9 @@ const Completed: FC<ICompletedProps> = ({
setSelectedSegmentIds((prev) => {
const currentAllSegIds = segments.map(seg => seg.id)
const prevSelectedIds = prev.filter(item => !currentAllSegIds.includes(item))
return [...prevSelectedIds, ...((isAllSelected || selectedSegmentIds.length > 0) ? [] : currentAllSegIds)]
return [...prevSelectedIds, ...(isAllSelected ? [] : currentAllSegIds)]
})
}, [segments, isAllSelected, selectedSegmentIds])
}, [segments, isAllSelected])
const totalText = useMemo(() => {
const isSearch = searchValue !== '' || selectedStatus !== 'all'
@@ -586,7 +586,7 @@ const Completed: FC<ICompletedProps> = ({
onCheck={onSelectedAll}
disabled={isLoadingSegmentList}
/>
<div className={'system-sm-semibold-uppercase pl-5 text-text-secondary flex-1'}>{totalText}</div>
<div className={'system-sm-semibold-uppercase flex-1 pl-5 text-text-secondary'}>{totalText}</div>
<SimpleSelect
onSelect={onChangeStatus}
items={statusList.current}
@@ -606,14 +606,14 @@ const Completed: FC<ICompletedProps> = ({
onChange={e => handleInputChange(e.target.value)}
onClear={() => handleInputChange('')}
/>
<Divider type='vertical' className='h-3.5 mx-3' />
<Divider type='vertical' className='mx-3 h-3.5' />
<DisplayToggle isCollapsed={isCollapsed} toggleCollapsed={() => setIsCollapsed(!isCollapsed)} />
</div>}
{/* Segment list */}
{
isFullDocMode
? <div className={cn(
'flex flex-col grow overflow-x-hidden',
'flex grow flex-col overflow-x-hidden',
(isLoadingSegmentList || isLoadingChildSegmentList) ? 'overflow-y-hidden' : 'overflow-y-auto',
)}>
<SegmentCard
@@ -657,7 +657,7 @@ const Completed: FC<ICompletedProps> = ({
/>
}
{/* Pagination */}
<Divider type='horizontal' className='w-auto h-[1px] my-0 mx-6 bg-divider-subtle' />
<Divider type='horizontal' className='mx-6 my-0 h-[1px] w-auto bg-divider-subtle' />
<Pagination
current={currentPage - 1}
onChange={cur => setCurrentPage(cur + 1)}
@@ -723,7 +723,7 @@ const Completed: FC<ICompletedProps> = ({
{/* Batch Action Buttons */}
{selectedSegmentIds.length > 0
&& <BatchAction
className='absolute left-0 bottom-16 z-20'
className='absolute bottom-16 left-0 z-20'
selectedIds={selectedSegmentIds}
onBatchEnable={onChangeSwitch.bind(null, true, '')}
onBatchDisable={onChangeSwitch.bind(null, false, '')}

22
web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
View File

@@ -53,10 +53,10 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
}, [parentMode])
const CustomButton = <>
<Divider type='vertical' className='h-3 mx-1 bg-divider-regular' />
<Divider type='vertical' className='mx-1 h-3 bg-divider-regular' />
<button
type='button'
className='text-text-accent system-xs-semibold'
className='system-xs-semibold text-text-accent'
onClick={() => {
clearTimeout(refreshTimer.current)
viewNewlyAddedChildChunk?.()
@@ -113,14 +113,14 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
}, [content.length])
return (
<div className={'flex flex-col h-full'}>
<div className={'flex h-full flex-col'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{t('datasetDocuments.segment.addChildChunk')}</div>
<div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.addChildChunk')}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag label={t('datasetDocuments.segment.newChildChunk') as string} />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{wordCountText}</span>
<span className='system-xs-medium text-text-tertiary'>{wordCountText}</span>
</div>
</div>
<div className='flex items-center'>
@@ -134,14 +134,14 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
actionType='add'
isChildChunk={true}
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
<Divider type='vertical' className='ml-4 mr-2 h-3.5 bg-divider-regular' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
<div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='h-4 w-4 text-text-tertiary' />
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={handleCancel.bind(null, 'esc')}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={handleCancel.bind(null, 'esc')}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
@@ -156,7 +156,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
</div>
</div>
{!fullScreen && (
<div className='flex items-center justify-between p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<div className='flex items-center justify-between border-t-[1px] border-t-divider-subtle p-4 pt-3'>
<AddAnother isChecked={addAnother} onCheck={() => setAddAnother(!addAnother)} />
<ActionButtons
handleCancel={handleCancel.bind(null, 'esc')}

10
web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
View File

@@ -25,17 +25,17 @@ const ChunkContent: FC<ChunkContentProps> = ({
return (
<div className={className}>
<div className='flex gap-x-1'>
<div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>Q</div>
<div className='w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>Q</div>
<div
className={cn('text-text-secondary body-md-regular',
className={cn('body-md-regular text-text-secondary',
isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
)}>
{content}
</div>
</div>
<div className='flex gap-x-1'>
<div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>A</div>
<div className={cn('text-text-secondary body-md-regular',
<div className='w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>A</div>
<div className={cn('body-md-regular text-text-secondary',
isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
)}>
{answer}
@@ -45,7 +45,7 @@ const ChunkContent: FC<ChunkContentProps> = ({
)
}
return <Markdown
className={cn('!text-text-secondary !mt-0.5',
className={cn('!mt-0.5 !text-text-secondary',
isFullDocMode ? 'line-clamp-3' : isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
className,
)}

24
web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
View File

@@ -120,14 +120,14 @@ const SegmentCard: FC<ISegmentCardProps> = ({
return (
<div
className={cn(
'w-full px-3 rounded-xl group/card',
isFullDocMode ? '' : 'pt-2.5 pb-2 hover:bg-dataset-chunk-detail-card-hover-bg',
'group/card w-full rounded-xl px-3',
isFullDocMode ? '' : 'pb-2 pt-2.5 hover:bg-dataset-chunk-detail-card-hover-bg',
focused.segmentContent ? 'bg-dataset-chunk-detail-card-hover-bg' : '',
className,
)}
onClick={handleClickCard}
>
<div className='h-5 relative flex items-center justify-between'>
<div className='relative flex h-5 items-center justify-between'>
<>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag
@@ -139,9 +139,9 @@ const SegmentCard: FC<ISegmentCardProps> = ({
labelPrefix={labelPrefix}
/>
<Dot />
<div className={cn('text-text-tertiary system-xs-medium', contentOpacity)}>{wordCountText}</div>
<div className={cn('system-xs-medium text-text-tertiary', contentOpacity)}>{wordCountText}</div>
<Dot />
<div className={cn('text-text-tertiary system-xs-medium', contentOpacity)}>{`${formatNumber(hit_count)} ${t('datasetDocuments.segment.hitCount')}`}</div>
<div className={cn('system-xs-medium text-text-tertiary', contentOpacity)}>{`${formatNumber(hit_count)} ${t('datasetDocuments.segment.hitCount')}`}</div>
{chunkEdited && (
<>
<Dot />
@@ -153,8 +153,8 @@ const SegmentCard: FC<ISegmentCardProps> = ({
? <div className='flex items-center'>
<StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-text-tertiary system-xs-regular" />
{embeddingAvailable && (
<div className="absolute -top-2 -right-2.5 z-20 hidden group-hover/card:flex items-center gap-x-0.5 p-1
rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-[5px]">
<div className="absolute -right-2.5 -top-2 z-20 hidden items-center gap-x-0.5 rounded-[10px] border-[0.5px]
border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-md backdrop-blur-[5px] group-hover/card:flex">
{!archived && (
<>
<Tooltip
@@ -162,25 +162,25 @@ const SegmentCard: FC<ISegmentCardProps> = ({
popupClassName='text-text-secondary system-xs-medium'
>
<div
className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-base-hover cursor-pointer'
className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover'
onClick={(e) => {
e.stopPropagation()
onClickEdit?.()
}}>
<RiEditLine className='w-4 h-4 text-text-tertiary' />
<RiEditLine className='h-4 w-4 text-text-tertiary' />
</div>
</Tooltip>
<Tooltip
popupContent='Delete'
popupClassName='text-text-secondary system-xs-medium'
>
<div className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-destructive-hover cursor-pointer group/delete'
<div className='group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-destructive-hover'
onClick={(e) => {
e.stopPropagation()
setShowModal(true)
}
}>
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary group-hover/delete:text-text-destructive' />
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover/delete:text-text-destructive' />
</div>
</Tooltip>
<Divider type="vertical" className="h-3.5 bg-divider-regular" />
@@ -223,7 +223,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
isFullDocMode
? <button
type='button'
className='mt-0.5 mb-2 text-text-accent system-xs-semibold-uppercase'
className='system-xs-semibold-uppercase mb-2 mt-0.5 text-text-accent'
onClick={() => onClick?.()}
>{t('common.operation.viewMore')}</button>
: null

18
web/app/components/datasets/documents/detail/completed/segment-detail.tsx
View File

@@ -107,14 +107,14 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
}, [isParentChildMode])
return (
<div className={'flex flex-col h-full'}>
<div className={'flex h-full flex-col'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{titleText}</div>
<div className='system-xl-semibold text-text-primary'>{titleText}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag positionId={segInfo?.position || ''} label={isFullDocMode ? labelPrefix : ''} labelPrefix={labelPrefix} />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{wordCountText}</span>
<span className='system-xs-medium text-text-tertiary'>{wordCountText}</span>
</div>
</div>
<div className='flex items-center'>
@@ -126,14 +126,14 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
handleSave={handleSave}
loading={loading}
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
<Divider type='vertical' className='ml-4 mr-2 h-3.5 bg-divider-regular' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
{fullScreen ? <RiCollapseDiagonalLine className='w-4 h-4 text-text-tertiary' /> : <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />}
<div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
{fullScreen ? <RiCollapseDiagonalLine className='h-4 w-4 text-text-tertiary' /> : <RiExpandDiagonalLine className='h-4 w-4 text-text-tertiary' />}
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={onCancel}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
@@ -162,7 +162,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
/>}
</div>
{isEditMode && !fullScreen && (
<div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<div className='flex items-center justify-end border-t-[1px] border-t-divider-subtle p-4 pt-3'>
<ActionButtons
handleCancel={handleCancel}
handleRegeneration={handleRegeneration}

47
web/app/components/datasets/documents/detail/completed/segment-list.tsx
View File

@@ -1,4 +1,4 @@
import React, { type ForwardedRef, useMemo } from 'react'
import React, { useMemo } from 'react'
import { useDocumentContext } from '../index'
import SegmentCard from './segment-card'
import Empty from './common/empty'
@@ -25,22 +25,25 @@ type ISegmentListProps = {
onClearFilter: () => void
}
const SegmentList = React.forwardRef(({
isLoading,
items,
selectedSegmentIds,
onSelected,
onClick: onClickCard,
onChangeSwitch,
onDelete,
onDeleteChildChunk,
handleAddNewChildChunk,
onClickSlice,
archived,
embeddingAvailable,
onClearFilter,
}: ISegmentListProps,
ref: ForwardedRef<HTMLDivElement>,
const SegmentList = (
{
ref,
isLoading,
items,
selectedSegmentIds,
onSelected,
onClick: onClickCard,
onChangeSwitch,
onDelete,
onDeleteChildChunk,
handleAddNewChildChunk,
onClickSlice,
archived,
embeddingAvailable,
onClearFilter,
}: ISegmentListProps & {
ref: React.RefObject<unknown>;
},
) => {
const mode = useDocumentContext(s => s.mode)
const parentMode = useDocumentContext(s => s.parentMode)
@@ -63,7 +66,7 @@ ref: ForwardedRef<HTMLDivElement>,
)
}
return (
<div ref={ref} className={'flex flex-col grow overflow-y-auto'}>
<div ref={ref} className={'flex grow flex-col overflow-y-auto'}>
{
items.map((segItem) => {
const isLast = items[items.length - 1].id === segItem.id
@@ -76,11 +79,11 @@ ref: ForwardedRef<HTMLDivElement>,
<div key={segItem.id} className='flex items-start gap-x-2'>
<Checkbox
key={`${segItem.id}-checkbox`}
className='shrink-0 mt-3.5'
className='mt-3.5 shrink-0'
checked={selectedSegmentIds.includes(segItem.id)}
onCheck={() => onSelected(segItem.id)}
/>
<div className='grow min-w-0'>
<div className='min-w-0 grow'>
<SegmentCard
key={`${segItem.id}-card`}
detail={segItem}
@@ -100,7 +103,7 @@ ref: ForwardedRef<HTMLDivElement>,
}}
/>
{!isLast && <div className='w-full px-3'>
<Divider type='horizontal' className='bg-divider-subtle my-1' />
<Divider type='horizontal' className='my-1 bg-divider-subtle' />
</div>}
</div>
</div>
@@ -109,7 +112,7 @@ ref: ForwardedRef<HTMLDivElement>,
}
</div>
)
})
}
SegmentList.displayName = 'SegmentList'

10
web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx
View File

@@ -3,10 +3,10 @@ import React from 'react'
const Slice = React.memo(() => {
return (
<div className='flex flex-col gap-y-1'>
<div className='w-full h-5 bg-state-base-hover flex items-center'>
<span className='w-[30px] h-5 bg-state-base-hover-alt' />
<div className='flex h-5 w-full items-center bg-state-base-hover'>
<span className='h-5 w-[30px] bg-state-base-hover-alt' />
</div>
<div className='w-2/3 h-5 bg-state-base-hover' />
<div className='h-5 w-2/3 bg-state-base-hover' />
</div>
)
})
@@ -15,8 +15,8 @@ Slice.displayName = 'Slice'
const FullDocListSkeleton = () => {
return (
<div className='w-full grow flex flex-col gap-y-3 relative z-10 overflow-y-hidden'>
<div className='absolute top-0 left-0 bottom-14 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
<div className='relative z-10 flex w-full grow flex-col gap-y-3 overflow-y-hidden'>
<div className='absolute bottom-14 left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
{[...Array.from({ length: 15 })].map((_, index) => <Slice key={index} />)}
</div>
)

14
web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
View File

@@ -10,8 +10,8 @@ import Divider from '@/app/components/base/divider'
export const CardSkelton = React.memo(() => {
return (
<SkeletonContainer className='p-1 pb-2 gap-y-0'>
<SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
<SkeletonContainer className='gap-y-0 p-1 pb-2'>
<SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
<SkeletonRow className='py-0.5'>
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
<SkeletonPoint className='opacity-20' />
@@ -20,7 +20,7 @@ export const CardSkelton = React.memo(() => {
<SkeletonRectangle className='w-24 bg-text-quaternary' />
<SkeletonRow className='grow justify-end gap-1'>
<SkeletonRectangle className='w-12 bg-text-quaternary' />
<SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
<SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
</SkeletonRow>
</SkeletonRow>
<SkeletonRow className='py-0.5'>
@@ -48,20 +48,20 @@ CardSkelton.displayName = 'CardSkelton'
const GeneralListSkeleton = () => {
return (
<div className='relative flex flex-col grow overflow-y-hidden z-10'>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
<div className='relative z-10 flex grow flex-col overflow-y-hidden'>
<div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
{[...Array.from({ length: 10 })].map((_, index) => {
return (
<div key={index} className='flex items-start gap-x-2'>
<Checkbox
key={`${index}-checkbox`}
className='shrink-0 mt-3.5'
className='mt-3.5 shrink-0'
disabled
/>
<div className='grow'>
<CardSkelton />
{index !== 9 && <div className='w-full px-3'>
<Divider type='horizontal' className='bg-divider-subtle my-1' />
<Divider type='horizontal' className='my-1 bg-divider-subtle' />
</div>}
</div>
</div>

18
web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx
View File

@@ -11,8 +11,8 @@ import Divider from '@/app/components/base/divider'
const CardSkelton = React.memo(() => {
return (
<SkeletonContainer className='p-1 pb-2 gap-y-0'>
<SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
<SkeletonContainer className='gap-y-0 p-1 pb-2'>
<SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
<SkeletonRow className='py-0.5'>
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
<SkeletonPoint className='opacity-20' />
@@ -21,7 +21,7 @@ const CardSkelton = React.memo(() => {
<SkeletonRectangle className='w-24 bg-text-quaternary' />
<SkeletonRow className='grow justify-end gap-1'>
<SkeletonRectangle className='w-12 bg-text-quaternary' />
<SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
<SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
</SkeletonRow>
</SkeletonRow>
<SkeletonRow className='py-0.5'>
@@ -36,8 +36,8 @@ const CardSkelton = React.memo(() => {
</SkeletonContainer>
<SkeletonContainer className='p-1 pb-2'>
<SkeletonRow>
<SkeletonRow className='h-7 pl-1 pr-3 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg'>
<RiArrowRightSLine className='w-4 h-4 text-text-secondary opacity-20' />
<SkeletonRow className='h-7 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg pl-1 pr-3'>
<RiArrowRightSLine className='h-4 w-4 text-text-secondary opacity-20' />
<SkeletonRectangle className='w-32 bg-text-quaternary' />
</SkeletonRow>
</SkeletonRow>
@@ -50,20 +50,20 @@ CardSkelton.displayName = 'CardSkelton'
const ParagraphListSkeleton = () => {
return (
<div className='relative flex flex-col h-full overflow-y-hidden z-10'>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
<div className='relative z-10 flex h-full flex-col overflow-y-hidden'>
<div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
{[...Array.from({ length: 10 })].map((_, index) => {
return (
<div key={index} className='flex items-start gap-x-2'>
<Checkbox
key={`${index}-checkbox`}
className='shrink-0 mt-3.5'
className='mt-3.5 shrink-0'
disabled
/>
<div className='grow'>
<CardSkelton />
{index !== 9 && <div className='w-full px-3'>
<Divider type='horizontal' className='bg-divider-subtle my-1' />
<Divider type='horizontal' className='my-1 bg-divider-subtle' />
</div>}
</div>
</div>

8
web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
View File

@@ -11,8 +11,8 @@ const ParentChunkCardSkelton = () => {
const { t } = useTranslation()
return (
<div className='flex flex-col pb-2'>
<SkeletonContainer className='p-1 pb-0 gap-y-0'>
<SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
<SkeletonContainer className='gap-y-0 p-1 pb-0'>
<SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
<SkeletonRow className='py-0.5'>
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
<SkeletonPoint className='opacity-20' />
@@ -31,8 +31,8 @@ const ParentChunkCardSkelton = () => {
</SkeletonRow>
</SkeletonContainer>
</SkeletonContainer>
<div className='flex items-center px-3 mt-0.5'>
<button type='button' className='pt-0.5 text-components-button-secondary-accent-text-disabled system-xs-semibold-uppercase' disabled>
<div className='mt-0.5 flex items-center px-3'>
<button type='button' className='system-xs-semibold-uppercase pt-0.5 text-components-button-secondary-accent-text-disabled' disabled>
{t('common.operation.viewMore')}
</button>
</div>

4
web/app/components/datasets/documents/detail/completed/status-item.tsx
View File

@@ -12,9 +12,9 @@ const StatusItem: FC<IStatusItemProps> = ({
selected,
}) => {
return (
<div className='flex items-center justify-between py-1.5 px-2'>
<div className='flex items-center justify-between px-2 py-1.5'>
<span className='system-md-regular'>{item.name}</span>
{selected && <RiCheckLine className='w-4 h-4 text-text-accent' />}
{selected && <RiCheckLine className='h-4 w-4 text-text-accent' />}
</div>
)
}

30
web/app/components/datasets/documents/detail/embedding/index.tsx
View File

@@ -248,10 +248,10 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
return (
<>
<div className='py-12 px-16 flex flex-col gap-y-2'>
<div className='flex items-center gap-x-1 h-6'>
{isEmbedding && <RiLoader2Line className='h-4 w-4 text-text-secondary animate-spin' />}
<span className='grow text-text-secondary system-md-semibold-uppercase'>
<div className='flex flex-col gap-y-2 px-16 py-12'>
<div className='flex h-6 items-center gap-x-1'>
{isEmbedding && <RiLoader2Line className='h-4 w-4 animate-spin text-text-secondary' />}
<span className='system-md-semibold-uppercase grow text-text-secondary'>
{isEmbedding && t('datasetDocuments.embedding.processing')}
{isEmbeddingCompleted && t('datasetDocuments.embedding.completed')}
{isEmbeddingPaused && t('datasetDocuments.embedding.paused')}
@@ -260,12 +260,12 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
{isEmbedding && (
<button
type='button'
className={`px-1.5 py-1 border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg
shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] flex items-center gap-x-1 rounded-md`}
className={`flex items-center gap-x-1 rounded-md border-[0.5px]
border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]`}
onClick={handleSwitch}
>
<RiPauseCircleLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
<span className='pr-[3px] text-components-button-secondary-text system-xs-medium'>
<RiPauseCircleLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
<span className='system-xs-medium pr-[3px] text-components-button-secondary-text'>
{t('datasetDocuments.embedding.pause')}
</span>
</button>
@@ -273,12 +273,12 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
{isEmbeddingPaused && (
<button
type='button'
className={`px-1.5 py-1 border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg
shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] flex items-center gap-x-1 rounded-md`}
className={`flex items-center gap-x-1 rounded-md border-[0.5px]
border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]`}
onClick={handleSwitch}
>
<RiPlayCircleLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
<span className='pr-[3px] text-components-button-secondary-text system-xs-medium'>
<RiPlayCircleLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
<span className='system-xs-medium pr-[3px] text-components-button-secondary-text'>
{t('datasetDocuments.embedding.resume')}
</span>
</button>
@@ -286,7 +286,7 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
</div>
{/* progress bar */}
<div className={cn(
'flex items-center w-full h-2 rounded-md border border-components-progress-bar-border overflow-hidden',
'flex h-2 w-full items-center overflow-hidden rounded-md border border-components-progress-bar-border',
isEmbedding ? 'bg-components-progress-bar-bg bg-opacity-50' : 'bg-components-progress-bar-bg',
)}>
<div
@@ -298,8 +298,8 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
style={{ width: `${percent}%` }}
/>
</div>
<div className={'w-full flex items-center'}>
<span className='text-text-secondary system-xs-medium'>
<div className={'flex w-full items-center'}>
<span className='system-xs-medium text-text-secondary'>
{`${t('datasetDocuments.embedding.segments')} ${indexingStatusDetail?.completed_segments || '--'}/${indexingStatusDetail?.total_segments || '--'} · ${percent}%`}
</span>
</div>

12
web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
View File

@@ -9,8 +9,8 @@ import Divider from '@/app/components/base/divider'
const CardSkelton = React.memo(() => {
return (
<SkeletonContainer className='p-1 pb-2 gap-y-0'>
<SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
<SkeletonContainer className='gap-y-0 p-1 pb-2'>
<SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
<SkeletonRow className='py-0.5'>
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
<SkeletonPoint className='opacity-20' />
@@ -19,7 +19,7 @@ const CardSkelton = React.memo(() => {
<SkeletonRectangle className='w-24 bg-text-quaternary' />
<SkeletonRow className='grow justify-end gap-1'>
<SkeletonRectangle className='w-12 bg-text-quaternary' />
<SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
<SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
</SkeletonRow>
</SkeletonRow>
<SkeletonRow className='py-0.5'>
@@ -47,14 +47,14 @@ CardSkelton.displayName = 'CardSkelton'
const EmbeddingSkeleton = () => {
return (
<div className='relative flex flex-col grow overflow-y-hidden z-10'>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
<div className='relative z-10 flex grow flex-col overflow-y-hidden'>
<div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
{[...Array.from({ length: 5 })].map((_, index) => {
return (
<div key={index} className='w-full px-11'>
<CardSkelton />
{index !== 9 && <div className='w-full px-3'>
<Divider type='horizontal' className='bg-divider-subtle my-1' />
<Divider type='horizontal' className='my-1 bg-divider-subtle' />
</div>}
</div>
)

24
web/app/components/datasets/documents/detail/index.tsx
View File

@@ -54,7 +54,7 @@ type DocumentTitleProps = {
export const DocumentTitle: FC<DocumentTitleProps> = ({ datasetId, extension, name, processMode, parent_mode, wrapperCls }) => {
const router = useRouter()
return (
<div className={cn('flex items-center justify-start flex-1', wrapperCls)}>
<div className={cn('flex flex-1 items-center justify-start', wrapperCls)}>
<DocumentPicker
datasetId={datasetId}
value={{
@@ -191,10 +191,10 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
mode,
parentMode,
}}>
<div className='flex flex-col h-full bg-background-default'>
<div className='flex items-center justify-between flex-wrap min-h-16 pl-3 pr-4 py-2.5 border-b border-b-divider-subtle'>
<div onClick={backToPrev} className={'shrink-0 rounded-full w-8 h-8 flex justify-center items-center cursor-pointer hover:bg-components-button-tertiary-bg'}>
<RiArrowLeftLine className='text-components-button-ghost-text hover:text-text-tertiary w-4 h-4' />
<div className='flex h-full flex-col bg-background-default'>
<div className='flex min-h-16 flex-wrap items-center justify-between border-b border-b-divider-subtle py-2.5 pl-3 pr-4'>
<div onClick={backToPrev} className={'flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-components-button-tertiary-bg'}>
<RiArrowLeftLine className='h-4 w-4 text-components-button-ghost-text hover:text-text-tertiary' />
</div>
<DocumentTitle
datasetId={datasetId}
@@ -204,7 +204,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
parent_mode={parentMode}
processMode={mode}
/>
<div className='flex items-center flex-wrap'>
<div className='flex flex-wrap items-center'>
{embeddingAvailable && documentDetail && !documentDetail.archived && !isFullDocMode && (
<>
<SegmentAdd
@@ -214,7 +214,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
showBatchModal={showBatchModal}
embedding={embedding}
/>
<Divider type='vertical' className='!bg-divider-regular !h-[14px] !mx-3' />
<Divider type='vertical' className='!mx-3 !h-[14px] !bg-divider-regular' />
</>
)}
<StatusItem
@@ -251,17 +251,17 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
>
{
showMetadata
? <LayoutRight2LineMod className='w-4 h-4 text-components-button-secondary-text' />
: <RiLayoutRight2Line className='w-4 h-4 text-components-button-secondary-text' />
? <LayoutRight2LineMod className='h-4 w-4 text-components-button-secondary-text' />
: <RiLayoutRight2Line className='h-4 w-4 text-components-button-secondary-text' />
}
</button>
</div>
</div>
<div className='flex flex-row flex-1' style={{ height: 'calc(100% - 4rem)' }}>
<div className='flex flex-1 flex-row' style={{ height: 'calc(100% - 4rem)' }}>
{isDetailLoading
? <Loading type='app' />
: <div className={cn('h-full grow min-w-0 flex flex-col',
embedding ? '' : isFullDocMode ? 'relative pt-4 pr-11 pl-11' : 'relative pt-3 pr-11 pl-5',
: <div className={cn('flex h-full min-w-0 grow flex-col',
embedding ? '' : isFullDocMode ? 'relative pl-11 pr-11 pt-4' : 'relative pl-5 pr-11 pt-3',
)}>
{embedding
? <Embedding

12
web/app/components/datasets/documents/detail/metadata/index.tsx
View File

@@ -29,7 +29,7 @@ const map2Options = (map: { [key: string]: string }) => {
return Object.keys(map).map(key => ({ value: key, name: map[key] }))
}
interface IFieldInfoProps {
type IFieldInfoProps = {
label: string
value?: string
valueIcon?: ReactNode
@@ -58,9 +58,9 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
const readAlignTop = !showEdit && textNeedWrap
return (
<div className={cn('flex items-center gap-1 py-0.5 min-h-5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
<div className={cn('w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap shrink-0', editAlignTop && 'pt-1')}>{label}</div>
<div className="grow flex items-center gap-1 text-text-secondary">
<div className={cn('flex min-h-5 items-center gap-1 py-0.5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
<div className={cn('w-[200px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap text-text-tertiary', editAlignTop && 'pt-1')}>{label}</div>
<div className="flex grow items-center gap-1 text-text-secondary">
{valueIcon}
{!showEdit
? displayedValue
@@ -117,7 +117,7 @@ const IconButton: FC<{
)
}
interface IMetadataProps {
type IMetadataProps = {
docDetail?: FullDocumentDetail
loading: boolean
onUpdate: () => void
@@ -348,7 +348,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
{metadataParams.documentType && <>
<TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
{metadataMap[metadataParams.documentType || 'book'].text}
{editStatus && <div className='inline-flex items-center gap-1 ml-1'>
{editStatus && <div className='ml-1 inline-flex items-center gap-1'>
·
<div
onClick={() => { setShowDocTypes(true) }}

22
web/app/components/datasets/documents/detail/new-segment.tsx
View File

@@ -51,10 +51,10 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
const refreshTimer = useRef<any>(null)
const CustomButton = <>
<Divider type='vertical' className='h-3 mx-1 bg-divider-regular' />
<Divider type='vertical' className='mx-1 h-3 bg-divider-regular' />
<button
type='button'
className='text-text-accent system-xs-semibold'
className='system-xs-semibold text-text-accent'
onClick={() => {
clearTimeout(refreshTimer.current)
viewNewlyAddedChunk()
@@ -135,16 +135,16 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
}, [question.length, answer.length, isQAModel])
return (
<div className={'flex flex-col h-full'}>
<div className={'flex h-full flex-col'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{
<div className='system-xl-semibold text-text-primary'>{
t('datasetDocuments.segment.addChunk')
}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag label={t('datasetDocuments.segment.newChunk')!} />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{wordCountText}</span>
<span className='system-xs-medium text-text-tertiary'>{wordCountText}</span>
</div>
</div>
<div className='flex items-center'>
@@ -157,14 +157,14 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
loading={loading}
actionType='add'
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
<Divider type='vertical' className='ml-4 mr-2 h-3.5 bg-divider-regular' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
<div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='h-4 w-4 text-text-tertiary' />
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={handleCancel.bind(null, 'esc')}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={handleCancel.bind(null, 'esc')}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
@@ -188,7 +188,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
/>}
</div>
{!fullScreen && (
<div className='flex items-center justify-between p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<div className='flex items-center justify-between border-t-[1px] border-t-divider-subtle p-4 pt-3'>
<AddAnother isChecked={addAnother} onCheck={() => setAddAnother(!addAnother)} />
<ActionButtons
handleCancel={handleCancel.bind(null, 'esc')}

46
web/app/components/datasets/documents/detail/segment-add/index.tsx
View File

@@ -45,36 +45,36 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
return (
<>
{(importStatus === ProcessStatus.WAITING || importStatus === ProcessStatus.PROCESSING) && (
<div className='relative overflow-hidden inline-flex items-center mr-2 px-2.5 py-2 text-components-button-secondary-accent-text
bg-components-progress-bar-border rounded-lg border-[0.5px] border-components-progress-bar-border
<div className='relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-progress-bar-border
bg-components-progress-bar-border px-2.5 py-2 text-components-button-secondary-accent-text
shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'>
<div className={cn('absolute left-0 top-0 h-full bg-components-progress-bar-progress border-r-[1.5px] border-r-components-progress-bar-progress-highlight z-0', importStatus === ProcessStatus.WAITING ? 'w-3/12' : 'w-2/3')} />
<RiLoader2Line className='animate-spin mr-1 w-4 h-4' />
<div className={cn('absolute left-0 top-0 z-0 h-full border-r-[1.5px] border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress', importStatus === ProcessStatus.WAITING ? 'w-3/12' : 'w-2/3')} />
<RiLoader2Line className='mr-1 h-4 w-4 animate-spin' />
<span className='system-sm-medium z-10 pr-0.5'>{t('datasetDocuments.list.batchModal.processing')}</span>
</div>
)}
{importStatus === ProcessStatus.COMPLETED && (
<div className='relative inline-flex items-center mr-2 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] overflow-hidden'>
<div className='inline-flex items-center px-2.5 py-2 text-text-success border-r border-r-divider-subtle'>
<CheckCircle className='mr-1 w-4 h-4' />
<div className='relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'>
<div className='inline-flex items-center border-r border-r-divider-subtle px-2.5 py-2 text-text-success'>
<CheckCircle className='mr-1 h-4 w-4' />
<span className='system-sm-medium pr-0.5'>{t('datasetDocuments.list.batchModal.completed')}</span>
</div>
<div className='m-1 inline-flex items-center'>
<span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover px-1.5 py-1 rounded-md cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
<span className='system-xs-medium cursor-pointer rounded-md px-1.5 py-1 text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
</div>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-process-success-bg opacity-40 -z-10' />
<div className='absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-process-success-bg opacity-40' />
</div>
)}
{importStatus === ProcessStatus.ERROR && (
<div className='relative inline-flex items-center mr-2 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] overflow-hidden'>
<div className='inline-flex items-center px-2.5 py-2 text-text-destructive border-r border-r-divider-subtle'>
<RiErrorWarningFill className='mr-1 w-4 h-4' />
<div className='relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'>
<div className='inline-flex items-center border-r border-r-divider-subtle px-2.5 py-2 text-text-destructive'>
<RiErrorWarningFill className='mr-1 h-4 w-4' />
<span className='system-sm-medium pr-0.5'>{t('datasetDocuments.list.batchModal.error')}</span>
</div>
<div className='m-1 inline-flex items-center'>
<span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover px-1.5 py-1 rounded-md cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
<span className='system-xs-medium cursor-pointer rounded-md px-1.5 py-1 text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
</div>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-process-error-bg opacity-40 -z-10' />
<div className='absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-process-error-bg opacity-40' />
</div>
)}
</>
@@ -83,18 +83,18 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
return (
<div className={cn(
'flex items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] relative z-20',
'relative z-20 flex items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]',
embedding && 'border-components-button-secondary-border-disabled bg-components-button-secondary-bg-disabled',
)}>
<button
type='button'
className={`inline-flex items-center px-2.5 py-2 rounded-l-lg border-r-[1px] border-r-divider-subtle
className={`inline-flex items-center rounded-l-lg border-r-[1px] border-r-divider-subtle px-2.5 py-2
hover:bg-state-base-hover disabled:cursor-not-allowed disabled:hover:bg-transparent`}
onClick={showNewSegmentModal}
disabled={embedding}
>
<RiAddLine className={cn('w-4 h-4', textColor)} />
<span className={cn('text-[13px] leading-[16px] font-medium capitalize px-0.5 ml-0.5', textColor)}>
<RiAddLine className={cn('h-4 w-4', textColor)} />
<span className={cn('ml-0.5 px-0.5 text-[13px] font-medium capitalize leading-[16px]', textColor)}>
{t('datasetDocuments.list.action.addButton')}
</span>
</button>
@@ -105,25 +105,25 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
htmlContent={
<button
type='button'
className='w-full py-1.5 px-2 flex items-center rounded-lg text-text-secondary system-md-regular'
className='system-md-regular flex w-full items-center rounded-lg px-2 py-1.5 text-text-secondary'
onClick={showBatchModal}
>
{t('datasetDocuments.list.action.batchAdd')}
</button>
}
btnElement={
<div className='flex justify-center items-center' >
<RiArrowDownSLine className={cn('w-4 h-4', textColor)}/>
<div className='flex items-center justify-center' >
<RiArrowDownSLine className={cn('h-4 w-4', textColor)}/>
</div>
}
btnClassName={open => cn(
`!p-2 !border-0 !rounded-l-none !rounded-r-lg !hover:bg-state-base-hover backdrop-blur-[5px]
`!hover:bg-state-base-hover !rounded-l-none !rounded-r-lg !border-0 !p-2 backdrop-blur-[5px]
disabled:cursor-not-allowed disabled:bg-transparent disabled:hover:bg-transparent`,
open ? '!bg-state-base-hover' : '',
)}
popupClassName='!min-w-[128px] !bg-components-panel-bg-blur !rounded-xl border-[0.5px] !ring-0
border-components-panel-border !shadow-xl !shadow-shadow-shadow-5 backdrop-blur-[5px]'
className='min-w-[128px] h-fit'
className='h-fit min-w-[128px]'
disabled={embedding}
/>
</div>

2
web/app/components/datasets/documents/detail/settings/index.tsx
View File

@@ -16,7 +16,7 @@ import { ModelTypeEnum } from '@/app/components/header/account-setting/model-pro
import type { NotionPage } from '@/models/common'
import { useDocumentDetail, useInvalidDocumentDetailKey } from '@/service/knowledge/use-document'
interface DocumentSettingsProps {
type DocumentSettingsProps = {
datasetId: string
documentId: string
}

18
web/app/components/datasets/documents/index.tsx
View File

@@ -64,7 +64,7 @@ const EmptyElement: FC<{ canAdd: boolean; onClick: () => void; type?: 'upload' |
<div className={s.emptySymbolIconWrapper}>
{type === 'upload' ? <FolderPlusIcon /> : <NotionIcon />}
</div>
<span className={s.emptyTitle}>{t('datasetDocuments.list.empty.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
<span className={s.emptyTitle}>{t('datasetDocuments.list.empty.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
<div className={s.emptyTip}>
{t(`datasetDocuments.list.empty.${type}.tip`)}
</div>
@@ -252,22 +252,22 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
})
return (
<div className='flex flex-col h-full overflow-y-auto'>
<div className='flex h-full flex-col overflow-y-auto'>
<div className='flex flex-col justify-center gap-1 px-6 pt-4'>
<h1 className='text-base font-semibold text-text-primary'>{t('datasetDocuments.list.title')}</h1>
<div className='flex items-center text-sm font-normal text-text-tertiary space-x-0.5'>
<div className='flex items-center space-x-0.5 text-sm font-normal text-text-tertiary'>
<span>{t('datasetDocuments.list.desc')}</span>
<a
className='flex items-center text-text-accent'
target='_blank'
href='https://docs.dify.ai/guides/knowledge-base/integrate-knowledge-within-application'>
<span>{t('datasetDocuments.list.learnMore')}</span>
<RiExternalLinkLine className='w-3 h-3' />
<RiExternalLinkLine className='h-3 w-3' />
</a>
</div>
</div>
<div className='flex flex-col px-6 py-4 flex-1'>
<div className='flex items-center justify-between flex-wrap'>
<div className='flex flex-1 flex-col px-6 py-4'>
<div className='flex flex-wrap items-center justify-between'>
<Input
showLeftIcon
showClearIcon
@@ -276,13 +276,13 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
onChange={e => handleInputChange(e.target.value)}
onClear={() => handleInputChange('')}
/>
<div className='flex gap-2 justify-center items-center !h-8'>
<div className='flex !h-8 items-center justify-center gap-2'>
{!isFreePlan && <AutoDisabledDocument datasetId={datasetId} />}
<IndexFailed datasetId={datasetId} />
{!embeddingAvailable && <StatusWithAction type='warning' description={t('dataset.embeddingModelNotAvailable')} />}
{embeddingAvailable && (
<Button variant='secondary' className='shrink-0' onClick={showEditMetadataModal}>
<RiDraftLine className='size-4 mr-1' />
<RiDraftLine className='mr-1 size-4' />
{t('dataset.metadata.metadata')}
</Button>
)}
@@ -300,7 +300,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
)}
{embeddingAvailable && (
<Button variant='primary' onClick={routeToDocCreate} className='shrink-0'>
<PlusIcon className={cn('h-4 w-4 mr-2 stroke-current')} />
<PlusIcon className={cn('mr-2 h-4 w-4 stroke-current')} />
{isDataSourceNotion && t('datasetDocuments.list.addPages')}
{isDataSourceWeb && t('datasetDocuments.list.addUrl')}
{(!dataset?.data_source_type || isDataSourceFile) && t('datasetDocuments.list.addFile')}

58
web/app/components/datasets/documents/list.tsx
View File

@@ -147,7 +147,7 @@ export const StatusItem: FC<{
}
{
scene === 'detail' && (
<div className='flex justify-between items-center ml-1.5'>
<div className='ml-1.5 flex items-center justify-between'>
<Tooltip
popupContent={t('datasetDocuments.list.action.enableWarning')}
popupClassName='text-text-secondary system-xs-medium'
@@ -291,12 +291,12 @@ export const OperationAction: FC<{
popupClassName='text-text-secondary system-xs-medium'
>
<button
className={cn('rounded-lg mr-2 cursor-pointer',
className={cn('mr-2 cursor-pointer rounded-lg',
!isListScene
? 'p-2 bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border hover:border-components-button-secondary-border-hover shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
? 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg p-2 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover'
: 'p-0.5 hover:bg-state-base-hover')}
onClick={() => router.push(`/datasets/${datasetId}/documents/${detail.id}/settings`)}>
<RiEqualizer2Line className='w-4 h-4 text-components-button-secondary-text' />
<RiEqualizer2Line className='h-4 w-4 text-components-button-secondary-text' />
</button>
</Tooltip>
<Popover
@@ -310,12 +310,12 @@ export const OperationAction: FC<{
name: detail.name,
})
}}>
<RiEditLine className='w-4 h-4 text-text-tertiary' />
<RiEditLine className='h-4 w-4 text-text-tertiary' />
<span className={s.actionName}>{t('datasetDocuments.list.table.rename')}</span>
</div>
{['notion_import', DataSourceType.WEB].includes(data_source_type) && (
<div className={s.actionItem} onClick={() => onOperate('sync')}>
<RiLoopLeftLine className='w-4 h-4 text-text-tertiary' />
<RiLoopLeftLine className='h-4 w-4 text-text-tertiary' />
<span className={s.actionName}>{t('datasetDocuments.list.action.sync')}</span>
</div>
)}
@@ -323,17 +323,17 @@ export const OperationAction: FC<{
</>
)}
{!archived && <div className={s.actionItem} onClick={() => onOperate('archive')}>
<RiArchive2Line className='w-4 h-4 text-text-tertiary' />
<RiArchive2Line className='h-4 w-4 text-text-tertiary' />
<span className={s.actionName}>{t('datasetDocuments.list.action.archive')}</span>
</div>}
{archived && (
<div className={s.actionItem} onClick={() => onOperate('un_archive')}>
<RiArchive2Line className='w-4 h-4 text-text-tertiary' />
<RiArchive2Line className='h-4 w-4 text-text-tertiary' />
<span className={s.actionName}>{t('datasetDocuments.list.action.unarchive')}</span>
</div>
)}
<div className={cn(s.actionItem, s.deleteActionItem, 'group')} onClick={() => setShowModal(true)}>
<RiDeleteBinLine className={'w-4 h-4 text-text-tertiary group-hover:text-text-destructive'} />
<RiDeleteBinLine className={'h-4 w-4 text-text-tertiary group-hover:text-text-destructive'} />
<span className={cn(s.actionName, 'group-hover:text-text-destructive')}>{t('datasetDocuments.list.action.delete')}</span>
</div>
</div>
@@ -342,12 +342,12 @@ export const OperationAction: FC<{
position='br'
btnElement={
<div className={cn(s.commonIcon)}>
<RiMoreFill className='w-4 h-4 text-components-button-secondary-text' />
<RiMoreFill className='h-4 w-4 text-components-button-secondary-text' />
</div>
}
btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!hover:bg-state-base-hover !shadow-none' : '!bg-transparent')}
popupClassName='!w-full'
className={`flex justify-end !w-[200px] h-fit !z-20 ${className}`}
className={`!z-20 flex h-fit !w-[200px] justify-end ${className}`}
/>
</>
)}
@@ -515,16 +515,16 @@ const DocumentList: FC<IDocumentListProps> = ({
}
return (
<div className='flex flex-col relative w-full h-full'>
<div className='relative flex h-full w-full flex-col'>
<div className='relative grow overflow-x-auto'>
<table className={`min-w-[700px] max-w-full w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}>
<thead className="h-8 leading-8 border-b border-divider-subtle text-text-tertiary font-medium text-xs uppercase">
<table className={`mt-3 w-full min-w-[700px] max-w-full border-collapse border-0 text-sm ${s.documentTable}`}>
<thead className="h-8 border-b border-divider-subtle text-xs font-medium uppercase leading-8 text-text-tertiary">
<tr>
<td className='w-12'>
<div className='flex items-center' onClick={e => e.stopPropagation()}>
{embeddingAvailable && (
<Checkbox
className='shrink-0 mr-2'
className='mr-2 shrink-0'
checked={isAllSelected}
mixed={!isAllSelected && isSomeSelected}
onCheck={onSelectedAll}
@@ -544,7 +544,7 @@ const DocumentList: FC<IDocumentListProps> = ({
<td className='w-44'>
<div className='flex items-center' onClick={onClickSort}>
{t('datasetDocuments.list.table.header.uploadTime')}
<ArrowDownIcon className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 cursor-pointer', enableSort ? 'text-text-tertiary' : 'text-text-disabled')} />
<ArrowDownIcon className={cn('ml-0.5 h-3 w-3 cursor-pointer stroke-current stroke-2', enableSort ? 'text-text-tertiary' : 'text-text-disabled')} />
</div>
</td>
<td className='w-40'>{t('datasetDocuments.list.table.header.status')}</td>
@@ -557,14 +557,14 @@ const DocumentList: FC<IDocumentListProps> = ({
const fileType = isFile ? doc.data_source_detail_dict?.upload_file?.extension : ''
return <tr
key={doc.id}
className={'border-b border-divider-subtle h-8 hover:bg-background-default-hover cursor-pointer'}
className={'h-8 cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'}
onClick={() => {
router.push(`/datasets/${datasetId}/documents/${doc.id}`)
}}>
<td className='text-left align-middle text-text-tertiary text-xs'>
<td className='text-left align-middle text-xs text-text-tertiary'>
<div className='flex items-center' onClick={e => e.stopPropagation()}>
<Checkbox
className='shrink-0 mr-2'
className='mr-2 shrink-0'
checked={selectedIds.includes(doc.id)}
onCheck={() => {
onSelectedIdChange(
@@ -579,25 +579,25 @@ const DocumentList: FC<IDocumentListProps> = ({
</div>
</td>
<td>
<div className={'group flex items-center mr-6 hover:mr-0 max-w-[460px]'}>
<div className={'group mr-6 flex max-w-[460px] items-center hover:mr-0'}>
<div className='shrink-0'>
{doc?.data_source_type === DataSourceType.NOTION && <NotionIcon className='inline-flex mt-[-3px] mr-1.5 align-middle' type='page' src={doc.data_source_info.notion_page_icon} />}
{doc?.data_source_type === DataSourceType.NOTION && <NotionIcon className='mr-1.5 mt-[-3px] inline-flex align-middle' type='page' src={doc.data_source_info.notion_page_icon} />}
{doc?.data_source_type === DataSourceType.FILE && <FileTypeIcon type={extensionToFileType(doc?.data_source_info?.upload_file?.extension ?? fileType)} className='mr-1.5' />}
{doc?.data_source_type === DataSourceType.WEB && <Globe01 className='inline-flex mt-[-3px] mr-1.5 align-middle' />}
{doc?.data_source_type === DataSourceType.WEB && <Globe01 className='mr-1.5 mt-[-3px] inline-flex align-middle' />}
</div>
<span className='text-sm truncate grow-1'>{doc.name}</span>
<div className='group-hover:flex group-hover:ml-auto hidden shrink-0'>
<span className='grow-1 truncate text-sm'>{doc.name}</span>
<div className='hidden shrink-0 group-hover:ml-auto group-hover:flex'>
<Tooltip
popupContent={t('datasetDocuments.list.table.rename')}
>
<div
className='p-1 rounded-md cursor-pointer hover:bg-state-base-hover'
className='cursor-pointer rounded-md p-1 hover:bg-state-base-hover'
onClick={(e) => {
e.stopPropagation()
handleShowRenameModal(doc)
}}
>
<RiEditLine className='w-4 h-4 text-text-tertiary' />
<RiEditLine className='h-4 w-4 text-text-tertiary' />
</div>
</Tooltip>
</div>
@@ -611,7 +611,7 @@ const DocumentList: FC<IDocumentListProps> = ({
</td>
<td>{renderCount(doc.word_count)}</td>
<td>{renderCount(doc.hit_count)}</td>
<td className='text-text-secondary text-[13px]'>
<td className='text-[13px] text-text-secondary'>
{formatTime(doc.created_at, t('datasetHitTesting.dateTimeFormat') as string)}
</td>
<td>
@@ -636,7 +636,7 @@ const DocumentList: FC<IDocumentListProps> = ({
</div>
{(selectedIds.length > 0) && (
<BatchAction
className='absolute left-0 bottom-16 z-20'
className='absolute bottom-16 left-0 z-20'
selectedIds={selectedIds}
onArchive={handleAction(DocumentActionType.archive)}
onBatchEnable={handleAction(DocumentActionType.enable)}
@@ -652,7 +652,7 @@ const DocumentList: FC<IDocumentListProps> = ({
{pagination.total && (
<Pagination
{...pagination}
className='shrink-0 w-full px-0 pb-0'
className='w-full shrink-0 px-0 pb-0'
/>
)}

8
web/app/components/datasets/documents/rename-modal.tsx
View File

@@ -9,7 +9,7 @@ import Button from '@/app/components/base/button'
import Input from '@/app/components/base/input'
import { renameDocumentName } from '@/service/datasets'
interface Props {
type Props = {
datasetId: string
documentId: string
name: string
@@ -59,7 +59,7 @@ const RenameModal: FC<Props> = ({
isShow
onClose={onClose}
>
<div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('datasetDocuments.list.table.name')}</div>
<div className={'mt-6 text-sm font-medium leading-[21px] text-text-primary'}>{t('datasetDocuments.list.table.name')}</div>
<Input
className='mt-2 h-10'
value={newName}
@@ -67,8 +67,8 @@ const RenameModal: FC<Props> = ({
/>
<div className='mt-10 flex justify-end'>
<Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button variant='primary' className='flex-shrink-0' onClick={handleSave} loading={saveLoading}>{t('common.operation.save')}</Button>
<Button className='mr-2 shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button variant='primary' className='shrink-0' onClick={handleSave} loading={saveLoading}>{t('common.operation.save')}</Button>
</div>
</Modal>
)

10
web/app/components/datasets/external-api/external-api-modal/Form.tsx
View File

@@ -50,8 +50,8 @@ const Form: FC<FormProps> = React.memo(({
return (
<div key={variable} className={cn(itemClassName, 'flex flex-col items-start gap-1 self-stretch')}>
<div className="flex justify-between items-center w-full">
<label className={cn(fieldLabelClassName, 'text-text-secondary system-sm-semibold')} htmlFor={variable}>
<div className="flex w-full items-center justify-between">
<label className={cn(fieldLabelClassName, 'system-sm-semibold text-text-secondary')} htmlFor={variable}>
{label[i18n.language] || label.en_US}
{required && <span className='ml-1 text-red-500'>*</span>}
</label>
@@ -60,9 +60,9 @@ const Form: FC<FormProps> = React.memo(({
href={'https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' || '/'}
target='_blank'
rel='noopener noreferrer'
className='text-text-accent body-xs-regular flex items-center'
className='body-xs-regular flex items-center text-text-accent'
>
<RiBookOpenLine className='w-3 h-3 text-text-accent mr-1' />
<RiBookOpenLine className='mr-1 h-3 w-3 text-text-accent' />
{t('dataset.externalAPIPanelDocumentation')}
</a>
)}
@@ -81,7 +81,7 @@ const Form: FC<FormProps> = React.memo(({
}
return (
<form className={cn('flex flex-col justify-center items-start gap-4 self-stretch', className)}>
<form className={cn('flex flex-col items-start justify-center gap-4 self-stretch', className)}>
{formSchemas.map(formSchema => renderField(formSchema))}
</form>
)

38
web/app/components/datasets/external-api/external-api-modal/index.tsx
View File

@@ -116,31 +116,31 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
return (
<PortalToFollowElem open>
<PortalToFollowElemContent className='w-full h-full z-[60]'>
<PortalToFollowElemContent className='z-[60] h-full w-full'>
<div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
<div className='flex relative w-[480px] flex-col items-start bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadows-shadow-xl'>
<div className='flex flex-col pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
<div className='self-stretch text-text-primary title-2xl-semi-bold flex-grow'>
<div className='shadows-shadow-xl relative flex w-[480px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg'>
<div className='flex flex-col items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='title-2xl-semi-bold grow self-stretch text-text-primary'>
{
isEditMode ? t('dataset.editExternalAPIFormTitle') : t('dataset.createExternalAPI')
}
</div>
{isEditMode && (datasetBindings?.length ?? 0) > 0 && (
<div className='text-text-tertiary system-xs-regular flex items-center'>
<div className='system-xs-regular flex items-center text-text-tertiary'>
{t('dataset.editExternalAPIFormWarning.front')}
<span className='text-text-accent cursor-pointer flex items-center'>
<span className='flex cursor-pointer items-center text-text-accent'>
&nbsp;{datasetBindings?.length} {t('dataset.editExternalAPIFormWarning.end')}&nbsp;
<Tooltip
popupClassName='flex items-center self-stretch w-[320px]'
popupContent={
<div className='p-1'>
<div className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch'>
<div className='text-text-tertiary system-xs-medium-uppercase'>{`${datasetBindings?.length} ${t('dataset.editExternalAPITooltipTitle')}`}</div>
<div className='flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1'>
<div className='system-xs-medium-uppercase text-text-tertiary'>{`${datasetBindings?.length} ${t('dataset.editExternalAPITooltipTitle')}`}</div>
</div>
{datasetBindings?.map(binding => (
<div key={binding.id} className='flex px-2 py-1 items-center gap-1 self-stretch'>
<RiBook2Line className='w-4 h-4 text-text-secondary' />
<div className='text-text-secondary system-sm-medium'>{binding.name}</div>
<div key={binding.id} className='flex items-center gap-1 self-stretch px-2 py-1'>
<RiBook2Line className='h-4 w-4 text-text-secondary' />
<div className='system-sm-medium text-text-secondary'>{binding.name}</div>
</div>
))}
</div>
@@ -148,22 +148,22 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
asChild={false}
position='bottom'
>
<RiInformation2Line className='w-3.5 h-3.5' />
<RiInformation2Line className='h-3.5 w-3.5' />
</Tooltip>
</span>
</div>
)}
</div>
<ActionButton className='absolute top-5 right-5' onClick={onCancel}>
<RiCloseLine className='w-[18px] h-[18px] text-text-tertiary flex-shrink-0' />
<ActionButton className='absolute right-5 top-5' onClick={onCancel}>
<RiCloseLine className='h-[18px] w-[18px] shrink-0 text-text-tertiary' />
</ActionButton>
<Form
value={formData}
onChange={handleDataChange}
formSchemas={formSchemas}
className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'
className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'
/>
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
<Button type='button' variant='secondary' onClick={onCancel}>
{t('dataset.externalAPIForm.cancel')}
</Button>
@@ -184,10 +184,10 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
{t('dataset.externalAPIForm.save')}
</Button>
</div>
<div className='flex px-2 py-3 justify-center items-center gap-1 self-stretch rounded-b-2xl
border-t-[0.5px] border-divider-subtle bg-background-soft text-text-tertiary system-xs-regular'
<div className='system-xs-regular flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px]
border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary'
>
<RiLock2Fill className='w-3 h-3 text-text-quaternary' />
<RiLock2Fill className='h-3 w-3 text-text-quaternary' />
{t('dataset.externalAPIForm.encrypted.front')}
<a
className='text-text-accent'

28
web/app/components/datasets/external-api/external-api-panel/index.tsx
View File

@@ -39,39 +39,39 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
return (
<div
tabIndex={-1}
className={cn('absolute top-14 right-0 bottom-2 flex z-10 outline-none')}
className={cn('absolute bottom-2 right-0 top-14 z-10 flex outline-none')}
>
<div
className={cn(
'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
)}
>
<div className='flex items-start self-stretch p-4 pb-0'>
<div className='flex flex-col items-start gap-1 flex-grow'>
<div className='self-stretch text-text-primary system-xl-semibold'>{t('dataset.externalAPIPanelTitle')}</div>
<div className='self-stretch text-text-tertiary body-xs-regular'>{t('dataset.externalAPIPanelDescription')}</div>
<a className='flex justify-center items-center gap-1 self-stretch cursor-pointer' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank'>
<RiBookOpenLine className='w-3 h-3 text-text-accent' />
<div className='flex-grow text-text-accent body-xs-regular'>{t('dataset.externalAPIPanelDocumentation')}</div>
<div className='flex grow flex-col items-start gap-1'>
<div className='system-xl-semibold self-stretch text-text-primary'>{t('dataset.externalAPIPanelTitle')}</div>
<div className='body-xs-regular self-stretch text-text-tertiary'>{t('dataset.externalAPIPanelDescription')}</div>
<a className='flex cursor-pointer items-center justify-center gap-1 self-stretch' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank'>
<RiBookOpenLine className='h-3 w-3 text-text-accent' />
<div className='body-xs-regular grow text-text-accent'>{t('dataset.externalAPIPanelDocumentation')}</div>
</a>
</div>
<div className='flex items-center'>
<ActionButton onClick={() => onClose()}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</ActionButton>
</div>
</div>
<div className='flex px-4 py-3 flex-col justify-center items-start gap-2 self-stretch'>
<div className='flex flex-col items-start justify-center gap-2 self-stretch px-4 py-3'>
<Button
variant={'primary'}
className='flex justify-center items-center px-3 py-2 gap-0.5'
className='flex items-center justify-center gap-0.5 px-3 py-2'
onClick={handleOpenExternalAPIModal}
>
<RiAddLine className='w-4 h-4 text-components-button-primary-text' />
<div className='text-components-button-primary-text system-sm-medium'>{t('dataset.createExternalAPI')}</div>
<RiAddLine className='h-4 w-4 text-components-button-primary-text' />
<div className='system-sm-medium text-components-button-primary-text'>{t('dataset.createExternalAPI')}</div>
</Button>
</div>
<div className='flex py-0 px-4 flex-col items-start gap-1 flex-grow self-stretch'>
<div className='flex grow flex-col items-start gap-1 self-stretch px-4 py-0'>
{isLoading
? (
<Loading />

16
web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
View File

@@ -105,20 +105,20 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
return (
<>
<div className={`flex p-2 pl-3 items-start self-stretch rounded-lg border-[0.5px]
border-components-panel-border-subtle bg-components-panel-on-panel-item-bg
shadows-shadow-xs ${isHovered ? 'bg-state-destructive-hover border-state-destructive-border' : ''}`}
<div className={`shadows-shadow-xs flex items-start self-stretch rounded-lg border-[0.5px] border-components-panel-border-subtle
bg-components-panel-on-panel-item-bg p-2
pl-3 ${isHovered ? 'border-state-destructive-border bg-state-destructive-hover' : ''}`}
>
<div className='flex py-1 flex-col justify-center items-start gap-1.5 flex-grow'>
<div className='flex grow flex-col items-start justify-center gap-1.5 py-1'>
<div className='flex items-center gap-1 self-stretch text-text-secondary'>
<ApiConnectionMod className='w-4 h-4' />
<ApiConnectionMod className='h-4 w-4' />
<div className='system-sm-medium'>{api.name}</div>
</div>
<div className='self-stretch text-text-tertiary system-xs-regular'>{api.settings.endpoint}</div>
<div className='system-xs-regular self-stretch text-text-tertiary'>{api.settings.endpoint}</div>
</div>
<div className='flex items-start gap-1'>
<ActionButton onClick={handleEditClick}>
<RiEditLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
<RiEditLine className='h-4 w-4 text-text-tertiary hover:text-text-secondary' />
</ActionButton>
<ActionButton
className='hover:bg-state-destructive-hover'
@@ -126,7 +126,7 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary hover:text-text-destructive' />
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary hover:text-text-destructive' />
</ActionButton>
</div>
</div>

36
web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
View File

@@ -59,46 +59,46 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onS
return (
<div className="relative w-full">
<div
className={`flex items-center justify-between cursor-pointer px-2 py-1 gap-0.5 self-stretch rounded-lg
bg-components-input-bg-normal hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
className={`flex cursor-pointer items-center justify-between gap-0.5 self-stretch rounded-lg bg-components-input-bg-normal px-2
py-1 hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
onClick={() => setIsOpen(!isOpen)}
>
{selectedItem
? (
<div className="flex p-1 items-center gap-2 self-stretch rounded-lg">
<ApiConnectionMod className='text-text-secondary w-4 h-4' />
<div className='flex items-center flex-grow'>
<span className='text-components-input-text-filled text-ellipsis system-sm-regular overflow-hidden'>{selectedItem.name}</span>
<div className="flex items-center gap-2 self-stretch rounded-lg p-1">
<ApiConnectionMod className='h-4 w-4 text-text-secondary' />
<div className='flex grow items-center'>
<span className='system-sm-regular overflow-hidden text-ellipsis text-components-input-text-filled'>{selectedItem.name}</span>
</div>
</div>
)
: (
<span className='text-components-input-text-placeholder system-sm-regular'>{t('dataset.selectExternalKnowledgeAPI.placeholder')}</span>
<span className='system-sm-regular text-components-input-text-placeholder'>{t('dataset.selectExternalKnowledgeAPI.placeholder')}</span>
)}
<RiArrowDownSLine className={`w-4 h-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
<RiArrowDownSLine className={`h-4 w-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
</div>
{isOpen && (
<div className="absolute z-10 w-full mt-1 bg-components-panel-bg-blur border rounded-xl shadow-lg">
<div className="absolute z-10 mt-1 w-full rounded-xl border bg-components-panel-bg-blur shadow-lg">
{items.map(item => (
<div
key={item.value}
className="flex p-1 items-center cursor-pointer"
className="flex cursor-pointer items-center p-1"
onClick={() => handleSelect(item)}
>
<div className="flex p-2 items-center gap-2 self-stretch rounded-lg hover:bg-state-base-hover w-full">
<ApiConnectionMod className='text-text-secondary w-4 h-4' />
<span className='text-text-secondary text-ellipsis system-sm-medium overflow-hidden flex-grow'>{item.name}</span>
<span className='text-text-tertiary overflow-hidden text-right text-ellipsis system-xs-regular'>{item.url}</span>
<div className="flex w-full items-center gap-2 self-stretch rounded-lg p-2 hover:bg-state-base-hover">
<ApiConnectionMod className='h-4 w-4 text-text-secondary' />
<span className='system-sm-medium grow overflow-hidden text-ellipsis text-text-secondary'>{item.name}</span>
<span className='system-xs-regular overflow-hidden text-ellipsis text-right text-text-tertiary'>{item.url}</span>
</div>
</div>
))}
<div className='flex p-1 flex-col items-start self-stretch'>
<div className='flex flex-col items-start self-stretch p-1'>
<div
className='flex p-2 items-center gap-2 self-stretch rounded-lg cursor-pointer hover:bg-state-base-hover'
className='flex cursor-pointer items-center gap-2 self-stretch rounded-lg p-2 hover:bg-state-base-hover'
onClick={handleAddNewAPI}
>
<RiAddLine className='text-text-secondary w-4 h-4' />
<span className='flex-grow overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>{t('dataset.createNewExternalAPI')}</span>
<RiAddLine className='h-4 w-4 text-text-secondary' />
<span className='system-sm-medium grow overflow-hidden text-ellipsis text-text-secondary'>{t('dataset.createNewExternalAPI')}</span>
</div>
</div>
</div>

8
web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
View File

@@ -62,7 +62,7 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
<form className='flex flex-col gap-4 self-stretch'>
<div className='flex flex-col gap-1 self-stretch'>
<div className='flex flex-col self-stretch'>
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalAPIPanelTitle')}</label>
<label className='system-sm-semibold text-text-secondary'>{t('dataset.externalAPIPanelTitle')}</label>
</div>
{apiItems.length > 0
? <ExternalApiSelect
@@ -74,14 +74,14 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
}}
/>
: <Button variant={'tertiary'} onClick={handleAddNewAPI} className='justify-start gap-0.5'>
<RiAddLine className='w-4 h-4 text-text-tertiary' />
<span className='text-text-tertiary system-sm-regular'>{t('dataset.noExternalKnowledge')}</span>
<RiAddLine className='h-4 w-4 text-text-tertiary' />
<span className='system-sm-regular text-text-tertiary'>{t('dataset.noExternalKnowledge')}</span>
</Button>
}
</div>
<div className='flex flex-col gap-1 self-stretch'>
<div className='flex flex-col self-stretch'>
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeId')}</label>
<label className='system-sm-semibold text-text-secondary'>{t('dataset.externalKnowledgeId')}</label>
</div>
<Input
value={external_knowledge_id}

16
web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx
View File

@@ -5,23 +5,23 @@ const InfoPanel = () => {
const { t } = useTranslation()
return (
<div className='flex w-[360px] pt-[108px] pb-2 pr-8 flex-col items-start'>
<div className='flex min-w-[240px] w-full p-6 flex-col items-start gap-3 self-stretch rounded-xl bg-background-section'>
<div className='flex p-1 w-10 h-10 justify-center items-center gap-2 flex-grow self-stretch rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg'>
<RiBookOpenLine className='w-5 h-5 text-text-accent' />
<div className='flex w-[360px] flex-col items-start pb-2 pr-8 pt-[108px]'>
<div className='flex w-full min-w-[240px] flex-col items-start gap-3 self-stretch rounded-xl bg-background-section p-6'>
<div className='flex h-10 w-10 grow items-center justify-center gap-2 self-stretch rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-1'>
<RiBookOpenLine className='h-5 w-5 text-text-accent' />
</div>
<p className='flex flex-col items-start gap-2 self-stretch'>
<span className='self-stretch text-text-secondary system-xl-semibold'>
<span className='system-xl-semibold self-stretch text-text-secondary'>
{t('dataset.connectDatasetIntro.title')}
</span>
<span className='text-text-tertiary system-sm-regular'>
<span className='system-sm-regular text-text-tertiary'>
{t('dataset.connectDatasetIntro.content.front')}
<a className='text-text-accent system-sm-regular ml-1' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank' rel="noopener noreferrer">
<a className='system-sm-regular ml-1 text-text-accent' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank' rel="noopener noreferrer">
{t('dataset.connectDatasetIntro.content.link')}
</a>
{t('dataset.connectDatasetIntro.content.end')}
</span>
<a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
<a className='system-sm-regular self-stretch text-text-accent' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
{t('dataset.connectDatasetIntro.learnMore')}
</a>
</p>

6
web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx
View File

@@ -24,7 +24,7 @@ const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description
<div className='flex flex-col gap-4 self-stretch'>
<div className='flex flex-col gap-1 self-stretch'>
<div className='flex flex-col justify-center self-stretch'>
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeName')}</label>
<label className='system-sm-semibold text-text-secondary'>{t('dataset.externalKnowledgeName')}</label>
</div>
<Input
value={name}
@@ -34,14 +34,14 @@ const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description
</div>
<div className='flex flex-col gap-1 self-stretch'>
<div className='flex flex-col justify-center self-stretch'>
<label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeDescription')}</label>
<label className='system-sm-semibold text-text-secondary'>{t('dataset.externalKnowledgeDescription')}</label>
</div>
<div className='flex flex-col gap-1 self-stretch'>
<textarea
value={description}
onChange={ e => handleDescriptionChange(e)}
placeholder={t('dataset.externalKnowledgeDescriptionPlaceholder') ?? ''}
className={`flex h-20 py-2 p-3 self-stretch items-start rounded-lg bg-components-input-bg-normal ${description ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder'} system-sm-regular`}
className={`flex h-20 items-start self-stretch rounded-lg bg-components-input-bg-normal p-3 py-2 ${description ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder'} system-sm-regular`}
/>
</div>
</div>

8
web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
View File

@@ -30,8 +30,8 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
return (
<div className={cn('flex flex-col gap-2 self-stretch', isInRetrievalSetting && 'w-full max-w-[480px]')}>
{!isInHitTesting && !isInRetrievalSetting && <div className='flex h-7 pt-1 flex-col gap-2 self-stretch'>
<label className='text-text-secondary system-sm-semibold'>{t('dataset.retrievalSettings')}</label>
{!isInHitTesting && !isInRetrievalSetting && <div className='flex h-7 flex-col gap-2 self-stretch pt-1'>
<label className='system-sm-semibold text-text-secondary'>{t('dataset.retrievalSettings')}</label>
</div>}
<div className={cn(
'flex gap-4 self-stretch',
@@ -41,7 +41,7 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
'flex-col sm:flex-row': !isInHitTesting && !isInRetrievalSetting,
},
)}>
<div className='flex flex-col gap-1 flex-grow'>
<div className='flex grow flex-col gap-1'>
<TopKItem
className='grow'
value={topK}
@@ -49,7 +49,7 @@ const RetrievalSettings: FC<RetrievalSettingsProps> = ({
enable={true}
/>
</div>
<div className='flex flex-col gap-1 flex-grow'>
<div className='flex grow flex-col gap-1'>
<ScoreThresholdItem
className='grow'
value={scoreThreshold}

30
web/app/components/datasets/external-knowledge-base/create/index.tsx
View File

@@ -49,27 +49,27 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
&& formData.external_retrieval_model.score_threshold !== undefined
return (
<div className='flex flex-col flex-grow self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg'>
<div className='flex justify-center flex-grow self-stretch'>
<div className='flex w-full max-w-[960px] px-14 py-0 flex-col items-center'>
<div className='flex w-full max-w-[640px] pt-6 pb-8 flex-col grow items-center gap-4'>
<div className='relative flex flex-col py-2 items-center gap-[2px] self-stretch'>
<div className='flex-grow text-text-primary system-xl-semibold self-stretch'>{t('dataset.connectDataset')}</div>
<p className='text-text-tertiary system-sm-regular'>
<div className='flex grow flex-col self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg'>
<div className='flex grow justify-center self-stretch'>
<div className='flex w-full max-w-[960px] flex-col items-center px-14 py-0'>
<div className='flex w-full max-w-[640px] grow flex-col items-center gap-4 pb-8 pt-6'>
<div className='relative flex flex-col items-center gap-[2px] self-stretch py-2'>
<div className='system-xl-semibold grow self-stretch text-text-primary'>{t('dataset.connectDataset')}</div>
<p className='system-sm-regular text-text-tertiary'>
<span>{t('dataset.connectHelper.helper1')}</span>
<span className='text-text-secondary system-sm-medium'>{t('dataset.connectHelper.helper2')}</span>
<span className='system-sm-medium text-text-secondary'>{t('dataset.connectHelper.helper2')}</span>
<span>{t('dataset.connectHelper.helper3')}</span>
<a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
<a className='system-sm-regular self-stretch text-text-accent' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
{t('dataset.connectHelper.helper4')}
</a>
<span>{t('dataset.connectHelper.helper5')} </span>
</p>
<Button
className='flex w-8 h-8 p-2 items-center justify-center absolute left-[-44px] top-1 rounded-full'
className='absolute left-[-44px] top-1 flex h-8 w-8 items-center justify-center rounded-full p-2'
variant='tertiary'
onClick={navBackHandle}
>
<RiArrowLeftLine className='w-4 h-4 text-text-tertiary' />
<RiArrowLeftLine className='h-4 w-4 text-text-tertiary' />
</Button>
</div>
<KnowledgeBaseInfo
@@ -101,9 +101,9 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
},
})}
/>
<div className='flex py-2 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch py-2'>
<Button variant='secondary' onClick={navBackHandle}>
<div className='text-components-button-secondary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.cancel')}</div>
<div className='system-sm-medium text-components-button-secondary-text'>{t('dataset.externalKnowledgeForm.cancel')}</div>
</Button>
<Button
variant='primary'
@@ -113,8 +113,8 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
disabled={!isFormValid}
loading={loading}
>
<div className='text-components-button-primary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.connect')}</div>
<RiArrowRightLine className='w-4 h-4 text-components-button-primary-text' />
<div className='system-sm-medium text-components-button-primary-text'>{t('dataset.externalKnowledgeForm.connect')}</div>
<RiArrowRightLine className='h-4 w-4 text-components-button-primary-text' />
</Button>
</div>
</div>

4
web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
View File

@@ -93,7 +93,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
ref={refs.setFloating}
style={floatingStyles}
{...getFloatingProps()}
className='p-1 rounded-lg bg-components-actionbar-bg shadow inline-flex items-center justify-center'
className='inline-flex items-center justify-center rounded-lg bg-components-actionbar-bg p-1 shadow'
onMouseEnter={() => setDelBtnHover(true)}
onMouseLeave={() => setDelBtnHover(false)}
>
@@ -105,7 +105,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
}}
state={ActionButtonState.Destructive}
>
<RiDeleteBinLine className='w-4 h-4' />
<RiDeleteBinLine className='h-4 w-4' />
</ActionButton>
</span>
</FloatingFocusManager>}

2
web/app/components/datasets/formatted-text/flavours/preview-slice.tsx
View File

@@ -47,7 +47,7 @@ export const PreviewSlice: FC<PreviewSliceProps> = (props) => {
ref={refs.setFloating}
style={floatingStyles}
{...getFloatingProps()}
className='p-2 rounded-md bg-components-tooltip-bg shadow shadow-shadow-shadow-5 backdrop-blur-[5px] text-text-secondary leading-4 border-[0.5px] border-components-panel-border text-xs'
className='rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-2 text-xs leading-4 text-text-secondary shadow shadow-shadow-shadow-5 backdrop-blur-[5px]'
>
{tooltip}
</span>}

38
web/app/components/datasets/formatted-text/flavours/shared.tsx
View File

@@ -1,22 +1,32 @@
import { type ComponentProps, type FC, forwardRef } from 'react'
import type { ComponentProps, FC } from 'react'
import classNames from '@/utils/classnames'
const baseStyle = 'py-[3px]'
export type SliceContainerProps = ComponentProps<'span'>
export const SliceContainer: FC<SliceContainerProps> = forwardRef((props, ref) => {
export const SliceContainer: FC<SliceContainerProps> = (
{
ref,
...props
},
) => {
const { className, ...rest } = props
return <span {...rest} ref={ref} className={classNames(
'group align-bottom mr-1 select-none text-sm',
className,
)} />
})
}
SliceContainer.displayName = 'SliceContainer'
export type SliceLabelProps = ComponentProps<'span'> & { labelInnerClassName?: string }
export const SliceLabel: FC<SliceLabelProps> = forwardRef((props, ref) => {
export const SliceLabel: FC<SliceLabelProps> = (
{
ref,
...props
},
) => {
const { className, children, labelInnerClassName, ...rest } = props
return <span {...rest} ref={ref} className={classNames(
baseStyle,
@@ -27,12 +37,17 @@ export const SliceLabel: FC<SliceLabelProps> = forwardRef((props, ref) => {
{children}
</span>
</span>
})
}
SliceLabel.displayName = 'SliceLabel'
export type SliceContentProps = ComponentProps<'span'>
export const SliceContent: FC<SliceContentProps> = forwardRef((props, ref) => {
export const SliceContent: FC<SliceContentProps> = (
{
ref,
...props
},
) => {
const { className, children, ...rest } = props
return <span {...rest} ref={ref} className={classNames(
baseStyle,
@@ -41,12 +56,17 @@ export const SliceContent: FC<SliceContentProps> = forwardRef((props, ref) => {
)}>
{children}
</span>
})
}
SliceContent.displayName = 'SliceContent'
export type SliceDividerProps = ComponentProps<'span'>
export const SliceDivider: FC<SliceDividerProps> = forwardRef((props, ref) => {
export const SliceDivider: FC<SliceDividerProps> = (
{
ref,
...props
},
) => {
const { className, ...rest } = props
return <span {...rest} ref={ref} className={classNames(
baseStyle,
@@ -56,5 +76,5 @@ export const SliceDivider: FC<SliceDividerProps> = forwardRef((props, ref) => {
{/* use a zero-width space to make the hover area bigger */}
&#8203;
</span>
})
}
SliceDivider.displayName = 'SliceDivider'

6
web/app/components/datasets/hit-testing/components/child-chunks-item.tsx
View File

@@ -19,11 +19,11 @@ const ChildChunks: FC<Props> = ({
<div
className={!isShowAll ? 'line-clamp-2 break-all' : ''}
>
<div className='inline-flex items-center relative top-[-2px]'>
<div className='flex items-center h-[20.5px] bg-state-accent-solid system-2xs-semibold-uppercase text-text-primary-on-surface px-1'>C-{position}</div>
<div className='relative top-[-2px] inline-flex items-center'>
<div className='system-2xs-semibold-uppercase flex h-[20.5px] items-center bg-state-accent-solid px-1 text-text-primary-on-surface'>C-{position}</div>
<Score value={score} besideChunkName />
</div>
<SliceContent className='py-0.5 bg-state-accent-hover group-hover:bg-state-accent-hover text-sm text-text-secondary font-normal'>{content}</SliceContent>
<SliceContent className='bg-state-accent-hover py-0.5 text-sm font-normal text-text-secondary group-hover:bg-state-accent-hover'>{content}</SliceContent>
</div>
)
}

Some files were not shown because too many files have changed in this diff Show More