♻️ Unify dialog&modal

Author: Phinease

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/chatHeader.tsx

@@ -14,8 +14,6 @@ import { useAuth } from "@/hooks/useAuth";
 import { USER_ROLES } from "@/const/modelConfig";
 import { saveView } from "@/lib/viewPersistence";
 
-import MemoryManageModal from "../internal/memory/memoryManageModal";
-
 interface ChatHeaderProps {
   title: string;
   onRename?: (newTitle: string) => void;
@@ -25,8 +23,7 @@ export function ChatHeader({ title, onRename }: ChatHeaderProps) {
   const router = useRouter();
   const [isEditing, setIsEditing] = useState(false);
   const [editTitle, setEditTitle] = useState(title);
-  const [memoryModalVisible, setMemoryModalVisible] = useState(false);
-  const [embeddingConfigured, setEmbeddingConfigured] = useState<boolean>(true);
+
   const [showConfigPrompt, setShowConfigPrompt] = useState(false);
   const [showAutoOffPrompt, setShowAutoOffPrompt] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -62,9 +59,8 @@ export function ChatHeader({ title, onRename }: ChatHeaderProps) {
       const modelConfig = configStore.getModelConfig();
       const configured = Boolean(
         modelConfig?.embedding?.modelName ||
-          modelConfig?.multiEmbedding?.modelName
+        modelConfig?.multiEmbedding?.modelName
       );
-      setEmbeddingConfigured(configured);
 
       if (!configured) {
         // If memory switch is on, turn it off automatically and notify the user
@@ -85,7 +81,6 @@ export function ChatHeader({ title, onRename }: ChatHeaderProps) {
           });
       }
     } catch (e) {
-      setEmbeddingConfigured(false);
       log.error("Failed to read model config for embedding check", e);
     }
   }, []);
@@ -227,10 +222,6 @@ export function ChatHeader({ title, onRename }: ChatHeaderProps) {
           </div>
         </div>
       </Modal>
-      <MemoryManageModal
-        visible={memoryModalVisible}
-        onClose={() => setMemoryModalVisible(false)}
-      />
     </>
   );
 }

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

@@ -18,14 +18,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdownMenu";
 import { Input } from "@/components/ui/input";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { App } from "antd";
 import {
   Tooltip,
   TooltipContent,
@@ -35,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
@@ -68,7 +62,6 @@ const ConversationStatusIndicator = ({
   return null;
 };
 
-
 // Helper function - dialog classification
 const categorizeDialogs = (dialogs: ConversationListItem[]) => {
   const now = new Date();
@@ -122,16 +115,13 @@ export function ChatSidebar({
   userRole = USER_ROLES.USER,
 }: ChatSidebarProps) {
   const { t } = useTranslation();
+  const { confirm } = useConfirmModal();
   const router = useRouter();
   const { today, week, older } = categorizeDialogs(conversationList);
   const [editingId, setEditingId] = useState<number | null>(null);
   const [editingTitle, setEditingTitle] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // Add delete dialog status
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [dialogToDelete, setDialogToDelete] = useState<number | null>(null);
-
   const [animationComplete, setAnimationComplete] = useState(false);
 
   useEffect(() => {
@@ -186,19 +176,17 @@ export function ChatSidebar({
 
   // Handle delete click
   const handleDeleteClick = (dialogId: number) => {
-    setDialogToDelete(dialogId);
-    setIsDeleteDialogOpen(true);
     // Close dropdown menus
     onDropdownOpenChange(false, null);
-  };
 
-  // Confirm delete
-  const confirmDelete = () => {
-    if (dialogToDelete !== null) {
-      onDelete(dialogToDelete);
-      setIsDeleteDialogOpen(false);
-      setDialogToDelete(null);
-    }
+    // Show confirmation modal
+    confirm({
+      title: t("chatLeftSidebar.confirmDeletionTitle"),
+      content: t("chatLeftSidebar.confirmDeletionDescription"),
+      onOk: () => {
+        onDelete(dialogId);
+      },
+    });
   };
 
   // Render dialog list items
@@ -439,31 +427,6 @@ export function ChatSidebar({
           renderCollapsedSidebar()
         )}
       </div>
-
-      {/* Delete confirmation dialog */}
-      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>
-              {t("chatLeftSidebar.confirmDeletionTitle")}
-            </DialogTitle>
-            <DialogDescription>
-              {t("chatLeftSidebar.confirmDeletionDescription")}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setIsDeleteDialogOpen(false)}
-            >
-              {t("chatLeftSidebar.cancel")}
-            </Button>
-            <Button variant="destructive" onClick={confirmDelete}>
-              {t("chatLeftSidebar.delete")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </>
   );
 }