fix: Delete evaluator modal is light in dark mode #1424

agenta-web/src/components/AlertPopup/AlertPopup.tsx

@@ -2,6 +2,7 @@ import React, {ReactNode} from "react"
 import {Modal, ModalFuncProps} from "antd"
 import {ExclamationCircleOutlined} from "@ant-design/icons"
 import {globalErrorHandler} from "@/lib/helpers/errorHandler"
+import { HookAPI } from "antd/es/modal/useModal"
 
 function handleCb(cb: AlertPopupProps["onOk"]) {
     if (typeof cb !== "function") return cb
@@ -19,6 +20,7 @@ function handleCb(cb: AlertPopupProps["onOk"]) {
 export type AlertPopupProps = ModalFuncProps & {
     message: ReactNode
     cancellable?: boolean
+    modalInstance?: HookAPI
 }
 
 export default function AlertPopup({
@@ -29,10 +31,12 @@ export default function AlertPopup({
     onOk,
     onCancel,
     cancellable = true,
+    modalInstance,
     type,
     ...ModalProps
 }: AlertPopupProps) {
-    return Modal[type || "confirm"]({
+    const modalIns = modalInstance as any || Modal;
+    return modalIns[type || "confirm"]({
         title,
         content: message,
         okText,

agenta-web/src/components/pages/evaluations/evaluators/EvaluatorCard.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import {EvaluatorConfig, JSSTheme} from "@/lib/Types"
 import {DeleteOutlined, EditOutlined} from "@ant-design/icons"
-import {Card, Tag, Typography} from "antd"
+import {Card, Tag, Typography, Modal} from "antd"
 import {createUseStyles} from "react-jss"
 import dayjs from "dayjs"
 import Image from "next/image"
@@ -60,11 +60,13 @@ const EvaluatorCard: React.FC<Props> = ({evaluatorConfig, onEdit, onSuccessDelet
     const classes = useStyles()
     const [evaluators] = useAtom(evaluatorsAtom)
     const evaluator = evaluators.find((item) => item.key === evaluatorConfig.evaluator_key)!
+    const [modal, contextHolder] = Modal.useModal()
 
     const onDelete = async () => {
         AlertPopup({
             title: "Delete evaluator",
             message: "Are you sure you want to delete this evaluator?",
+            modalInstance: modal,
             onOk: async () => {
                 if (
                     !(await checkIfResourceValidForDeletion({
@@ -122,6 +124,7 @@ const EvaluatorCard: React.FC<Props> = ({evaluatorConfig, onEdit, onSuccessDelet
                     {evaluatorConfig.name}
                 </Typography.Title>
             </div>
+            {contextHolder}
         </Card>
     )
 }