From 7200dd42d33f909ebfa6b83f092e4b6542202863 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 5 Dec 2024 09:49:37 +0800
Subject: [PATCH 1/2] refactor: update batch action component props and change
 id type in ChildChunkDetail

---
 .../documents/detail/completed/batch-action.tsx       | 11 +++++++----
 web/models/datasets.ts                                |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/completed/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/batch-action.tsx
index 3bed21df96..7a55784e70 100644
--- a/web/app/components/datasets/documents/detail/completed/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/batch-action.tsx
@@ -1,9 +1,11 @@
 import React, { type FC } from 'react'
 import { RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine } from '@remixicon/react'
 import Divider from '@/app/components/base/divider'
+import classNames from '@/utils/classnames'
 
 type IBatchActionProps = {
-  selectedSegmentIds: string[]
+  className?: string
+  selectedIds: string[]
   onBatchEnable: () => Promise<void>
   onBatchDisable: () => Promise<void>
   onBatchDelete: () => Promise<void>
@@ -11,18 +13,19 @@ type IBatchActionProps = {
 }
 
 const BatchAction: FC<IBatchActionProps> = ({
-  selectedSegmentIds,
+  className,
+  selectedIds,
   onBatchEnable,
   onBatchDisable,
   onBatchDelete,
   onCancel,
 }) => {
   return (
-    <div className='w-full flex justify-center gap-x-2 absolute bottom-16 z-20'>
+    <div className={classNames('w-full flex justify-center gap-x-2', className)}>
       <div className='flex items-center gap-x-1 p-1 rounded-[10px] bg-components-actionbar-bg-accent border border-components-actionbar-border-accent shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
         <div className='inline-flex items-center gap-x-2 pl-2 pr-3 py-1'>
           <span className='w-5 h-5 flex items-center justify-center px-1 py-0.5 bg-text-accent rounded-md text-text-primary-on-surface text-xs font-medium'>
-            {selectedSegmentIds.length}
+            {selectedIds.length}
           </span>
           <span className='text-text-accent text-[13px] font-semibold leading-[16px]'>Selected</span>
         </div>
diff --git a/web/models/datasets.ts b/web/models/datasets.ts
index ed4ab2fb7d..c2bdedaf62 100644
--- a/web/models/datasets.ts
+++ b/web/models/datasets.ts
@@ -591,7 +591,7 @@ export const DEFAULT_WEIGHTED_SCORE = {
 export type ChildChunkType = 'automatic' | 'customized'
 
 export type ChildChunkDetail = {
-  id: number
+  id: string
   position: number
   segment_id: string
   content: string

From f8d6d5a6a91f421de6c1b62c672e900004e55a83 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 5 Dec 2024 10:12:02 +0800
Subject: [PATCH 2/2] refactor: replace DocumentContext with useDocumentContext
 for improved context management

---
 .../documents/detail/completed/index.tsx      | 195 +-----------------
 .../documents/detail/embedding/index.tsx      |   4 +-
 .../datasets/documents/detail/index.tsx       |  29 ++-
 .../documents/detail/metadata/index.tsx       |   4 +-
 4 files changed, 34 insertions(+), 198 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index c7978620a3..adba7dbe1c 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -1,35 +1,27 @@
 'use client'
 import type { FC } from 'react'
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useDebounceFn } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
-import {
-  RiCloseLine,
-  RiEditLine,
-} from '@remixicon/react'
-import { StatusItem } from '../../list'
-import { DocumentContext } from '../index'
+import { useDocumentContext } from '../index'
 import { ProcessStatus } from '../segment-add'
 import s from './style.module.css'
 import SegmentList from './segment-list'
 import DisplayToggle from './display-toggle'
 import BatchAction from './batch-action'
+import SegmentDetail from './segment-detail'
 import cn from '@/utils/classnames'
 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 { ToastContext } from '@/app/components/base/toast'
 import type { Item } from '@/app/components/base/select'
 import { SimpleSelect } from '@/app/components/base/select'
 import { updateSegment } from '@/service/datasets'
-import type { ParentMode, ProcessMode, SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
-import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
-import Button from '@/app/components/base/button'
+import type { SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
 import NewSegmentModal from '@/app/components/datasets/documents/detail/new-segment-modal'
-import TagInput from '@/app/components/base/tag-input'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import Checkbox from '@/app/components/base/checkbox'
 import { useDeleteSegment, useDisableSegment, useEnableSegment, useSegmentList } from '@/service/knowledge/use-segment'
@@ -66,184 +58,12 @@ export const SegmentIndexTag: FC<{ positionId: string | number; className?: stri
   )
 }
 
-type ISegmentDetailProps = {
-  embeddingAvailable: boolean
-  segInfo?: Partial<SegmentDetailModel> & { id: string }
-  onChangeSwitch?: (enabled: boolean, segId?: string) => Promise<void>
-  onUpdate: (segmentId: string, q: string, a: string, k: string[]) => void
-  onCancel: () => void
-  archived?: boolean
-  isEditing?: boolean
-}
-/**
- * Show all the contents of the segment
- */
-const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
-  embeddingAvailable,
-  segInfo,
-  archived,
-  onChangeSwitch,
-  onUpdate,
-  onCancel,
-  isEditing: initialIsEditing,
-}) => {
-  const { t } = useTranslation()
-  const [isEditing, setIsEditing] = useState(initialIsEditing)
-  const [question, setQuestion] = useState(segInfo?.content || '')
-  const [answer, setAnswer] = useState(segInfo?.answer || '')
-  const [keywords, setKeywords] = useState<string[]>(segInfo?.keywords || [])
-  const { eventEmitter } = useEventEmitterContextContext()
-  const [loading, setLoading] = useState(false)
-
-  eventEmitter?.useSubscription((v) => {
-    if (v === 'update-segment')
-      setLoading(true)
-    else
-      setLoading(false)
-  })
-
-  const handleCancel = () => {
-    setIsEditing(false)
-    setQuestion(segInfo?.content || '')
-    setAnswer(segInfo?.answer || '')
-    setKeywords(segInfo?.keywords || [])
-  }
-  const handleSave = () => {
-    onUpdate(segInfo?.id || '', question, answer, keywords)
-  }
-
-  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 relative'}>
-      <div className='absolute right-0 top-0 flex items-center h-7'>
-        {isEditing && (
-          <>
-            <Button
-              onClick={handleCancel}>
-              {t('common.operation.cancel')}
-            </Button>
-            <Button
-              variant='primary'
-              className='ml-3'
-              onClick={handleSave}
-              disabled={loading}
-            >
-              {t('common.operation.save')}
-            </Button>
-          </>
-        )}
-        {!isEditing && !archived && embeddingAvailable && (
-          <>
-            <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>
-              <RiEditLine 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}>
-          <RiCloseLine 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
-          ? '-'
-          : (
-            <TagInput
-              items={keywords}
-              onChange={newKeywords => setKeywords(newKeywords)}
-              disableAdd={!isEditing}
-              disableRemove={!isEditing || (keywords.length === 1)}
-            />
-          )
-        }
-      </div>
-      <div className={cn(s.footer, s.numberInfo)}>
-        <div className='flex items-center flex-wrap gap-y-2'>
-          <div className={cn(s.commonIcon, s.typeSquareIcon)} /><span className='mr-8'>{formatNumber(segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
-          <div className={cn(s.commonIcon, s.targetIcon)} /><span className='mr-8'>{formatNumber(segInfo?.hit_count as number)} {t('datasetDocuments.segment.hitCount')}</span>
-          <div className={cn(s.commonIcon, s.bezierCurveIcon)} /><span className={s.hashText}>{t('datasetDocuments.segment.vectorHash')}{segInfo?.index_node_hash}</span>
-        </div>
-        <div className='flex items-center'>
-          <StatusItem status={segInfo?.enabled ? 'enabled' : 'disabled'} reverse textCls='text-gray-500 text-xs' />
-          {embeddingAvailable && (
-            <>
-              <Divider type='vertical' className='!h-2' />
-              <Switch
-                size='md'
-                defaultValue={segInfo?.enabled}
-                onChange={async (val) => {
-                  await onChangeSwitch?.(val, segInfo?.id || '')
-                }}
-                disabled={archived}
-              />
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-export const SegmentDetail = memo(SegmentDetailComponent)
-
-export const splitArray = (arr: any[], size = 3) => {
-  if (!arr || !arr.length)
-    return []
-  const result = []
-  for (let i = 0; i < arr.length; i += size)
-    result.push(arr.slice(i, i + size))
-  return result
-}
-
 type ICompletedProps = {
   embeddingAvailable: boolean
   showNewSegmentModal: boolean
   onNewSegmentModalChange: (state: boolean) => void
   importStatus: ProcessStatus | string | undefined
   archived?: boolean
-  mode?: ProcessMode
-  parentMode?: ParentMode
   // data: Array<{}> // all/part segments
 }
 /**
@@ -256,12 +76,10 @@ const Completed: FC<ICompletedProps> = ({
   onNewSegmentModalChange,
   importStatus,
   archived,
-  mode,
-  parentMode,
 }) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
-  const { datasetId = '', documentId = '', docForm } = useContext(DocumentContext)
+  const [datasetId = '', documentId = '', docForm, mode, parentMode] = useDocumentContext(s => [s.datasetId, s.documentId, s.docForm, s.mode, s.parentMode])
   // the current segment id and whether to show the modal
   const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean; isEditing?: boolean }>({ showModal: false })
 
@@ -504,7 +322,8 @@ const Completed: FC<ICompletedProps> = ({
       />
       {selectedSegmentIds.length > 0
       && <BatchAction
-        selectedSegmentIds={selectedSegmentIds}
+        className='absolute left-0 bottom-16 z-20'
+        selectedIds={selectedSegmentIds}
         onBatchEnable={onChangeSwitch.bind(null, true)}
         onBatchDisable={onChangeSwitch.bind(null, false)}
         onBatchDelete={onDelete}
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index 1bc6c91c2a..d974351aa6 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -9,7 +9,7 @@ import { ArrowRightIcon } from '@heroicons/react/24/solid'
 import SegmentCard from '../completed/SegmentCard'
 import { FieldInfo } from '../metadata'
 import style from '../completed/style.module.css'
-import { DocumentContext } from '../index'
+import { useDocumentContext } from '../index'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
@@ -111,7 +111,7 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
 
-  const { datasetId = '', documentId = '' } = useContext(DocumentContext)
+  const [datasetId, documentId] = useDocumentContext(s => [s.datasetId, s.documentId])
   const localDatasetId = dstId ?? datasetId
   const localDocumentId = docId ?? documentId
 
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index ea3a91245f..7ce8d54473 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import useSWR from 'swr'
-import { createContext, useContext } from 'use-context-selector'
+import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 import { omit } from 'lodash-es'
@@ -25,7 +25,20 @@ import type { DocForm, ParentMode, ProcessMode } from '@/models/datasets'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
 import FloatRightContainer from '@/app/components/base/float-right-container'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-export const DocumentContext = createContext<{ datasetId?: string; documentId?: string; docForm: string }>({ docForm: '' })
+
+type DocumentContextValue = {
+  datasetId?: string
+  documentId?: string
+  docForm: string
+  mode?: ProcessMode
+  parentMode?: ParentMode
+}
+
+export const DocumentContext = createContext<DocumentContextValue>({ docForm: '' })
+
+export const useDocumentContext = (selector: (value: DocumentContextValue) => any) => {
+  return useContextSelector(DocumentContext, selector)
+}
 
 type DocumentTitleProps = {
   datasetId: string
@@ -140,7 +153,13 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
   }
 
   return (
-    <DocumentContext.Provider value={{ datasetId, documentId, docForm: documentDetail?.doc_form || '' }}>
+    <DocumentContext.Provider value={{
+      datasetId,
+      documentId,
+      docForm: documentDetail?.doc_form || '',
+      mode: documentDetail?.dataset_process_rule.mode,
+      parentMode: documentDetail?.dataset_process_rule.rules.parent_mode,
+    }}>
       <div className='flex flex-col h-full'>
         <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'>
           <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'}>
@@ -203,7 +222,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
         <div className='flex flex-row flex-1' style={{ height: 'calc(100% - 4rem)' }}>
           {isDetailLoading
             ? <Loading type='app' />
-            : <div className={`h-full w-full flex flex-col ${embedding ? 'px-6 py-3 sm:py-12 sm:px-16' : 'pb-[30px] pt-3 pl-5 pr-11'}`}>
+            : <div className={`h-full w-full flex flex-col ${embedding ? 'px-6 py-3 sm:py-12 sm:px-16' : 'relative pb-[30px] pt-3 pl-5 pr-11'}`}>
               {embedding
                 ? <Embedding detail={documentDetail} detailUpdate={detailMutate} />
                 : <Completed
@@ -212,8 +231,6 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
                   onNewSegmentModalChange={setNewSegmentModalVisible}
                   importStatus={importStatus}
                   archived={documentDetail?.archived}
-                  mode={documentDetail?.dataset_process_rule.mode}
-                  parentMode={documentDetail?.dataset_process_rule.rules.parent_mode}
                 />
               }
             </div>
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 6c1d749a28..659fff6d18 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -5,7 +5,7 @@ import { PencilIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { get } from 'lodash-es'
-import { DocumentContext } from '../index'
+import { useDocumentContext } from '../index'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
 import Input from '@/app/components/base/input'
@@ -151,7 +151,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
   const [saveLoading, setSaveLoading] = useState(false)
 
   const { notify } = useContext(ToastContext)
-  const { datasetId = '', documentId = '' } = useContext(DocumentContext)
+  const [datasetId, documentId] = useDocumentContext(s => [s.datasetId, s.documentId])
 
   useEffect(() => {
     if (docDetail?.doc_type) {