From 3befbc1d68ccd692f438a2d065665c76eb71949f Mon Sep 17 00:00:00 2001
From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Date: Sun, 26 Jan 2025 15:12:05 +0800
Subject: [PATCH] feat: docx image preview (#13057)

---
 web/app/components/base/markdown.tsx          |   4 +-
 .../detail/completed/SegmentCard.tsx          | 259 ------------------
 .../detail/completed/common/chunk-content.tsx |  12 +-
 .../completed/segment-card/chunk-content.tsx  |  56 ++++
 .../index.tsx}                                |  60 ++--
 .../detail/completed/segment-detail.tsx       |   4 +-
 .../skeleton/general-list-skeleton.tsx        |   2 +-
 .../documents/detail/new-segment-modal.tsx    | 156 -----------
 .../components/chunk-detail-modal.tsx         |  10 +-
 .../hit-testing/components/result-item.tsx    |  13 +-
 .../components/datasets/hit-testing/index.tsx |  10 +-
 web/models/datasets.ts                        |   8 +-
 12 files changed, 115 insertions(+), 479 deletions(-)
 delete mode 100644 web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
 create mode 100644 web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
 rename web/app/components/datasets/documents/detail/completed/{segment-card.tsx => segment-card/index.tsx} (85%)
 delete mode 100644 web/app/components/datasets/documents/detail/new-segment-modal.tsx

diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index abb9a546ca..978a34a60a 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -9,7 +9,7 @@ import RemarkGfm from 'remark-gfm'
 import RehypeRaw from 'rehype-raw'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
-import { Component, createContext, memo, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { Component, createContext, memo, useContext, useMemo, useRef, useState } from 'react'
 import cn from '@/utils/classnames'
 import CopyBtn from '@/app/components/base/copy-btn'
 import SVGBtn from '@/app/components/base/svg'
@@ -241,7 +241,7 @@ const Link: Components['a'] = ({ node, ...props }) => {
 export function Markdown(props: { content: string; className?: string }) {
   const latexContent = preprocessLaTeX(props.content)
   return (
-    <div className={cn(props.className, 'markdown-body')}>
+    <div className={cn('markdown-body', props.className)}>
       <ReactMarkdown
         remarkPlugins={[RemarkGfm, RemarkMath, RemarkBreaks]}
         rehypePlugins={[
diff --git a/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx b/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
deleted file mode 100644
index 264d62b68a..0000000000
--- a/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-import type { FC } from 'react'
-import React, { useState } from 'react'
-import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
-import { useTranslation } from 'react-i18next'
-import {
-  RiDeleteBinLine,
-} from '@remixicon/react'
-import { StatusItem } from '../../list'
-import style from '../../style.module.css'
-import s from './style.module.css'
-import { SegmentIndexTag } from './common/segment-index-tag'
-import cn from '@/utils/classnames'
-import Confirm from '@/app/components/base/confirm'
-import Switch from '@/app/components/base/switch'
-import Divider from '@/app/components/base/divider'
-import Indicator from '@/app/components/header/indicator'
-import { formatNumber } from '@/utils/format'
-import type { SegmentDetailModel } from '@/models/datasets'
-
-const ProgressBar: FC<{ percent: number; loading: boolean }> = ({ percent, loading }) => {
-  return (
-    <div className={s.progressWrapper}>
-      <div className={cn(s.progress, loading ? s.progressLoading : '')}>
-        <div
-          className={s.progressInner}
-          style={{ width: `${loading ? 0 : (Math.min(percent, 1) * 100).toFixed(2)}%` }}
-        />
-      </div>
-      <div className={loading ? s.progressTextLoading : s.progressText}>{loading ? null : percent.toFixed(2)}</div>
-    </div>
-  )
-}
-
-type DocumentTitleProps = {
-  extension?: string
-  name?: string
-  iconCls?: string
-  textCls?: string
-  wrapperCls?: string
-}
-
-const DocumentTitle: FC<DocumentTitleProps> = ({ extension, name, iconCls, textCls, wrapperCls }) => {
-  const localExtension = extension?.toLowerCase() || name?.split('.')?.pop()?.toLowerCase()
-  return <div className={cn('flex items-center justify-start flex-1', wrapperCls)}>
-    <div className={cn(s[`${localExtension || 'txt'}Icon`], style.titleIcon, iconCls)}></div>
-    <span className={cn('font-semibold text-lg text-gray-900 ml-1', textCls)}> {name || '--'}</span>
-  </div>
-}
-
-export type UsageScene = 'doc' | 'hitTesting'
-
-type ISegmentCardProps = {
-  loading: boolean
-  detail?: SegmentDetailModel & { document: { name: string } }
-  contentExternal?: string
-  refSource?: {
-    title: string
-    uri: string
-  }
-  isExternal?: boolean
-  score?: number
-  onClick?: () => void
-  onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>
-  onDelete?: (segId: string) => Promise<void>
-  scene?: UsageScene
-  className?: string
-  archived?: boolean
-  embeddingAvailable?: boolean
-}
-
-const SegmentCard: FC<ISegmentCardProps> = ({
-  detail = {},
-  contentExternal,
-  isExternal,
-  refSource,
-  score,
-  onClick,
-  onChangeSwitch,
-  onDelete,
-  loading = true,
-  scene = 'doc',
-  className = '',
-  archived,
-  embeddingAvailable,
-}) => {
-  const { t } = useTranslation()
-  const {
-    id,
-    position,
-    enabled,
-    content,
-    word_count,
-    hit_count,
-    index_node_hash,
-    answer,
-  } = detail as Required<ISegmentCardProps>['detail']
-  const isDocScene = scene === 'doc'
-  const [showModal, setShowModal] = useState(false)
-
-  const renderContent = () => {
-    if (answer) {
-      return (
-        <>
-          <div className='flex mb-2'>
-            <div className='mr-2 text-[13px] font-semibold text-gray-400'>Q</div>
-            <div className='text-[13px]'>{content}</div>
-          </div>
-          <div className='flex'>
-            <div className='mr-2 text-[13px] font-semibold text-gray-400'>A</div>
-            <div className='text-[13px]'>{answer}</div>
-          </div>
-        </>
-      )
-    }
-
-    if (contentExternal)
-      return contentExternal
-
-    return content
-  }
-
-  return (
-    <div
-      className={cn(
-        s.segWrapper,
-        (isDocScene && !enabled) ? 'bg-gray-25' : '',
-        'group',
-        !loading ? 'pb-4 hover:pb-[10px]' : '',
-        className,
-      )}
-      onClick={() => onClick?.()}
-    >
-      <div className={s.segTitleWrapper}>
-        {isDocScene
-          ? <>
-            <SegmentIndexTag positionId={position} className={cn('w-fit group-hover:opacity-100', (isDocScene && !enabled) ? 'opacity-50' : '')} />
-            <div className={s.segStatusWrapper}>
-              {loading
-                ? (
-                  <Indicator
-                    color="gray"
-                    className="bg-gray-200 border-gray-300 shadow-none"
-                  />
-                )
-                : (
-                  <>
-                    <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-gray-500 text-xs" />
-                    {embeddingAvailable && (
-                      <div className="hidden group-hover:inline-flex items-center">
-                        <Divider type="vertical" className="!h-2" />
-                        <div
-                          onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
-                            e.stopPropagation()
-                          }
-                          className="inline-flex items-center"
-                        >
-                          <Switch
-                            size='md'
-                            disabled={archived || detail.status !== 'completed'}
-                            defaultValue={enabled}
-                            onChange={async (val) => {
-                              await onChangeSwitch?.(id, val)
-                            }}
-                          />
-                        </div>
-                      </div>
-                    )}
-                  </>
-                )}
-            </div>
-          </>
-          : (
-            score !== null
-              ? (
-                <div className={s.hitTitleWrapper}>
-                  <div className={cn(s.commonIcon, s.targetIcon, loading ? '!bg-gray-300' : '', '!w-3.5 !h-3.5')} />
-                  <ProgressBar percent={score ?? 0} loading={loading} />
-                </div>
-              )
-              : null
-          )}
-      </div>
-      {loading
-        ? (
-          <div className={cn(s.cardLoadingWrapper, s.cardLoadingIcon)}>
-            <div className={cn(s.cardLoadingBg)} />
-          </div>
-        )
-        : (
-          isDocScene
-            ? <>
-              <div
-                className={cn(
-                  s.segContent,
-                  enabled ? '' : 'opacity-50',
-                  'group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-b',
-                )}
-              >
-                {renderContent()}
-              </div>
-              <div className={cn('group-hover:flex', s.segData)}>
-                <div className="flex items-center mr-6">
-                  <div className={cn(s.commonIcon, s.typeSquareIcon)}></div>
-                  <div className={s.segDataText}>{formatNumber(word_count)}</div>
-                </div>
-                <div className="flex items-center mr-6">
-                  <div className={cn(s.commonIcon, s.targetIcon)} />
-                  <div className={s.segDataText}>{formatNumber(hit_count)}</div>
-                </div>
-                <div className="grow flex items-center">
-                  <div className={cn(s.commonIcon, s.bezierCurveIcon)} />
-                  <div className={s.segDataText}>{index_node_hash}</div>
-                </div>
-                {!archived && embeddingAvailable && (
-                  <div className='shrink-0 w-6 h-6 flex items-center justify-center rounded-md hover:bg-red-100 hover:text-red-600 cursor-pointer group/delete' onClick={(e) => {
-                    e.stopPropagation()
-                    setShowModal(true)
-                  }}>
-                    <RiDeleteBinLine className='w-[14px] h-[14px] text-gray-500 group-hover/delete:text-red-600' />
-                  </div>
-                )}
-              </div>
-            </>
-            : <>
-              <div className="h-[140px] overflow-hidden text-ellipsis text-sm font-normal text-gray-800">
-                {renderContent()}
-              </div>
-              <div className={cn('w-full bg-gray-50 group-hover:bg-white')}>
-                <Divider />
-                <div className="relative flex items-center w-full pb-1">
-                  <DocumentTitle
-                    name={detail?.document?.name || refSource?.title || ''}
-                    extension={(detail?.document?.name || refSource?.title || '').split('.').pop() || 'txt'}
-                    wrapperCls='w-full'
-                    iconCls="!h-4 !w-4 !bg-contain"
-                    textCls="text-xs text-gray-700 !font-normal overflow-hidden whitespace-nowrap text-ellipsis"
-                  />
-                  <div className={cn(s.chartLinkText, 'group-hover:inline-flex')}>
-                    {isExternal ? t('datasetHitTesting.viewDetail') : t('datasetHitTesting.viewChart')}
-                    <ArrowUpRightIcon className="w-3 h-3 ml-1 stroke-current stroke-2" />
-                  </div>
-                </div>
-              </div>
-            </>
-        )}
-      {showModal
-        && <Confirm
-          isShow={showModal}
-          title={t('datasetDocuments.segment.delete')}
-          confirmText={t('common.operation.sure')}
-          onConfirm={async () => { await onDelete?.(id) }}
-          onCancel={() => setShowModal(false)}
-        />
-      }
-    </div>
-  )
-}
-
-export default SegmentCard
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 e6403fa12f..af2989b188 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
@@ -3,6 +3,7 @@ import type { ComponentProps, FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChunkingMode } from '@/models/datasets'
 import classNames from '@/utils/classnames'
+import { Markdown } from '@/app/components/base/markdown'
 
 type IContentProps = ComponentProps<'textarea'>
 
@@ -52,7 +53,7 @@ const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({
     if (!textarea)
       return
     textarea.style.height = 'auto'
-    const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
+    const lineHeight = Number.parseInt(getComputedStyle(textarea).lineHeight)
     const textareaHeight = Math.max(textarea.scrollHeight, lineHeight)
     textarea.style.height = `${textareaHeight}px`
   }, [value])
@@ -175,6 +176,15 @@ const ChunkContent: FC<IChunkContentProps> = ({
     />
   }
 
+  if (!isEditMode) {
+    return (
+      <Markdown
+        className='h-full w-full !text-text-secondary'
+        content={question}
+      />
+    )
+  }
+
   return (
     <Textarea
       className='h-full w-full pb-6 body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]'
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
new file mode 100644
index 0000000000..3185110d5f
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
@@ -0,0 +1,56 @@
+import React, { type FC } from 'react'
+import cn from '@/utils/classnames'
+import { useSegmentListContext } from '..'
+import { Markdown } from '@/app/components/base/markdown'
+
+type ChunkContentProps = {
+  detail: {
+    answer?: string
+    content: string
+    sign_content: string
+  }
+  isFullDocMode: boolean
+  className?: string
+}
+
+const ChunkContent: FC<ChunkContentProps> = ({
+  detail,
+  isFullDocMode,
+  className,
+}) => {
+  const { answer, content, sign_content } = detail
+  const isCollapsed = useSegmentListContext(s => s.isCollapsed)
+
+  if (answer) {
+    return (
+      <div className={className}>
+        <div className='flex gap-x-1'>
+          <div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>Q</div>
+          <div
+            className={cn('text-text-secondary body-md-regular',
+              isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
+            )}>
+            {content}
+          </div>
+        </div>
+        <div className='flex gap-x-1'>
+          <div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>A</div>
+          <div className={cn('text-text-secondary body-md-regular',
+            isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
+          )}>
+            {answer}
+          </div>
+        </div>
+      </div>
+    )
+  }
+  return <Markdown
+    className={cn('!text-text-secondary !mt-0.5',
+      isFullDocMode ? 'line-clamp-3' : isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
+      className,
+    )}
+    content={sign_content || content}
+  />
+}
+
+export default React.memo(ChunkContent)
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
similarity index 85%
rename from web/app/components/datasets/documents/detail/completed/segment-card.tsx
rename to web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index 1cadd0cf96..2d580469e5 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -1,14 +1,13 @@
 import React, { type FC, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
-import { StatusItem } from '../../list'
-import { useDocumentContext } from '../index'
-import ChildSegmentList from './child-segment-list'
-import Tag from './common/tag'
-import Dot from './common/dot'
-import { SegmentIndexTag } from './common/segment-index-tag'
-import ParentChunkCardSkeleton from './skeleton/parent-chunk-card-skeleton'
-import { useSegmentListContext } from './index'
+import { StatusItem } from '../../../list'
+import { useDocumentContext } from '../../index'
+import ChildSegmentList from '../child-segment-list'
+import Tag from '../common/tag'
+import Dot from '../common/dot'
+import { SegmentIndexTag } from '../common/segment-index-tag'
+import ParentChunkCardSkeleton from '../skeleton/parent-chunk-card-skeleton'
 import type { ChildChunkDetail, SegmentDetailModel } from '@/models/datasets'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
@@ -18,6 +17,7 @@ import cn from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import { isAfter } from '@/utils/time'
 import Tooltip from '@/app/components/base/tooltip'
+import ChunkContent from './chunk-content'
 
 type ISegmentCardProps = {
   loading: boolean
@@ -59,6 +59,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
     position,
     enabled,
     content,
+    sign_content,
     word_count,
     hit_count,
     answer,
@@ -68,7 +69,6 @@ const SegmentCard: FC<ISegmentCardProps> = ({
     updated_at,
   } = detail as Required<ISegmentCardProps>['detail']
   const [showModal, setShowModal] = useState(false)
-  const isCollapsed = useSegmentListContext(s => s.isCollapsed)
   const mode = useDocumentContext(s => s.mode)
   const parentMode = useDocumentContext(s => s.parentMode)
 
@@ -103,33 +103,6 @@ const SegmentCard: FC<ISegmentCardProps> = ({
       onClick?.()
   }, [mode, parentMode, onClick])
 
-  const renderContent = () => {
-    if (answer) {
-      return (
-        <>
-          <div className='flex gap-x-1'>
-            <div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>Q</div>
-            <div
-              className={cn('text-text-secondary body-md-regular',
-                isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
-              )}>
-              {content}
-            </div>
-          </div>
-          <div className='flex gap-x-1'>
-            <div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>A</div>
-            <div className={cn('text-text-secondary body-md-regular',
-              isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
-            )}>
-              {answer}
-            </div>
-          </div>
-        </>
-      )
-    }
-    return content
-  }
-
   const wordCountText = useMemo(() => {
     const total = formatNumber(word_count)
     return `${total} ${t('datasetDocuments.segment.characters', { count: word_count })}`
@@ -234,12 +207,15 @@ const SegmentCard: FC<ISegmentCardProps> = ({
             : null}
         </>
       </div>
-      <div className={cn('text-text-secondary body-md-regular -tracking-[0.07px] mt-0.5',
-        contentOpacity,
-        isFullDocMode ? 'line-clamp-3' : isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
-      )}>
-        {renderContent()}
-      </div>
+      <ChunkContent
+        detail={{
+          answer,
+          content,
+          sign_content,
+        }}
+        isFullDocMode={isFullDocMode}
+        className={contentOpacity}
+      />
       {isGeneralMode && <div className={cn('flex flex-wrap items-center gap-2 py-1.5', contentOpacity)}>
         {keywords?.map(keyword => <Tag key={keyword} text={keyword} />)}
       </div>}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
index 307a5cfb80..8891ddee85 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -142,9 +142,9 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
       <div className={classNames(
         'flex grow',
         fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8' : 'flex-col gap-y-1 py-3 px-4',
-        !isEditMode && 'pb-0',
+        !isEditMode && 'pb-0 overflow-hidden',
       )}>
-        <div className={classNames('break-all overflow-hidden whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
+        <div className={classNames(isEditMode ? 'break-all whitespace-pre-line overflow-hidden' : 'overflow-y-auto', fullScreen ? 'w-1/2' : 'grow')}>
           <ChunkContent
             docForm={docForm}
             question={question}
diff --git a/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx b/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
index 8946e11613..c4593083ce 100644
--- a/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
+++ b/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
@@ -8,7 +8,7 @@ import {
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 
-const CardSkelton = React.memo(() => {
+export const CardSkelton = React.memo(() => {
   return (
     <SkeletonContainer className='p-1 pb-2 gap-y-0'>
       <SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
diff --git a/web/app/components/datasets/documents/detail/new-segment-modal.tsx b/web/app/components/datasets/documents/detail/new-segment-modal.tsx
deleted file mode 100644
index 4c51779f9c..0000000000
--- a/web/app/components/datasets/documents/detail/new-segment-modal.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { memo, useState } from 'react'
-import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import { useParams } from 'next/navigation'
-import { RiCloseLine } from '@remixicon/react'
-import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
-import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
-import { Hash02 } from '@/app/components/base/icons/src/vender/line/general'
-import { ToastContext } from '@/app/components/base/toast'
-import type { SegmentUpdater } from '@/models/datasets'
-import { addSegment } from '@/service/datasets'
-import TagInput from '@/app/components/base/tag-input'
-
-type NewSegmentModalProps = {
-  isShow: boolean
-  onCancel: () => void
-  docForm: string
-  onSave: () => void
-}
-
-const NewSegmentModal: FC<NewSegmentModalProps> = ({
-  isShow,
-  onCancel,
-  docForm,
-  onSave,
-}) => {
-  const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
-  const [question, setQuestion] = useState('')
-  const [answer, setAnswer] = useState('')
-  const { datasetId, documentId } = useParams()
-  const [keywords, setKeywords] = useState<string[]>([])
-  const [loading, setLoading] = useState(false)
-
-  const handleCancel = () => {
-    setQuestion('')
-    setAnswer('')
-    onCancel()
-    setKeywords([])
-  }
-
-  const handleSave = async () => {
-    const params: SegmentUpdater = { content: '' }
-    if (docForm === 'qa_model') {
-      if (!question.trim())
-        return notify({ type: 'error', message: t('datasetDocuments.segment.questionEmpty') })
-      if (!answer.trim())
-        return notify({ type: 'error', message: t('datasetDocuments.segment.answerEmpty') })
-
-      params.content = question
-      params.answer = answer
-    }
-    else {
-      if (!question.trim())
-        return notify({ type: 'error', message: t('datasetDocuments.segment.contentEmpty') })
-
-      params.content = question
-    }
-
-    if (keywords?.length)
-      params.keywords = keywords
-
-    setLoading(true)
-    try {
-      await addSegment({ datasetId, documentId, body: params })
-      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-      handleCancel()
-      onSave()
-    }
-    finally {
-      setLoading(false)
-    }
-  }
-
-  const renderContent = () => {
-    if (docForm === 'qa_model') {
-      return (
-        <>
-          <div className='mb-1 text-xs font-medium text-gray-500'>QUESTION</div>
-          <AutoHeightTextarea
-            outerClassName='mb-4'
-            className='leading-6 text-md text-gray-800'
-            value={question}
-            placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
-            onChange={e => setQuestion(e.target.value)}
-            autoFocus
-          />
-          <div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
-          <AutoHeightTextarea
-            outerClassName='mb-4'
-            className='leading-6 text-md text-gray-800'
-            value={answer}
-            placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
-            onChange={e => setAnswer(e.target.value)}
-          />
-        </>
-      )
-    }
-
-    return (
-      <AutoHeightTextarea
-        className='leading-6 text-md text-gray-800'
-        value={question}
-        placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
-        onChange={e => setQuestion(e.target.value)}
-        autoFocus
-      />
-    )
-  }
-
-  return (
-    <Modal isShow={isShow} onClose={() => { }} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'>
-      <div className={'flex flex-col relative'}>
-        <div className='absolute right-0 -top-0.5 flex items-center h-6'>
-          <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={handleCancel}>
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
-          </div>
-        </div>
-        <div className='mb-[14px]'>
-          <span className='inline-flex items-center px-1.5 h-5 border border-gray-200 rounded-md'>
-            <Hash02 className='mr-0.5 w-3 h-3 text-gray-400' />
-            <span className='text-[11px] font-medium text-gray-500 italic'>
-              {
-                docForm === 'qa_model'
-                  ? t('datasetDocuments.segment.newQaSegment')
-                  : t('datasetDocuments.segment.newTextSegment')
-              }
-            </span>
-          </span>
-        </div>
-        <div className='mb-4 py-1.5 h-[420px] overflow-auto'>{renderContent()}</div>
-        <div className='text-xs font-medium text-gray-500'>{t('datasetDocuments.segment.keywords')}</div>
-        <div className='mb-8'>
-          <TagInput items={keywords} onChange={newKeywords => setKeywords(newKeywords)} />
-        </div>
-        <div className='flex justify-end space-x-2'>
-          <Button
-            onClick={handleCancel}>
-            {t('common.operation.cancel')}
-          </Button>
-          <Button
-            variant='primary'
-            onClick={handleSave}
-            disabled={loading}
-          >
-            {t('common.operation.save')}
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  )
-}
-
-export default memo(NewSegmentModal)
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index fe2f2b8f36..463a32e4d0 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -12,6 +12,7 @@ import FileIcon from '@/app/components/base/file-uploader/file-type-icon'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 import cn from '@/utils/classnames'
 import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
+import { Markdown } from '@/app/components/base/markdown'
 
 const i18nPrefix = 'datasetHitTesting'
 
@@ -26,7 +27,7 @@ const ChunkDetailModal: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const { segment, score, child_chunks } = payload
-  const { position, content, keywords, document } = segment
+  const { position, content, sign_content, keywords, document } = segment
   const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0)
   const extension = document.name.split('.').slice(-1)[0] as FileAppearanceTypeEnum
   const heighClassName = isParentChildRetrieval ? 'h-[min(627px,_80vh)] overflow-y-auto' : 'h-[min(539px,_80vh)] overflow-y-auto'
@@ -56,9 +57,10 @@ const ChunkDetailModal: FC<Props> = ({
             </div>
             <Score value={score} />
           </div>
-          <div className={cn('mt-2 body-md-regular text-text-secondary break-all', heighClassName)}>
-            {content}
-          </div>
+          <Markdown
+            className={cn('!mt-2 !text-text-secondary', heighClassName)}
+            content={sign_content || content}
+          />
           {!isParentChildRetrieval && keywords && keywords.length > 0 && (
             <div className='mt-6'>
               <div className='font-medium text-xs text-text-tertiary uppercase'>{t(`${i18nPrefix}.keyword`)}</div>
diff --git a/web/app/components/datasets/hit-testing/components/result-item.tsx b/web/app/components/datasets/hit-testing/components/result-item.tsx
index 16bc40f67c..12cbceff9c 100644
--- a/web/app/components/datasets/hit-testing/components/result-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item.tsx
@@ -13,6 +13,7 @@ import cn from '@/utils/classnames'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
 import { extensionToFileType } from '@/app/components/datasets/hit-testing/utils/extension-to-file-type'
+import { Markdown } from '@/app/components/base/markdown'
 
 const i18nPrefix = 'datasetHitTesting'
 type Props = {
@@ -25,7 +26,7 @@ const ResultItem: FC<Props> = ({
   const { t } = useTranslation()
   const { segment, score, child_chunks } = payload
   const data = segment
-  const { position, word_count, content, keywords, document } = data
+  const { position, word_count, content, sign_content, keywords, document } = data
   const isParentChildRetrieval = !!(child_chunks && child_chunks.length > 0)
   const extension = document.name.split('.').slice(-1)[0] as FileAppearanceTypeEnum
   const fileType = extensionToFileType(extension)
@@ -46,10 +47,16 @@ const ResultItem: FC<Props> = ({
 
       {/* Main */}
       <div className='mt-1 px-3'>
-        <div className='line-clamp-2 body-md-regular break-all'>{content}</div>
+        <Markdown className='line-clamp-2' content={sign_content || content} />
         {isParentChildRetrieval && (
           <div className='mt-1'>
-            <div className={cn('inline-flex items-center h-6 space-x-0.5 text-text-secondary select-none rounded-lg cursor-pointer', isFold && 'pl-1 bg-[linear-gradient(90deg,_rgba(200,_206,_218,_0.20)_0%,_rgba(200,_206,_218,_0.04)_100%)]')} onClick={toggleFold}>
+            <div
+              className={cn('inline-flex items-center h-6 space-x-0.5 text-text-secondary select-none rounded-lg cursor-pointer', isFold && 'pl-1 bg-[linear-gradient(90deg,_rgba(200,_206,_218,_0.20)_0%,_rgba(200,_206,_218,_0.04)_100%)]')}
+              onClick={(e) => {
+                e.stopPropagation()
+                toggleFold()
+              }}
+            >
               <Icon className={cn('w-4 h-4', isFold && 'opacity-50')} />
               <div className='text-xs font-semibold uppercase'>{t(`${i18nPrefix}.hitChunks`, { num: child_chunks.length })}</div>
             </div>
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index 33f2acc65b..983b700b5a 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -7,7 +7,6 @@ import { omit } from 'lodash-es'
 import { useBoolean } from 'ahooks'
 import { useContext } from 'use-context-selector'
 import { RiApps2Line, RiFocus2Line } from '@remixicon/react'
-import SegmentCard from '../documents/detail/completed/SegmentCard'
 import Textarea from './textarea'
 import s from './style.module.css'
 import ModifyRetrievalModal from './modify-retrieval-modal'
@@ -25,6 +24,7 @@ import type { RetrievalConfig } from '@/types/app'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
 import docStyle from '@/app/components/datasets/documents/detail/completed/style.module.css'
+import { CardSkelton } from '../documents/detail/completed/skeleton/general-list-skeleton'
 
 const limit = 10
 
@@ -180,11 +180,9 @@ const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
         <div className='flex flex-col pt-3'>
           {/* {renderHitResults(generalResultData)} */}
           {submitLoading
-            ? <SegmentCard
-              loading={true}
-              scene='hitTesting'
-              className='h-[216px]'
-            />
+            ? <div className='h-full flex flex-col py-3 px-4 rounded-t-2xl bg-background-body'>
+              <CardSkelton />
+            </div>
             : (
               (() => {
                 if (!hitResult?.records.length && !externalHitResult?.records.length)
diff --git a/web/models/datasets.ts b/web/models/datasets.ts
index 673fb5fb15..073312fae1 100644
--- a/web/models/datasets.ts
+++ b/web/models/datasets.ts
@@ -12,9 +12,9 @@ export enum DataSourceType {
 export type DatasetPermission = 'only_me' | 'all_team_members' | 'partial_members'
 
 export enum ChunkingMode {
-  'text' = 'text_model', // General text
-  'qa' = 'qa_model', // General QA
-  'parentChild' = 'hierarchical_model', // Parent-Child
+  text = 'text_model', // General text
+  qa = 'qa_model', // General QA
+  parentChild = 'hierarchical_model', // Parent-Child
 }
 
 export type DataSet = {
@@ -452,6 +452,7 @@ export type SegmentDetailModel = {
   position: number
   document_id: string
   content: string
+  sign_content: string
   word_count: number
   tokens: number
   keywords: string[]
@@ -520,6 +521,7 @@ export type Segment = {
   id: string
   document: Document
   content: string
+  sign_content: string
   position: number
   word_count: number
   tokens: number