feat: export preset.

client/src/components/Endpoints/EditPresetDialog.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useSetRecoilState, useRecoilValue } from 'recoil';
 import axios from 'axios';
+import exportFromJSON from 'export-from-json';
 import DialogTemplate from '../ui/DialogTemplate';
-import { Dialog } from '../ui/Dialog.tsx';
+import { Dialog, DialogClose, DialogButton } from '../ui/Dialog.tsx';
 import { Input } from '../ui/Input.tsx';
 import { Label } from '../ui/Label.tsx';
 import Dropdown from '../ui/Dropdown';
@@ -55,17 +56,47 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset }) => {
   const defaultTextProps =
     'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
 
+  // in order not to use wrong data from other endpoint
+  const clearPreset = () => {
+    if (preset?.endpoint === 'openAI')
+      return {
+        title: preset?.title,
+        endpoint: preset?.endpoint,
+        model: preset?.model,
+        chatGptLabel: preset?.chatGptLabel,
+        promptPrefix: preset?.promptPrefix,
+        temperature: preset?.temperature,
+        top_p: preset?.top_p,
+        presence_penalty: preset?.presence_penalty,
+        frequency_penalty: preset?.frequency_penalty
+      };
+    else
+      return {
+        title: preset?.title,
+        endpoint: preset?.endpoint
+      };
+    // TODO: else
+  };
+
   const submitPreset = () => {
     axios({
       method: 'post',
       url: '/api/presets',
-      data: preset,
+      data: clearPreset(),
       withCredentials: true
     }).then(res => {
       setPresets(res?.data);
     });
   };
 
+  const exportPreset = () => {
+    exportFromJSON({
+      data: clearPreset(),
+      fileName: `${preset?.title}.json`,
+      exportType: exportFromJSON.types.json
+    });
+  };
+
   useEffect(() => {
     setPreset(_preset);
   }, [open]);
@@ -123,11 +154,26 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset }) => {
             <div className="w-full p-0">{renderSettings()}</div>
           </div>
         }
-        selection={{
-          selectHandler: submitPreset,
-          selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
-          selectText: 'Save'
-        }}
+        buttons={
+          <>
+            <DialogClose
+              onClick={submitPreset}
+              className="dark:hover:gray-400 border-gray-700 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
+            >
+              Save
+            </DialogClose>
+          </>
+        }
+        leftButtons={
+          <>
+            <DialogButton
+              onClick={exportPreset}
+              className="dark:hover:gray-400 bg-red border-gray-700"
+            >
+              Export
+            </DialogButton>
+          </>
+        }
       />
     </Dialog>
   );