yujunjun/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-01-06 06:51:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify Markdown rendering in ChunkContent component

Browse Source
This commit is contained in:
twwu 2025-08-06 14:32:28 +08:00
parent 95982d37a6
commit c5a3bf9b9e
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
View File

@ -17,7 +17,7 @@ const Textarea: FC<IContentProps> = React.memo(({
return (
<textarea
className={classNames(
'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full overflow-y-auto',
'inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none',
className,
)}
placeholder={placeholder}
@ -31,8 +31,8 @@ const Textarea: FC<IContentProps> = React.memo(({
Textarea.displayName = 'Textarea'
type IAutoResizeTextAreaProps = ComponentProps<'textarea'> & {
containerRef: React.RefObject<HTMLDivElement>
labelRef: React.RefObject<HTMLDivElement>
containerRef: React.RefObject<HTMLDivElement | null>
labelRef: React.RefObject<HTMLDivElement | null>
}
const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({
@ -45,7 +45,7 @@ const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({
...rest
}) => {
const textareaRef = useRef<HTMLTextAreaElement>(null)
const observerRef = useRef<ResizeObserver>()
const observerRef = useRef<ResizeObserver>(null)
const [maxHeight, setMaxHeight] = useState(0)
useEffect(() => {
@ -83,7 +83,7 @@ const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({
<textarea
ref={textareaRef}
className={classNames(
'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full',
'inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none',
className,
)}
style={{

39
web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
View File

@ -26,32 +26,37 @@ const ChunkContent: FC<ChunkContentProps> = ({
<div className={className}>
<div className='flex gap-x-1'>
<div className='w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>Q</div>
<div
<Markdown
className={cn('body-md-regular text-text-secondary',
isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
)}>
{content}
</div>
)}
content={content}
customDisallowedElements={['input']}
/>
</div>
<div className='flex gap-x-1'>
<div className='w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>A</div>
<div className={cn('body-md-regular text-text-secondary',
isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
)}>
{answer}
</div>
<Markdown
className={cn('body-md-regular text-text-secondary',
isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
)}
content={answer}
customDisallowedElements={['input']}
/>
</div>
</div>
)
}
return <Markdown
className={cn('!mt-0.5 !text-text-secondary',
isFullDocMode ? 'line-clamp-3' : isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
className,
)}
content={sign_content || content || ''}
customDisallowedElements={['input']}
/>
return (
<Markdown
className={cn('!mt-0.5 !text-text-secondary',
isFullDocMode ? 'line-clamp-3' : isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
className,
)}
content={sign_content || content || ''}
customDisallowedElements={['input']}
/>
)
}
export default React.memo(ChunkContent)