index.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. 'use client'
  2. import type { FC } from 'react'
  3. import React, { useMemo, useState } from 'react'
  4. import { createContext, useContext, useContextSelector } from 'use-context-selector'
  5. import { useTranslation } from 'react-i18next'
  6. import { useRouter } from 'next/navigation'
  7. import { RiArrowLeftLine, RiLayoutRight2Line } from '@remixicon/react'
  8. import { OperationAction, StatusItem } from '../list'
  9. import DocumentPicker from '../../common/document-picker'
  10. import Completed from './completed'
  11. import Embedding from './embedding'
  12. import Metadata from './metadata'
  13. import SegmentAdd, { ProcessStatus } from './segment-add'
  14. import BatchModal from './batch-modal'
  15. import style from './style.module.css'
  16. import cn from '@/utils/classnames'
  17. import Divider from '@/app/components/base/divider'
  18. import Loading from '@/app/components/base/loading'
  19. import { ToastContext } from '@/app/components/base/toast'
  20. import type { ChunkingMode, ParentMode, ProcessMode } from '@/models/datasets'
  21. import { useDatasetDetailContext } from '@/context/dataset-detail'
  22. import FloatRightContainer from '@/app/components/base/float-right-container'
  23. import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
  24. import { LayoutRight2LineMod } from '@/app/components/base/icons/src/public/knowledge'
  25. import { useCheckSegmentBatchImportProgress, useChildSegmentListKey, useSegmentBatchImport, useSegmentListKey } from '@/service/knowledge/use-segment'
  26. import { useDocumentDetail, useDocumentMetadata } from '@/service/knowledge/use-document'
  27. import { useInvalid } from '@/service/use-base'
  28. type DocumentContextValue = {
  29. datasetId?: string
  30. documentId?: string
  31. docForm: string
  32. mode?: ProcessMode
  33. parentMode?: ParentMode
  34. }
  35. export const DocumentContext = createContext<DocumentContextValue>({ docForm: '' })
  36. export const useDocumentContext = (selector: (value: DocumentContextValue) => any) => {
  37. return useContextSelector(DocumentContext, selector)
  38. }
  39. type DocumentTitleProps = {
  40. datasetId: string
  41. extension?: string
  42. name?: string
  43. processMode?: ProcessMode
  44. parent_mode?: ParentMode
  45. iconCls?: string
  46. textCls?: string
  47. wrapperCls?: string
  48. }
  49. export const DocumentTitle: FC<DocumentTitleProps> = ({ datasetId, extension, name, processMode, parent_mode, wrapperCls }) => {
  50. const router = useRouter()
  51. return (
  52. <div className={cn('flex items-center justify-start flex-1', wrapperCls)}>
  53. <DocumentPicker
  54. datasetId={datasetId}
  55. value={{
  56. name,
  57. extension,
  58. processMode,
  59. parentMode: parent_mode,
  60. }}
  61. onChange={(doc) => {
  62. router.push(`/datasets/${datasetId}/documents/${doc.id}`)
  63. }}
  64. />
  65. </div>
  66. )
  67. }
  68. type Props = {
  69. datasetId: string
  70. documentId: string
  71. }
  72. const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
  73. const router = useRouter()
  74. const { t } = useTranslation()
  75. const media = useBreakpoints()
  76. const isMobile = media === MediaType.mobile
  77. const { notify } = useContext(ToastContext)
  78. const { dataset } = useDatasetDetailContext()
  79. const embeddingAvailable = !!dataset?.embedding_available
  80. const [showMetadata, setShowMetadata] = useState(!isMobile)
  81. const [newSegmentModalVisible, setNewSegmentModalVisible] = useState(false)
  82. const [batchModalVisible, setBatchModalVisible] = useState(false)
  83. const [importStatus, setImportStatus] = useState<ProcessStatus | string>()
  84. const showNewSegmentModal = () => setNewSegmentModalVisible(true)
  85. const showBatchModal = () => setBatchModalVisible(true)
  86. const hideBatchModal = () => setBatchModalVisible(false)
  87. const resetProcessStatus = () => setImportStatus('')
  88. const { mutateAsync: checkSegmentBatchImportProgress } = useCheckSegmentBatchImportProgress()
  89. const checkProcess = async (jobID: string) => {
  90. await checkSegmentBatchImportProgress({ jobID }, {
  91. onSuccess: (res) => {
  92. setImportStatus(res.job_status)
  93. if (res.job_status === ProcessStatus.WAITING || res.job_status === ProcessStatus.PROCESSING)
  94. setTimeout(() => checkProcess(res.job_id), 2500)
  95. if (res.job_status === ProcessStatus.ERROR)
  96. notify({ type: 'error', message: `${t('datasetDocuments.list.batchModal.runError')}` })
  97. },
  98. onError: (e) => {
  99. notify({ type: 'error', message: `${t('datasetDocuments.list.batchModal.runError')}${'message' in e ? `: ${e.message}` : ''}` })
  100. },
  101. })
  102. }
  103. const { mutateAsync: segmentBatchImport } = useSegmentBatchImport()
  104. const runBatch = async (csv: File) => {
  105. const formData = new FormData()
  106. formData.append('file', csv)
  107. await segmentBatchImport({
  108. url: `/datasets/${datasetId}/documents/${documentId}/segments/batch_import`,
  109. body: formData,
  110. }, {
  111. onSuccess: (res) => {
  112. setImportStatus(res.job_status)
  113. checkProcess(res.job_id)
  114. },
  115. onError: (e) => {
  116. notify({ type: 'error', message: `${t('datasetDocuments.list.batchModal.runError')}${'message' in e ? `: ${e.message}` : ''}` })
  117. },
  118. })
  119. }
  120. const { data: documentDetail, error, refetch: detailMutate } = useDocumentDetail({
  121. datasetId,
  122. documentId,
  123. params: { metadata: 'without' },
  124. })
  125. const { data: documentMetadata, error: metadataErr, refetch: metadataMutate } = useDocumentMetadata({
  126. datasetId,
  127. documentId,
  128. params: { metadata: 'only' },
  129. })
  130. const backToPrev = () => {
  131. router.push(`/datasets/${datasetId}/documents`)
  132. }
  133. const isDetailLoading = !documentDetail && !error
  134. const isMetadataLoading = !documentMetadata && !metadataErr
  135. const embedding = ['queuing', 'indexing', 'paused'].includes((documentDetail?.display_status || '').toLowerCase())
  136. const invalidChunkList = useInvalid(useSegmentListKey)
  137. const invalidChildChunkList = useInvalid(useChildSegmentListKey)
  138. const handleOperate = (operateName?: string) => {
  139. if (operateName === 'delete') {
  140. backToPrev()
  141. }
  142. else {
  143. detailMutate()
  144. setTimeout(() => {
  145. invalidChunkList()
  146. invalidChildChunkList()
  147. }, 5000)
  148. }
  149. }
  150. const mode = useMemo(() => {
  151. return documentDetail?.document_process_rule?.mode
  152. }, [documentDetail?.document_process_rule])
  153. const parentMode = useMemo(() => {
  154. return documentDetail?.document_process_rule?.rules?.parent_mode
  155. }, [documentDetail?.document_process_rule])
  156. const isFullDocMode = useMemo(() => {
  157. return mode === 'hierarchical' && parentMode === 'full-doc'
  158. }, [mode, parentMode])
  159. return (
  160. <DocumentContext.Provider value={{
  161. datasetId,
  162. documentId,
  163. docForm: documentDetail?.doc_form || '',
  164. mode,
  165. parentMode,
  166. }}>
  167. <div className='flex flex-col h-full bg-background-default'>
  168. <div className='flex items-center justify-between flex-wrap min-h-16 pl-3 pr-4 py-2.5 border-b border-b-divider-subtle'>
  169. <div onClick={backToPrev} className={'shrink-0 rounded-full w-8 h-8 flex justify-center items-center cursor-pointer hover:bg-components-button-tertiary-bg'}>
  170. <RiArrowLeftLine className='text-components-button-ghost-text hover:text-text-tertiary w-4 h-4' />
  171. </div>
  172. <DocumentTitle
  173. datasetId={datasetId}
  174. extension={documentDetail?.data_source_info?.upload_file?.extension}
  175. name={documentDetail?.name}
  176. wrapperCls='mr-2'
  177. parent_mode={parentMode}
  178. processMode={mode}
  179. />
  180. <div className='flex items-center flex-wrap'>
  181. {embeddingAvailable && documentDetail && !documentDetail.archived && !isFullDocMode && (
  182. <>
  183. <SegmentAdd
  184. importStatus={importStatus}
  185. clearProcessStatus={resetProcessStatus}
  186. showNewSegmentModal={showNewSegmentModal}
  187. showBatchModal={showBatchModal}
  188. embedding={embedding}
  189. />
  190. <Divider type='vertical' className='!bg-divider-regular !h-[14px] !mx-3' />
  191. </>
  192. )}
  193. <StatusItem
  194. status={documentDetail?.display_status || 'available'}
  195. scene='detail'
  196. errorMessage={documentDetail?.error || ''}
  197. textCls='font-semibold text-xs uppercase'
  198. detail={{
  199. enabled: documentDetail?.enabled || false,
  200. archived: documentDetail?.archived || false,
  201. id: documentId,
  202. }}
  203. datasetId={datasetId}
  204. onUpdate={handleOperate}
  205. />
  206. <OperationAction
  207. scene='detail'
  208. embeddingAvailable={embeddingAvailable}
  209. detail={{
  210. name: documentDetail?.name || '',
  211. enabled: documentDetail?.enabled || false,
  212. archived: documentDetail?.archived || false,
  213. id: documentId,
  214. data_source_type: documentDetail?.data_source_type || '',
  215. doc_form: documentDetail?.doc_form || '',
  216. }}
  217. datasetId={datasetId}
  218. onUpdate={handleOperate}
  219. className='!w-[200px]'
  220. />
  221. <button
  222. className={style.layoutRightIcon}
  223. onClick={() => setShowMetadata(!showMetadata)}
  224. >
  225. {
  226. showMetadata
  227. ? <LayoutRight2LineMod className='w-4 h-4 text-components-button-secondary-text' />
  228. : <RiLayoutRight2Line className='w-4 h-4 text-components-button-secondary-text' />
  229. }
  230. </button>
  231. </div>
  232. </div>
  233. <div className='flex flex-row flex-1' style={{ height: 'calc(100% - 4rem)' }}>
  234. {isDetailLoading
  235. ? <Loading type='app' />
  236. : <div className={cn('h-full grow min-w-0 flex flex-col',
  237. embedding ? '' : isFullDocMode ? 'relative pt-4 pr-11 pl-11' : 'relative pt-3 pr-11 pl-5',
  238. )}>
  239. {embedding
  240. ? <Embedding
  241. detailUpdate={detailMutate}
  242. indexingType={dataset?.indexing_technique}
  243. retrievalMethod={dataset?.retrieval_model_dict?.search_method}
  244. />
  245. : <Completed
  246. embeddingAvailable={embeddingAvailable}
  247. showNewSegmentModal={newSegmentModalVisible}
  248. onNewSegmentModalChange={setNewSegmentModalVisible}
  249. importStatus={importStatus}
  250. archived={documentDetail?.archived}
  251. />
  252. }
  253. </div>
  254. }
  255. <FloatRightContainer showClose isOpen={showMetadata} onClose={() => setShowMetadata(false)} isMobile={isMobile} panelClassname='!justify-start' footer={null}>
  256. <Metadata
  257. docDetail={{ ...documentDetail, ...documentMetadata, doc_type: documentMetadata?.doc_type === 'others' ? '' : documentMetadata?.doc_type } as any}
  258. loading={isMetadataLoading}
  259. onUpdate={metadataMutate}
  260. />
  261. </FloatRightContainer>
  262. </div>
  263. <BatchModal
  264. isShow={batchModalVisible}
  265. onCancel={hideBatchModal}
  266. onConfirm={runBatch}
  267. docForm={documentDetail?.doc_form as ChunkingMode}
  268. />
  269. </div>
  270. </DocumentContext.Provider>
  271. )
  272. }
  273. export default DocumentDetail