Move import instance configuration to InstanceDialog component

webui/src/components/InstanceDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -12,6 +12,7 @@ import { BackendType, type CreateInstanceOptions, type Instance } from "@/types/
 import ParseCommandDialog from "@/components/ParseCommandDialog";
 import InstanceSettingsCard from "@/components/instance/InstanceSettingsCard";
 import BackendConfigurationCard from "@/components/instance/BackendConfigurationCard";
+import { Upload } from "lucide-react";
 
 interface InstanceDialogProps {
   open: boolean;
@@ -32,6 +33,7 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
   const [formData, setFormData] = useState<CreateInstanceOptions>({});
   const [nameError, setNameError] = useState("");
   const [showParseDialog, setShowParseDialog] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
 
   // Reset form when dialog opens/closes or when instance changes
@@ -153,6 +155,49 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
     setShowParseDialog(false);
   };
 
+  const handleImportFile = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const content = e.target?.result as string;
+        const importedData = JSON.parse(content);
+
+        // Validate that it's an instance export
+        if (!importedData.name || !importedData.options) {
+          alert('Invalid instance file: Missing required fields (name, options)');
+          return;
+        }
+
+        // Set the instance name (only for new instances, not editing)
+        if (!isEditing) {
+          handleNameChange(importedData.name);
+        }
+
+        // Populate all the options from the imported file
+        if (importedData.options) {
+          setFormData(prev => ({
+            ...prev,
+            ...importedData.options,
+          }));
+        }
+
+        // Reset the file input
+        event.target.value = '';
+      } catch (error) {
+        console.error('Failed to parse instance file:', error);
+        alert(`Failed to parse instance file: ${error instanceof Error ? error.message : 'Invalid JSON'}`);
+      }
+    };
+
+    reader.readAsText(file);
+  };
 
   // Save button label logic
   let saveButtonLabel = "Create Instance";
@@ -168,14 +213,38 @@ const InstanceDialog: React.FC<InstanceDialogProps> = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-hidden flex flex-col">
         <DialogHeader>
-          <DialogTitle>
-            {isEditing ? "Edit Instance" : "Create New Instance"}
-          </DialogTitle>
-          <DialogDescription>
-            {isEditing
-              ? "Modify the instance configuration below."
-              : "Configure your new llama-server instance below."}
-          </DialogDescription>
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <DialogTitle>
+                {isEditing ? "Edit Instance" : "Create New Instance"}
+              </DialogTitle>
+              <DialogDescription>
+                {isEditing
+                  ? "Modify the instance configuration below."
+                  : "Configure your new llama-server instance below."}
+              </DialogDescription>
+            </div>
+            {!isEditing && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleImportFile}
+                title="Import instance configuration from JSON file"
+                className="ml-2"
+              >
+                <Upload className="h-4 w-4 mr-2" />
+                Import
+              </Button>
+            )}
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".json"
+            onChange={handleFileChange}
+            className="hidden"
+          />
         </DialogHeader>
 
         <div className="flex-1 overflow-y-auto">