diff --git a/web/features/new-rag/documents/detail/header.tsx b/web/features/new-rag/documents/detail/header.tsx
index 9602f073936..b426b60851d 100644
--- a/web/features/new-rag/documents/detail/header.tsx
+++ b/web/features/new-rag/documents/detail/header.tsx
@@ -1,34 +1,17 @@
-import type { RefObject } from 'react'
+import type { ReactNode, RefObject } from 'react'
 import type { LogicalDocument } from '../models'
-import { Button } from '@langgenius/dify-ui/button'
 import { useTranslation } from 'react-i18next'
 import Link from '@/next/link'
 
 export function DocumentDetailHeader({
+  action,
   backPath,
-  canCancelReindex,
-  cancelReindexBusy,
   document,
-  onCancelReindex,
-  onReindex,
-  reindexDisabled,
-  reindexDisabledReasonId,
-  reindexFailed,
-  reindexInProgress,
-  reindexing,
   titleRef,
 }: {
+  action: ReactNode
   backPath: string
-  canCancelReindex: boolean
-  cancelReindexBusy: boolean
   document: LogicalDocument
-  onCancelReindex: () => void
-  onReindex: () => void
-  reindexDisabled: boolean
-  reindexDisabledReasonId?: string
-  reindexFailed: boolean
-  reindexInProgress: boolean
-  reindexing: boolean
   titleRef: RefObject<HTMLHeadingElement | null>
 }) {
   const { t } = useTranslation('dataset')
@@ -54,25 +37,7 @@ export function DocumentDetailHeader({
             {document.title}
           </h1>
         </div>
-        <div className="flex flex-wrap items-center gap-2">
-          <Button
-            aria-busy={reindexing || cancelReindexBusy}
-            aria-describedby={reindexDisabledReasonId}
-            className="gap-1 pl-3"
-            disabled={reindexInProgress ? !canCancelReindex : reindexDisabled}
-            loading={reindexInProgress ? cancelReindexBusy : reindexing}
-            onClick={reindexInProgress ? onCancelReindex : onReindex}
-          >
-            {!reindexInProgress && <span aria-hidden className="i-ri-refresh-line size-4" />}
-            {t(($) =>
-              reindexInProgress
-                ? $['newKnowledge.cancelDocumentReindex']
-                : reindexFailed
-                  ? $['newKnowledge.retryReindexDocument']
-                  : $['newKnowledge.reindexDocument'],
-            )}
-          </Button>
-        </div>
+        <div className="flex flex-wrap items-center gap-2">{action}</div>
       </div>
     </>
   )
diff --git a/web/features/new-rag/documents/detail/page.tsx b/web/features/new-rag/documents/detail/page.tsx
index 862a5ca5453..54c369cc6b7 100644
--- a/web/features/new-rag/documents/detail/page.tsx
+++ b/web/features/new-rag/documents/detail/page.tsx
@@ -8,14 +8,13 @@ import Loading from '@/app/components/base/loading'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { consoleQuery } from '@/service/client'
 import { KnowledgeModelReadinessBanner } from '../../components/knowledge-model-readiness-banner'
-import { KnowledgeModelSetupDialog } from '../../components/knowledge-model-setup-dialog'
 import { newKnowledgeDocumentsPath } from '../../routes'
 import { useKnowledgeSpace } from '../../space/context'
-import { useKnowledgeModelSetupGuard } from '../../use-knowledge-model-setup-guard'
 import { logicalDocumentFromApi } from '../models'
 import { useDocumentReindex } from '../tasks/use-reindex'
 import { DocumentDetailHeader } from './header'
 import { responseStatus } from './model'
+import { DocumentReindexAction } from './reindex-action'
 import { DocumentRevisionBrowser } from './revision-browser'
 import { DocumentTasksSurface } from './tasks-surface'
 
@@ -56,13 +55,6 @@ export function DocumentDetailPage({
   const { t: tCommon } = useTranslation('common')
   const { refetch: refetchKnowledgeSpace, space } = useKnowledgeSpace()
   const titleRef = useRef<HTMLHeadingElement>(null)
-  const {
-    configureModelSetup,
-    ensureModelReady,
-    modelReadiness,
-    modelSetupDialogOpen,
-    setModelSetupDialogOpen,
-  } = useKnowledgeModelSetupGuard(knowledgeSpaceId)
 
   const documentQueryOptions = useMemo(
     () =>
@@ -124,8 +116,6 @@ export function DocumentDetailPage({
     tasksError,
     writePermissionRevoked,
   } = useDocumentReindex({
-    beforeReindex: async () =>
-      (await ensureModelReady({ capability: 'index', intent: 'reindex' })).status === 'ready',
     documentActiveRevision,
     chunksQueryKey,
     documentId,
@@ -184,29 +174,35 @@ export function DocumentDetailPage({
         knowledgeSpaceId={knowledgeSpaceId}
       />
       <DocumentDetailHeader
-        backPath={backPath}
-        canCancelReindex={canCancelReindex}
-        cancelReindexBusy={cancelReindexBusy}
-        document={document}
-        onCancelReindex={() => void cancelReindex()}
-        onReindex={() => void reindex()}
-        reindexDisabled={
-          !canEdit ||
-          reindexBusy ||
-          submissionPending ||
-          taskIsActive ||
-          tasksPending ||
-          isFetchingNextTaskPage ||
-          isLookingUpTask ||
-          lookupExhausted ||
-          !document.enabled ||
-          document.status === 'deleting' ||
-          Boolean(tasksError)
+        action={
+          <DocumentReindexAction
+            key={document.id}
+            canCancel={canCancelReindex}
+            cancelBusy={cancelReindexBusy}
+            disabled={
+              !canEdit ||
+              reindexBusy ||
+              submissionPending ||
+              taskIsActive ||
+              tasksPending ||
+              isFetchingNextTaskPage ||
+              isLookingUpTask ||
+              lookupExhausted ||
+              !document.enabled ||
+              document.status === 'deleting' ||
+              Boolean(tasksError)
+            }
+            disabledReasonId={!hasEditPermission ? REINDEX_RESTRICTION_ID : undefined}
+            failed={latestTask?.state === 'failed'}
+            inProgress={reindexInProgress}
+            knowledgeSpaceId={knowledgeSpaceId}
+            reindexing={reindexBusy || submissionPending}
+            onCancel={cancelReindex}
+            onReindex={reindex}
+          />
         }
-        reindexDisabledReasonId={!hasEditPermission ? REINDEX_RESTRICTION_ID : undefined}
-        reindexFailed={latestTask?.state === 'failed'}
-        reindexInProgress={reindexInProgress}
-        reindexing={reindexBusy || submissionPending}
+        backPath={backPath}
+        document={document}
         titleRef={titleRef}
       />
       {!hasEditPermission && (
@@ -248,12 +244,6 @@ export function DocumentDetailPage({
         knowledgeSpaceId={knowledgeSpaceId}
         locale={locale}
       />
-      <KnowledgeModelSetupDialog
-        open={modelSetupDialogOpen}
-        readiness={modelReadiness}
-        onOpenChange={setModelSetupDialogOpen}
-        onConfigure={configureModelSetup}
-      />
     </section>
   )
 }
diff --git a/web/features/new-rag/documents/detail/reindex-action.tsx b/web/features/new-rag/documents/detail/reindex-action.tsx
new file mode 100644
index 00000000000..b04f848260e
--- /dev/null
+++ b/web/features/new-rag/documents/detail/reindex-action.tsx
@@ -0,0 +1,83 @@
+'use client'
+
+import { Button } from '@langgenius/dify-ui/button'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { KnowledgeModelSetupDialog } from '../../components/knowledge-model-setup-dialog'
+import { useKnowledgeModelSetupGuard } from '../../use-knowledge-model-setup-guard'
+
+export function DocumentReindexAction({
+  canCancel,
+  cancelBusy,
+  disabled,
+  disabledReasonId,
+  failed,
+  inProgress,
+  knowledgeSpaceId,
+  onCancel,
+  onReindex,
+  reindexing,
+}: {
+  canCancel: boolean
+  cancelBusy: boolean
+  disabled: boolean
+  disabledReasonId?: string
+  failed: boolean
+  inProgress: boolean
+  knowledgeSpaceId: string
+  onCancel: () => Promise<unknown>
+  onReindex: () => Promise<unknown>
+  reindexing: boolean
+}) {
+  const { t } = useTranslation('dataset')
+  const [guardBusy, setGuardBusy] = useState(false)
+  const guardPendingRef = useRef(false)
+  const {
+    configureModelSetup,
+    ensureModelReady,
+    modelReadiness,
+    modelSetupDialogOpen,
+    setModelSetupDialogOpen,
+  } = useKnowledgeModelSetupGuard(knowledgeSpaceId)
+
+  const startReindex = async () => {
+    if (guardPendingRef.current) return
+    guardPendingRef.current = true
+    setGuardBusy(true)
+    try {
+      const readiness = await ensureModelReady({ capability: 'index', intent: 'reindex' })
+      if (readiness.status === 'ready') await onReindex()
+    } finally {
+      guardPendingRef.current = false
+      setGuardBusy(false)
+    }
+  }
+
+  return (
+    <>
+      <Button
+        aria-busy={guardBusy || reindexing || cancelBusy}
+        aria-describedby={disabledReasonId}
+        className="gap-1 pl-3"
+        disabled={inProgress ? !canCancel : disabled || guardBusy}
+        loading={inProgress ? cancelBusy : guardBusy || reindexing}
+        onClick={() => void (inProgress ? onCancel() : startReindex())}
+      >
+        {!inProgress && <span aria-hidden className="i-ri-refresh-line size-4" />}
+        {t(($) =>
+          inProgress
+            ? $['newKnowledge.cancelDocumentReindex']
+            : failed
+              ? $['newKnowledge.retryReindexDocument']
+              : $['newKnowledge.reindexDocument'],
+        )}
+      </Button>
+      <KnowledgeModelSetupDialog
+        open={modelSetupDialogOpen}
+        readiness={modelReadiness}
+        onOpenChange={setModelSetupDialogOpen}
+        onConfigure={configureModelSetup}
+      />
+    </>
+  )
+}
diff --git a/web/features/new-rag/documents/tasks/use-reindex.ts b/web/features/new-rag/documents/tasks/use-reindex.ts
index d020d9cea2d..e8d74974fd7 100644
--- a/web/features/new-rag/documents/tasks/use-reindex.ts
+++ b/web/features/new-rag/documents/tasks/use-reindex.ts
@@ -55,7 +55,6 @@ function readSubmittedReindex(storageKey: string): SubmittedReindex | undefined
 }
 
 export function useDocumentReindex({
-  beforeReindex,
   chunksQueryKey,
   documentActiveRevision,
   documentId,
@@ -64,7 +63,6 @@ export function useDocumentReindex({
   knowledgeSpaceId,
   refreshWritePermission,
 }: {
-  beforeReindex: () => Promise<boolean>
   chunksQueryKey: readonly unknown[]
   documentActiveRevision: number
   documentId: string
@@ -254,7 +252,6 @@ export function useDocumentReindex({
     reindexPendingRef.current = true
     setReindexBusy(true)
     try {
-      if (!(await beforeReindex())) return
       const result = await reindexDocument({
         body: { documentIds: [documentId] },
         params: { control_space_id: knowledgeSpaceId },