feat: Import Presets from NewConversationMenu

feat(FileUpload.jsx): add support for importing JSON files and fetching presets after import
feat(NewConversationMenu.jsx): add FileUpload component to select and import JSON files
feat(fetchers.js): add handleFileSelected function to handle importing JSON files and uploading presets to the server

client/src/components/Input/Endpoints/FileUpload.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useSetRecoilState } from 'recoil';
+import { FileUp } from 'lucide-react';
+import store from '~/store';
+import axios from 'axios';
+
+async function fetchPresets(callback) {
+  try {
+    const response = await axios.get('/api/presets', {
+      timeout: 1000,
+      withCredentials: true
+    });
+
+    callback(response.data);
+  } catch (error) {
+    console.error(error);
+    console.log('[FileUpload] Error fetching presets');
+  }
+}
+
+const FileUpload = ({ onFileSelected }) => {
+  const setPresets = useSetRecoilState(store.presets);
+
+  const handleFileChange = event => {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = e => {
+      const jsonData = JSON.parse(e.target.result);
+      onFileSelected(jsonData, () => fetchPresets(setPresets));
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <label
+      htmlFor="file-upload"
+      className=" mr-1 flex h-auto  cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
+    >
+      <FileUp className="flex w-[22px] items-center stroke-1" />
+      <span className="ml-1 flex text-xs ">Import</span>
+      <input
+        id="file-upload"
+        type="file"
+        className="hidden "
+        accept=".json"
+        onChange={handleFileChange}
+      />
+    </label>
+  );
+};
+
+export default FileUpload;

client/src/components/Input/Endpoints/NewConversationMenu.jsx

@@ -3,8 +3,9 @@ import { useRecoilValue, useRecoilState } from 'recoil';
 import EditPresetDialog from '../../Endpoints/EditPresetDialog';
 import EndpointItems from './EndpointItems';
 import PresetItems from './PresetItems';
+import FileUpload from './FileUpload';
 import getIcon from '~/utils/getIcon';
-import manualSWR from '~/utils/fetchers';
+import manualSWR, { handleFileSelected } from '~/utils/fetchers';
 
 import { Button } from '../../ui/Button.tsx';
 import {
@@ -135,6 +136,7 @@ export default function NewConversationMenu() {
           <DropdownMenuLabel className="flex items-center dark:text-gray-300">
             <span>Select a Preset</span>
             <div className="flex-1" />
+            <FileUpload onFileSelected={handleFileSelected} />
             <Dialog>
               <DialogTrigger asChild>
                 <Button

client/src/utils/fetchers.js

@@ -72,3 +72,23 @@ export function useManualSWR({ path, params, type, onSuccess }) {
   const fetchFunction = type === 'get' ? _.partialRight(axiosFetcher, params) : postRequest;
   return useSWRMutation(path, fetchFunction, options);
 }
+
+export const handleFileSelected = async (jsonData, callback) => {
+  try {
+    const response = await fetch('/api/presets', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(jsonData),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Error: ${response.statusText}`);
+    }
+
+    callback();
+  } catch (error) {
+    console.error('Error uploading the preset:', error);
+  }
+};