feat: enhance time formatting and add child segment detail component

2024-12-12 14:45:00 +08:00 · 2024-12-12 14:45:00 +08:00 · c1d1960215
parent fd339d51e2
commit c1d1960215
8 changed files with 215 additions and 10 deletions
--- a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
+++ 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)
--- 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}
--- 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>
  )
 }

--- 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}
--- 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>
      )}
--- 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>
--- 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>
--- 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)
+}