Merge pull request #6493 from menloresearch/fix/edit-dialog

chore: prevent click outside for edit dialog

web-app/src/containers/dialogs/AddEditAssistant.tsx

@@ -236,7 +236,11 @@ export default function AddEditAssistant({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent
+        onInteractOutside={(e) => {
+          e.preventDefault()
+        }}
+      >
         <DialogHeader>
           <DialogTitle>
             {editingKey

web-app/src/containers/dialogs/AddEditMCPServer.tsx

@@ -303,11 +303,16 @@ export default function AddEditMCPServer({
           const serverConfig = config as MCPServerConfig
 
           // Validate type field if present
-          if (serverConfig.type && !['stdio', 'http', 'sse'].includes(serverConfig.type)) {
+          if (
-            setError(t('mcp-servers:editJson.errorInvalidType', {
+            serverConfig.type &&
+            !['stdio', 'http', 'sse'].includes(serverConfig.type)
+          ) {
+            setError(
+              t('mcp-servers:editJson.errorInvalidType', {
                 serverName: trimmedServerName,
-              type: serverConfig.type
+                type: serverConfig.type,
-            }))
+              })
+            )
             return
           }
 
@@ -366,7 +371,12 @@ export default function AddEditMCPServer({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent showCloseButton={false}>
+      <DialogContent
+        showCloseButton={false}
+        onInteractOutside={(e) => {
+          e.preventDefault()
+        }}
+      >
         <DialogHeader>
           <DialogTitle className="flex items-center justify-between">
             <span>

web-app/src/containers/dialogs/EditJsonMCPserver.tsx

@@ -61,7 +61,11 @@ export default function EditJsonMCPserver({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent
+        onInteractOutside={(e) => {
+          e.preventDefault()
+        }}
+      >
         <DialogHeader>
           <DialogTitle>
             {serverName

web-app/src/containers/dialogs/ImportVisionModelDialog.tsx

@@ -44,10 +44,8 @@ export const ImportVisionModelDialog = ({
   >(null)
   const [isValidatingMmproj, setIsValidatingMmproj] = useState(false)
 
-  const validateGgufFile = useCallback(async (
+  const validateGgufFile = useCallback(
-    filePath: string,
+    async (filePath: string, fileType: 'model' | 'mmproj'): Promise<void> => {
-    fileType: 'model' | 'mmproj'
-  ): Promise<void> => {
       if (fileType === 'model') {
         setIsValidating(true)
         setValidationError(null)
@@ -98,10 +96,12 @@ export const ImportVisionModelDialog = ({
             // Import the readGgufMetadata function directly from Tauri
             const { invoke } = await import('@tauri-apps/api/core')
 
-          const metadata = await invoke('plugin:llamacpp|read_gguf_metadata', {
+            const metadata = await invoke(
+              'plugin:llamacpp|read_gguf_metadata',
+              {
                 path: filePath,
-          })
+              }
-
+            )
 
             // Check if architecture matches expected type
             const architecture = (
@@ -135,9 +135,14 @@ export const ImportVisionModelDialog = ({
               })
             }
           } catch (directError) {
-          console.error('Failed to validate mmproj file directly:', directError)
+            console.error(
+              'Failed to validate mmproj file directly:',
+              directError
+            )
             const errorMessage = `Failed to read MMProj metadata: ${
-            directError instanceof Error ? directError.message : 'Unknown error'
+              directError instanceof Error
+                ? directError.message
+                : 'Unknown error'
             }`
             setMmprojValidationError(errorMessage)
           }
@@ -158,15 +163,23 @@ export const ImportVisionModelDialog = ({
           setIsValidatingMmproj(false)
         }
       }
-  }, [modelName, serviceHub])
+    },
+    [modelName, serviceHub]
+  )
 
-  const validateModelFile = useCallback(async (filePath: string): Promise<void> => {
+  const validateModelFile = useCallback(
+    async (filePath: string): Promise<void> => {
       await validateGgufFile(filePath, 'model')
-  }, [validateGgufFile])
+    },
+    [validateGgufFile]
+  )
 
-  const validateMmprojFile = useCallback(async (filePath: string): Promise<void> => {
+  const validateMmprojFile = useCallback(
+    async (filePath: string): Promise<void> => {
       await validateGgufFile(filePath, 'mmproj')
-  }, [validateGgufFile])
+    },
+    [validateGgufFile]
+  )
 
   const handleFileSelect = async (type: 'model' | 'mmproj') => {
     const selectedFile = await serviceHub.dialog().open({
@@ -291,7 +304,11 @@ export const ImportVisionModelDialog = ({
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent>
+      <DialogContent
+        onInteractOutside={(e) => {
+          e.preventDefault()
+        }}
+      >
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             Import Model