Merge pull request #1431 from VenkataRavitejaGullapudi/main

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

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

@@ -2,6 +2,8 @@ import React, {ReactNode} from "react"
 import {Modal, ModalFuncProps} from "antd"
 import {ExclamationCircleOutlined} from "@ant-design/icons"
 import {globalErrorHandler} from "@/lib/helpers/errorHandler"
+import {getAppValues, useAppsData} from "@/contexts/app.context"
+import {HookAPI} from "antd/es/modal/useModal"
 
 function handleCb(cb: AlertPopupProps["onOk"]) {
     if (typeof cb !== "function") return cb
@@ -19,6 +21,7 @@ function handleCb(cb: AlertPopupProps["onOk"]) {
 export type AlertPopupProps = ModalFuncProps & {
     message: ReactNode
     cancellable?: boolean
+    type?: keyof HookAPI
 }
 
 export default function AlertPopup({
@@ -32,7 +35,10 @@ export default function AlertPopup({
     type,
     ...ModalProps
 }: AlertPopupProps) {
-    return Modal[type || "confirm"]({
+    const {modalInstance} = getAppValues()
+    const modal = modalInstance || Modal
+
+    return modal[type || "confirm"]({
         title,
         content: message,
         okText,

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

@@ -1,5 +1,15 @@
 import React, {useEffect, useMemo, useState} from "react"
-import {Breadcrumb, Button, ConfigProvider, Dropdown, Layout, Space, Tooltip, theme} from "antd"
+import {
+    Breadcrumb,
+    Button,
+    ConfigProvider,
+    Dropdown,
+    Layout,
+    Modal,
+    Space,
+    Tooltip,
+    theme,
+} from "antd"
 import Sidebar from "../Sidebar/Sidebar"
 import {GithubFilled, LinkedinFilled, TwitterOutlined} from "@ant-design/icons"
 import Link from "next/link"
@@ -117,7 +127,7 @@ type LayoutProps = {
 const App: React.FC<LayoutProps> = ({children}) => {
     const {user} = useProfileData()
     const {appTheme, themeMode, toggleAppTheme} = useAppTheme()
-    const {currentApp} = useAppsData()
+    const {currentApp, setModalInstance} = useAppsData()
     const capitalizedAppName = renameVariablesCapitalizeAll(currentApp?.app_name || "")
     const [footerRef, {height: footerHeight}] = useElementSize()
     const classes = useStyles({themeMode: appTheme, footerHeight} as StyleProps)
@@ -126,6 +136,7 @@ const App: React.FC<LayoutProps> = ({children}) => {
     const appId = router.query.app_id as string
     const isDarkTheme = appTheme === "dark"
     const {token} = theme.useToken()
+    const [modal, contextHolder] = Modal.useModal()
 
     useEffect(() => {
         if (user && isDemo()) {
@@ -192,6 +203,8 @@ const App: React.FC<LayoutProps> = ({children}) => {
             }
         }
         githubRepo()
+
+        setModalInstance(modal)
     }, [])
 
     useEffect(() => {
@@ -284,6 +297,7 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                 </Space>
                                 <ErrorBoundary FallbackComponent={ErrorFallback}>
                                     {children}
+                                    {contextHolder}
                                 </ErrorBoundary>
                             </Content>
                             <Footer ref={footerRef} className={classes.footer}>

agenta-web/src/contexts/app.context.tsx

@@ -5,13 +5,17 @@ import {useRouter} from "next/router"
 import {PropsWithChildren, createContext, useContext, useEffect, useMemo, useState} from "react"
 import useSWR from "swr"
 import {dynamicContext} from "@/lib/helpers/dynamic"
+import {HookAPI} from "antd/es/modal/useModal"
 
 type AppContextType = {
     currentApp: ListAppsItem | null
     apps: ListAppsItem[]
     error: any
     isLoading: boolean
     mutate: () => void
+
+    modalInstance?: HookAPI
+    setModalInstance: (context: any) => void
 }
 
 const initialValues: AppContextType = {
@@ -20,6 +24,8 @@ const initialValues: AppContextType = {
     error: null,
     isLoading: false,
     mutate: () => {},
+
+    setModalInstance: (context) => {},
 }
 
 const useApps = () => {
@@ -68,14 +74,20 @@ const AppContextProvider: React.FC<PropsWithChildren> = ({children}) => {
         [apps, appId],
     )
 
+    const [modalInstance, setModalInstance] = useState()
+
     appContextValues.currentApp = currentApp
     appContextValues.apps = apps
     appContextValues.error = error
     appContextValues.isLoading = isLoading
     appContextValues.mutate = mutate
+    appContextValues.modalInstance = modalInstance
+    appContextValues.setModalInstance = setModalInstance
 
     return (
-        <AppContext.Provider value={{currentApp, apps, error, isLoading, mutate}}>
+        <AppContext.Provider
+            value={{currentApp, apps, error, isLoading, mutate, modalInstance, setModalInstance}}
+        >
             {children}
         </AppContext.Provider>
     )