fix: enhance chunk list management with new invalidation keys and imp… (#12396)

ok

web/app/components/datasets/documents/detail/completed/index.tsx

 import {
   useChildSegmentList,
   useChildSegmentListKey,
+  useChunkListAllKey,
+  useChunkListDisabledKey,
+  useChunkListEnabledKey,
   useDeleteChildSegment,
   useDeleteSegment,
   useDisableSegment,
         page: isFullDocMode ? 1 : currentPage,
         limit: isFullDocMode ? 10 : limit,
         keyword: isFullDocMode ? '' : searchValue,
-        enabled: selectedStatus === 'all' ? 'all' : !!selectedStatus,
+        enabled: selectedStatus,
       },
     },
-    currentPage === 0,
   )
   const invalidSegmentList = useInvalid(useSegmentListKey)
 
   useEffect(() => {
     if (segmentListData) {
       setSegments(segmentListData.data || [])
-      if (segmentListData.total_pages < currentPage)
-        setCurrentPage(segmentListData.total_pages)
+      const totalPages = segmentListData.total_pages
+      if (totalPages < currentPage)
+        setCurrentPage(totalPages === 0 ? 1 : totalPages)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [segmentListData])
       documentId,
       segmentId: segments[0]?.id || '',
       params: {
-        page: currentPage,
+        page: currentPage === 0 ? 1 : currentPage,
         limit,
         keyword: searchValue,
       },
     },
-    !isFullDocMode || segments.length === 0 || currentPage === 0,
+    !isFullDocMode || segments.length === 0,
   )
   const invalidChildSegmentList = useInvalid(useChildSegmentListKey)
 
   useEffect(() => {
     if (childChunkListData) {
       setChildSegments(childChunkListData.data || [])
-      if (childChunkListData.total_pages < currentPage)
-        setCurrentPage(childChunkListData.total_pages)
+      const totalPages = childChunkListData.total_pages
+      if (totalPages < currentPage)
+        setCurrentPage(totalPages === 0 ? 1 : totalPages)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [childChunkListData])
 
   const resetList = useCallback(() => {
-    setSegments([])
     setSelectedSegmentIds([])
     invalidSegmentList()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const resetChildList = useCallback(() => {
-    setChildSegments([])
     invalidChildSegmentList()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const { mutateAsync: enableSegment } = useEnableSegment()
   const { mutateAsync: disableSegment } = useDisableSegment()
+  const invalidChunkListAll = useInvalid(useChunkListAllKey)
+  const invalidChunkListEnabled = useInvalid(useChunkListEnabledKey)
+  const invalidChunkListDisabled = useInvalid(useChunkListDisabledKey)
+
+  const refreshChunkListWithStatusChanged = () => {
+    switch (selectedStatus) {
+      case 'all':
+        invalidChunkListDisabled()
+        invalidChunkListEnabled()
+        break
+      default:
+        invalidSegmentList()
+    }
+  }
 
   const onChangeSwitch = useCallback(async (enable: boolean, segId?: string) => {
     const operationApi = enable ? enableSegment : disableSegment
             seg.enabled = enable
         }
         setSegments([...segments])
+        refreshChunkListWithStatusChanged()
       },
       onError: () => {
         notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
 
   const { mutateAsync: updateSegment } = useUpdateSegment()
 
+  const refreshChunkListDataWithDetailChanged = () => {
+    switch (selectedStatus) {
+      case 'all':
+        invalidChunkListDisabled()
+        invalidChunkListEnabled()
+        break
+      case true:
+        invalidChunkListAll()
+        invalidChunkListDisabled()
+        break
+      case false:
+        invalidChunkListAll()
+        invalidChunkListEnabled()
+        break
+    }
+  }
+
   const handleUpdateSegment = useCallback(async (
     segmentId: string,
     question: string,
           }
         }
         setSegments([...segments])
+        refreshChunkListDataWithDetailChanged()
         eventEmitter?.emit('update-segment-success')
       },
       onSettled() {
           seg.child_chunks?.push(newChildChunk!)
       }
       setSegments([...segments])
+      refreshChunkListDataWithDetailChanged()
     }
     else {
       resetChildList()
             }
           }
           setSegments([...segments])
+          refreshChunkListDataWithDetailChanged()
         }
         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
-              childSeg.updated_at = res.data.updated_at
-            }
-          }
-          setChildSegments([...childSegments])
+          resetChildList()
         }
       },
       onSettled: () => {
         <SimpleSelect
           onSelect={onChangeStatus}
           items={statusList.current}
-          defaultValue={'all'}
+          defaultValue={selectedStatus === 'all' ? 'all' : selectedStatus ? 1 : 0}
           className={s.select}
           wrapperClassName='h-fit mr-2'
           optionWrapClassName='w-[160px]'
           optionClassName='p-0'
           renderOption={({ item, selected }) => <StatusItem item={item} selected={selected} />}
+          notClearable
         />
         <Input
           showLeftIcon

web/service/knowledge/use-segment.ts

 const NAME_SPACE = 'segment'
 
 export const useSegmentListKey = [NAME_SPACE, 'chunkList']
+export const useChunkListEnabledKey = [NAME_SPACE, 'chunkList', { enabled: true }]
+export const useChunkListDisabledKey = [NAME_SPACE, 'chunkList', { enabled: false }]
+export const useChunkListAllKey = [NAME_SPACE, 'chunkList', { enabled: 'all' }]
 
 export const useSegmentList = (
   payload: {
       page: number
       limit: number
       keyword: string
-      enabled: boolean | 'all'
+      enabled: boolean | 'all' | ''
     }
   },
   disable?: boolean,
   const { datasetId, documentId, params } = payload
   const { page, limit, keyword, enabled } = params
   return useQuery<SegmentsResponse>({
-    queryKey: [...useSegmentListKey, datasetId, documentId, page, limit, keyword, enabled],
+    queryKey: [...useSegmentListKey, { datasetId, documentId, page, limit, keyword, enabled }],
     queryFn: () => {
       return get<SegmentsResponse>(`/datasets/${datasetId}/documents/${documentId}/segments`, { params })
     },
   const { datasetId, documentId, segmentId, params } = payload
   const { page, limit, keyword } = params
   return useQuery({
-    queryKey: [...useChildSegmentListKey, datasetId, documentId, segmentId, page, limit, keyword],
+    queryKey: [...useChildSegmentListKey, { datasetId, documentId, segmentId, page, limit, keyword }],
     queryFn: () => {
       return get<ChildSegmentsResponse>(`/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}/child_chunks`, { params })
     },

web/service/use-base.ts

 import {
+  type QueryKey,
   useQueryClient,
 } from '@tanstack/react-query'
 
-export const useInvalid = (key: string[]) => {
+export const useInvalid = (key: QueryKey) => {
   const queryClient = useQueryClient()
   return () => {
     queryClient.invalidateQueries(
       {
         queryKey: key,
-      })
+      },
+    )
   }
 }