dify-1.8.1/web/app/components/datasets/documents/detail/document-extra-actions.tsx

'use client'
import type { FC } from 'react'
import { useState } from 'react'
import {
  RiCalendarScheduleLine,
  RiFileHistoryLine,
} from '@remixicon/react'
import Tooltip from '@/app/components/base/tooltip'
import ScheduleModal from '../schedule/schedule-modal'
import ScheduleList from '../schedule/schedule-list'
import OperationLogsModal from '../operation-logs/operation-logs-modal'

type DocumentExtraActionsProps = {
  datasetId: string
  documentId: string
  documentName: string
}

const DocumentExtraActions: FC<DocumentExtraActionsProps> = ({
  datasetId,
  documentId,
  documentName,
}) => {
  const [showScheduleModal, setShowScheduleModal] = useState(false)
  const [showScheduleList, setShowScheduleList] = useState(false)
  const [showOperationLogs, setShowOperationLogs] = useState(false)

  return (
    <>
      <div className="flex items-center gap-2">
        {/* Schedule Button */}
        <Tooltip
          popupContent="定时任务"
          triggerClassName="block"
        >
          <button
            className="flex h-8 w-8 items-center justify-center cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg p-2 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover"
            onClick={() => setShowScheduleList(true)}
          >
            <RiCalendarScheduleLine className="w-4 h-4 text-components-button-secondary-text" />
          </button>
        </Tooltip>

        {/* Operation History Button */}
        <Tooltip
          popupContent="操作历史"
          triggerClassName="block"
        >
          <button
            className="flex h-8 w-8 items-center justify-center cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg p-2 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover"
            onClick={() => setShowOperationLogs(true)}
          >
            <RiFileHistoryLine className="w-4 h-4 text-components-button-secondary-text" />
          </button>
        </Tooltip>
      </div>

      {/* Modals */}
      <ScheduleModal
        isOpen={showScheduleModal}
        onClose={() => setShowScheduleModal(false)}
        datasetId={datasetId}
        documentId={documentId}
        documentName={documentName}
      />

      <ScheduleList
        isOpen={showScheduleList}
        onClose={() => setShowScheduleList(false)}
        datasetId={datasetId}
        documentId={documentId}
        documentName={documentName}
        onCreateNew={() => {
          setShowScheduleList(false)
          setShowScheduleModal(true)
        }}
      />

      <OperationLogsModal
        isOpen={showOperationLogs}
        onClose={() => setShowOperationLogs(false)}
        datasetId={datasetId}
        documentId={documentId}
        documentName={documentName}
      />
    </>
  )
}

export default DocumentExtraActions