| | |
| | | import { useTranslation } from 'react-i18next' |
| | | import { |
| | | RiCloseLine, |
| | | RiCollapseDiagonalLine, |
| | | RiExpandDiagonalLine, |
| | | } from '@remixicon/react' |
| | | import { useDocumentContext } from '../index' |
| | |
| | | docForm, |
| | | }) => { |
| | | const { t } = useTranslation() |
| | | const [question, setQuestion] = useState(isEditMode ? segInfo?.content || '' : segInfo?.sign_content || '') |
| | | const [question, setQuestion] = useState(segInfo?.content || '') |
| | | const [answer, setAnswer] = useState(segInfo?.answer || '') |
| | | const [keywords, setKeywords] = useState<string[]>(segInfo?.keywords || []) |
| | | const { eventEmitter } = useEventEmitterContextContext() |
| | |
| | | |
| | | const handleCancel = () => { |
| | | onCancel() |
| | | setQuestion(segInfo?.content || '') |
| | | setAnswer(segInfo?.answer || '') |
| | | setKeywords(segInfo?.keywords || []) |
| | | } |
| | | |
| | | const handleSave = () => { |
| | |
| | | |
| | | const titleText = useMemo(() => { |
| | | return isEditMode ? t('datasetDocuments.segment.editChunk') : t('datasetDocuments.segment.chunkDetail') |
| | | }, [isEditMode, t]) |
| | | // eslint-disable-next-line react-hooks/exhaustive-deps |
| | | }, [isEditMode]) |
| | | |
| | | const isQAModel = useMemo(() => { |
| | | return docForm === ChunkingMode.qa |
| | |
| | | const total = formatNumber(isEditMode ? contentLength : segInfo!.word_count as number) |
| | | const count = isEditMode ? contentLength : segInfo!.word_count as number |
| | | return `${total} ${t('datasetDocuments.segment.characters', { count })}` |
| | | }, [isEditMode, question.length, answer.length, isQAModel, segInfo, t]) |
| | | // eslint-disable-next-line react-hooks/exhaustive-deps |
| | | }, [isEditMode, question.length, answer.length, segInfo?.word_count, isQAModel]) |
| | | |
| | | const labelPrefix = useMemo(() => { |
| | | return isParentChildMode ? t('datasetDocuments.segment.parentChunk') : t('datasetDocuments.segment.chunk') |
| | | }, [isParentChildMode, t]) |
| | | // eslint-disable-next-line react-hooks/exhaustive-deps |
| | | }, [isParentChildMode]) |
| | | |
| | | return ( |
| | | <div className={'flex h-full flex-col'}> |
| | | <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='system-xl-semibold text-text-primary'>{titleText}</div> |
| | | <div className='text-text-primary system-xl-semibold'>{titleText}</div> |
| | | <div className='flex items-center gap-x-2'> |
| | | <SegmentIndexTag positionId={segInfo?.position || ''} label={isFullDocMode ? labelPrefix : ''} labelPrefix={labelPrefix} /> |
| | | <Dot /> |
| | | <span className='system-xs-medium text-text-tertiary'>{wordCountText}</span> |
| | | <span className='text-text-tertiary system-xs-medium'>{wordCountText}</span> |
| | | </div> |
| | | </div> |
| | | <div className='flex items-center'> |
| | |
| | | handleSave={handleSave} |
| | | loading={loading} |
| | | /> |
| | | <Divider type='vertical' className='ml-4 mr-2 h-3.5 bg-divider-regular' /> |
| | | <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' /> |
| | | </> |
| | | )} |
| | | <div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}> |
| | | {fullScreen ? <RiCollapseDiagonalLine className='h-4 w-4 text-text-tertiary' /> : <RiExpandDiagonalLine className='h-4 w-4 text-text-tertiary' />} |
| | | <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='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={onCancel}> |
| | | <RiCloseLine className='h-4 w-4 text-text-tertiary' /> |
| | | <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', |
| | | 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 overflow-hidden', |
| | | !isEditMode && 'pb-0', |
| | | )}> |
| | | <div className={classNames(isEditMode ? 'break-all whitespace-pre-line overflow-hidden' : 'overflow-y-auto', fullScreen ? 'w-1/2' : 'grow')}> |
| | | <div className={classNames('break-all overflow-hidden whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}> |
| | | <ChunkContent |
| | | docForm={docForm} |
| | | question={question} |
| | |
| | | />} |
| | | </div> |
| | | {isEditMode && !fullScreen && ( |
| | | <div className='flex items-center justify-end border-t-[1px] border-t-divider-subtle p-4 pt-3'> |
| | | <div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'> |
| | | <ActionButtons |
| | | handleCancel={handleCancel} |
| | | handleRegeneration={handleRegeneration} |