admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

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) => {