dify/web/features/agent-v2/roster/components/delete-agent-dialog.tsx

'use client'

import {
  AlertDialog,
  AlertDialogActions,
  AlertDialogCancelButton,
  AlertDialogConfirmButton,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogTitle,
} from '@langgenius/dify-ui/alert-dialog'
import { toast } from '@langgenius/dify-ui/toast'
import { useMutation } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { consoleQuery } from '@/service/client'

type DeleteAgentDialogProps = {
  agentId: string
  agentName: string
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function DeleteAgentDialog({
  agentId,
  agentName,
  open,
  onOpenChange,
}: DeleteAgentDialogProps) {
  const { t } = useTranslation('agentV2')
  const { t: tCommon } = useTranslation('common')
  const deleteAgentMutation = useMutation(consoleQuery.agent.byAgentId.delete.mutationOptions())

  const handleDelete = () => {
    if (deleteAgentMutation.isPending) return

    deleteAgentMutation.mutate(
      {
        params: {
          agent_id: agentId,
        },
      },
      {
        onSuccess: () => {
          toast.success(t(($) => $['roster.deleteSuccess']))
          onOpenChange(false)
        },
        onError: () => {
          toast.error(t(($) => $['roster.deleteFailed']))
        },
      },
    )
  }

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="p-6">
        <AlertDialogTitle className="truncate title-2xl-semi-bold text-text-primary">
          {t(($) => $['roster.deleteDialog.title'], { name: agentName })}
        </AlertDialogTitle>
        <AlertDialogDescription className="mt-2 system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
          {t(($) => $['roster.deleteDialog.description'])}
        </AlertDialogDescription>
        <AlertDialogActions className="p-0 pt-6">
          <AlertDialogCancelButton disabled={deleteAgentMutation.isPending}>
            {tCommon(($) => $['operation.cancel'])}
          </AlertDialogCancelButton>
          <AlertDialogConfirmButton
            tone="destructive"
            loading={deleteAgentMutation.isPending}
            onClick={handleDelete}
          >
            {tCommon(($) => $['operation.delete'])}
          </AlertDialogConfirmButton>
        </AlertDialogActions>
      </AlertDialogContent>
    </AlertDialog>
  )
}