dify/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx

import type { FC } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { Kbd, KbdGroup } from '@langgenius/dify-ui/kbd'
import { formatForDisplay, useHotkey } from '@tanstack/react-hotkeys'
import * as React from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { ChunkingMode } from '@/models/datasets'
import { useDocumentContext } from '../../context'

type IActionButtonsProps = {
  handleCancel: () => void
  handleSave: () => void
  loading: boolean
  actionType?: 'edit' | 'add'
  handleRegeneration?: () => void
  isChildChunk?: boolean
  showRegenerationButton?: boolean
}

const ActionButtons: FC<IActionButtonsProps> = ({
  handleCancel,
  handleSave,
  loading,
  actionType = 'edit',
  handleRegeneration,
  isChildChunk = false,
  showRegenerationButton = true,
}) => {
  const { t } = useTranslation()
  const docForm = useDocumentContext(s => s.docForm)
  const parentMode = useDocumentContext(s => s.parentMode)

  useHotkey('Escape', (e) => {
    e.preventDefault()
    handleCancel()
  })

  useHotkey('Mod+S', (e) => {
    e.preventDefault()
    if (loading)
      return
    handleSave()
  })

  const isParentChildParagraphMode = useMemo(() => {
    return docForm === ChunkingMode.parentChild && parentMode === 'paragraph'
  }, [docForm, parentMode])

  return (
    <div className="flex items-center gap-x-2">
      <Button
        onClick={handleCancel}
      >
        <div className="flex items-center gap-x-1">
          <span className="system-sm-medium text-components-button-secondary-text">{t('operation.cancel', { ns: 'common' })}</span>
          <Kbd>{formatForDisplay('Escape')}</Kbd>
        </div>
      </Button>
      {(isParentChildParagraphMode && actionType === 'edit' && !isChildChunk && showRegenerationButton)
        ? (
            <Button
              onClick={handleRegeneration}
              disabled={loading}
            >
              <span className="system-sm-medium text-components-button-secondary-text">
                {t('operation.saveAndRegenerate', { ns: 'common' })}
              </span>
            </Button>
          )
        : null}
      <Button
        variant="primary"
        onClick={handleSave}
        disabled={loading}
      >
        <div className="flex items-center gap-x-1">
          <span className="text-components-button-primary-text">{t('operation.save', { ns: 'common' })}</span>
          <KbdGroup>
            {['Mod', 'S'].map(key => (
              <Kbd key={key} color="white">{formatForDisplay(key)}</Kbd>
            ))}
          </KbdGroup>
        </div>
      </Button>
    </div>
  )
}

ActionButtons.displayName = 'ActionButtons'

export default React.memo(ActionButtons)