♻️ Unify global modal, delete unused code

Author: Phinease

frontend/app/[locale]/agents/AgentsContent.tsx

@@ -9,7 +9,6 @@ import {
 } from "@/const/modelConfig";
 
 import AgentConfig, {AgentConfigHandle} from "./AgentConfiguration";
-import SaveConfirmModal from "./components/SaveConfirmModal";
 
 interface AgentsContentProps {
   /** Whether currently saving */
@@ -39,8 +38,6 @@ export default forwardRef<AgentConfigHandle, AgentsContentProps>(function Agents
   onSavingStateChange,
 }: AgentsContentProps, ref) {
   const agentConfigRef = useRef<AgentConfigHandle | null>(null);
-  const [showSaveConfirm, setShowSaveConfirm] = useState(false);
-  const pendingNavRef = useRef<null | (() => void)>(null);
 
   // Use custom hook for common setup flow logic
   const {
@@ -95,32 +92,6 @@ export default forwardRef<AgentConfigHandle, AgentsContentProps>(function Agents
           ) : null}
         </div>
       </motion.div>
-
-      <SaveConfirmModal
-        open={showSaveConfirm}
-        onCancel={async () => {
-          // Reload data from backend to discard changes
-          await agentConfigRef.current?.reloadCurrentAgentData?.();
-          setShowSaveConfirm(false);
-          const go = pendingNavRef.current;
-          pendingNavRef.current = null;
-          if (go) go();
-        }}
-        onSave={async () => {
-          try {
-            setInternalIsSaving(true);
-            await agentConfigRef.current?.saveAllChanges?.();
-            setShowSaveConfirm(false);
-            const go = pendingNavRef.current;
-            pendingNavRef.current = null;
-            if (go) go();
-          } catch (e) {
-            // errors are surfaced by underlying save
-          } finally {
-            setInternalIsSaving(false);
-          }
-        }}
-      />
     </>
   );
 });

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

@@ -118,9 +118,7 @@ export default function AgentSetupOrchestrator({
 
 
 
-  // Embedding auto-unselect notice modal
-  const [isEmbeddingAutoUnsetOpen, setIsEmbeddingAutoUnsetOpen] =
-    useState(false);
+
   const lastProcessedAgentIdForEmbedding = useRef<number | null>(null);
 
   // Flag to track if we need to refresh enabledToolIds after tools update
@@ -672,7 +670,12 @@ export default function AgentSetupOrchestrator({
       } catch (error) {
         // Even if API fails, still inform user and prevent usage in UI
       } finally {
-        setIsEmbeddingAutoUnsetOpen(true);
+        confirm({
+          title: t("embedding.agentToolAutoDeselectModal.title"),
+          content: t("embedding.agentToolAutoDeselectModal.content"),
+          okText: t("common.confirm"),
+          onOk: () => {},
+        });
         lastProcessedAgentIdForEmbedding.current = currentAgentId;
       }
     };
@@ -2011,32 +2014,6 @@ export default function AgentSetupOrchestrator({
     });
   };
 
-  // Handle exit edit mode
-  const handleExitEdit = () => {
-    setIsEditingAgent(false);
-    setEditingAgent(null);
-    // Use the parent's exit creation handler to properly clear cache
-    if (isCreatingNewAgent && onExitCreation) {
-      onExitCreation();
-    } else {
-      setIsCreatingNewAgent(false);
-    }
-    setBusinessLogic("");
-    setDutyContent("");
-    setConstraintContent("");
-    setFewShotsContent("");
-    setAgentName?.("");
-    setAgentDescription?.("");
-    // Reset mainAgentId and enabledAgentIds
-    setMainAgentId(null);
-    setEnabledAgentIds([]);
-    // Reset selected tools
-    setSelectedTools([]);
-    setEnabledToolIds([]);
-    // Notify parent component about editing state change
-    onEditingStateChange?.(false, null);
-  };
-
   // Refresh tool list
   const handleToolsRefresh = useCallback(
     async (showSuccessMessage = true) => {
@@ -2295,8 +2272,6 @@ export default function AgentSetupOrchestrator({
               isCreatingNewAgent={isCreatingNewAgent}
               canSaveAgent={localCanSaveAgent}
               getButtonTitle={getLocalButtonTitle}
-              onDeleteAgent={onDeleteAgent || (() => {})}
-              onDeleteSuccess={handleExitEdit}
               editingAgent={editingAgentFromParent || editingAgent}
               onViewCallRelationship={handleViewCallRelationship}
             />
@@ -2443,37 +2418,7 @@ export default function AgentSetupOrchestrator({
           }
         />
         {/* Auto unselect knowledge_base_search notice when embedding not configured */}
-        <Modal
-          title={t("embedding.agentToolAutoDeselectModal.title")}
-          open={isEmbeddingAutoUnsetOpen}
-          onCancel={() => setIsEmbeddingAutoUnsetOpen(false)}
-          centered
-          footer={
-            <div className="flex justify-end mt-6 gap-4">
-              <Button
-                type="primary"
-                onClick={() => setIsEmbeddingAutoUnsetOpen(false)}
-              >
-                {t("common.confirm")}
-              </Button>
-            </div>
-          }
-          width={520}
-        >
-          <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("embedding.agentToolAutoDeselectModal.content")}
-                </div>
-              </div>
-            </div>
-          </div>
-        </Modal>
+
         {/* Agent call relationship modal */}
         <AgentCallRelationshipModal
           visible={callRelationshipModalVisible}

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

@@ -17,7 +17,7 @@ import { updateAgent } from "@/services/agentConfigService";
 import { modelService } from "@/services/modelService";
 import { ModelOption } from "@/types/modelConfig";
 
-import AgentConfigModal from "./agent/AgentConfigModal";
+import AgentConfigModal, { AgentConfigModalProps } from "./agent/AgentConfigModal";
 
 import log from "@/lib/logger";
 
@@ -229,8 +229,6 @@ export interface PromptManagerProps {
   onGenerateAgent?: (model: ModelOption) => void;
   onSaveAgent?: () => void;
   onDebug?: () => void;
-  onDeleteAgent?: () => void;
-  onDeleteSuccess?: () => void;
   getButtonTitle?: () => string;
   onViewCallRelationship?: () => void;
 
@@ -276,8 +274,6 @@ export default function PromptManager({
   onGenerateAgent,
   onSaveAgent,
   onDebug,
-  onDeleteAgent,
-  onDeleteSuccess,
   getButtonTitle,
   onViewCallRelationship,
   editingAgent,
@@ -692,8 +688,6 @@ export default function PromptManager({
             onExpandCard={handleExpandCard}
             isGeneratingAgent={isGeneratingAgent}
             onDebug={onDebug}
-            onDeleteAgent={onDeleteAgent}
-            onDeleteSuccess={onDeleteSuccess}
             onSaveAgent={onSaveAgent}
             isCreatingNewAgent={isCreatingNewAgent}
             editingAgent={editingAgent}

frontend/app/[locale]/agents/components/agent/AgentConfigModal.tsx

@@ -48,8 +48,6 @@ export interface AgentConfigModalProps {
   isGeneratingAgent?: boolean;
   // Add new props for action buttons
   onDebug?: () => void;
-  onDeleteAgent?: () => void;
-  onDeleteSuccess?: () => void; // New prop for handling delete success
   onSaveAgent?: () => void;
   isCreatingNewAgent?: boolean;
   editingAgent?: Agent | null;
@@ -84,8 +82,6 @@ export default function AgentConfigModal({
   isGeneratingAgent = false,
   // Add new props for action buttons
   onDebug,
-  onDeleteAgent,
-  onDeleteSuccess,
   onSaveAgent,
   isCreatingNewAgent = false,
   editingAgent = null,
@@ -107,9 +103,6 @@ export default function AgentConfigModal({
   // Add segmented state management
   const [activeSegment, setActiveSegment] = useState<string>("agent-info");
 
-  // Add state for delete confirmation modal
-  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
-
   // Add state for agent name validation error
   const [agentNameError, setAgentNameError] = useState<string>("");
   // Add state for agent name status check
@@ -473,16 +466,6 @@ export default function AgentConfigModal({
     }
   }, [isCreatingNewAgent, currentDisplayName, originalDisplayName]);
 
-  // Handle delete confirmation
-  const handleDeleteConfirm = useCallback(() => {
-    setIsDeleteModalVisible(false);
-    // Execute the delete operation
-    onDeleteAgent?.();
-    // Call the success callback immediately after triggering delete
-    // The actual success/failure will be handled by the parent component
-    onDeleteSuccess?.();
-  }, [onDeleteAgent, onDeleteSuccess]);
-
   // Optimized click handlers using useCallback
   const handleSegmentClick = useCallback((segment: string) => {
     setActiveSegment(segment);
@@ -1196,25 +1179,6 @@ export default function AgentConfigModal({
           </div>
         </div>
       )}
-
-      {/* Delete Confirmation Modal */}
-      <Modal
-        title={t("businessLogic.config.modal.deleteTitle")}
-        open={isDeleteModalVisible}
-        onOk={handleDeleteConfirm}
-        onCancel={() => setIsDeleteModalVisible(false)}
-        okText={t("businessLogic.config.modal.button.confirm")}
-        cancelText={t("businessLogic.config.modal.button.cancel")}
-        okButtonProps={{
-          danger: true,
-        }}
-      >
-        <p>
-          {t("businessLogic.config.modal.deleteContent", {
-            name: agentName || "Unnamed Agent",
-          })}
-        </p>
-      </Modal>
     </div>
   );
 }

frontend/app/[locale]/knowledges/components/document/DocumentChunk.tsx

@@ -16,7 +16,7 @@ import {
   Pagination,
   Input,
 } from "antd";
-import { WarningFilled } from "@ant-design/icons";
+import { useConfirmModal } from "@/hooks/useConfirmModal";
 import {
   Download,
   ScanText,
@@ -81,6 +81,7 @@ const DocumentChunk: React.FC<DocumentChunkProps> = ({
 }) => {
   const { t } = useTranslation();
   const { message } = App.useApp();
+  const { confirm } = useConfirmModal();
   const [chunks, setChunks] = useState<Chunk[]>([]);
   const [total, setTotal] = useState<number>(0);
   const [loading, setLoading] = useState(false);
@@ -107,8 +108,6 @@ const DocumentChunk: React.FC<DocumentChunkProps> = ({
   const [chunkSubmitting, setChunkSubmitting] = useState(false);
   const [editingChunk, setEditingChunk] = useState<Chunk | null>(null);
   const [chunkForm] = Form.useForm<ChunkFormValues>();
-  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
-  const [chunkToDelete, setChunkToDelete] = useState<Chunk | null>(null);
   const [tooltipResetKey, setTooltipResetKey] = useState(0);
 
   const resetChunkSearch = React.useCallback(() => {
@@ -455,39 +454,32 @@ const DocumentChunk: React.FC<DocumentChunkProps> = ({
     }
 
     forceCloseTooltips();
-    setChunkToDelete(chunk);
-    setDeleteModalOpen(true);
-  };
-
-  const handleDeleteConfirm = async () => {
-    if (!chunkToDelete?.id || !knowledgeBaseName) {
-      return;
-    }
-
-    try {
-      await knowledgeBaseService.deleteChunk(
-        knowledgeBaseName,
-        chunkToDelete.id
-      );
-      message.success(t("document.chunk.success.delete"));
-      setDeleteModalOpen(false);
-      setChunkToDelete(null);
-      forceCloseTooltips();
-      await refreshChunks();
-    } catch (error) {
-      log.error("Failed to delete chunk:", error);
-      message.error(
-        error instanceof Error && error.message
-          ? error.message
-          : t("document.chunk.error.deleteFailed")
-      );
-    }
-  };
-
-  const handleDeleteCancel = () => {
-    setDeleteModalOpen(false);
-    setChunkToDelete(null);
-    forceCloseTooltips();
+    
+    confirm({
+      title: t("document.chunk.confirm.deleteTitle"),
+      content: t("document.chunk.confirm.deleteContent"),
+      okText: t("common.delete"),
+      cancelText: t("common.cancel"),
+      danger: true,
+      onOk: async () => {
+        try {
+          await knowledgeBaseService.deleteChunk(knowledgeBaseName, chunk.id);
+          message.success(t("document.chunk.success.delete"));
+          forceCloseTooltips();
+          await refreshChunks();
+        } catch (error) {
+          log.error("Failed to delete chunk:", error);
+          message.error(
+            error instanceof Error && error.message
+              ? error.message
+              : t("document.chunk.error.deleteFailed")
+          );
+        }
+      },
+      onCancel: () => {
+        forceCloseTooltips();
+      },
+    });
   };
 
   const renderDocumentLabel = (doc: Document, chunkCount: number) => {
@@ -847,34 +839,7 @@ const DocumentChunk: React.FC<DocumentChunkProps> = ({
           </Form.Item>
         </Form>
       </Modal>
-      <Modal
-        title={t("document.chunk.confirm.deleteTitle")}
-        open={deleteModalOpen}
-        onCancel={handleDeleteCancel}
-        centered
-        footer={
-          <div className="flex justify-end mt-6 gap-4">
-            <Button onClick={handleDeleteCancel}>{t("common.cancel")}</Button>
-            <Button type="primary" danger onClick={handleDeleteConfirm}>
-              {t("common.delete")}
-            </Button>
-          </div>
-        }
-      >
-        <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("document.chunk.confirm.deleteContent")}
-              </div>
-            </div>
-          </div>
-        </div>
-      </Modal>
+
     </TooltipProvider>
   );
 };