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 index a305c48feb..ad4ba64264 100644 --- a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx +++ b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx @@ -1,4 +1,4 @@ -import React, { type FC, useState } from 'react' +import React, { type FC, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { RiCloseLine, @@ -56,18 +56,33 @@ const ChildSegmentDetail: FC = ({ onUpdate(chunkId, childChunkInfo?.id || '', content) } + const wordCountText = useMemo(() => { + const count = content.length + return `${formatNumber(count)} ${t('datasetDocuments.segment.characters', { count })}` + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [content.length]) + + const EditTimeText = useMemo(() => { + const timeText = formatTime({ + date: (childChunkInfo?.updated_at ?? 0) * 1000, + dateFormat: 'MM/DD/YYYY h:mm:ss', + }) + return `${t('datasetDocuments.segment.editedAt')} ${timeText}` + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [childChunkInfo?.updated_at]) + return (
-
{'Edit Child Chunk'}
+
{t('datasetDocuments.segment.editChildChunk')}
- + - {formatNumber(content.length)} {t('datasetDocuments.segment.characters')} + {wordCountText} - {`Edited at ${formatTime({ date: (childChunkInfo?.created_at ?? 0) * 1000, dateFormat: 'MM/DD/YYYY h:mm:ss' })}`} + {EditTimeText}
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx index c1f44648fb..d1e3d93d52 100644 --- a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx +++ b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx @@ -1,11 +1,13 @@ import { type FC, useMemo, useState } from 'react' import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react' +import { useTranslation } from 'react-i18next' import { EditSlice } from '../../../formatted-text/flavours/edit-slice' import { useDocumentContext } from '../index' import type { ChildChunkDetail } from '@/models/datasets' import Input from '@/app/components/base/input' import classNames from '@/utils/classnames' import Divider from '@/app/components/base/divider' +import { formatNumber } from '@/utils/format' type IChildSegmentCardProps = { childChunks: ChildChunkDetail[] @@ -30,6 +32,7 @@ const ChildSegmentList: FC = ({ total, inputValue, }) => { + const { t } = useTranslation() const parentMode = useDocumentContext(s => s.parentMode) const [collapsed, setCollapsed] = useState(true) @@ -50,10 +53,25 @@ const ChildSegmentList: FC = ({ return enabled ? '' : 'opacity-50 group-hover/card:opacity-100' }, [enabled]) + const totalText = useMemo(() => { + const text = isFullDocMode + ? !total + ? '--' + : formatNumber(total) + : formatNumber(childChunks.length) + const count = isFullDocMode + ? text === '--' + ? 0 + : total + : childChunks.length + return `${isFullDocMode ? count : childChunks.length} ${t('datasetDocuments.segment.childChunks', { count })}` + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isFullDocMode, total, childChunks.length]) + return ( -
+
{isFullDocMode ? : null} -
+
{ event.stopPropagation() toggleCollapse() @@ -67,16 +85,16 @@ const ChildSegmentList: FC = ({ : () : null } - {`${total} CHILD CHUNKS`} + {totalText} ·
{isFullDocMode @@ -91,14 +109,14 @@ const ChildSegmentList: FC = ({ : null}
{(isFullDocMode || !collapsed) - ?
+ ?
{isParagraphMode && }
{childChunks.map((childChunk) => { const edited = childChunk.updated_at !== childChunk.created_at return onDelete?.(childChunk.segment_id, childChunk.id)} className='line-clamp-3' diff --git a/web/app/components/datasets/documents/detail/completed/display-toggle.tsx b/web/app/components/datasets/documents/detail/completed/display-toggle.tsx index 890545df41..5630a2ba74 100644 --- a/web/app/components/datasets/documents/detail/completed/display-toggle.tsx +++ b/web/app/components/datasets/documents/detail/completed/display-toggle.tsx @@ -1,4 +1,5 @@ import React, { type FC } from 'react' +import { useTranslation } from 'react-i18next' import { RiLineHeight } from '@remixicon/react' import Tooltip from '@/app/components/base/tooltip' import { Collapse } from '@/app/components/base/icons/src/public/knowledge' @@ -12,9 +13,11 @@ const DisplayToggle: FC = ({ isCollapsed, toggleCollapsed, }) => { + const { t } = useTranslation() + return (