dify/web/app/components/workflow/header/header-in-normal.tsx

import type { StartNodeType } from '../nodes/start/types'
import type { RunAndHistoryProps } from './run-and-history'
import { useCallback } from 'react'
import { useNodes } from 'reactflow'
import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
import Divider from '../../base/divider'
import { useNodesInteractions, useNodesReadOnly, useWorkflowRun } from '../hooks'
import { useHooksStore } from '../hooks-store'
import { useStore, useWorkflowStore } from '../store'
import EditingTitle from './editing-title'
import EnvButton from './env-button'
import GlobalVariableButton from './global-variable-button'
import OnlineUsers from './online-users'
import RunAndHistory from './run-and-history'
import ScrollToSelectedNodeButton from './scroll-to-selected-node-button'
import { VersionHistoryButton } from './version-history-button'

export type HeaderInNormalProps = {
  components?: {
    title?: React.ReactNode
    left?: React.ReactNode
    middle?: React.ReactNode
    chatVariableTrigger?: React.ReactNode
  }
  controls?: {
    showEnvButton?: boolean
    showGlobalVariableButton?: boolean
  }
  runAndHistoryProps?: RunAndHistoryProps
}
const HeaderInNormal = ({ components, controls, runAndHistoryProps }: HeaderInNormalProps) => {
  const workflowStore = useWorkflowStore()
  const { nodesReadOnly } = useNodesReadOnly()
  const canReleaseAndVersion = useHooksStore((s) => s.accessControl.canReleaseAndVersion)
  const { handleNodeSelect } = useNodesInteractions()
  const setShowWorkflowVersionHistoryPanel = useStore((s) => s.setShowWorkflowVersionHistoryPanel)
  const setShowEnvPanel = useStore((s) => s.setShowEnvPanel)
  const setShowDebugAndPreviewPanel = useStore((s) => s.setShowDebugAndPreviewPanel)
  const setShowVariableInspectPanel = useStore((s) => s.setShowVariableInspectPanel)
  const setShowChatVariablePanel = useStore((s) => s.setShowChatVariablePanel)
  const setShowGlobalVariablePanel = useStore((s) => s.setShowGlobalVariablePanel)
  const nodes = useNodes<StartNodeType>()
  const selectedNode = nodes.find((node) => node.data.selected)
  const { handleBackupDraft } = useWorkflowRun()
  const { closeAllInputFieldPanels } = useInputFieldPanel()
  const showEnvButton = controls?.showEnvButton !== false
  const showGlobalVariableButton = controls?.showGlobalVariableButton !== false
  const showContextButtons =
    !!components?.chatVariableTrigger || showEnvButton || showGlobalVariableButton

  const onStartRestoring = useCallback(() => {
    workflowStore.setState({ isRestoring: true })
    handleBackupDraft()
    // clear right panel
    if (selectedNode) handleNodeSelect(selectedNode.id, true)
    setShowWorkflowVersionHistoryPanel(true)
    setShowEnvPanel(false)
    setShowDebugAndPreviewPanel(false)
    setShowVariableInspectPanel(false)
    setShowChatVariablePanel(false)
    setShowGlobalVariablePanel(false)
    closeAllInputFieldPanels()
  }, [
    workflowStore,
    handleBackupDraft,
    selectedNode,
    handleNodeSelect,
    setShowWorkflowVersionHistoryPanel,
    setShowEnvPanel,
    setShowDebugAndPreviewPanel,
    setShowVariableInspectPanel,
    setShowChatVariablePanel,
    setShowGlobalVariablePanel,
    closeAllInputFieldPanels,
  ])

  return (
    <div className="flex w-full items-center justify-between">
      <div>{components?.title ?? <EditingTitle />}</div>
      <div>
        <ScrollToSelectedNodeButton />
      </div>
      <div className="flex items-center gap-2">
        <OnlineUsers />
        {components?.left}
        <Divider type="vertical" className="mx-auto h-3.5" />
        <RunAndHistory {...runAndHistoryProps} />
        {showContextButtons && (
          <div className="shrink-0 cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]">
            {components?.chatVariableTrigger}
            {showEnvButton && <EnvButton disabled={nodesReadOnly} />}
            {showGlobalVariableButton && <GlobalVariableButton disabled={nodesReadOnly} />}
          </div>
        )}
        {components?.middle}
        {canReleaseAndVersion && <VersionHistoryButton onClick={onStartRestoring} />}
      </div>
    </div>
  )
}

export default HeaderInNormal