Unify global modals:

step4: Update useConfirmModals, make sure every  modal.confirm use same style

Author: xuyaqist

frontend/app/[locale]/agents/components/AgentSetupOrchestrator.tsx

@@ -2003,7 +2003,7 @@ export default function AgentSetupOrchestrator({
       content: t("agentConfig.agents.copyConfirmContent", {
         name: agent?.display_name || agent?.name || "",
       }),
-      onConfirm: () => handleCopyAgentFromList(agent),
+      onOk: () => handleCopyAgentFromList(agent),
     });
   };
 
@@ -2326,10 +2326,6 @@ export default function AgentSetupOrchestrator({
         >
           <div className="py-2">
             <div className="flex items-center">
-              <WarningFilled
-                className="text-yellow-500 mt-1 mr-2"
-                style={{ fontSize: "48px" }}
-              />
               <div className="ml-3 mt-2">
                 <div className="text-sm leading-6">
                   {t("businessLogic.config.modal.deleteContent", {

frontend/app/[locale]/agents/components/McpConfigModal.tsx

@@ -34,6 +34,7 @@ import {
   checkMcpServerHealth,
 } from "@/services/mcpService";
 import { McpServer, McpTool } from "@/types/agentConfig";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import log from "@/lib/logger";
 
 const { Text, Title } = Typography;
@@ -43,7 +44,8 @@ export default function McpConfigModal({
   onCancel,
 }: McpConfigModalProps) {
   const { t } = useTranslation("common");
-  const { message, modal } = App.useApp();
+  const { message } = App.useApp();
+  const { confirm } = useConfirmModal();
   const [serverList, setServerList] = useState<McpServer[]>([]);
   const [loading, setLoading] = useState(false);
   const [addingServer, setAddingServer] = useState(false);
@@ -159,16 +161,12 @@ export default function McpConfigModal({
 
   // Delete MCP server
   const handleDeleteServer = async (server: McpServer) => {
-    modal.confirm({
+    confirm({
       title: t("mcpConfig.delete.confirmTitle"),
       content: t("mcpConfig.delete.confirmContent", {
         name: server.service_name,
       }),
       okText: t("common.delete", "Delete"),
-      cancelText: t("common.cancel", "Cancel"),
-      okType: "danger",
-      cancelButtonProps: { disabled: updatingTools },
-      okButtonProps: { disabled: updatingTools, loading: updatingTools },
       onOk: async () => {
         try {
           const result = await deleteMcpServer(

frontend/app/[locale]/chat/components/chatLeftSidebar.tsx

@@ -28,6 +28,7 @@ import {
 import { StaticScrollArea } from "@/components/ui/scrollArea";
 import { USER_ROLES } from "@/const/modelConfig";
 import { useTranslation } from "react-i18next";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import { ConversationListItem, ChatSidebarProps } from "@/types/chat";
 
 // conversation status indicator component
@@ -114,7 +115,7 @@ export function ChatSidebar({
   userRole = USER_ROLES.USER,
 }: ChatSidebarProps) {
   const { t } = useTranslation();
-  const { modal } = App.useApp();
+  const { confirm } = useConfirmModal();
   const router = useRouter();
   const { today, week, older } = categorizeDialogs(conversationList);
   const [editingId, setEditingId] = useState<number | null>(null);
@@ -179,14 +180,9 @@ export function ChatSidebar({
     onDropdownOpenChange(false, null);
 
     // Show confirmation modal
-    modal.confirm({
+    confirm({
       title: t("chatLeftSidebar.confirmDeletionTitle"),
       content: t("chatLeftSidebar.confirmDeletionDescription"),
-      okText: t("common.confirm"),
-      cancelText: t("common.cancel"),
-      okType: "danger",
-      centered: true,
-      maskClosable: false, 
       onOk: () => {
         onDelete(dialogId);
       },

frontend/app/[locale]/knowledges/KnowledgeBaseConfiguration.tsx

@@ -497,7 +497,7 @@ function DataConfig({ isActive }: DataConfigProps) {
       okText: t("common.confirm"),
       cancelText: t("common.cancel"),
       danger: true,
-      onConfirm: async () => {
+      onOk: async () => {
         try {
           await deleteKnowledgeBase(id);
 
@@ -554,7 +554,7 @@ function DataConfig({ isActive }: DataConfigProps) {
       okText: t("common.confirm"),
       cancelText: t("common.cancel"),
       danger: true,
-      onConfirm: async () => {
+      onOk: async () => {
         try {
           await deleteDocument(kbId, docId);
           message.success(t("document.message.deleteSuccess"));

frontend/app/[locale]/space/components/AgentCard.tsx

@@ -23,6 +23,7 @@ import {
 } from "@/services/agentConfigService";
 import { generateAvatarFromName } from "@/lib/avatar";
 import { useAuth } from "@/hooks/useAuth";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import { USER_ROLES } from "@/const/modelConfig";
 import log from "@/lib/logger";
 
@@ -45,8 +46,9 @@ interface AgentCardProps {
 
 export default function AgentCard({ agent, onRefresh, onChat, onEdit }: AgentCardProps) {
   const { t } = useTranslation("common");
-  const { message, modal } = App.useApp();
+  const { message } = App.useApp();
   const { user, isSpeedMode } = useAuth();
+  const { confirm } = useConfirmModal();
 
   const [isDeleting, setIsDeleting] = useState(false);
   const [isExporting, setIsExporting] = useState(false);
@@ -63,15 +65,12 @@ export default function AgentCard({ agent, onRefresh, onChat, onEdit }: AgentCar
 
   // Handle delete agent
   const handleDelete = () => {
-    modal.confirm({
+    confirm({
       title: t("space.deleteConfirm.title", "Delete Agent"),
       content: t(
         "space.deleteConfirm.content",
         `Are you sure you want to delete agent "${agent.display_name}"? This action cannot be undone.`
       ),
-      okText: t("common.confirm", "Confirm"),
-      cancelText: t("common.cancel", "Cancel"),
-      okButtonProps: { danger: true },
       onOk: async () => {
         setIsDeleting(true);
         try {

frontend/components/auth/avatarDropdown.tsx

@@ -14,6 +14,7 @@ import {
 import type { ItemType } from "antd/es/menu/interface";
 
 import { useAuth } from "@/hooks/useAuth";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import { getRoleColor } from "@/lib/auth";
 
 export function AvatarDropdown() {
@@ -22,6 +23,7 @@ export function AvatarDropdown() {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const { t } = useTranslation("common");
   const { modal } = App.useApp();
+  const { confirm } = useConfirmModal();
 
   if (isLoading) {
     return <Spin size="small" />;
@@ -115,11 +117,9 @@ export function AvatarDropdown() {
       icon: <LogoutOutlined />,
       label: t("auth.logout"),
       onClick: () => {
-        modal.confirm({
+        confirm({
           title: t("auth.confirmLogout"),
           content: t("auth.confirmLogoutPrompt"),
-          okText: t("auth.confirm"),
-          cancelText: t("auth.cancel"),
           onOk: () => {
             logout();
           },
@@ -141,13 +141,10 @@ export function AvatarDropdown() {
             okText: t("auth.confirm"),
           });
         } else {
-          modal.confirm({
+          confirm({
             title: t("auth.confirmRevoke"),
             content: t("auth.confirmRevokePrompt"),
-            icon: <CloseCircleFilled style={{ color: "red" }} />,
             okText: t("auth.confirmRevokeOk"),
-            cancelText: t("auth.cancel"),
-            okButtonProps: { danger: true },
             onOk: () => {
               revoke();
             },

frontend/components/auth/sessionListeners.tsx

@@ -7,6 +7,7 @@ import { App, Modal } from "antd";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 
 import { useAuth } from "@/hooks/useAuth";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import { authService } from "@/services/authService";
 import { sessionService } from "@/services/sessionService";
 import { getSessionFromStorage } from "@/lib/auth";
@@ -29,6 +30,7 @@ export function SessionListeners() {
   const { openLoginModal, setIsFromSessionExpired, clearLocalSession, isSpeedMode } =
     useAuth();
   const { modal } = App.useApp();
+  const { confirm } = useConfirmModal();
   const modalShownRef = useRef<boolean>(false);
 
   const isLocaleHomePath = (path?: string | null) => {
@@ -52,7 +54,12 @@ export function SessionListeners() {
       content: t("login.expired.content"),
       okText: t("login.expired.okText"),
       cancelText: t("login.expired.cancelText"),
+      centered: true,
       closable: false,
+      okButtonProps: { 
+        danger: true, 
+        type: "primary"
+      },
       onOk() {
         // Clear local session state (session already expired on backend)
         clearLocalSession();

frontend/hooks/useConfirmModal.ts

@@ -1,7 +1,18 @@
+import { App } from "antd";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+
+import React from "react";
 import i18next from "i18next";
 
-import { App } from "antd";
-import { StaticConfirmProps } from "@/types/setupConfig";
+interface ConfirmProps {
+  title: string;
+  content: React.ReactNode;
+  okText?: string;
+  cancelText?: string;
+  danger?: boolean; // 默认为 true，使用 danger 样式
+  onOk?: () => void;
+  onCancel?: () => void;
+}
 
 export const useConfirmModal = () => {
   const { modal } = App.useApp();
@@ -11,20 +22,25 @@ export const useConfirmModal = () => {
     content,
     okText,
     cancelText,
-    danger = false,
-    onConfirm,
+    danger = true,
+    onOk,
     onCancel,
-  }: StaticConfirmProps) => {
+  }: ConfirmProps) => {
     return modal.confirm({
       title,
       content,
+      centered: true,
+      icon: React.createElement(ExclamationCircleFilled),
       okText: okText || i18next.t("common.confirm"),
       cancelText: cancelText || i18next.t("common.cancel"),
-      okButtonProps: { danger },
-      onOk: onConfirm,
+      okButtonProps: { 
+        danger, 
+        type: "primary"
+      },
+      onOk: onOk,
       onCancel,
     });
   };
 
   return { confirm };
-};
+};