dify/web/app/components/workflow/header/run-and-history.tsx

import type { ViewHistoryProps } from './view-history'
import { cn } from '@langgenius/dify-ui/cn'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import {
  useNodesReadOnly,
  useWorkflowStartRun,
} from '../hooks'
import { useHooksStore } from '../hooks-store'
import Checklist from './checklist'
import RunMode from './run-mode'
import ViewHistory from './view-history'

const PreviewMode = memo(({
  disabled = false,
}: {
  disabled?: boolean
}) => {
  const { t } = useTranslation()
  const { handleWorkflowStartRunInChatflow } = useWorkflowStartRun()
  const canRun = useHooksStore(s => s.accessControl.canRun)
  const isDisabled = disabled || !canRun

  return (
    <button
      type="button"
      disabled={isDisabled}
      className={cn(
        'flex h-7 items-center rounded-md px-2.5 text-[13px] font-medium text-components-button-secondary-accent-text',
        isDisabled
          ? 'cursor-not-allowed opacity-50'
          : 'cursor-pointer hover:bg-state-accent-hover',
      )}
      onClick={() => {
        if (!isDisabled)
          handleWorkflowStartRunInChatflow()
      }}
    >
      <span aria-hidden className="mr-1 i-ri-play-large-line size-4" />
      {t('common.debugAndPreview', { ns: 'workflow' })}
    </button>
  )
})

export type RunAndHistoryProps = {
  showRunButton?: boolean
  runButtonText?: string
  isRunning?: boolean
  showPreviewButton?: boolean
  viewHistoryProps?: ViewHistoryProps
  components?: {
    RunMode?: React.ComponentType<
      {
        text?: string
        disabled?: boolean
      }
    >
  }
}
const RunAndHistory = ({
  showRunButton,
  runButtonText,
  showPreviewButton,
  viewHistoryProps,
  components,
}: RunAndHistoryProps) => {
  const { nodesReadOnly } = useNodesReadOnly()
  const canRun = useHooksStore(s => s.accessControl.canRun)
  const { RunMode: CustomRunMode } = components || {}

  return (
    <div className="flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs">
      {
        showRunButton && (
          CustomRunMode ? <CustomRunMode text={runButtonText} disabled={!canRun} /> : <RunMode text={runButtonText} disabled={!canRun} />
        )
      }
      {
        showPreviewButton && <PreviewMode disabled={!canRun} />
      }
      <div className="mx-0.5 h-3.5 w-px bg-divider-regular"></div>
      <ViewHistory {...viewHistoryProps} />
      <Checklist disabled={nodesReadOnly} />
    </div>
  )
}

export default memo(RunAndHistory)