|
@@ -1,27 +1,31 @@
|
|
|
'use client'
|
|
|
import type { FC } from 'react'
|
|
|
-import React, { memo, useState, useEffect, useMemo } from 'react'
|
|
|
+import React, { memo, useEffect, useMemo, useState } from 'react'
|
|
|
import { HashtagIcon } from '@heroicons/react/24/solid'
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
import { useContext } from 'use-context-selector'
|
|
|
-import { omitBy, isNil, debounce } from 'lodash-es'
|
|
|
-import { formatNumber } from '@/utils/format'
|
|
|
+import { debounce, isNil, omitBy } from 'lodash-es'
|
|
|
+import cn from 'classnames'
|
|
|
import { StatusItem } from '../../list'
|
|
|
import { DocumentContext } from '../index'
|
|
|
import s from './style.module.css'
|
|
|
+import InfiniteVirtualList from './InfiniteVirtualList'
|
|
|
+import { formatNumber } from '@/utils/format'
|
|
|
import Modal from '@/app/components/base/modal'
|
|
|
import Switch from '@/app/components/base/switch'
|
|
|
import Divider from '@/app/components/base/divider'
|
|
|
import Input from '@/app/components/base/input'
|
|
|
-import Loading from '@/app/components/base/loading'
|
|
|
import { ToastContext } from '@/app/components/base/toast'
|
|
|
-import { SimpleSelect, Item } from '@/app/components/base/select'
|
|
|
-import { disableSegment, enableSegment, fetchSegments } from '@/service/datasets'
|
|
|
-import type { SegmentDetailModel, SegmentsResponse, SegmentsQuery } from '@/models/datasets'
|
|
|
+import type { Item } from '@/app/components/base/select'
|
|
|
+import { SimpleSelect } from '@/app/components/base/select'
|
|
|
+import { disableSegment, enableSegment, fetchSegments, updateSegment } from '@/service/datasets'
|
|
|
+import type { SegmentDetailModel, SegmentUpdator, SegmentsQuery, SegmentsResponse } from '@/models/datasets'
|
|
|
import { asyncRunSafe } from '@/utils'
|
|
|
import type { CommonResponse } from '@/models/common'
|
|
|
-import InfiniteVirtualList from "./InfiniteVirtualList";
|
|
|
-import cn from 'classnames'
|
|
|
+import { Edit03, XClose } from '@/app/components/base/icons/src/vender/line/general'
|
|
|
+import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
|
|
|
+import Button from '@/app/components/base/button'
|
|
|
+import NewSegmentModal from '@/app/components/datasets/documents/detail/new-segment-modal'
|
|
|
|
|
|
export const SegmentIndexTag: FC<{ positionId: string | number; className?: string }> = ({ positionId, className }) => {
|
|
|
const localPositionId = useMemo(() => {
|
|
@@ -41,19 +45,105 @@ export const SegmentIndexTag: FC<{ positionId: string | number; className?: stri
|
|
|
type ISegmentDetailProps = {
|
|
|
segInfo?: Partial<SegmentDetailModel> & { id: string }
|
|
|
onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>
|
|
|
+ onUpdate: (segmentId: string, q: string, a: string) => void
|
|
|
+ onCancel: () => void
|
|
|
}
|
|
|
/**
|
|
|
* Show all the contents of the segment
|
|
|
*/
|
|
|
export const SegmentDetail: FC<ISegmentDetailProps> = memo(({
|
|
|
segInfo,
|
|
|
- onChangeSwitch }) => {
|
|
|
+ onChangeSwitch,
|
|
|
+ onUpdate,
|
|
|
+ onCancel,
|
|
|
+}) => {
|
|
|
const { t } = useTranslation()
|
|
|
+ const [isEditing, setIsEditing] = useState(false)
|
|
|
+ const [question, setQuestion] = useState(segInfo?.content || '')
|
|
|
+ const [answer, setAnswer] = useState(segInfo?.answer || '')
|
|
|
+
|
|
|
+ const handleCancel = () => {
|
|
|
+ setIsEditing(false)
|
|
|
+ setQuestion(segInfo?.content || '')
|
|
|
+ setAnswer(segInfo?.answer || '')
|
|
|
+ }
|
|
|
+ const handleSave = () => {
|
|
|
+ onUpdate(segInfo?.id || '', question, answer)
|
|
|
+ }
|
|
|
+
|
|
|
+ const renderContent = () => {
|
|
|
+ if (segInfo?.answer) {
|
|
|
+ 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)}
|
|
|
+ disabled={!isEditing}
|
|
|
+ />
|
|
|
+ <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)}
|
|
|
+ disabled={!isEditing}
|
|
|
+ autoFocus
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <AutoHeightTextarea
|
|
|
+ className='leading-6 text-md text-gray-800'
|
|
|
+ value={question}
|
|
|
+ placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
|
|
|
+ onChange={e => setQuestion(e.target.value)}
|
|
|
+ disabled={!isEditing}
|
|
|
+ autoFocus
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
- <div className={'flex flex-col'}>
|
|
|
- <SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit mb-6' />
|
|
|
- <div className={s.segModalContent}>{segInfo?.content}</div>
|
|
|
+ <div className={'flex flex-col relative'}>
|
|
|
+ <div className='absolute right-0 top-0 flex items-center h-7'>
|
|
|
+ {
|
|
|
+ isEditing
|
|
|
+ ? (
|
|
|
+ <>
|
|
|
+ <Button
|
|
|
+ className='mr-2 !h-7 !px-3 !py-[5px] text-xs font-medium text-gray-700 !rounded-md'
|
|
|
+ onClick={handleCancel}>
|
|
|
+ {t('common.operation.cancel')}
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ type='primary'
|
|
|
+ className='!h-7 !px-3 !py-[5px] text-xs font-medium !rounded-md'
|
|
|
+ onClick={handleSave}>
|
|
|
+ {t('common.operation.save')}
|
|
|
+ </Button>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ : (
|
|
|
+ <div className='group relative flex justify-center items-center w-6 h-6 hover:bg-gray-100 rounded-md cursor-pointer'>
|
|
|
+ <div className={cn(s.editTip, 'hidden items-center absolute -top-10 px-3 h-[34px] bg-white rounded-lg whitespace-nowrap text-xs font-semibold text-gray-700 group-hover:flex')}>{t('common.operation.edit')}</div>
|
|
|
+ <Edit03 className='w-4 h-4 text-gray-500' onClick={() => setIsEditing(true)} />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ <div className='mx-3 w-[1px] h-3 bg-gray-200' />
|
|
|
+ <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={onCancel}>
|
|
|
+ <XClose className='w-4 h-4 text-gray-500' />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit mt-[2px] mb-6' />
|
|
|
+ <div className={s.segModalContent}>{renderContent()}</div>
|
|
|
<div className={s.keywordTitle}>{t('datasetDocuments.segment.keywords')}</div>
|
|
|
<div className={s.keywordWrapper}>
|
|
|
{!segInfo?.keywords?.length
|
|
@@ -74,7 +164,7 @@ export const SegmentDetail: FC<ISegmentDetailProps> = memo(({
|
|
|
<Switch
|
|
|
size='md'
|
|
|
defaultValue={segInfo?.enabled}
|
|
|
- onChange={async val => {
|
|
|
+ onChange={async (val) => {
|
|
|
await onChangeSwitch?.(segInfo?.id || '', val)
|
|
|
}}
|
|
|
/>
|
|
@@ -94,16 +184,18 @@ export const splitArray = (arr: any[], size = 3) => {
|
|
|
}
|
|
|
|
|
|
type ICompletedProps = {
|
|
|
+ showNewSegmentModal: boolean
|
|
|
+ onNewSegmentModalChange: (state: boolean) => void
|
|
|
// data: Array<{}> // all/part segments
|
|
|
}
|
|
|
/**
|
|
|
* Embedding done, show list of all segments
|
|
|
* Support search and filter
|
|
|
*/
|
|
|
-const Completed: FC<ICompletedProps> = () => {
|
|
|
+const Completed: FC<ICompletedProps> = ({ showNewSegmentModal, onNewSegmentModalChange }) => {
|
|
|
const { t } = useTranslation()
|
|
|
const { notify } = useContext(ToastContext)
|
|
|
- const { datasetId = '', documentId = '' } = useContext(DocumentContext)
|
|
|
+ const { datasetId = '', documentId = '', docForm } = useContext(DocumentContext)
|
|
|
// the current segment id and whether to show the modal
|
|
|
const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean }>({ showModal: false })
|
|
|
|
|
@@ -115,37 +207,45 @@ const Completed: FC<ICompletedProps> = () => {
|
|
|
const [loading, setLoading] = useState(false)
|
|
|
const [total, setTotal] = useState<number | undefined>()
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- if (lastSegmentsRes !== undefined) {
|
|
|
- getSegments(false)
|
|
|
- }
|
|
|
- }, [selectedStatus, searchValue])
|
|
|
-
|
|
|
const onChangeStatus = ({ value }: Item) => {
|
|
|
setSelectedStatus(value === 'all' ? 'all' : !!value)
|
|
|
}
|
|
|
|
|
|
const getSegments = async (needLastId?: boolean) => {
|
|
|
- const finalLastId = lastSegmentsRes?.data?.[lastSegmentsRes.data.length - 1]?.id || '';
|
|
|
+ const finalLastId = lastSegmentsRes?.data?.[lastSegmentsRes.data.length - 1]?.id || ''
|
|
|
setLoading(true)
|
|
|
const [e, res] = await asyncRunSafe<SegmentsResponse>(fetchSegments({
|
|
|
datasetId,
|
|
|
documentId,
|
|
|
params: omitBy({
|
|
|
last_id: !needLastId ? undefined : finalLastId,
|
|
|
- limit: 9,
|
|
|
+ limit: 12,
|
|
|
keyword: searchValue,
|
|
|
enabled: selectedStatus === 'all' ? 'all' : !!selectedStatus,
|
|
|
- }, isNil) as SegmentsQuery
|
|
|
+ }, isNil) as SegmentsQuery,
|
|
|
}) as Promise<SegmentsResponse>)
|
|
|
if (!e) {
|
|
|
setAllSegments([...(!needLastId ? [] : allSegments), ...splitArray(res.data || [])])
|
|
|
setLastSegmentsRes(res)
|
|
|
- if (!lastSegmentsRes) { setTotal(res?.total || 0) }
|
|
|
+ if (!lastSegmentsRes || !needLastId)
|
|
|
+ setTotal(res?.total || 0)
|
|
|
}
|
|
|
setLoading(false)
|
|
|
}
|
|
|
|
|
|
+ const resetList = () => {
|
|
|
+ setLastSegmentsRes(undefined)
|
|
|
+ setAllSegments([])
|
|
|
+ setLoading(false)
|
|
|
+ setTotal(undefined)
|
|
|
+ getSegments(false)
|
|
|
+ }
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (lastSegmentsRes !== undefined)
|
|
|
+ getSegments(false)
|
|
|
+ }, [selectedStatus, searchValue])
|
|
|
+
|
|
|
const onClickCard = (detail: SegmentDetailModel) => {
|
|
|
setCurrSegment({ segInfo: detail, showModal: true })
|
|
|
}
|
|
@@ -161,17 +261,53 @@ const Completed: FC<ICompletedProps> = () => {
|
|
|
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
|
|
for (const item of allSegments) {
|
|
|
for (const seg of item) {
|
|
|
- if (seg.id === segId) {
|
|
|
+ if (seg.id === segId)
|
|
|
seg.enabled = enabled
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
setAllSegments([...allSegments])
|
|
|
- } else {
|
|
|
+ }
|
|
|
+ else {
|
|
|
notify({ type: 'error', message: t('common.actionMsg.modificationFailed') })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ const handleUpdateSegment = async (segmentId: string, question: string, answer: string) => {
|
|
|
+ const params: SegmentUpdator = { 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
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = await updateSegment({ datasetId, documentId, segmentId, body: params })
|
|
|
+ notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
|
|
+ onCloseModal()
|
|
|
+ for (const item of allSegments) {
|
|
|
+ for (const seg of item) {
|
|
|
+ if (seg.id === segmentId) {
|
|
|
+ seg.answer = res.data.answer
|
|
|
+ seg.content = res.data.content
|
|
|
+ seg.word_count = res.data.word_count
|
|
|
+ seg.hit_count = res.data.hit_count
|
|
|
+ seg.index_node_hash = res.data.index_node_hash
|
|
|
+ seg.enabled = res.data.enabled
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setAllSegments([...allSegments])
|
|
|
+ }
|
|
|
+
|
|
|
return (
|
|
|
<>
|
|
|
<div className={s.docSearchWrapper}>
|
|
@@ -196,9 +332,20 @@ const Completed: FC<ICompletedProps> = () => {
|
|
|
onChangeSwitch={onChangeSwitch}
|
|
|
onClick={onClickCard}
|
|
|
/>
|
|
|
- <Modal isShow={currSegment.showModal} onClose={onCloseModal} className='!max-w-[640px]' closable>
|
|
|
- <SegmentDetail segInfo={currSegment.segInfo ?? { id: '' }} onChangeSwitch={onChangeSwitch} />
|
|
|
+ <Modal isShow={currSegment.showModal} onClose={() => {}} className='!max-w-[640px] !overflow-visible'>
|
|
|
+ <SegmentDetail
|
|
|
+ segInfo={currSegment.segInfo ?? { id: '' }}
|
|
|
+ onChangeSwitch={onChangeSwitch}
|
|
|
+ onUpdate={handleUpdateSegment}
|
|
|
+ onCancel={onCloseModal}
|
|
|
+ />
|
|
|
</Modal>
|
|
|
+ <NewSegmentModal
|
|
|
+ isShow={showNewSegmentModal}
|
|
|
+ docForm={docForm}
|
|
|
+ onCancel={() => onNewSegmentModalChange(false)}
|
|
|
+ onSave={resetList}
|
|
|
+ />
|
|
|
</>
|
|
|
)
|
|
|
}
|