mirror of https://github.com/langgenius/dify.git
fix: update parent child style
This commit is contained in:
NFish
parent
330cfaf6d6
commit
4e6db1f4fb
|
|
@ -24,30 +24,29 @@ type Props = {
|
|||
const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1, min = 0, max, value, enable, onChange, hasSwitch, onSwitchChange }) => {
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="flex items-center h-8 justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
{hasSwitch && (
|
||||
<Switch
|
||||
size='md'
|
||||
className='mr-2'
|
||||
defaultValue={enable}
|
||||
onChange={async (val) => {
|
||||
onSwitchChange?.(id, val)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span className="mx-1 text-text-secondary text-[13px] leading-[18px] font-medium">{name}</span>
|
||||
<span className="mr-1 text-text-secondary system-sm-semibold">{name}</span>
|
||||
{!noTooltip && (
|
||||
<Tooltip
|
||||
triggerClassName='w-4 h-4 shrink-0'
|
||||
popupContent={<div className="w-[200px]">{tip}</div>}
|
||||
/>
|
||||
)}
|
||||
|
||||
</div>
|
||||
<div className="flex items-center"></div>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center">
|
||||
<div className="mr-4 flex shrink-0 items-center">
|
||||
<div className="mt-1 flex items-center">
|
||||
<div className="mr-3 flex shrink-0 items-center">
|
||||
<InputNumber
|
||||
disabled={!enable}
|
||||
type="number"
|
||||
|
|
@ -62,7 +61,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
|
|||
className='w-[72px]'
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center h-7 grow">
|
||||
<div className="flex items-center grow">
|
||||
<Slider
|
||||
className='w-full'
|
||||
disabled={!enable}
|
||||
|
|
|
|||
|
|
@ -31,21 +31,21 @@ const RadioCard: FC<Props> = ({
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'border border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl hover:shadow-xs cursor-pointer',
|
||||
isChosen && 'bg-components-option-card-option-selected-bg border-components-panel-border shadow-xs',
|
||||
'relative p-3 border-[0.5px] border-components-option-card-option-border bg-components-option-card-option-bg rounded-xl cursor-pointer',
|
||||
isChosen && 'border-[1.5px] bg-components-option-card-option-selected-bg',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className='flex py-3 pl-3 pr-4' onClick={onChosen}>
|
||||
<div className={cn(iconBgClassName, 'mr-3 shrink-0 flex w-8 justify-center h-8 items-center rounded-lg')}>
|
||||
<div className='flex gap-x-2' onClick={onChosen}>
|
||||
<div className={cn(iconBgClassName, 'shrink-0 flex size-8 justify-center items-center rounded-lg shadow-md')}>
|
||||
{icon}
|
||||
</div>
|
||||
<div className='grow'>
|
||||
<div className='leading-5 text-sm font-medium text-text-secondary'>{title}</div>
|
||||
<div className='leading-[18px] text-xs font-normal text-text-tertiary'>{description}</div>
|
||||
<div className='system-sm-semibold text-text-secondary mb-1'>{title}</div>
|
||||
<div className='system-sm-regular text-text-tertiary'>{description}</div>
|
||||
</div>
|
||||
{!noRadio && (
|
||||
<div className='shrink-0 flex items-center h-8'>
|
||||
<div className='absolute top-3 right-3'>
|
||||
<div className={cn(
|
||||
'w-4 h-4 border border-components-radio-border bg-components-radio-bg shadow-xs rounded-full',
|
||||
isChosen && 'border-[5px] border-components-radio-border-checked',
|
||||
|
|
@ -54,8 +54,11 @@ const RadioCard: FC<Props> = ({
|
|||
)}
|
||||
</div>
|
||||
{((isChosen && chosenConfig) || noRadio) && (
|
||||
<div className={cn(chosenConfigWrapClassName, 'p-3')}>
|
||||
{chosenConfig}
|
||||
<div className='flex gap-x-2 mt-2'>
|
||||
<div className='size-8 shrink-0'></div>
|
||||
<div className={cn(chosenConfigWrapClassName, 'grow')}>
|
||||
{chosenConfig}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ const RetrievalMethodConfig: FC<Props> = ({
|
|||
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-2' uppercase />
|
||||
<Badge text={t('dataset.retrieval.hybrid_search.recommend')!} className='border-text-accent-secondary text-text-accent-secondary ml-1 h-[18px]' uppercase />
|
||||
</div>
|
||||
}
|
||||
description={t('dataset.retrieval.hybrid_search.description')} isActive={
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ const RetrievalParamConfig: FC<Props> = ({
|
|||
<div>
|
||||
{!isEconomical && !isHybridSearch && (
|
||||
<div>
|
||||
<div className='flex h-8 items-center text-[13px] font-medium text-gray-900 space-x-2'>
|
||||
<div className='flex items-center space-x-2 mb-2'>
|
||||
{canToggleRerankModalEnable && (
|
||||
<div
|
||||
className='flex items-center'
|
||||
|
|
@ -140,7 +140,7 @@ const RetrievalParamConfig: FC<Props> = ({
|
|||
</div>
|
||||
)}
|
||||
<div className='flex items-center'>
|
||||
<span className='mr-0.5 text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
|
||||
<span className='mr-0.5 system-sm-semibold text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
|
||||
<Tooltip
|
||||
popupContent={
|
||||
<div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>
|
||||
|
|
@ -167,7 +167,7 @@ const RetrievalParamConfig: FC<Props> = ({
|
|||
)}
|
||||
{
|
||||
!isHybridSearch && (
|
||||
<div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-6')}>
|
||||
<div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-4')}>
|
||||
<TopKItem
|
||||
className='grow'
|
||||
value={value.top_k}
|
||||
|
|
|
|||
|
|
@ -585,7 +585,7 @@ const StepTwo = ({
|
|||
&& <OptionCard
|
||||
className='bg-background-section mb-2'
|
||||
title={t('datasetCreation.stepTwo.general')}
|
||||
icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
|
||||
icon={<Image width={20} height={20} src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
|
||||
activeHeaderClassName='bg-dataset-option-card-blue-gradient'
|
||||
description={t('datasetCreation.stepTwo.generalTip')}
|
||||
isActive={
|
||||
|
|
@ -599,7 +599,7 @@ const StepTwo = ({
|
|||
actions={
|
||||
<>
|
||||
<Button variant={'secondary-accent'} onClick={() => updatePreview()}>
|
||||
<RiSearchEyeLine className='h-4 w-4 mr-1.5' />
|
||||
<RiSearchEyeLine className='h-4 w-4 mr-0.5' />
|
||||
{t('datasetCreation.stepTwo.previewChunk')}
|
||||
</Button>
|
||||
<Button variant={'ghost'} onClick={resetRules}>
|
||||
|
|
@ -690,7 +690,7 @@ const StepTwo = ({
|
|||
(!datasetId || currentDataset!.doc_form === ChuckingMode.parentChild)
|
||||
&& <OptionCard
|
||||
title={t('datasetCreation.stepTwo.parentChild')}
|
||||
icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />}
|
||||
icon={<Image width={20} height={20} src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />}
|
||||
effectImg={OrangeEffect.src}
|
||||
activeHeaderClassName='bg-dataset-option-card-orange-gradient'
|
||||
description={t('datasetCreation.stepTwo.parentChildTip')}
|
||||
|
|
@ -701,7 +701,7 @@ const StepTwo = ({
|
|||
actions={
|
||||
<>
|
||||
<Button variant={'secondary-accent'} onClick={() => updatePreview()}>
|
||||
<RiSearchEyeLine className='h-4 w-4 mr-1.5' />
|
||||
<RiSearchEyeLine className='h-4 w-4 mr-0.5' />
|
||||
{t('datasetCreation.stepTwo.previewChunk')}
|
||||
</Button>
|
||||
<Button variant={'ghost'} onClick={resetRules}>
|
||||
|
|
@ -711,12 +711,15 @@ const StepTwo = ({
|
|||
}
|
||||
noHighlight={Boolean(datasetId)}
|
||||
>
|
||||
<div className='space-y-4'>
|
||||
<div className='space-y-2'>
|
||||
<TextLabel>
|
||||
{t('datasetCreation.stepTwo.parentChunkForContext')}
|
||||
</TextLabel>
|
||||
<RadioCard
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div>
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<div className='inline-flex shrink-0'>
|
||||
<TextLabel>{t('datasetCreation.stepTwo.parentChunkForContext')}</TextLabel>
|
||||
</div>
|
||||
<Divider className='grow' bgStyle='gradient'/>
|
||||
</div>
|
||||
<RadioCard className='mt-1'
|
||||
icon={<Image src={Note} alt='' />}
|
||||
title={t('datasetCreation.stepTwo.paragraph')}
|
||||
description={t('datasetCreation.stepTwo.paragraphTip')}
|
||||
|
|
@ -728,7 +731,7 @@ const StepTwo = ({
|
|||
},
|
||||
)}
|
||||
chosenConfig={
|
||||
<div className='flex gap-2'>
|
||||
<div className='flex gap-3'>
|
||||
<DelimiterInput
|
||||
value={parentChildConfig.parent.delimiter}
|
||||
onChange={e => setParentChildConfig({
|
||||
|
|
@ -752,7 +755,7 @@ const StepTwo = ({
|
|||
</div>
|
||||
}
|
||||
/>
|
||||
<RadioCard
|
||||
<RadioCard className='mt-2'
|
||||
icon={<Image src={FileList} alt='' />}
|
||||
title={t('datasetCreation.stepTwo.fullDoc')}
|
||||
description={t('datasetCreation.stepTwo.fullDocTip')}
|
||||
|
|
@ -766,11 +769,14 @@ const StepTwo = ({
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className='space-y-4'>
|
||||
<TextLabel>
|
||||
{t('datasetCreation.stepTwo.childChunkForRetrieval')}
|
||||
</TextLabel>
|
||||
<div className='flex gap-3 mt-2'>
|
||||
<div>
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<div className='inline-flex shrink-0'>
|
||||
<TextLabel>{t('datasetCreation.stepTwo.childChunkForRetrieval')}</TextLabel>
|
||||
</div>
|
||||
<Divider className='grow' bgStyle='gradient'/>
|
||||
</div>
|
||||
<div className='flex gap-3 mt-1'>
|
||||
<DelimiterInput
|
||||
value={parentChildConfig.child.delimiter}
|
||||
onChange={e => setParentChildConfig({
|
||||
|
|
@ -792,23 +798,25 @@ const StepTwo = ({
|
|||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2'>
|
||||
<TextLabel>
|
||||
{t('datasetCreation.stepTwo.rules')}
|
||||
</TextLabel>
|
||||
<div className='space-y-2 mt-2'>
|
||||
{rules.map(rule => (
|
||||
<div key={rule.id} className={s.ruleItem} onClick={() => {
|
||||
ruleChangeHandle(rule.id)
|
||||
}}>
|
||||
<Checkbox
|
||||
checked={rule.enabled}
|
||||
/>
|
||||
<label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -821,7 +829,7 @@ const StepTwo = ({
|
|||
title={<p className='flex items-center'>
|
||||
{t('datasetCreation.stepTwo.qualified')}
|
||||
{!hasSetIndexType
|
||||
&& <Badge className={cn('ml-1', (!hasSetIndexType && indexType === IndexingType.QUALIFIED) ? 'border-text-accent-secondary text-text-accent-secondary' : '')} uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>}
|
||||
&& <Badge className={cn('ml-1 h-[18px]', (!hasSetIndexType && indexType === IndexingType.QUALIFIED) ? 'border-text-accent-secondary text-text-accent-secondary' : '')} uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>}
|
||||
<span className='ml-auto'>
|
||||
{!hasSetIndexType && <span className={cn(s.radio)} />}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -25,14 +25,16 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
|
|||
)}>
|
||||
<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='size-8 rounded-lg border p-1.5 shadow-md border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
|
||||
{icon}
|
||||
<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'>
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TriangleArrow
|
||||
className='absolute left-4 -bottom-1.5 text-components-panel-bg'
|
||||
/>
|
||||
<div className='flex-1 space-y-0.5 p-3'>
|
||||
<div className='flex-1 space-y-0.5 py-3'>
|
||||
<div className='text-text-secondary system-md-semibold'>{title}</div>
|
||||
<div className='text-text-tertiary system-xs-regular'>{description}</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue