From c1d1960215fd45d55bbb1dc15dc52b623a3ebd2d Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 12 Dec 2024 14:45:00 +0800
Subject: [PATCH] feat: enhance time formatting and add child segment detail
 component

---
 .../detail/completed/child-segment-detail.tsx | 118 ++++++++++++++++++
 .../completed/common/action-buttons.tsx       |   4 +-
 .../documents/detail/completed/common/dot.tsx |   2 +-
 .../documents/detail/completed/index.tsx      |  83 +++++++++++-
 .../detail/completed/new-child-segment.tsx    |   5 +-
 .../detail/completed/segment-detail.tsx       |   3 +-
 .../datasets/documents/detail/new-segment.tsx |   3 +-
 web/utils/time.ts                             |   7 ++
 8 files changed, 215 insertions(+), 10 deletions(-)
 create mode 100644 web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx

diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
new file mode 100644
index 0000000000..a305c48feb
--- /dev/null
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
@@ -0,0 +1,118 @@
+import React, { type FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiCloseLine,
+  RiExpandDiagonalLine,
+} from '@remixicon/react'
+import ActionButtons from './common/action-buttons'
+import ChunkContent from './common/chunk-content'
+import Dot from './common/dot'
+import { SegmentIndexTag } from './common/segment-index-tag'
+import { useSegmentListContext } from './index'
+import type { ChildChunkDetail } from '@/models/datasets'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { formatNumber } from '@/utils/format'
+import classNames from '@/utils/classnames'
+import Divider from '@/app/components/base/divider'
+import { formatTime } from '@/utils/time'
+
+type IChildSegmentDetailProps = {
+  chunkId: string
+  childChunkInfo?: Partial<ChildChunkDetail> & { id: string }
+  onUpdate: (segmentId: string, childChunkId: string, content: string) => void
+  onCancel: () => void
+  docForm: string
+}
+
+/**
+ * Show all the contents of the segment
+ */
+const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
+  chunkId,
+  childChunkInfo,
+  onUpdate,
+  onCancel,
+  docForm,
+}) => {
+  const { t } = useTranslation()
+  const [content, setContent] = useState(childChunkInfo?.content || '')
+  const { eventEmitter } = useEventEmitterContextContext()
+  const [loading, setLoading] = useState(false)
+  const [fullScreen, toggleFullScreen] = useSegmentListContext(s => [s.fullScreen, s.toggleFullScreen])
+
+  eventEmitter?.useSubscription((v) => {
+    if (v === 'update-child-segment')
+      setLoading(true)
+    if (v === 'update-child-segment-done')
+      setLoading(false)
+  })
+
+  const handleCancel = () => {
+    onCancel()
+    setContent(childChunkInfo?.content || '')
+  }
+
+  const handleSave = () => {
+    onUpdate(chunkId, childChunkInfo?.id || '', content)
+  }
+
+  return (
+    <div className={'flex flex-col h-full'}>
+      <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
+        <div className='flex flex-col'>
+          <div className='text-text-primary system-xl-semibold'>{'Edit Child Chunk'}</div>
+          <div className='flex items-center gap-x-2'>
+            <SegmentIndexTag positionId={childChunkInfo?.position || ''} labelPrefix='Child-Chunk' />
+            <Dot />
+            <span className='text-text-tertiary system-xs-medium'>{formatNumber(content.length)} {t('datasetDocuments.segment.characters')}</span>
+            <Dot />
+            <span className='text-text-tertiary system-xs-medium'>
+              {`Edited at ${formatTime({ date: (childChunkInfo?.created_at ?? 0) * 1000, dateFormat: 'MM/DD/YYYY h:mm:ss' })}`}
+            </span>
+          </div>
+        </div>
+        <div className='flex items-center'>
+          {fullScreen && (
+            <>
+              <ActionButtons
+                handleCancel={handleCancel}
+                handleSave={handleSave}
+                loading={loading}
+                isChildChunk={true}
+              />
+              <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
+            </>
+          )}
+          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
+            <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
+          </div>
+          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={onCancel}>
+            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          </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('break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
+          <ChunkContent
+            docForm={docForm}
+            question={content}
+            onQuestionChange={content => setContent(content)}
+            isEditMode={true}
+          />
+        </div>
+      </div>
+      {!fullScreen && (
+        <div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
+          <ActionButtons
+            handleCancel={handleCancel}
+            handleSave={handleSave}
+            loading={loading}
+            isChildChunk={true}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(ChildSegmentDetail)
diff --git a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
index 04c829dfda..5ade8267c2 100644
--- a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
@@ -11,6 +11,7 @@ type IActionButtonsProps = {
   loading: boolean
   actionType?: 'edit' | 'add'
   handleRegeneration?: () => void
+  isChildChunk?: boolean
 }
 
 const ActionButtons: FC<IActionButtonsProps> = ({
@@ -19,6 +20,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
   loading,
   actionType = 'edit',
   handleRegeneration,
+  isChildChunk = false,
 }) => {
   const { t } = useTranslation()
   const [mode, parentMode] = useDocumentContext(s => [s.mode, s.parentMode])
@@ -50,7 +52,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
           <span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
         </div>
       </Button>
-      {(isParentChildParagraphMode && actionType === 'edit')
+      {(isParentChildParagraphMode && actionType === 'edit' && !isChildChunk)
         ? <Button
           onClick={handleRegeneration}
           disabled={loading}
diff --git a/web/app/components/datasets/documents/detail/completed/common/dot.tsx b/web/app/components/datasets/documents/detail/completed/common/dot.tsx
index c791b93e2d..aa6a9f13b7 100644
--- a/web/app/components/datasets/documents/detail/completed/common/dot.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/dot.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const Dot = () => {
   return (
-    <div className='text-text-quaternary text-xs font-medium'>·</div>
+    <div className='text-text-quaternary system-xs-medium'>·</div>
   )
 }
 
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index 002decbd38..66ba52e6a0 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -15,6 +15,7 @@ import SegmentCard from './segment-card'
 import ChildSegmentList from './child-segment-list'
 import NewChildSegment from './new-child-segment'
 import FullScreenDrawer from './common/full-screen-drawer'
+import ChildSegmentDetail from './child-segment-detail'
 import Pagination from '@/app/components/base/pagination'
 import cn from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
@@ -37,6 +38,7 @@ import {
   useEnableSegment,
   useSegmentList,
   useSegmentListKey,
+  useUpdateChildSegment,
 } from '@/service/knowledge/use-segment'
 import { useInvalid } from '@/service/use-base'
 
@@ -48,7 +50,11 @@ type SegmentListContextValue = {
   toggleFullScreen: (fullscreen?: boolean) => void
 }
 
-const SegmentListContext = createContext<SegmentListContextValue>({} as SegmentListContextValue)
+const SegmentListContext = createContext<SegmentListContextValue>({
+  isCollapsed: true,
+  fullScreen: false,
+  toggleFullScreen: () => {},
+})
 
 export const useSegmentListContext = (selector: (value: SegmentListContextValue) => any) => {
   return useContextSelector(SegmentListContext, selector)
@@ -181,10 +187,10 @@ const Completed: FC<ICompletedProps> = ({
     setCurrSegment({ segInfo: detail, showModal: true, isEditMode })
   }
 
-  const onCloseDrawer = () => {
+  const onCloseSegmentDetail = useCallback(() => {
     setCurrSegment({ ...currSegment, showModal: false })
     setFullScreen(false)
-  }
+  }, [currSegment])
 
   const { mutateAsync: enableSegment } = useEnableSegment()
   const { mutateAsync: disableSegment } = useDisableSegment()
@@ -258,7 +264,7 @@ const Completed: FC<ICompletedProps> = ({
       const res = await updateSegment({ datasetId, documentId, segmentId, body: params })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
       if (!needRegenerate)
-        onCloseDrawer()
+        onCloseSegmentDetail()
       for (const seg of segments) {
         if (seg.id === segmentId) {
           seg.answer = res.data.answer
@@ -378,8 +384,62 @@ const Completed: FC<ICompletedProps> = ({
 
   const onClickSlice = useCallback((detail: ChildChunkDetail) => {
     setCurrChildChunk({ childChunkInfo: detail, showModal: true })
+    setCurrChunkId(detail.segment_id)
   }, [])
 
+  const onCloseChildSegmentDetail = useCallback(() => {
+    setCurrChildChunk({ ...currChildChunk, showModal: false })
+    setFullScreen(false)
+  }, [currChildChunk])
+
+  const { mutateAsync: updateChildSegment } = useUpdateChildSegment()
+
+  const handleUpdateChildChunk = async (
+    segmentId: string,
+    childChunkId: string,
+    content: string,
+  ) => {
+    const params: SegmentUpdater = { content: '' }
+    if (!content.trim())
+      return notify({ type: 'error', message: t('datasetDocuments.segment.contentEmpty') })
+
+    params.content = content
+
+    try {
+      eventEmitter?.emit('update-child-segment')
+      const res = await updateChildSegment({ datasetId, documentId, segmentId, childChunkId, body: params })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      onCloseChildSegmentDetail()
+      if (parentMode === 'paragraph') {
+        for (const seg of segments) {
+          if (seg.id === segmentId) {
+            for (const childSeg of seg.child_chunks!) {
+              if (childSeg.id === childChunkId) {
+                childSeg.content = res.data.content
+                childSeg.type = res.data.type
+                childSeg.word_count = res.data.word_count
+              }
+            }
+          }
+        }
+        setSegments([...segments])
+      }
+      else {
+        for (const childSeg of childSegments) {
+          if (childSeg.id === childChunkId) {
+            childSeg.content = res.data.content
+            childSeg.type = res.data.type
+            childSeg.word_count = res.data.word_count
+          }
+        }
+        setChildSegments([...childSegments])
+      }
+    }
+    finally {
+      eventEmitter?.emit('update-child-segment-done')
+    }
+  }
+
   return (
     <SegmentListContext.Provider value={{
       isCollapsed,
@@ -469,7 +529,7 @@ const Completed: FC<ICompletedProps> = ({
           docForm={docForm}
           isEditMode={currSegment.isEditMode}
           onUpdate={handleUpdateSegment}
-          onCancel={onCloseDrawer}
+          onCancel={onCloseSegmentDetail}
         />
       </FullScreenDrawer>
       {/* Create New Segment */}
@@ -487,6 +547,19 @@ const Completed: FC<ICompletedProps> = ({
           viewNewlyAddedChunk={viewNewlyAddedChunk}
         />
       </FullScreenDrawer>
+      {/* Edit or view child segment detail */}
+      <FullScreenDrawer
+        isOpen={currChildChunk.showModal}
+        fullScreen={fullScreen}
+      >
+        <ChildSegmentDetail
+          chunkId={currChunkId}
+          childChunkInfo={currChildChunk.childChunkInfo ?? { id: '' }}
+          docForm={docForm}
+          onUpdate={handleUpdateChildChunk}
+          onCancel={onCloseChildSegmentDetail}
+        />
+      </FullScreenDrawer>
       {/* Create New Child Segment */}
       <FullScreenDrawer
         isOpen={showNewChildSegmentModal}
diff --git a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
index 624f37e04d..1f8133fe5c 100644
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -9,6 +9,7 @@ import { SegmentIndexTag } from './common/segment-index-tag'
 import ActionButtons from './common/action-buttons'
 import ChunkContent from './common/chunk-content'
 import AddAnother from './common/add-another'
+import Dot from './common/dot'
 import { useSegmentListContext } from './index'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
@@ -98,7 +99,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
           }</div>
           <div className='flex items-center gap-x-2'>
             <SegmentIndexTag label={'New Child Chunk'} />
-            <span className='text-text-quaternary system-xs-medium'>·</span>
+            <Dot />
             <span className='text-text-tertiary system-xs-medium'>{formatNumber(content.length)} {t('datasetDocuments.segment.characters')}</span>
           </div>
         </div>
@@ -111,6 +112,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
                 handleSave={handleSave}
                 loading={loading}
                 actionType='add'
+                isChildChunk={true}
               />
               <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
             </>
@@ -141,6 +143,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
             handleSave={handleSave}
             loading={loading}
             actionType='add'
+            isChildChunk={true}
           />
         </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 a55f57851a..e4d526a3cf 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -10,6 +10,7 @@ import ChunkContent from './common/chunk-content'
 import Keywords from './common/keywords'
 import RegenerationModal from './common/regeneration-modal'
 import { SegmentIndexTag } from './common/segment-index-tag'
+import Dot from './common/dot'
 import { useSegmentListContext } from './index'
 import type { SegmentDetailModel } from '@/models/datasets'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
@@ -86,7 +87,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
           <div className='text-text-primary system-xl-semibold'>{isEditMode ? 'Edit Chunk' : 'Chunk Detail'}</div>
           <div className='flex items-center gap-x-2'>
             <SegmentIndexTag positionId={segInfo?.position || ''} labelPrefix={`${isParentChildMode ? 'Parent-' : ''}Chunk`} />
-            <span className='text-text-quaternary system-xs-medium'>·</span>
+            <Dot />
             <span className='text-text-tertiary system-xs-medium'>{formatNumber(isEditMode ? question.length : segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
           </div>
         </div>
diff --git a/web/app/components/datasets/documents/detail/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index 2806ffbcb1..43a76cb08d 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -11,6 +11,7 @@ import ActionButtons from './completed/common/action-buttons'
 import Keywords from './completed/common/keywords'
 import ChunkContent from './completed/common/chunk-content'
 import AddAnother from './completed/common/add-another'
+import Dot from './completed/common/dot'
 import { useDocumentContext } from './index'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
@@ -118,7 +119,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
           }</div>
           <div className='flex items-center gap-x-2'>
             <SegmentIndexTag label={'New Chunk'} />
-            <span className='text-text-quaternary system-xs-medium'>·</span>
+            <Dot />
             <span className='text-text-tertiary system-xs-medium'>{formatNumber(question.length)} {t('datasetDocuments.segment.characters')}</span>
           </div>
         </div>
diff --git a/web/utils/time.ts b/web/utils/time.ts
index 732a91047a..ff2e38321f 100644
--- a/web/utils/time.ts
+++ b/web/utils/time.ts
@@ -1,5 +1,12 @@
 import dayjs, { type ConfigType } from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+
+dayjs.extend(utc)
 
 export const isAfter = (date: ConfigType, compare: ConfigType) => {
   return dayjs(date).isAfter(dayjs(compare))
 }
+
+export const formatTime = ({ date, dateFormat }: { date: ConfigType; dateFormat: string }) => {
+  return dayjs(date).format(dateFormat)
+}