From c5a3bf9b9e315323deb92f3fbe3e0e7a2cc142eb Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Wed, 6 Aug 2025 14:32:28 +0800
Subject: [PATCH] refactor: simplify Markdown rendering in ChunkContent
 component

---
 .../detail/completed/common/chunk-content.tsx | 10 ++---
 .../completed/segment-card/chunk-content.tsx  | 39 +++++++++++--------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
index 2f20549d4a..1b0695557e 100644
--- a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
@@ -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={{
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
index d93eb94cac..c07be98a04 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
@@ -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)