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;