opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: Enhance components with display names and ref forwarding; fix preview and edit slice style issue

This commit is contained in:
twwu 2024-12-18 14:47:33 +08:00
parent a1abbedc13
commit 8d9a2d6d99
9 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/auto-height-textarea/common.tsx
View File

@ -49,4 +49,6 @@ const AutoHeightTextarea = forwardRef<HTMLTextAreaElement, AutoHeightTextareaPro
},
)
AutoHeightTextarea.displayName = 'AutoHeightTextarea'
export default AutoHeightTextarea

8
web/app/components/base/switch/index.tsx
View File

@ -11,7 +11,7 @@ type SwitchProps = {
className?: string
}
const Switch = ({ onChange, size = 'md', defaultValue = false, disabled = false, className }: SwitchProps) => {
const Switch = React.forwardRef<HTMLButtonElement>(({ onChange, size = 'md', defaultValue = false, disabled = false, className }: SwitchProps, ref) => {
const [enabled, setEnabled] = useState(defaultValue)
useEffect(() => {
setEnabled(defaultValue)
@ -38,6 +38,7 @@ const Switch = ({ onChange, size = 'md', defaultValue = false, disabled = false,
}
return (
<OriginalSwitch
ref={ref}
checked={enabled}
onChange={(checked: boolean) => {
if (disabled)
@ -63,5 +64,8 @@ const Switch = ({ onChange, size = 'md', defaultValue = false, disabled = false,
/>
</OriginalSwitch>
)
}
})
Switch.displayName = 'Switch'
export default React.memo(Switch)

4
web/app/components/datasets/chunk.tsx
View File

@ -29,9 +29,9 @@ export const ChunkContainer: FC<ChunkContainerProps> = (props) => {
const { label, characterCount, children } = props
return <div className='space-y-2'>
<ChunkLabel label={label} characterCount={characterCount} />
<p className='text-text-secondary text-sm tracking-[-0.0005em]'>
<div className='text-text-secondary text-sm tracking-[-0.0005em]'>
{children}
</p>
</div>
</div>
}

1
web/app/components/datasets/create/step-two/index.tsx
View File

@ -1086,6 +1086,7 @@ const StepTwo = ({
label={`C-${indexForLabel}`}
text={child}
tooltip={`Child-chunk-${indexForLabel} · ${child.length} Characters`}
labelInnerClassName='text-[10px] font-semibold align-bottom leading-7'
/>
)
})}

7
web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
View File

@ -137,7 +137,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
{((isFullDocMode && !isLoading) || !collapsed)
? <div className={classNames('flex items-center gap-x-0.5', isFullDocMode ? 'grow mb-6' : '')}>
{isParagraphMode && (
<div className='self-stretch my-0.5'>
<div className='self-stretch'>
<Divider type='vertical' className='w-[2px] mx-[7px] bg-text-accent-secondary' />
</div>
)}
@ -151,8 +151,9 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
text={childChunk.content}
onDelete={() => onDelete?.(childChunk.segment_id, childChunk.id)}
className='line-clamp-3'
labelClassName='font-semibold'
contentClassName={'!leading-6'}
labelInnerClassName='text-[10px] font-semibold align-bottom leading-6'
contentClassName='!leading-6'
showDivider={false}
onClick={(e) => {
e.stopPropagation()
onClickSlice?.(childChunk)

6
web/app/components/datasets/documents/detail/completed/segment-detail.tsx
View File

@ -133,7 +133,11 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
</div>
</div>
</div>
<div className={classNames('flex grow overflow-hidden', fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8 mx-auto' : 'flex-col gap-y-1 py-3 px-4')}>
<div className={classNames(
'flex grow overflow-hidden',
fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8 mx-auto' : 'flex-col gap-y-1 py-3 px-4',
!isEditMode && 'pb-0',
)}>
<div className={classNames('break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
<ChunkContent
docForm={docForm}

24
web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
View File

@ -10,12 +10,22 @@ import ActionButton, { ActionButtonState } from '@/app/components/base/action-bu
type EditSliceProps = SliceProps<{
label: ReactNode
onDelete: () => void
labelClassName?: string
labelInnerClassName?: string
contentClassName?: string
showDivider?: boolean
}>
export const EditSlice: FC<EditSliceProps> = (props) => {
const { label, className, text, onDelete, labelClassName, contentClassName, ...rest } = props
const {
label,
className,
text,
onDelete,
labelInnerClassName,
contentClassName,
showDivider = true,
...rest
} = props
const [delBtnShow, setDelBtnShow] = useState(false)
const [isDelBtnHover, setDelBtnHover] = useState(false)
@ -37,7 +47,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
const isDestructive = delBtnShow && isDelBtnHover
return (
<div>
<span className='inline-block'>
<SliceContainer {...rest}
className={className}
ref={refs.setReference}
@ -46,8 +56,8 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
<SliceLabel
className={classNames(
isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
labelClassName,
)}
labelInnerClassName={labelInnerClassName}
>
{label}
</SliceLabel>
@ -59,11 +69,11 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
>
{text}
</SliceContent>
<SliceDivider
{showDivider && <SliceDivider
className={classNames(
isDestructive && '!bg-state-destructive-hover-alt',
)}
/>
/>}
{delBtnShow && <FloatingFocusManager
context={context}
>
@ -88,6 +98,6 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
</div>
</FloatingFocusManager>}
</SliceContainer>
</div>
</span>
)
}

5
web/app/components/datasets/formatted-text/flavours/preview-slice.tsx
View File

@ -7,10 +7,11 @@ import { SliceContainer, SliceContent, SliceDivider, SliceLabel } from './shared
type PreviewSliceProps = SliceProps<{
label: ReactNode
tooltip: ReactNode
labelInnerClassName?: string
}>
export const PreviewSlice: FC<PreviewSliceProps> = (props) => {
const { label, className, text, tooltip, ...rest } = props
const { label, className, text, tooltip, labelInnerClassName, ...rest } = props
const [tooltipOpen, setTooltipOpen] = useState(false)
const { refs, floatingStyles, context } = useFloating({
open: tooltipOpen,
@ -37,7 +38,7 @@ export const PreviewSlice: FC<PreviewSliceProps> = (props) => {
ref={refs.setReference}
{...getReferenceProps()}
>
<SliceLabel>{label}</SliceLabel>
<SliceLabel labelInnerClassName={labelInnerClassName}>{label}</SliceLabel>
<SliceContent>{text}</SliceContent>
<SliceDivider />
</SliceContainer>

11
web/app/components/datasets/formatted-text/flavours/shared.tsx
View File

@ -14,16 +14,18 @@ export const SliceContainer: FC<SliceContainerProps> = forwardRef((props, ref) =
})
SliceContainer.displayName = 'SliceContainer'
export type SliceLabelProps = ComponentProps<'span'>
export type SliceLabelProps = ComponentProps<'span'> & { labelInnerClassName?: string }
export const SliceLabel: FC<SliceLabelProps> = forwardRef((props, ref) => {
const { className, children, ...rest } = props
const { className, children, labelInnerClassName, ...rest } = props
return <span {...rest} ref={ref} className={classNames(
baseStyle,
'px-1 bg-state-base-hover-alt group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface uppercase text-text-tertiary',
className,
)}>
{children}
<span className={classNames('text-nowrap', labelInnerClassName)}>
{children}
</span>
</span>
})
SliceLabel.displayName = 'SliceLabel'
@ -47,7 +49,8 @@ export type SliceDividerProps = ComponentProps<'span'>
export const SliceDivider: FC<SliceDividerProps> = forwardRef((props, ref) => {
const { className, ...rest } = props
return <span {...rest} ref={ref} className={classNames(
'py-[3px] bg-state-base-active group-hover:bg-state-accent-solid text-sm px-[1px]',
baseStyle,
'bg-state-base-active group-hover:bg-state-accent-solid text-sm px-[1px]',
className,
)}>
{/* use a zero-width space to make the hover area bigger */}