ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update dataset document processing style

Browse Source
pull/12097/head
NFish 1 year ago
parent 1613eadbce
commit 827cffc4d9
5 changed files with 387 additions and 401 deletions
Show Stats Download Patch File Download Diff File

13
web/app/components/datasets/create/step-two/index.module.css
Unescape Escape View File

@ -13,17 +13,6 @@
z-index: 10; z-index: 10;
} }
.form {
@apply px-16 py-8;
}
.form .label {
@apply pb-2 flex items-center text-text-secondary;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
.segmentationItem { .segmentationItem {
min-height: 68px; min-height: 68px;
} }
@ -249,7 +238,7 @@
} }
.ruleItem { .ruleItem {
@apply flex items-center; @apply flex items-center py-1.5;
} }
.formFooter { .formFooter {

744
web/app/components/datasets/create/step-two/index.tsx
Unescape Escape View File

@ -63,7 +63,7 @@ import CustomDialog from '@/app/components/base/dialog'
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem' import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
const TextLabel: FC<PropsWithChildren> = (props) => { const TextLabel: FC<PropsWithChildren> = (props) => {
return <label className='text-text-secondary text-xs font-semibold leading-none'>{props.children}</label> return <label className='text-text-secondary system-sm-semibold'>{props.children}</label>
} }
type StepTwoProps = { type StepTwoProps = {
@ -550,7 +550,7 @@ const StepTwo = ({
getRulesFromDetail() getRulesFromDetail()
getDefaultMode() getDefaultMode()
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) }, [])
useEffect(() => { useEffect(() => {
@ -578,407 +578,403 @@ const StepTwo = ({
const isHoveringEconomy = useHover(economyDomRef) const isHoveringEconomy = useHover(economyDomRef)
return ( return (
<div className='flex w-full max-h-full h-full overflow-y-auto'> <div className='flex w-full max-h-full h-full'>
<div className='relative h-full w-full overflow-y-scroll'> <div className={cn('relative h-full w-1/2 py-6 overflow-y-auto', isMobile ? 'px-4' : 'px-12')}>
<div className={cn(s.form, isMobile && '!px-4')}> <div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.segmentation')}</div>
<div className={s.label}>{t('datasetCreation.stepTwo.segmentation')}</div> {(!datasetId || [ChuckingMode.text, ChuckingMode.qa].includes(currentDataset!.doc_form))
<div className='max-w-[640px]'> && <OptionCard
<div className='space-y-4'> className='bg-background-section mb-2'
{(!datasetId || [ChuckingMode.text, ChuckingMode.qa].includes(currentDataset!.doc_form)) title={t('datasetCreation.stepTwo.general')}
&& <OptionCard icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
title={t('datasetCreation.stepTwo.general')} activeHeaderClassName='bg-dataset-option-card-blue-gradient'
icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />} description={t('datasetCreation.stepTwo.generalTip')}
activeHeaderClassName='bg-dataset-option-card-blue-gradient' isActive={
description={t('datasetCreation.stepTwo.generalTip')} [ChuckingMode.text, ChuckingMode.qa].includes(
isActive={ datasetId ? currentDataset!.doc_form : docForm,
[ChuckingMode.text, ChuckingMode.qa].includes( )
datasetId ? currentDataset!.doc_form : docForm, }
) onSwitched={() =>
} handleChangeDocform(ChuckingMode.text)
onSwitched={() => }
handleChangeDocform(ChuckingMode.text) actions={
} <>
actions={ <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
<> <RiSearchEyeLine className='h-4 w-4 mr-1.5' />
<Button variant={'secondary-accent'} onClick={() => updatePreview()}> {t('datasetCreation.stepTwo.previewChunk')}
<RiSearchEyeLine className='h-4 w-4 mr-1.5' /> </Button>
{t('datasetCreation.stepTwo.previewChunk')} <Button variant={'ghost'} onClick={resetRules}>
</Button> {t('datasetCreation.stepTwo.reset')}
<Button variant={'ghost'} onClick={resetRules}> </Button>
{t('datasetCreation.stepTwo.reset')} </>
</Button> }
</> noHighlight={Boolean(datasetId)}
} >
noHighlight={Boolean(datasetId)} <div className='flex flex-col gap-y-4'>
> <div className='flex gap-3'>
<div className='space-y-4'> <DelimiterInput
<div className='flex gap-3'> value={segmentIdentifier}
<DelimiterInput onChange={e => setSegmentIdentifier(e.target.value)}
value={segmentIdentifier} />
onChange={e => setSegmentIdentifier(e.target.value)} <MaxLengthInput
/> value={maxChunkLength}
<MaxLengthInput onChange={setMaxChunkLength}
value={maxChunkLength} />
onChange={setMaxChunkLength} <OverlapInput
/> value={overlap}
<OverlapInput min={1}
value={overlap} onChange={setOverlap}
min={1} />
onChange={setOverlap} </div>
<div className='w-full flex flex-col'>
<div className='flex items-center gap-x-2'>
<div className='inline-flex shrink-0'>
<TextLabel>{t('datasetCreation.stepTwo.rules')}</TextLabel>
</div>
<Divider className='grow' bgStyle='gradient'/>
</div>
<div className='mt-1'>
{rules.map(rule => (
<div key={rule.id} className={s.ruleItem} onClick={() => {
ruleChangeHandle(rule.id)
}}>
<Checkbox
checked={rule.enabled}
/> />
<label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
</div> </div>
<div className='space-y-2'> ))}
<div className='w-full flex flex-col'> {IS_CE_EDITION && <>
<TextLabel>{t('datasetCreation.stepTwo.rules')}</TextLabel> <div className='flex items-center'>
<div className='mt-4 space-y-2'> <Checkbox
{rules.map(rule => ( checked={docForm === ChuckingMode.qa}
<div key={rule.id} className={s.ruleItem} onClick={() => { onCheck={() => {
ruleChangeHandle(rule.id) if (docForm === ChuckingMode.qa)
}}> handleChangeDocform(ChuckingMode.text)
<Checkbox else
checked={rule.enabled} handleChangeDocform(ChuckingMode.qa)
/> }}
<label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label> />
</div> <div className='flex items-center gap-1'>
))} <label className="ml-2 system-sm-regular cursor-pointer text-text-secondary">
{t('datasetCreation.stepTwo.QALanguage')}
</label>
<div className='z-50 relative'>
<LanguageSelect
currentLanguage={docLanguage || locale}
onSelect={setDocLanguage}
disabled={isLanguageSelectDisabled}
/>
</div> </div>
<Tooltip popupContent={t('datasetCreation.stepTwo.QATip')} />
</div> </div>
</div> </div>
{IS_CE_EDITION && <> {docForm === ChuckingMode.qa && (
<div className='flex items-center'> <div
<Checkbox style={{
checked={docForm === ChuckingMode.qa} background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.1) 0%, rgba(255, 255, 255, 0.00) 100%)',
onCheck={() => { }}
if (docForm === ChuckingMode.qa) 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'
handleChangeDocform(ChuckingMode.text) >
else <RiAlertFill className='size-4 text-text-warning-secondary' />
handleChangeDocform(ChuckingMode.qa) <span className='system-xs-medium text-text-primary'>
}} {t('datasetCreation.stepTwo.QATip')}
className='mr-2' </span>
/>
<div className='flex items-center gap-1'>
<TextLabel>
{t('datasetCreation.stepTwo.QALanguage')}
</TextLabel>
<div className='z-50 relative'>
<LanguageSelect
currentLanguage={docLanguage || locale}
onSelect={setDocLanguage}
disabled={isLanguageSelectDisabled}
/>
</div>
<Tooltip popupContent={t('datasetCreation.stepTwo.QATip')} />
</div>
</div> </div>
{docForm === ChuckingMode.qa && ( )}
<div </>}
style={{ </div>
background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.1) 0%, rgba(255, 255, 255, 0.00) 100%)', </div>
}} </div>
className='h-10 flex items-center gap-2 rounded-xl border-components-panel-border border shadow-shadow-shadow-3 px-3 text-xs' </OptionCard>}
> {
<RiAlertFill className='size-4 text-text-warning-secondary' /> (!datasetId || currentDataset!.doc_form === ChuckingMode.parentChild)
<span className='text-sm font-medium text-text-primary'> && <OptionCard
{t('datasetCreation.stepTwo.QATip')} title={t('datasetCreation.stepTwo.parentChild')}
</span> icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />}
</div> effectImg={OrangeEffect.src}
)} activeHeaderClassName='bg-dataset-option-card-orange-gradient'
</>} description={t('datasetCreation.stepTwo.parentChildTip')}
</div> isActive={
</OptionCard>} datasetId ? currentDataset!.doc_form === ChuckingMode.parentChild : docForm === ChuckingMode.parentChild
{ }
(!datasetId || currentDataset!.doc_form === ChuckingMode.parentChild) onSwitched={() => handleChangeDocform(ChuckingMode.parentChild)}
&& <OptionCard actions={
title={t('datasetCreation.stepTwo.parentChild')} <>
icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />} <Button variant={'secondary-accent'} onClick={() => updatePreview()}>
effectImg={OrangeEffect.src} <RiSearchEyeLine className='h-4 w-4 mr-1.5' />
activeHeaderClassName='bg-dataset-option-card-orange-gradient' {t('datasetCreation.stepTwo.previewChunk')}
description={t('datasetCreation.stepTwo.parentChildTip')} </Button>
isActive={ <Button variant={'ghost'} onClick={resetRules}>
datasetId ? currentDataset!.doc_form === ChuckingMode.parentChild : docForm === ChuckingMode.parentChild {t('datasetCreation.stepTwo.reset')}
} </Button>
onSwitched={() => handleChangeDocform(ChuckingMode.parentChild)} </>
actions={ }
<> noHighlight={Boolean(datasetId)}
<Button variant={'secondary-accent'} onClick={() => updatePreview()}> >
<RiSearchEyeLine className='h-4 w-4 mr-1.5' /> <div className='space-y-4'>
{t('datasetCreation.stepTwo.previewChunk')} <div className='space-y-2'>
</Button> <TextLabel>
<Button variant={'ghost'} onClick={resetRules}> {t('datasetCreation.stepTwo.parentChunkForContext')}
{t('datasetCreation.stepTwo.reset')} </TextLabel>
</Button> <RadioCard
</> icon={<Image src={Note} alt='' />}
} title={t('datasetCreation.stepTwo.paragraph')}
noHighlight={Boolean(datasetId)} description={t('datasetCreation.stepTwo.paragraphTip')}
> isChosen={parentChildConfig.chunkForContext === 'paragraph'}
<div className='space-y-4'> onChosen={() => setParentChildConfig(
<div className='space-y-2'> {
<TextLabel> ...parentChildConfig,
{t('datasetCreation.stepTwo.parentChunkForContext')} chunkForContext: 'paragraph',
</TextLabel> },
<RadioCard )}
icon={<Image src={Note} alt='' />} chosenConfig={
title={t('datasetCreation.stepTwo.paragraph')} <div className='flex gap-2'>
description={t('datasetCreation.stepTwo.paragraphTip')} <DelimiterInput
isChosen={parentChildConfig.chunkForContext === 'paragraph'} value={parentChildConfig.parent.delimiter}
onChosen={() => setParentChildConfig( onChange={e => setParentChildConfig({
{ ...parentChildConfig,
...parentChildConfig, parent: {
chunkForContext: 'paragraph', ...parentChildConfig.parent,
delimiter: e.target.value,
}, },
)} })}
chosenConfig={
<div className='flex gap-2'>
<DelimiterInput
value={parentChildConfig.parent.delimiter}
onChange={e => setParentChildConfig({
...parentChildConfig,
parent: {
...parentChildConfig.parent,
delimiter: e.target.value,
},
})}
/>
<MaxLengthInput
value={parentChildConfig.parent.maxLength}
onChange={value => setParentChildConfig({
...parentChildConfig,
parent: {
...parentChildConfig.parent,
maxLength: value,
},
})}
/>
</div>
}
/> />
<RadioCard <MaxLengthInput
icon={<Image src={FileList} alt='' />} value={parentChildConfig.parent.maxLength}
title={t('datasetCreation.stepTwo.fullDoc')} onChange={value => setParentChildConfig({
description={t('datasetCreation.stepTwo.fullDocTip')} ...parentChildConfig,
onChosen={() => setParentChildConfig( parent: {
{ ...parentChildConfig.parent,
...parentChildConfig, maxLength: value,
chunkForContext: 'full-doc',
}, },
)} })}
isChosen={parentChildConfig.chunkForContext === 'full-doc'}
/> />
</div> </div>
}
/>
<RadioCard
icon={<Image src={FileList} alt='' />}
title={t('datasetCreation.stepTwo.fullDoc')}
description={t('datasetCreation.stepTwo.fullDocTip')}
onChosen={() => setParentChildConfig(
{
...parentChildConfig,
chunkForContext: 'full-doc',
},
)}
isChosen={parentChildConfig.chunkForContext === 'full-doc'}
/>
</div>
<div className='space-y-4'> <div className='space-y-4'>
<TextLabel> <TextLabel>
{t('datasetCreation.stepTwo.childChunkForRetrieval')} {t('datasetCreation.stepTwo.childChunkForRetrieval')}
</TextLabel> </TextLabel>
<div className='flex gap-3 mt-2'> <div className='flex gap-3 mt-2'>
<DelimiterInput <DelimiterInput
value={parentChildConfig.child.delimiter} value={parentChildConfig.child.delimiter}
onChange={e => setParentChildConfig({ onChange={e => setParentChildConfig({
...parentChildConfig, ...parentChildConfig,
child: { child: {
...parentChildConfig.child, ...parentChildConfig.child,
delimiter: e.target.value, delimiter: e.target.value,
}, },
})} })}
/> />
<MaxLengthInput <MaxLengthInput
value={parentChildConfig.child.maxLength} value={parentChildConfig.child.maxLength}
onChange={value => setParentChildConfig({ onChange={value => setParentChildConfig({
...parentChildConfig, ...parentChildConfig,
child: { child: {
...parentChildConfig.child, ...parentChildConfig.child,
maxLength: value, maxLength: value,
}, },
})} })}
/> />
</div> </div>
<div className='space-y-2'> <div className='space-y-2'>
<TextLabel> <TextLabel>
{t('datasetCreation.stepTwo.rules')} {t('datasetCreation.stepTwo.rules')}
</TextLabel> </TextLabel>
<div className='space-y-2 mt-2'> <div className='space-y-2 mt-2'>
{rules.map(rule => ( {rules.map(rule => (
<div key={rule.id} className={s.ruleItem} onClick={() => { <div key={rule.id} className={s.ruleItem} onClick={() => {
ruleChangeHandle(rule.id) ruleChangeHandle(rule.id)
}}> }}>
<Checkbox <Checkbox
checked={rule.enabled} checked={rule.enabled}
/> />
<label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label> <label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
</div>
))}
</div>
</div> </div>
</div> ))}
</div> </div>
</OptionCard>} </div>
</div>
</div> </div>
</div> </OptionCard>}
<Divider className='my-5' /> <Divider className='my-5' />
<div className={s.label}>{t('datasetCreation.stepTwo.indexMode')}</div> <div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.indexMode')}</div>
<div className='max-w-[640px]'> <div className='flex items-center gap-2 flex-wrap sm:flex-nowrap'>
<div className='flex items-center gap-3 flex-wrap sm:flex-nowrap'> {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && ( <OptionCard
<OptionCard title={<p className='flex items-center'>
title={<p className='flex items-center'> {t('datasetCreation.stepTwo.qualified')}
{t('datasetCreation.stepTwo.qualified')} {!hasSetIndexType
{!hasSetIndexType && <Badge className='ml-1' uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>} && <Badge className={cn('ml-1', (!hasSetIndexType && indexType === IndexingType.QUALIFIED) ? 'border-text-accent-secondary text-text-accent-secondary' : '')} uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>}
<span className='ml-auto'> <span className='ml-auto'>
{!hasSetIndexType && <span className={cn(s.radio)} />} {!hasSetIndexType && <span className={cn(s.radio)} />}
</span> </span>
</p>} </p>}
description={t('datasetCreation.stepTwo.qualifiedTip')} description={t('datasetCreation.stepTwo.qualifiedTip')}
icon={<Image src={indexMethodIcon.high_quality} alt='' />} icon={<Image src={indexMethodIcon.high_quality} alt='' />}
isActive={!hasSetIndexType && indexType === IndexingType.QUALIFIED} isActive={!hasSetIndexType && indexType === IndexingType.QUALIFIED}
disabled={!isAPIKeySet || hasSetIndexType} disabled={!isAPIKeySet || hasSetIndexType}
onSwitched={() => { onSwitched={() => {
if (isAPIKeySet) if (isAPIKeySet)
setIndexType(IndexingType.QUALIFIED) setIndexType(IndexingType.QUALIFIED)
}} }}
/> />
)} )}
{(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && ( {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
<> <>
<CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'> <CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
<header className='pt-6 mb-4'> <header className='pt-6 mb-4'>
<h2 className='text-lg font-semibold'> <h2 className='text-lg font-semibold'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')} {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
</h2> </h2>
<p className='font-normal text-sm mt-2'> <p className='font-normal text-sm mt-2'>
{t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')} {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
</p> </p>
</header> </header>
<div className='flex gap-2 pb-6'> <div className='flex gap-2 pb-6'>
<Button className='ml-auto' onClick={() => { <Button className='ml-auto' onClick={() => {
setIsQAConfirmDialogOpen(false) setIsQAConfirmDialogOpen(false)
}}> }}>
{t('datasetCreation.stepTwo.cancel')} {t('datasetCreation.stepTwo.cancel')}
</Button> </Button>
<Button variant={'primary'} onClick={() => { <Button variant={'primary'} onClick={() => {
setIsQAConfirmDialogOpen(false) setIsQAConfirmDialogOpen(false)
setIndexType(IndexingType.QUALIFIED) setIndexType(IndexingType.QUALIFIED)
setDocForm(ChuckingMode.qa) setDocForm(ChuckingMode.qa)
}}> }}>
{t('datasetCreation.stepTwo.switch')} {t('datasetCreation.stepTwo.switch')}
</Button> </Button>
</div> </div>
</CustomDialog> </CustomDialog>
<PortalToFollowElem <PortalToFollowElem
open={ open={
isHoveringEconomy && docForm !== ChuckingMode.text isHoveringEconomy && docForm !== ChuckingMode.text
}
placement={'top'}
>
<PortalToFollowElemTrigger>
<OptionCard
title={t('datasetCreation.stepTwo.economical')}
description={t('datasetCreation.stepTwo.economicalTip')}
icon={<Image src={indexMethodIcon.economical} alt='' />}
isActive={!hasSetIndexType && indexType === IndexingType.ECONOMICAL}
disabled={!isAPIKeySet || hasSetIndexType || docForm !== ChuckingMode.text}
ref={economyDomRef}
onSwitched={() => {
if (isAPIKeySet && docForm === ChuckingMode.text)
setIndexType(IndexingType.ECONOMICAL)
}}
/>
</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'>
{
docForm === ChuckingMode.qa
? t('datasetCreation.stepTwo.notAvailableForQA')
: t('datasetCreation.stepTwo.notAvailableForParentChild')
} }
placement={'top'} </div>
> </PortalToFollowElemContent>
<PortalToFollowElemTrigger> </PortalToFollowElem>
<OptionCard </>)}
title={t('datasetCreation.stepTwo.economical')} </div>
description={t('datasetCreation.stepTwo.economicalTip')} {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
icon={<Image src={indexMethodIcon.economical} alt='' />} <div className='mt-2 text-xs text-gray-500 font-medium'>
isActive={!hasSetIndexType && indexType === IndexingType.ECONOMICAL} {t('datasetCreation.stepTwo.indexSettingTip')}
disabled={!isAPIKeySet || hasSetIndexType || docForm !== ChuckingMode.text} <Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
ref={economyDomRef} </div>
onSwitched={() => { )}
if (isAPIKeySet && docForm === ChuckingMode.text) {/* Embedding model */}
setIndexType(IndexingType.ECONOMICAL) {indexType === IndexingType.QUALIFIED && (
}} <div className='mt-5'>
/> <div className={cn('system-md-semibold mb-1', datasetId && 'flex justify-between items-center')}>{t('datasetSettings.form.embeddingModel')}</div>
</PortalToFollowElemTrigger> <ModelSelector
<PortalToFollowElemContent> readonly={!!datasetId}
<div className='p-3 bg-components-tooltip-bg border-components-panel-border text-xs font-medium text-text-secondary rounded-lg shadow-lg'> defaultModel={embeddingModel}
{ modelList={embeddingModelList}
docForm === ChuckingMode.qa onSelect={(model: DefaultModel) => {
? t('datasetCreation.stepTwo.notAvailableForQA') setEmbeddingModel(model)
: t('datasetCreation.stepTwo.notAvailableForParentChild') }}
} />
</div> {!!datasetId && (
</PortalToFollowElemContent>
</PortalToFollowElem>
</>)}
</div>
{hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
<div className='mt-2 text-xs text-gray-500 font-medium'> <div className='mt-2 text-xs text-gray-500 font-medium'>
{t('datasetCreation.stepTwo.indexSettingTip')} {t('datasetCreation.stepTwo.indexSettingTip')}
<Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link> <Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
</div> </div>
)} )}
{/* Embedding model */} </div>
{indexType === IndexingType.QUALIFIED && ( )}
<div className='mt-6 my-2'> <Divider className='my-5' />
<div className={cn(s.label, datasetId && 'flex justify-between items-center')}>{t('datasetSettings.form.embeddingModel')}</div> {/* Retrieval Method Config */}
<ModelSelector <div>
readonly={!!datasetId} {!datasetId
defaultModel={embeddingModel} ? (
modelList={embeddingModelList} <div className={'mb-1'}>
onSelect={(model: DefaultModel) => { <div className='system-md-semibold mb-0.5'>{t('datasetSettings.form.retrievalSetting.title')}</div>
setEmbeddingModel(model) <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')}
{!!datasetId && ( </div>
<div className='mt-2 text-xs text-gray-500 font-medium'> </div>
{t('datasetCreation.stepTwo.indexSettingTip')} )
<Link className='text-text-accent' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link> : (
</div> <div className={cn('system-md-semibold mb-0.5', 'flex justify-between items-center')}>
)} <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
</div> </div>
)} )}
<Divider className='my-5' />
{/* Retrieval Method Config */} <div className=''>
<div> {
{!datasetId getIndexing_technique() === IndexingType.QUALIFIED
? ( ? (
<div className={s.label}> <RetrievalMethodConfig
<div className='shrink-0 mr-4'>{t('datasetSettings.form.retrievalSetting.title')}</div> value={retrievalConfig}
<div className='leading-[18px] text-xs font-normal text-gray-500'> onChange={setRetrievalConfig}
<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')}
</div>
</div>
) )
: ( : (
<div className={cn(s.label, 'flex justify-between items-center')}> <EconomicalRetrievalMethodConfig
<div>{t('datasetSettings.form.retrievalSetting.title')}</div> value={retrievalConfig}
</div> onChange={setRetrievalConfig}
)} />
)
<div className='max-w-[640px]'> }
{
getIndexing_technique() === IndexingType.QUALIFIED
? (
<RetrievalMethodConfig
value={retrievalConfig}
onChange={setRetrievalConfig}
/>
)
: (
<EconomicalRetrievalMethodConfig
value={retrievalConfig}
onChange={setRetrievalConfig}
/>
)
}
</div>
</div>
{!isSetting
? (
<div className='flex items-center mt-8 py-2'>
<Button onClick={() => onStepChange && onStepChange(-1)}>
<RiArrowLeftLine className='w-4 h-4 mr-1' />
{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'>
<Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
<Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
</div>
)}
</div> </div>
</div> </div>
{!isSetting
? (
<div className='flex items-center mt-8 py-2'>
<Button onClick={() => onStepChange && onStepChange(-1)}>
<RiArrowLeftLine className='w-4 h-4 mr-1' />
{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'>
<Button loading={isCreating} variant='primary' onClick={createHandle}>{t('datasetCreation.stepTwo.save')}</Button>
<Button className='ml-2' onClick={onCancel}>{t('datasetCreation.stepTwo.cancel')}</Button>
</div>
)}
</div> </div>
<FloatRightContainer isMobile={isMobile} isOpen={true} onClose={() => { }} footer={null}> <FloatRightContainer isMobile={isMobile} isOpen={true} onClose={() => { }} footer={null}>
<PreviewContainer <PreviewContainer
@ -1049,7 +1045,7 @@ const StepTwo = ({
}) as string} /> }) as string} />
</div> </div>
</PreviewHeader>} </PreviewHeader>}
className={cn(s.previewWrap, isMobile && s.isMobile, 'relative h-full overflow-y-scroll')} className={cn('flex shrink-0 w-1/2 relative h-full overflow-y-scroll', isMobile && 'w-full max-w-[524px]')}
mainClassName='space-y-6' mainClassName='space-y-6'
> >
{docForm === ChuckingMode.qa && estimate?.qa_preview && ( {docForm === ChuckingMode.qa && estimate?.qa_preview && (

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

@ -19,8 +19,8 @@ const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
export const DelimiterInput: FC<InputProps> = (props) => { export const DelimiterInput: FC<InputProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
return <FormField label={<div className='flex'> return <FormField label={<div className='flex items-center mb-1'>
{t('datasetCreation.stepTwo.separator')} <span className='system-sm-semibold mr-0.5'>{t('datasetCreation.stepTwo.separator')}</span>
<Tooltip <Tooltip
popupContent={ popupContent={
<div className='max-w-[200px]'> <div className='max-w-[200px]'>
@ -40,7 +40,7 @@ export const DelimiterInput: FC<InputProps> = (props) => {
export const MaxLengthInput: FC<InputNumberProps> = (props) => { export const MaxLengthInput: FC<InputNumberProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
return <FormField label={<div className='h-[14px]'> return <FormField label={<div className='system-sm-semibold mb-1'>
{t('datasetCreation.stepTwo.maxLength')} {t('datasetCreation.stepTwo.maxLength')}
</div>}> </div>}>
<InputNumber <InputNumber
@ -56,8 +56,8 @@ export const MaxLengthInput: FC<InputNumberProps> = (props) => {
export const OverlapInput: FC<InputNumberProps> = (props) => { export const OverlapInput: FC<InputNumberProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
return <FormField label={<div className='flex'> return <FormField label={<div className='flex items-center mb-1'>
{t('datasetCreation.stepTwo.overlap')} <span className='system-sm-semibold'>{t('datasetCreation.stepTwo.overlap')}</span>
<Tooltip <Tooltip
popupContent={ popupContent={
<div className='max-w-[200px]'> <div className='max-w-[200px]'>

17
web/app/components/datasets/create/step-two/option-card.tsx
Unescape Escape View File

@ -25,16 +25,16 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
)}> )}>
<div className='size-14 flex items-center justify-center relative overflow-hidden'> <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} />} {isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
<div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'> <div className='size-8 rounded-lg border p-1.5 shadow-md border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
{icon} {icon}
</div> </div>
</div> </div>
<TriangleArrow <TriangleArrow
className='absolute left-4 -bottom-1.5 text-components-panel-bg' className='absolute left-4 -bottom-1.5 text-components-panel-bg'
/> />
<div className='flex-1 space-y-1 py-3 pr-4'> <div className='flex-1 space-y-0.5 p-3'>
<div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div> <div className='text-text-secondary system-md-semibold'>{title}</div>
<div className='text-text-tertiary text-xs font-normal leading-none'>{description}</div> <div className='text-text-tertiary system-xs-regular'>{description}</div>
</div> </div>
</div> </div>
} }
@ -57,16 +57,15 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
return <div return <div
className={classNames( className={classNames(
'rounded-xl border bg-components-option-card-option-bg', 'rounded-xl bg-components-option-card-option-bg shadow-xs',
(isActive && !noHighlight) (isActive && !noHighlight)
? 'border-components-option-card-option-selected-border' ? 'border-[1.5px] border-components-option-card-option-selected-border'
: 'border-components-option-card-option-border', : 'border border-components-option-card-option-border',
disabled && 'opacity-50', disabled && 'opacity-50',
className, className,
)} )}
style={{ style={{
...style, ...style,
borderWidth: 1.5,
}} }}
onClick={(e) => { onClick={(e) => {
if (!isActive) if (!isActive)
@ -85,7 +84,7 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
effectImg={effectImg} effectImg={effectImg}
/> />
{/** Body */} {/** Body */}
{isActive && (children || actions) && <div className='p-3'> {isActive && (children || actions) && <div className='py-3 px-4'>
{children} {children}
{actions && <div className='flex gap-2 mt-4'> {actions && <div className='flex gap-2 mt-4'>
{actions} {actions}

4
web/app/components/datasets/create/top-bar/index.tsx
Unescape Escape View File

@ -20,7 +20,9 @@ export const Topbar: FC<TopbarProps> = (props) => {
const { t } = useTranslation() const { t } = useTranslation()
return <div className={classNames('flex h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}> return <div className={classNames('flex h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
<Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex"> <Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
<RiArrowLeftLine className='size-4 mr-2 text-text-primary' /> <div className='p-2'>
<RiArrowLeftLine className='size-4 text-text-primary' />
</div>
<p className="text-text-primary system-sm-semibold-uppercase"> <p className="text-text-primary system-sm-semibold-uppercase">
{t('datasetCreation.steps.header.creation')} {t('datasetCreation.steps.header.creation')}
</p> </p>

Write Preview
Loading…
Cancel
Save