finish up dialogs

frontend/src/app/settings/page.tsx

@@ -17,7 +17,6 @@ import {
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
 import { useAuth } from "@/contexts/auth-context";
 import { useTask } from "@/contexts/task-context";
 
@@ -90,10 +89,6 @@ function KnowledgeSourcesPage() {
   const [langflowEditUrl, setLangflowEditUrl] = useState<string>("");
   const [publicLangflowUrl, setPublicLangflowUrl] = useState<string>("");
 
-  // Knowledge Ingest settings
-  const [ocrEnabled, setOcrEnabled] = useState<boolean>(false);
-  const [pictureDescriptionsEnabled, setPictureDescriptionsEnabled] =
-    useState<boolean>(false);
 
   // Fetch settings from backend
   const fetchSettings = useCallback(async () => {
@@ -388,7 +383,7 @@ function KnowledgeSourcesPage() {
     }
   }, [tasks, prevTasks]);
 
-  const handleEditInLangflow = () => {
+  const handleEditInLangflow = (targetFlowId: string, closeDialog: () => void) => {
     const derivedFromWindow =
       typeof window !== "undefined"
         ? `${window.location.protocol}//${window.location.hostname}:7860`
@@ -398,21 +393,39 @@ function KnowledgeSourcesPage() {
       derivedFromWindow ||
       "http://localhost:7860"
     ).replace(/\/$/, "");
-    const computed = flowId ? `${base}/flow/${flowId}` : base;
+    const computed = targetFlowId ? `${base}/flow/${targetFlowId}` : base;
     const url = langflowEditUrl || computed;
     window.open(url, "_blank");
+    closeDialog(); // Close immediately after opening Langflow
   };
 
-  const handleRestoreFlow = () => {
+  const handleRestoreFlow = (closeDialog: () => void) => {
     fetch(`/api/reset-flow/retrieval`, {
       method: "POST",
     })
       .then((response) => response.json())
       .then((data) => {
         console.log(data);
+        closeDialog(); // Close after successful completion
       })
       .catch((error) => {
         console.error("Error restoring flow:", error);
+        closeDialog(); // Close even on error (could show error toast instead)
+      });
+  };
+
+  const handleRestoreAgentFlow = (closeDialog: () => void) => {
+    fetch(`/api/reset-flow/agent`, {
+      method: "POST",
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        closeDialog(); // Close after successful completion
+      })
+      .catch((error) => {
+        console.error("Error restoring agent flow:", error);
+        closeDialog(); // Close even on error (could show error toast instead)
       });
   };
 
@@ -466,12 +479,13 @@ function KnowledgeSourcesPage() {
                 title="Edit Ingest flow in Langflow"
                 description="You're entering Langflow. You can edit the Ingest flow and other underlying flows. Manual changes to components, wiring, or I/O can break this experience."
                 confirmText="Proceed"
-                onConfirm={handleEditInLangflow}
+                onConfirm={(closeDialog) => handleEditInLangflow(flowId, closeDialog)}
               />
             </div>
           </div>
         </CardHeader>
-        <CardContent>
+        {/* Hidden for now */}
+        {/* <CardContent>
           <div className="space-y-8">
             <div className="flex items-center justify-between">
               <div className="space-y-0.5">
@@ -510,7 +524,7 @@ function KnowledgeSourcesPage() {
               />
             </div>
           </div>
-        </CardContent>
+        </CardContent> */}
       </Card>
 
       {/* Agent Behavior Section */}
@@ -523,22 +537,18 @@ function KnowledgeSourcesPage() {
                 Adjust your retrieval agent flow
               </CardDescription>
             </div>
-            <Button
+            <div className="flex gap-2">
-              onClick={() => {
+              <ConfirmationDialog
-                const derivedFromWindow =
+                trigger={<Button variant="secondary">Restore flow</Button>}
-                  typeof window !== "undefined"
+                title="Restore default Agent flow"
-                    ? `${window.location.protocol}//${window.location.hostname}:7860`
+                description="This restores defaults and discards all custom settings and overrides. This can't be undone."
-                    : "";
+                confirmText="Restore"
-                const base = (
+                variant="destructive"
-                  publicLangflowUrl ||
+                onConfirm={handleRestoreAgentFlow}
-                  derivedFromWindow ||
+              />
-                  "http://localhost:7860"
+              <ConfirmationDialog
-                ).replace(/\/$/, "");
+                trigger={
-                const computed = flowId ? `${base}/flow/${flowId}` : base;
+                  <Button>
-                const url = langflowEditUrl || computed;
-                window.open(url, "_blank");
-              }}
-            >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="24"
@@ -561,6 +571,13 @@ function KnowledgeSourcesPage() {
                     </svg>
                     Edit in Langflow
                   </Button>
+                }
+                title="Edit Agent flow in Langflow"
+                description="You're entering Langflow. You can edit the Agent flow and other underlying flows. Manual changes to components, wiring, or I/O can break this experience."
+                confirmText="Proceed"
+                onConfirm={(closeDialog) => handleEditInLangflow(flowId, closeDialog)}
+              />
+            </div>
           </div>
         </CardHeader>
       </Card>

frontend/src/components/confirmation-dialog.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ReactNode } from "react"
+import { ReactNode, useState } from "react"
 import {
   Dialog,
   DialogContent,
@@ -18,7 +18,7 @@ interface ConfirmationDialogProps {
   description: string
   confirmText?: string
   cancelText?: string
-  onConfirm: () => void
+  onConfirm: (closeDialog: () => void) => void
   onCancel?: () => void
   variant?: "default" | "destructive"
 }
@@ -33,8 +33,20 @@ export function ConfirmationDialog({
   onCancel,
   variant = "default"
 }: ConfirmationDialogProps) {
+  const [open, setOpen] = useState(false)
+
+  const handleConfirm = () => {
+    const closeDialog = () => setOpen(false)
+    onConfirm(closeDialog)
+  }
+
+  const handleCancel = () => {
+    onCancel?.()
+    setOpen(false)
+  }
+
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         {trigger}
       </DialogTrigger>
@@ -48,13 +60,13 @@ export function ConfirmationDialog({
         <DialogFooter>
           <Button
             variant="outline"
-            onClick={onCancel}
+            onClick={handleCancel}
           >
             {cancelText}
           </Button>
           <Button
             variant={variant}
-            onClick={onConfirm}
+            onClick={handleConfirm}
           >
             {confirmText}
           </Button>