feat: implement chunk structure card and related hooks for dataset creation; update translations and refactor pipeline template fetching
twwu
8 months ago
parent
45c76c1d68
commit
f995436eec
@ -0,0 +1,66 @@
|
||||
import React from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { Option } from './types'
|
||||
import { EffectColor } from './types'
|
||||
|
||||
const HEADER_EFFECT_MAP: Record<EffectColor, string> = {
|
||||
[EffectColor.indigo]: 'bg-util-colors-indigo-indigo-600 opacity-80',
|
||||
[EffectColor.blueLight]: 'bg-util-colors-blue-light-blue-light-500 opacity-80',
|
||||
[EffectColor.green]: 'bg-util-colors-teal-teal-600 opacity-80',
|
||||
[EffectColor.none]: '',
|
||||
}
|
||||
|
||||
const IconBackgroundColorMap: Record<EffectColor, string> = {
|
||||
[EffectColor.indigo]: 'bg-components-icon-bg-indigo-solid',
|
||||
[EffectColor.blueLight]: 'bg-components-icon-bg-blue-light-solid',
|
||||
[EffectColor.green]: 'bg-components-icon-bg-teal-solid',
|
||||
[EffectColor.none]: '',
|
||||
}
|
||||
|
||||
type ChunkStructureCardProps = {
|
||||
className?: string
|
||||
} & Option
|
||||
|
||||
const ChunkStructureCard = ({
|
||||
className,
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
effectColor,
|
||||
}: ChunkStructureCardProps) => {
|
||||
return (
|
||||
<div className={cn(
|
||||
'relative flex overflow-hidden rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-bg p-2 shadow-xs shadow-shadow-shadow-3',
|
||||
className,
|
||||
)}>
|
||||
<div className={cn(
|
||||
'absolute -left-1 -top-1 size-14 rounded-full blur-[80px]',
|
||||
`${HEADER_EFFECT_MAP[effectColor]}`,
|
||||
)} />
|
||||
<div className='p-1'>
|
||||
<div className={cn(
|
||||
'flex size-6 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-subtle text-text-primary-on-surface shadow-md shadow-shadow-shadow-5',
|
||||
`${IconBackgroundColorMap[effectColor]}`,
|
||||
)}>
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex grow flex-col gap-y-0.5 py-px'>
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<span className='system-sm-medium text-text-secondary'>
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
{
|
||||
description && (
|
||||
<div className='system-xs-regular text-text-tertiary'>
|
||||
{description}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ChunkStructureCard) as typeof ChunkStructureCard
|
||||
@ -0,0 +1,36 @@
|
||||
import { GeneralChunk, ParentChildChunk, QuestionAndAnswer } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { EffectColor, type Option } from './types'
|
||||
import { ChunkingMode } from '@/models/datasets'
|
||||
|
||||
export const useChunkStructureConfig = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const GeneralOption: Option = {
|
||||
icon: <GeneralChunk className='size-4' />,
|
||||
title: 'General',
|
||||
description: t('datasetCreation.stepTwo.generalTip'),
|
||||
effectColor: EffectColor.indigo,
|
||||
}
|
||||
const ParentChildOption: Option = {
|
||||
icon: <ParentChildChunk className='size-4' />,
|
||||
title: 'Parent-Child',
|
||||
description: t('datasetCreation.stepTwo.parentChildTip'),
|
||||
effectColor: EffectColor.blueLight,
|
||||
}
|
||||
const QuestionAnswerOption: Option = {
|
||||
icon: <QuestionAndAnswer className='size-4' />,
|
||||
title: 'Q&A',
|
||||
description: t('datasetCreation.stepTwo.qaTip'),
|
||||
effectColor: EffectColor.green,
|
||||
|
||||
}
|
||||
|
||||
const chunkStructureConfig: Record<ChunkingMode, Option> = {
|
||||
[ChunkingMode.text]: GeneralOption,
|
||||
[ChunkingMode.parentChild]: ParentChildOption,
|
||||
[ChunkingMode.qa]: QuestionAnswerOption,
|
||||
}
|
||||
|
||||
return chunkStructureConfig
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import type { ReactNode } from 'react'
|
||||
|
||||
export enum EffectColor {
|
||||
indigo = 'indigo',
|
||||
blueLight = 'blue-light',
|
||||
green = 'green',
|
||||
none = 'none',
|
||||
}
|
||||
|
||||
export type Option = {
|
||||
icon: ReactNode
|
||||
title: string
|
||||
description?: string
|
||||
effectColor: EffectColor
|
||||
}
|
||||
Loading…
Reference in New Issue