mirror of https://github.com/langgenius/dify.git
feat: enhance child segment list and segment card UI with improved styling and new props for EditSlice
This commit is contained in:
twwu
parent
9006a744b9
commit
f7c38db575
|
|
@ -3,6 +3,7 @@ import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import { EditSlice } from '../../../formatted-text/flavours/edit-slice'
|
||||
import { useDocumentContext } from '../index'
|
||||
import { FormattedText } from '../../../formatted-text/formatted'
|
||||
import Empty from './common/empty'
|
||||
import FullDocListSkeleton from './skeleton/full-doc-list-skeleton'
|
||||
import type { ChildChunkDetail } from '@/models/datasets'
|
||||
|
|
@ -135,9 +136,13 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
|
|||
{isLoading ? <FullDocListSkeleton /> : null}
|
||||
{((isFullDocMode && !isLoading) || !collapsed)
|
||||
? <div className={classNames('flex items-center gap-x-0.5', isFullDocMode ? 'grow' : '')}>
|
||||
{isParagraphMode && <Divider type='vertical' className='h-auto w-[2px] mx-[7px] bg-text-accent-secondary' />}
|
||||
{isParagraphMode && (
|
||||
<div className='self-stretch my-0.5'>
|
||||
<Divider type='vertical' className='w-[2px] mx-[7px] bg-text-accent-secondary' />
|
||||
</div>
|
||||
)}
|
||||
{childChunks.length > 0
|
||||
? <div className={classNames('w-full !leading-5 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
|
||||
? <FormattedText className={classNames('w-full !leading-6 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
|
||||
{childChunks.map((childChunk) => {
|
||||
const edited = childChunk.updated_at !== childChunk.created_at
|
||||
return <EditSlice
|
||||
|
|
@ -146,13 +151,15 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
|
|||
text={childChunk.content}
|
||||
onDelete={() => onDelete?.(childChunk.segment_id, childChunk.id)}
|
||||
className='line-clamp-3'
|
||||
labelClassName='font-semibold'
|
||||
contentClassName={'!leading-6'}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onClickSlice?.(childChunk)
|
||||
}}
|
||||
/>
|
||||
})}
|
||||
</div>
|
||||
</FormattedText>
|
||||
: inputValue !== ''
|
||||
? <div className='h-full w-full'>
|
||||
<Empty onClearFilter={onClearFilter!} />
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { SegmentIndexTag } from './common/segment-index-tag'
|
|||
import ParentChunkCardSkeleton from './skeleton/parent-chunk-card-skeleton'
|
||||
import { useSegmentListContext } from './index'
|
||||
import type { ChildChunkDetail, SegmentDetailModel } from '@/models/datasets'
|
||||
import Indicator from '@/app/components/header/indicator'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import { formatNumber } from '@/utils/format'
|
||||
|
|
@ -157,66 +156,58 @@ const SegmentCard: FC<ISegmentCardProps> = ({
|
|||
</div>
|
||||
{!isFullDocMode
|
||||
? <div className='flex items-center'>
|
||||
{loading
|
||||
? (
|
||||
<Indicator color="gray" />
|
||||
)
|
||||
: (
|
||||
<>
|
||||
<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
|
||||
<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]">
|
||||
{!archived && (
|
||||
<>
|
||||
<Tooltip
|
||||
popupContent='Edit'
|
||||
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'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onClickEdit?.()
|
||||
}}>
|
||||
<RiEditLine className='w-4 h-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'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setShowModal(true)
|
||||
}
|
||||
}>
|
||||
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary group-hover/delete:text-text-destructive' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" className="h-3.5 bg-divider-regular" />
|
||||
</>
|
||||
)}
|
||||
{!archived && (
|
||||
<>
|
||||
<Tooltip
|
||||
popupContent='Edit'
|
||||
popupClassName='text-text-secondary system-xs-medium'
|
||||
>
|
||||
<div
|
||||
onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
|
||||
className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-base-hover cursor-pointer'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}
|
||||
className="flex items-center"
|
||||
>
|
||||
<Switch
|
||||
size='md'
|
||||
disabled={archived || detail.status !== 'completed'}
|
||||
defaultValue={enabled}
|
||||
onChange={async (val) => {
|
||||
await onChangeSwitch?.(val, id)
|
||||
}}
|
||||
/>
|
||||
onClickEdit?.()
|
||||
}}>
|
||||
<RiEditLine className='w-4 h-4 text-text-tertiary' />
|
||||
</div>
|
||||
</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'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setShowModal(true)
|
||||
}
|
||||
}>
|
||||
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary group-hover/delete:text-text-destructive' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Divider type="vertical" className="h-3.5 bg-divider-regular" />
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
|
||||
e.stopPropagation()
|
||||
}
|
||||
className="flex items-center"
|
||||
>
|
||||
<Switch
|
||||
size='md'
|
||||
disabled={archived || detail.status !== 'completed'}
|
||||
defaultValue={enabled}
|
||||
onChange={async (val) => {
|
||||
await onChangeSwitch?.(val, id)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
: null}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@ import ActionButton, { ActionButtonState } from '@/app/components/base/action-bu
|
|||
type EditSliceProps = SliceProps<{
|
||||
label: ReactNode
|
||||
onDelete: () => void
|
||||
labelClassName?: string
|
||||
contentClassName?: string
|
||||
}>
|
||||
|
||||
export const EditSlice: FC<EditSliceProps> = (props) => {
|
||||
const { label, className, text, onDelete, ...rest } = props
|
||||
const { label, className, text, onDelete, labelClassName, contentClassName, ...rest } = props
|
||||
const [delBtnShow, setDelBtnShow] = useState(false)
|
||||
const [isDelBtnHover, setDelBtnHover] = useState(false)
|
||||
|
||||
|
|
@ -44,12 +46,16 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
|
|||
<SliceLabel
|
||||
className={classNames(
|
||||
isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
|
||||
labelClassName,
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</SliceLabel>
|
||||
<SliceContent
|
||||
className={classNames(isDestructive && '!bg-state-destructive-hover-alt')}
|
||||
className={classNames(
|
||||
isDestructive && '!bg-state-destructive-hover-alt',
|
||||
contentClassName,
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</SliceContent>
|
||||
|
|
|
|||
Loading…
Reference in New Issue