From 45e17da2411c441c7d874b0d545a8700bbc7f87d Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Sun, 2 Apr 2023 04:15:07 +0800
Subject: [PATCH] feat: add preset and edit preset.

---
 client/src/App.jsx                            |  16 ++
 .../components/Endpoints/EditPresetDialog.jsx | 134 +++++++++++++
 .../EndpointOptionsPopover.jsx                |   2 +-
 .../OpenAI}/OptionHover.jsx                   |   0
 .../OpenAI}/Settings.jsx                      |   9 +-
 .../Endpoints/SaveAsPresetDialog.jsx          |  75 ++++++++
 .../components/Input/Endpoints/MenuItems.jsx  |  17 --
 .../Input/Endpoints/ModelDialog.jsx           | 156 ---------------
 .../components/Input/Endpoints/ModelItem.jsx  | 180 ------------------
 ...dpointMenu.jsx => NewConversationMenu.jsx} | 137 +++++--------
 .../components/Input/Endpoints/PresetItem.jsx |  65 +++++++
 .../Input/Endpoints/PresetItems.jsx           |  18 ++
 client/src/components/Input/Footer.jsx        |   6 +-
 .../components/Input/OpenAIOptions/index.jsx  |  22 +--
 client/src/components/Input/index.jsx         |   2 +-
 client/src/components/ui/Dialog.tsx           |   2 +-
 client/src/components/ui/DialogTemplate.jsx   |  18 +-
 client/src/components/ui/Dropdown.jsx         |  73 +++++++
 client/src/components/ui/Landing.jsx          |   2 +-
 .../OpenAIOptions => ui}/ModelDropDown.jsx    |  17 +-
 .../OpenAIOptions => ui}/ModelSelect.jsx      |   4 +-
 .../src/components/{Prompts => ui}/Prompt.jsx |   0
 .../components/{Prompts => ui}/Templates.jsx  |   0
 client/src/store/conversation.js              |  13 +-
 client/src/store/index.js                     |   4 +-
 client/src/store/preset.js                    |  40 ++++
 client/src/utils/buildPresetByConversation.js |  56 ++++++
 client/src/utils/fetchers.js                  |  11 +-
 client/src/utils/getDefaultConversation.js    |   6 +-
 29 files changed, 592 insertions(+), 493 deletions(-)
 create mode 100644 client/src/components/Endpoints/EditPresetDialog.jsx
 rename client/src/components/{ui => Endpoints}/EndpointOptionsPopover.jsx (97%)
 rename client/src/components/{Input/OpenAIOptions => Endpoints/OpenAI}/OptionHover.jsx (100%)
 rename client/src/components/{Input/OpenAIOptions => Endpoints/OpenAI}/Settings.jsx (94%)
 create mode 100644 client/src/components/Endpoints/SaveAsPresetDialog.jsx
 delete mode 100644 client/src/components/Input/Endpoints/MenuItems.jsx
 delete mode 100644 client/src/components/Input/Endpoints/ModelDialog.jsx
 delete mode 100644 client/src/components/Input/Endpoints/ModelItem.jsx
 rename client/src/components/Input/Endpoints/{EndpointMenu.jsx => NewConversationMenu.jsx} (52%)
 create mode 100644 client/src/components/Input/Endpoints/PresetItem.jsx
 create mode 100644 client/src/components/Input/Endpoints/PresetItems.jsx
 create mode 100644 client/src/components/ui/Dropdown.jsx
 rename client/src/components/{Input/OpenAIOptions => ui}/ModelDropDown.jsx (81%)
 rename client/src/components/{Input/OpenAIOptions => ui}/ModelSelect.jsx (94%)
 rename client/src/components/{Prompts => ui}/Prompt.jsx (100%)
 rename client/src/components/{Prompts => ui}/Templates.jsx (100%)
 create mode 100644 client/src/store/preset.js
 create mode 100644 client/src/utils/buildPresetByConversation.js

diff --git a/client/src/App.jsx b/client/src/App.jsx
index d5df7345cc..b63e474677 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -39,6 +39,7 @@ const App = () => {
   const [user, setUser] = useRecoilState(store.user);
   const setIsSearchEnabled = useSetRecoilState(store.isSearchEnabled);
   const setEndpointsConfig = useSetRecoilState(store.endpointsConfig);
+  const setPresets = useSetRecoilState(store.presets);
 
   useEffect(() => {
     // fetch if seatch enabled
@@ -70,6 +71,21 @@ const App = () => {
         console.log('Not login!');
         window.location.href = '/auth/login';
       });
+
+    // fetch presets
+    axios
+      .get('/api/presets', {
+        timeout: 1000,
+        withCredentials: true
+      })
+      .then(({ data }) => {
+        setPresets(data);
+      })
+      .catch(error => {
+        console.error(error);
+        console.log('Not login!');
+        window.location.href = '/auth/login';
+      });
   }, []);
 
   if (user)
diff --git a/client/src/components/Endpoints/EditPresetDialog.jsx b/client/src/components/Endpoints/EditPresetDialog.jsx
new file mode 100644
index 0000000000..c3ae5eceba
--- /dev/null
+++ b/client/src/components/Endpoints/EditPresetDialog.jsx
@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from 'react';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
+import axios from 'axios';
+import DialogTemplate from '../ui/DialogTemplate';
+import { Dialog } from '../ui/Dialog.tsx';
+import { Input } from '../ui/Input.tsx';
+import { Label } from '../ui/Label.tsx';
+import Dropdown from '../ui/Dropdown';
+import { cn } from '~/utils/';
+import OpenAISettings from './OpenAI/Settings';
+
+import store from '~/store';
+
+const EditPresetDialog = ({ open, onOpenChange, preset: _preset }) => {
+  //   const [title, setTitle] = useState('My Preset');
+  const [preset, setPreset] = useState({});
+  const setPresets = useSetRecoilState(store.presets);
+
+  const availableEndpoints = useRecoilValue(store.availableEndpoints);
+
+  const setOption = param => newValue => {
+    let update = {};
+    update[param] = newValue;
+    setPreset(prevState => ({
+      ...prevState,
+      ...update
+    }));
+  };
+
+  const renderSettings = () => {
+    const { endpoint } = preset || {};
+
+    if (endpoint === 'openAI')
+      return (
+        <OpenAISettings
+          model={preset?.model}
+          setModel={setOption('model')}
+          chatGptLabel={preset?.chatGptLabel}
+          setChatGptLabel={setOption('chatGptLabel')}
+          promptPrefix={preset?.promptPrefix}
+          setPromptPrefix={setOption('promptPrefix')}
+          temperature={preset?.temperature}
+          setTemperature={setOption('temperature')}
+          topP={preset?.top_p}
+          setTopP={setOption('top_p')}
+          freqP={preset?.presence_penalty}
+          setFreqP={setOption('presence_penalty')}
+          presP={preset?.frequency_penalty}
+          setPresP={setOption('frequency_penalty')}
+        />
+      );
+    else return null;
+  };
+
+  const defaultTextProps =
+    'rounded-md border border-gray-200 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';
+
+  const submitPreset = () => {
+    axios({
+      method: 'post',
+      url: '/api/presets',
+      data: preset,
+      withCredentials: true
+    }).then(res => {
+      setPresets(res?.data);
+    });
+  };
+
+  useEffect(() => {
+    setPreset(_preset);
+  }, [open]);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <DialogTemplate
+        title="Edit Preset"
+        className="max-w-full sm:max-w-4xl"
+        main=<div className="flex w-full flex-col items-center gap-2">
+          <div className="grid w-full gap-6 sm:grid-cols-2">
+            <div className="col-span-1 flex flex-col items-start justify-start gap-2">
+              <Label
+                htmlFor="chatGptLabel"
+                className="text-left text-sm font-medium"
+              >
+                Preset Name
+              </Label>
+              <Input
+                id="chatGptLabel"
+                value={preset?.title || ''}
+                onChange={e => setOption('title')(e.target.value || '')}
+                placeholder="Set a custom name, in case you can find this preset"
+                className={cn(
+                  defaultTextProps,
+                  'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
+                )}
+              />
+            </div>
+            <div className="col-span-1 flex flex-col items-start justify-start gap-2">
+              <Label
+                htmlFor="endpoint"
+                className="text-left text-sm font-medium"
+              >
+                Endpoint
+              </Label>
+              <Dropdown
+                id="endpoint"
+                value={preset?.endpoint || ''}
+                onChange={setOption('endpoint')}
+                options={availableEndpoints}
+                className={cn(
+                  defaultTextProps,
+                  'flex h-10 max-h-10 w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
+                )}
+                containerClassName="flex w-full resize-none"
+              />
+            </div>
+          </div>
+          <div className="my-4 w-full border-t border-gray-300 dark:border-gray-500" />
+          <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'
+        }}
+      />
+    </Dialog>
+  );
+};
+
+export default EditPresetDialog;
diff --git a/client/src/components/ui/EndpointOptionsPopover.jsx b/client/src/components/Endpoints/EndpointOptionsPopover.jsx
similarity index 97%
rename from client/src/components/ui/EndpointOptionsPopover.jsx
rename to client/src/components/Endpoints/EndpointOptionsPopover.jsx
index 701eee1323..ad499d0b2e 100644
--- a/client/src/components/ui/EndpointOptionsPopover.jsx
+++ b/client/src/components/Endpoints/EndpointOptionsPopover.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from './Button.tsx';
+import { Button } from '../ui/Button.tsx';
 import SwitchIcon from '../svg/SwitchIcon';
 import SaveIcon from '../svg/SaveIcon';
 
diff --git a/client/src/components/Input/OpenAIOptions/OptionHover.jsx b/client/src/components/Endpoints/OpenAI/OptionHover.jsx
similarity index 100%
rename from client/src/components/Input/OpenAIOptions/OptionHover.jsx
rename to client/src/components/Endpoints/OpenAI/OptionHover.jsx
diff --git a/client/src/components/Input/OpenAIOptions/Settings.jsx b/client/src/components/Endpoints/OpenAI/Settings.jsx
similarity index 94%
rename from client/src/components/Input/OpenAIOptions/Settings.jsx
rename to client/src/components/Endpoints/OpenAI/Settings.jsx
index 8924557eea..22060dd05d 100644
--- a/client/src/components/Input/OpenAIOptions/Settings.jsx
+++ b/client/src/components/Endpoints/OpenAI/Settings.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import ModelDropDown from './ModelDropDown';
+import ModelDropDown from '../../ui/ModelDropDown';
 import { Input } from '~/components/ui/Input.tsx';
 import { Label } from '~/components/ui/Label.tsx';
 import { Slider } from '~/components/ui/Slider.tsx';
@@ -8,7 +8,7 @@ import OptionHover from './OptionHover';
 import { HoverCard, HoverCardTrigger } from '~/components/ui/HoverCard.tsx';
 import { cn } from '~/utils/';
 const defaultTextProps =
-  'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] 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-400 dark:bg-gray-700 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';
+  'rounded-md border border-gray-200 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';
 
 const optionText =
   'p-0 shadow-none text-right pr-1 h-8 border-transparent focus:ring-[#10a37f] focus:ring-offset-0 focus:ring-opacity-100 hover:bg-gray-800/10 dark:hover:bg-white/10 focus:bg-gray-800/10 dark:focus:bg-white/10 transition-colors';
@@ -40,6 +40,11 @@ function Settings(props) {
               model={model}
               setModel={setModel}
               endpoint="openAI"
+              className={cn(
+                defaultTextProps,
+                'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
+              )}
+              containerClassName="flex w-full resize-none"
             />
             {/* <Label
               htmlFor="model"
diff --git a/client/src/components/Endpoints/SaveAsPresetDialog.jsx b/client/src/components/Endpoints/SaveAsPresetDialog.jsx
new file mode 100644
index 0000000000..a615919cec
--- /dev/null
+++ b/client/src/components/Endpoints/SaveAsPresetDialog.jsx
@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import axios from 'axios';
+import DialogTemplate from '../ui/DialogTemplate';
+import { Dialog } from '../ui/Dialog.tsx';
+import { Input } from '../ui/Input.tsx';
+import { Label } from '../ui/Label.tsx';
+import { cn } from '~/utils/';
+import buildPresetByConversation from '~/utils/buildPresetByConversation';
+
+import store from '~/store';
+
+const SaveAsPresetDialog = ({ open, onOpenChange, conversation }) => {
+  const [title, setTitle] = useState('My Preset');
+  const setPresets = useSetRecoilState(store.presets);
+
+  const defaultTextProps =
+    'rounded-md border border-gray-300 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] 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-400 dark:bg-gray-700 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';
+
+  const submitPreset = () => {
+    const preset = buildPresetByConversation({
+      title,
+      conversation
+    });
+
+    axios({
+      method: 'post',
+      url: '/api/presets',
+      data: preset,
+      withCredentials: true
+    }).then(res => {
+      setPresets(res?.data);
+    });
+  };
+
+  useEffect(() => {
+    setTitle('My Preset');
+  }, [open]);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <DialogTemplate
+        title="Save As Preset"
+        main=<div className="grid w-full items-center gap-2">
+          <Label
+            htmlFor="chatGptLabel"
+            className="text-left text-sm font-medium"
+          >
+            Preset Name
+          </Label>
+          <Input
+            id="chatGptLabel"
+            value={title || ''}
+            onChange={e => setTitle(e.target.value || '')}
+            placeholder="Set a custom name, in case you can find this preset"
+            className={cn(
+              defaultTextProps,
+              'flex h-10 max-h-10 w-full resize-none px-3 py-2 focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
+            )}
+          />
+        </div>
+        selection={{
+          selectHandler: submitPreset,
+          selectClasses: 'bg-green-600 hover:bg-green-700 dark:hover:bg-green-800 text-white',
+          selectText: 'Save'
+        }}
+      />
+    </Dialog>
+  );
+};
+
+export default SaveAsPresetDialog;
diff --git a/client/src/components/Input/Endpoints/MenuItems.jsx b/client/src/components/Input/Endpoints/MenuItems.jsx
deleted file mode 100644
index a8554ba598..0000000000
--- a/client/src/components/Input/Endpoints/MenuItems.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import ModelItem from './ModelItem';
-
-export default function MenuItems({ models, onSelect }) {
-  return (
-    <>
-      {models.map(modelItem => (
-        <ModelItem
-          key={modelItem._id}
-          value={modelItem.value}
-          onSelect={onSelect}
-          model={modelItem}
-        />
-      ))}
-    </>
-  );
-}
diff --git a/client/src/components/Input/Endpoints/ModelDialog.jsx b/client/src/components/Input/Endpoints/ModelDialog.jsx
deleted file mode 100644
index 86d6b30abe..0000000000
--- a/client/src/components/Input/Endpoints/ModelDialog.jsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React, { useState, useRef } from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
-import manualSWR from '~/utils/fetchers';
-import { Button } from '../../ui/Button.tsx';
-import { Input } from '../../ui/Input.tsx';
-import { Label } from '../../ui/Label.tsx';
-
-import {
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '../../ui/Dialog.tsx';
-
-import store from '~/store';
-
-export default function ModelDialog({ mutate, setModelSave, handleSaveState }) {
-  const { newConversation } = store.useConversation();
-
-  const [chatGptLabel, setChatGptLabel] = useState('');
-  const [promptPrefix, setPromptPrefix] = useState('');
-  const [saveText, setSaveText] = useState('Save');
-  const [required, setRequired] = useState(false);
-  const inputRef = useRef(null);
-  const updateCustomGpt = manualSWR(`/api/customGpts/`, 'post');
-
-  const selectHandler = e => {
-    if (chatGptLabel.length === 0) {
-      e.preventDefault();
-      setRequired(true);
-      inputRef.current.focus();
-      return;
-    }
-
-    handleSaveState(chatGptLabel.toLowerCase());
-
-    // Set new conversation
-    newConversation({
-      model: 'chatgptCustom',
-      chatGptLabel,
-      promptPrefix
-    });
-  };
-
-  const saveHandler = e => {
-    e.preventDefault();
-    setModelSave(true);
-    const value = chatGptLabel.toLowerCase();
-
-    if (chatGptLabel.length === 0) {
-      setRequired(true);
-      inputRef.current.focus();
-      return;
-    }
-
-    updateCustomGpt.trigger({ value, chatGptLabel, promptPrefix });
-
-    mutate();
-    setSaveText(prev => prev + 'd!');
-    setTimeout(() => {
-      setSaveText('Save');
-    }, 2500);
-
-    // dispatch(setCustomGpt({ chatGptLabel, promptPrefix }));
-    newConversation({
-      model: 'chatgptCustom',
-      chatGptLabel,
-      promptPrefix
-    });
-  };
-
-  // Commented by wtlyu
-  // if (
-  //   chatGptLabel !== 'chatgptCustom' &&
-  //   modelMap[chatGptLabel.toLowerCase()] &&
-  //   !initial[chatGptLabel.toLowerCase()] &&
-  //   saveText === 'Save'
-  // ) {
-  //   setSaveText('Update');
-  // } else if (!modelMap[chatGptLabel.toLowerCase()] && saveText === 'Update') {
-  //   setSaveText('Save');
-  // }
-
-  const requiredProp = required ? { required: true } : {};
-
-  return (
-    <DialogContent className="shadow-2xl dark:bg-gray-800">
-      <DialogHeader>
-        <DialogTitle className="text-gray-800 dark:text-white">Customize ChatGPT</DialogTitle>
-        <DialogDescription className="text-gray-600 dark:text-gray-300">
-          Note: important instructions are often better placed in your message rather than the prefix.{' '}
-          <a
-            href="https://platform.openai.com/docs/guides/chat/instructing-chat-models"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <u>More info here</u>
-          </a>
-        </DialogDescription>
-      </DialogHeader>
-      <div className="grid gap-4 py-4">
-        <div className="grid grid-cols-4 items-center gap-4">
-          <Label
-            htmlFor="chatGptLabel"
-            className="text-right"
-          >
-            Custom Name
-          </Label>
-          <Input
-            id="chatGptLabel"
-            value={chatGptLabel}
-            ref={inputRef}
-            onChange={e => setChatGptLabel(e.target.value)}
-            placeholder="Set a custom name for ChatGPT"
-            className=" col-span-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 invalid:border-red-400 invalid:text-red-600 invalid:placeholder-red-600 invalid:placeholder-opacity-70 invalid:ring-opacity-10 focus:ring-0 focus:invalid:border-red-400 focus:invalid:ring-red-300 dark:border-none dark:bg-gray-700
-              dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:invalid:border-red-600 dark:invalid:text-red-300 dark:invalid:placeholder-opacity-80 dark:focus:border-none  dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0 dark:focus:invalid:ring-red-600 dark:focus:invalid:ring-opacity-50"
-            {...requiredProp}
-          />
-        </div>
-        <div className="grid grid-cols-4 items-center gap-4">
-          <Label
-            htmlFor="promptPrefix"
-            className="text-right"
-          >
-            Prompt Prefix
-          </Label>
-          <TextareaAutosize
-            id="promptPrefix"
-            value={promptPrefix}
-            onChange={e => setPromptPrefix(e.target.value)}
-            placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'"
-            className="col-span-3 flex h-20 max-h-52 w-full resize-none rounded-md border border-gray-300 bg-transparent py-2 px-3 text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] 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-none dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-none dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0"
-          />
-        </div>
-      </div>
-      <DialogFooter>
-        <DialogClose className="dark:hover:gray-400 border-gray-700">Cancel</DialogClose>
-        <Button
-          style={{ backgroundColor: 'rgb(16, 163, 127)' }}
-          onClick={saveHandler}
-          className="inline-flex h-10 items-center justify-center rounded-md border-none py-2 px-4 text-sm font-semibold text-white transition-colors dark:text-gray-200"
-        >
-          {saveText}
-        </Button>
-        <DialogClose
-          onClick={selectHandler}
-          className="inline-flex h-10 items-center justify-center rounded-md border-none bg-gray-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900"
-        >
-          Select
-        </DialogClose>
-      </DialogFooter>
-    </DialogContent>
-  );
-}
diff --git a/client/src/components/Input/Endpoints/ModelItem.jsx b/client/src/components/Input/Endpoints/ModelItem.jsx
deleted file mode 100644
index 5a0ad0b9e6..0000000000
--- a/client/src/components/Input/Endpoints/ModelItem.jsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { DropdownMenuRadioItem } from '../../ui/DropdownMenu.tsx';
-import { Circle } from 'lucide-react';
-import { DialogTrigger } from '../../ui/Dialog.tsx';
-import RenameButton from '../../Conversations/RenameButton';
-import TrashIcon from '../../svg/TrashIcon';
-import manualSWR from '~/utils/fetchers';
-import getIcon from '~/utils/getIcon';
-
-import store from '~/store';
-
-export default function ModelItem({ model: _model, value, onSelect }) {
-  const { name, model, _id: id, chatGptLabel = null, promptPrefix = null } = _model;
-  const setCustomGPTModels = useSetRecoilState(store.customGPTModels);
-  const currentConversation = useRecoilValue(store.conversation) || {};
-
-  const [isHovering, setIsHovering] = useState(false);
-  const [renaming, setRenaming] = useState(false);
-  const [currentName, setCurrentName] = useState(name);
-  const [modelInput, setModelInput] = useState(name);
-  const inputRef = useRef(null);
-  const rename = manualSWR(`/api/customGpts`, 'post', res => {});
-  const deleteCustom = manualSWR(`/api/customGpts/delete`, 'post', res => {
-    const fetchedModels = res.data.map(modelItem => ({
-      ...modelItem,
-      name: modelItem.chatGptLabel,
-      model: 'chatgptCustom'
-    }));
-
-    setCustomGPTModels(fetchedModels);
-  });
-
-  const icon = getIcon({
-    size: 20,
-    sender: chatGptLabel || model,
-    isCreatedByUser: false,
-    model,
-    chatGptLabel,
-    promptPrefix,
-    error: false,
-    className: 'mr-2'
-  });
-
-  if (model !== 'chatgptCustom')
-    // regular model
-    return (
-      <DropdownMenuRadioItem
-        value={value}
-        className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
-      >
-        {icon}
-        {name}
-        {model === 'chatgpt' && <sup>$</sup>}
-      </DropdownMenuRadioItem>
-    );
-  else if (model === 'chatgptCustom' && chatGptLabel === null && promptPrefix === null)
-    // base chatgptCustom model, click to add new chatgptCustom.
-    return (
-      <DialogTrigger className="w-full">
-        <DropdownMenuRadioItem
-          value={value}
-          className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
-        >
-          {icon}
-          {name}
-          <sup>$</sup>
-        </DropdownMenuRadioItem>
-      </DialogTrigger>
-    );
-
-  // else: a chatgptCustom model
-  const handleMouseOver = () => {
-    setIsHovering(true);
-  };
-
-  const handleMouseOut = () => {
-    setIsHovering(false);
-  };
-
-  const renameHandler = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    setRenaming(true);
-    setTimeout(() => {
-      inputRef.current.focus();
-    }, 25);
-  };
-
-  const onRename = e => {
-    e.preventDefault();
-    setRenaming(false);
-    if (modelInput === name) {
-      return;
-    }
-    rename.trigger({
-      prevLabel: currentName,
-      chatGptLabel: modelInput,
-      value: modelInput.toLowerCase()
-    });
-    setCurrentName(modelInput);
-  };
-
-  const onDelete = async e => {
-    e.preventDefault();
-    await deleteCustom.trigger({ _id: id });
-    onSelect('chatgpt');
-  };
-
-  const handleKeyDown = e => {
-    if (e.key === 'Enter') {
-      onRename(e);
-    }
-  };
-
-  const buttonClass = {
-    className:
-      'invisible group-hover:visible z-50 rounded-md m-0 text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
-  };
-
-  const itemClass = {
-    className:
-      'relative flex group cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none hover:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:hover:bg-slate-700 dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800'
-  };
-
-  return (
-    <span
-      value={value}
-      className={itemClass.className}
-      onClick={e => {
-        if (isHovering) {
-          return;
-        }
-        onSelect('chatgptCustom', value);
-      }}
-    >
-      {currentConversation?.chatGptLabel === value && (
-        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-          <Circle className="h-2 w-2 fill-current" />
-        </span>
-      )}
-
-      {icon}
-
-      {renaming === true ? (
-        <input
-          ref={inputRef}
-          key={id}
-          type="text"
-          className="pointer-events-auto z-50 m-0 mr-2 w-3/4 border border-blue-500 bg-transparent p-0 text-sm leading-tight outline-none"
-          value={modelInput}
-          onClick={e => e.stopPropagation()}
-          onChange={e => setModelInput(e.target.value)}
-          // onBlur={onRename}
-          onKeyDown={handleKeyDown}
-        />
-      ) : (
-        <div className=" overflow-hidden">{modelInput}</div>
-      )}
-
-      {value === 'chatgpt' && <sup>$</sup>}
-      <RenameButton
-        twcss={`ml-auto mr-2 ${buttonClass.className}`}
-        onRename={onRename}
-        renaming={renaming}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-        renameHandler={renameHandler}
-      />
-      <button
-        {...buttonClass}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-        onClick={onDelete}
-      >
-        <TrashIcon />
-      </button>
-    </span>
-  );
-}
diff --git a/client/src/components/Input/Endpoints/EndpointMenu.jsx b/client/src/components/Input/Endpoints/NewConversationMenu.jsx
similarity index 52%
rename from client/src/components/Input/Endpoints/EndpointMenu.jsx
rename to client/src/components/Input/Endpoints/NewConversationMenu.jsx
index 3dd64aa48f..6ff3ca9d04 100644
--- a/client/src/components/Input/Endpoints/EndpointMenu.jsx
+++ b/client/src/components/Input/Endpoints/NewConversationMenu.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
-// import ModelDialog from './ModelDialog';
+import EditPresetDialog from '../../Endpoints/EditPresetDialog';
 import EndpointItems from './EndpointItems';
-import { swr } from '~/utils/fetchers';
+import PresetItems from './PresetItems';
 import getIcon from '~/utils/getIcon';
 
 import { Button } from '../../ui/Button.tsx';
@@ -18,30 +18,22 @@ import { Dialog } from '../../ui/Dialog.tsx';
 
 import store from '~/store';
 
-export default function EndpointMenu() {
+export default function NewConversationMenu() {
   // const [modelSave, setModelSave] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [presetModelVisible, setPresetModelVisible] = useState(false);
+  const [preset, setPreset] = useState(false);
 
   // const models = useRecoilValue(store.models);
   const availableEndpoints = useRecoilValue(store.availableEndpoints);
   // const setCustomGPTModels = useSetRecoilState(store.customGPTModels);
+  const presets = useRecoilValue(store.presets);
 
   const conversation = useRecoilValue(store.conversation) || {};
   const { endpoint, conversationId } = conversation;
   // const { model, promptPrefix, chatGptLabel, conversationId } = conversation;
   const { newConversation } = store.useConversation();
 
-  // fetch the list of saved chatgptCustom
-  // const { data, isLoading, mutate } = swr(`/api/customGpts`, res => {
-  //   const fetchedModels = res.map(modelItem => ({
-  //     ...modelItem,
-  //     name: modelItem.chatGptLabel,
-  //     model: 'chatgptCustom'
-  //   }));
-
-  //   setCustomGPTModels(fetchedModels);
-  // });
-
   // update the default model when availableModels changes
   // typically, availableModels changes => modelsFilter or customGPTModels changes
   useEffect(() => {
@@ -56,81 +48,31 @@ export default function EndpointMenu() {
   }, [conversation]);
 
   // set the current model
-  const onChange = (newEndpoint, value = null) => {
+  const onSelectEndpoint = newEndpoint => {
     setMenuOpen(false);
 
     if (!newEndpoint) return;
     else if (newEndpoint === endpoint) return;
     else {
-      newConversation({}, newEndpoint);
+      newConversation({}, { endpoint: newEndpoint });
     }
-    // } else if (newModel === model && value === chatGptLabel) {
-    //   // bypass if not changed
-    //   return;
-    // } else if (newModel === 'chatgptCustom' && value === null) {
-    //   // return;
-    // } else if (newModel !== 'chatgptCustom') {
-    //   newConversation({
-    //     model: newModel,
-    //     chatGptLabel: null,
-    //     promptPrefix: null
-    //   });
-    // } else if (newModel === 'chatgptCustom') {
-    //   const targetModel = models.find(element => element.value == value);
-    //   if (targetModel) {
-    //     const chatGptLabel = targetModel?.chatGptLabel;
-    //     const promptPrefix = targetModel?.promptPrefix;
-    //     newConversation({
-    //       model: newModel,
-    //       chatGptLabel,
-    //       promptPrefix
-    //     });
-    //   }
-    // }
   };
 
-  // const onOpenChange = open => {
-  //   mutate();
-  //   if (!open) {
-  //     setModelSave(false);
-  //   }
-  // };
+  // set the current model
+  const onSelectPreset = newPreset => {
+    setMenuOpen(false);
+    if (!newPreset) return;
+    // else if (newEndpoint === endpoint) return;
+    else {
+      newConversation({}, newPreset);
+    }
+  };
 
-  // const handleSaveState = value => {
-  //   if (!modelSave) {
-  //     return;
-  //   }
+  const onChangePreset = preset => {
+    setPresetModelVisible(true);
+    setPreset(preset);
+  };
 
-  //   setCustomGPTModels(value);
-  //   setModelSave(false);
-  // };
-
-  // const defaultColorProps = [
-  //   'text-gray-500',
-  //   'hover:bg-gray-100',
-  //   'hover:bg-opacity-20',
-  //   'disabled:hover:bg-transparent',
-  //   'dark:data-[state=open]:bg-gray-800',
-  //   'dark:hover:bg-opacity-20',
-  //   'dark:hover:bg-gray-900',
-  //   'dark:hover:text-gray-400',
-  //   'dark:disabled:hover:bg-transparent'
-  // ];
-
-  // const chatgptColorProps = [
-  //   'text-green-700',
-  //   'data-[state=open]:bg-green-100',
-  //   'dark:text-emerald-300',
-  //   'hover:bg-green-100',
-  //   'disabled:hover:bg-transparent',
-  //   'dark:data-[state=open]:bg-green-900',
-  //   'dark:hover:bg-opacity-50',
-  //   'dark:hover:bg-green-900',
-  //   'dark:hover:text-gray-100',
-  //   'dark:disabled:hover:bg-transparent'
-  // ];
-
-  // const colorProps = model === 'chatgpt' ? chatgptColorProps : defaultColorProps;
   const icon = getIcon({
     size: 32,
     ...conversation,
@@ -157,32 +99,51 @@ export default function EndpointMenu() {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          className="w-56 dark:bg-gray-700"
+          className="min-w-56 dark:bg-gray-700"
           onCloseAutoFocus={event => event.preventDefault()}
         >
-          <DropdownMenuLabel className="dark:text-gray-300">Select an AI Endpoint</DropdownMenuLabel>
+          <DropdownMenuLabel className="dark:text-gray-300">Select an Endpoint</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup
             value={endpoint}
-            onValueChange={onChange}
+            onValueChange={onSelectEndpoint}
             className="overflow-y-auto"
           >
             {availableEndpoints.length ? (
               <EndpointItems
                 endpoints={availableEndpoints}
-                onSelect={onChange}
+                onSelect={onSelectEndpoint}
               />
             ) : (
               <DropdownMenuLabel className="dark:text-gray-300">No endpoint available.</DropdownMenuLabel>
             )}
           </DropdownMenuRadioGroup>
+
+          <div className="mt-6 w-full" />
+
+          <DropdownMenuLabel className="dark:text-gray-300">Select a Preset</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup
+            onValueChange={onSelectPreset}
+            className="overflow-y-auto"
+          >
+            {presets.length ? (
+              <PresetItems
+                presets={presets}
+                onSelect={onSelectPreset}
+                onChangePreset={onChangePreset}
+              />
+            ) : (
+              <DropdownMenuLabel className="dark:text-gray-300">No preset yet.</DropdownMenuLabel>
+            )}
+          </DropdownMenuRadioGroup>
         </DropdownMenuContent>
       </DropdownMenu>
-      {/* <ModelDialog
-        mutate={mutate}
-        setModelSave={setModelSave}
-        handleSaveState={handleSaveState}
-      /> */}
+      <EditPresetDialog
+        open={presetModelVisible}
+        onOpenChange={setPresetModelVisible}
+        preset={preset}
+      />
     </Dialog>
   );
 }
diff --git a/client/src/components/Input/Endpoints/PresetItem.jsx b/client/src/components/Input/Endpoints/PresetItem.jsx
new file mode 100644
index 0000000000..6c713653ff
--- /dev/null
+++ b/client/src/components/Input/Endpoints/PresetItem.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { DropdownMenuRadioItem } from '../../ui/DropdownMenu.tsx';
+import EditIcon from '../../svg/EditIcon';
+import getIcon from '~/utils/getIcon';
+
+export default function PresetItem({ preset = {}, value, onSelect, onChangePreset }) {
+  const { endpoint } = preset;
+
+  const icon = getIcon({
+    size: 20,
+    endpoint: preset?.endpoint,
+    error: false,
+    className: 'mr-2'
+  });
+
+  const getPresetTitle = () => {
+    let _title = `${endpoint}`;
+
+    if (endpoint === 'azureOpenAI' || endpoint === 'openAI') {
+      const { chatGptLabel, model } = preset;
+      if (model) _title += `: ${model}`;
+      if (chatGptLabel) _title += ` as ${chatGptLabel}`;
+    } else if (endpoint === 'bingAI') {
+      const { jailbreak, toneStyle } = preset;
+      if (toneStyle) _title += `: ${toneStyle}`;
+      if (jailbreak) _title += ` as Sydney`;
+    } else if (endpoint === 'chatGPTBrowser') {
+      const { model } = preset;
+      if (model) _title += `: ${model}`;
+    } else if (endpoint === null) {
+      null;
+    } else {
+      null;
+    }
+    return _title;
+  };
+
+  // regular model
+  return (
+    <DropdownMenuRadioItem
+      value={value}
+      className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
+    >
+      {icon}
+      {preset?.title}
+      <small className="ml-2">({getPresetTitle()})</small>
+
+      {/* <RenameButton
+        twcss={`ml-auto mr-2 ${buttonClass.className}`}
+        onRename={onRename}
+        renaming={renaming}
+        onMouseOver={handleMouseOver}
+        onMouseOut={handleMouseOut}
+        renameHandler={renameHandler}
+      /> */}
+      <div className="flex w-4 flex-1" />
+      <button
+        className="invisible m-0 rounded-md text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200        "
+        onClick={() => onChangePreset(preset)}
+      >
+        <EditIcon />
+      </button>
+    </DropdownMenuRadioItem>
+  );
+}
diff --git a/client/src/components/Input/Endpoints/PresetItems.jsx b/client/src/components/Input/Endpoints/PresetItems.jsx
new file mode 100644
index 0000000000..63d08620c2
--- /dev/null
+++ b/client/src/components/Input/Endpoints/PresetItems.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PresetItem from './PresetItem';
+
+export default function PresetItems({ presets, onSelect, onChangePreset }) {
+  return (
+    <>
+      {presets.map(preset => (
+        <PresetItem
+          key={preset?.presetId}
+          value={preset}
+          onSelect={onSelect}
+          onChangePreset={onChangePreset}
+          preset={preset}
+        />
+      ))}
+    </>
+  );
+}
diff --git a/client/src/components/Input/Footer.jsx b/client/src/components/Input/Footer.jsx
index 0015596749..33a29cc8ce 100644
--- a/client/src/components/Input/Footer.jsx
+++ b/client/src/components/Input/Footer.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Footer() {
   return (
-    <div className="hidden md:block px-3 pt-2 pb-1 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-4">
+    <div className="hidden px-3 pt-2 pb-1 text-center text-xs text-black/50 dark:text-white/50 md:block md:px-4 md:pt-3 md:pb-4">
       <a
         href="https://github.com/danny-avila/chatgpt-clone"
         target="_blank"
@@ -11,8 +11,8 @@ export default function Footer() {
       >
         ChatGPT Clone
       </a>
-      . Serves and searches all conversations reliably. All AI convos under one house. Pay per
-      call and not per month (cents compared to dollars).
+      . Serves and searches all conversations reliably. All AI convos under one house. Pay per call and not
+      per month (cents compared to dollars).
     </div>
   );
 }
diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx
index 801ae6c88b..a2e84c7315 100644
--- a/client/src/components/Input/OpenAIOptions/index.jsx
+++ b/client/src/components/Input/OpenAIOptions/index.jsx
@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { Settings2 } from 'lucide-react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import ModelSelect from './ModelSelect';
-import EndpointOptionsPopover from '../../ui/EndpointOptionsPopover';
-import DialogTemplate from '../../ui/DialogTemplate';
+import ModelSelect from '../../ui/ModelSelect';
+import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
+import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
 import { Button } from '../../ui/Button.tsx';
-import { Dialog, DialogTrigger } from '../../ui/Dialog.tsx';
-import Settings from './Settings.jsx';
+import Settings from '../../Endpoints/OpenAI/Settings.jsx';
 import { cn } from '~/utils/';
 
 import store from '~/store';
@@ -125,18 +124,11 @@ function OpenAIOptions() {
         saveAsPreset={saveAsPreset}
         switchToSimpleMode={switchToSimpleMode}
       />
-      <Dialog
+      <SaveAsPresetDialog
         open={saveAsDialogShow}
         onOpenChange={setSaveAsDialogShow}
-      >
-        <DialogTemplate
-          title="title"
-          description="desc"
-          main="tttt"
-          buttons={null}
-          selection={{}}
-        />
-      </Dialog>
+        conversation={conversation}
+      />
     </>
   );
 }
diff --git a/client/src/components/Input/index.jsx b/client/src/components/Input/index.jsx
index c33e230da3..0f3764a2fc 100644
--- a/client/src/components/Input/index.jsx
+++ b/client/src/components/Input/index.jsx
@@ -5,7 +5,7 @@ import AdjustToneButton from './AdjustToneButton';
 import OpenAIOptions from './OpenAIOptions';
 import BingAIOptions from './BingAIOptions';
 // import BingStyles from './BingStyles';
-import EndpointMenu from './Endpoints/EndpointMenu';
+import EndpointMenu from './Endpoints/NewConversationMenu';
 import Footer from './Footer';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useMessageHandler } from '../../utils/handleSubmit';
diff --git a/client/src/components/ui/Dialog.tsx b/client/src/components/ui/Dialog.tsx
index 6f8875277b..b7019e8ae6 100644
--- a/client/src/components/ui/Dialog.tsx
+++ b/client/src/components/ui/Dialog.tsx
@@ -53,7 +53,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800">
-        <X className="h-4 w-4" />
+        <X className="h-4 w-4 text-black dark:text-white" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/client/src/components/ui/DialogTemplate.jsx b/client/src/components/ui/DialogTemplate.jsx
index 63c19d4fb3..084faa123a 100644
--- a/client/src/components/ui/DialogTemplate.jsx
+++ b/client/src/components/ui/DialogTemplate.jsx
@@ -8,18 +8,18 @@ import {
   DialogHeader,
   DialogTitle
 } from './Dialog.tsx';
+import { cn } from '~/utils/';
 
-export default function DialogTemplate({ title, description, main, buttons, selection }) {
+export default function DialogTemplate({ title, description, main, buttons, selection, className }) {
   const { selectHandler, selectClasses, selectText } = selection;
 
-  const defaultSelect = "bg-gray-900 text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900"
+  const defaultSelect =
+    'bg-gray-900 text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900';
   return (
-    <DialogContent className="shadow-2xl dark:bg-gray-800">
+    <DialogContent className={cn('shadow-2xl dark:bg-gray-800', className || '')}>
       <DialogHeader>
         <DialogTitle className="text-gray-800 dark:text-white">{title}</DialogTitle>
-        <DialogDescription className="text-gray-600 dark:text-gray-300">
-          {description}
-        </DialogDescription>
+        <DialogDescription className="text-gray-600 dark:text-gray-300">{description}</DialogDescription>
       </DialogHeader>
       {/* <div className="grid gap-4 py-4">
         <div className="grid grid-cols-4 items-center gap-4"> //input template
@@ -44,10 +44,12 @@ export default function DialogTemplate({ title, description, main, buttons, sele
       {main ? main : null}
       <DialogFooter>
         <DialogClose className="dark:hover:gray-400 border-gray-700">Cancel</DialogClose>
-        { buttons ? buttons : null}
+        {buttons ? buttons : null}
         <DialogClose
           onClick={selectHandler}
-          className={`${selectClasses || defaultSelect} inline-flex h-10 items-center justify-center rounded-md border-none py-2 px-4 text-sm font-semibold`}
+          className={`${
+            selectClasses || defaultSelect
+          } inline-flex h-10 items-center justify-center rounded-md border-none py-2 px-4 text-sm font-semibold`}
         >
           {selectText}
         </DialogClose>
diff --git a/client/src/components/ui/Dropdown.jsx b/client/src/components/ui/Dropdown.jsx
new file mode 100644
index 0000000000..812ee94edd
--- /dev/null
+++ b/client/src/components/ui/Dropdown.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import CheckMark from '../svg/CheckMark';
+import { Listbox } from '@headlessui/react';
+import { cn } from '~/utils/';
+
+function Dropdown({ value, onChange, options, className, containerClassName }) {
+  return (
+    <div className={cn('flex items-center justify-center gap-2', containerClassName)}>
+      <div className="relative w-full">
+        <Listbox
+          value={value}
+          onChange={onChange}
+        >
+          <Listbox.Button
+            className={cn(
+              'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
+              className || ''
+            )}
+          >
+            <span className="inline-flex w-full truncate">
+              <span className="flex h-6 items-center gap-1 truncate text-sm text-black dark:text-white">
+                {value}
+              </span>
+            </span>
+            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <svg
+                stroke="currentColor"
+                fill="none"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4  text-gray-400"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </span>
+          </Listbox.Button>
+          <Listbox.Options className="absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]">
+            {options.map((item, i) => (
+              <Listbox.Option
+                key={i}
+                value={item}
+                className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
+              >
+                <span className="flex items-center gap-1.5 truncate">
+                  <span
+                    className={cn(
+                      'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
+                      value === item ? 'font-semibold' : ''
+                    )}
+                  >
+                    {item}
+                  </span>
+                  {value === item && (
+                    <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
+                      <CheckMark />
+                    </span>
+                  )}
+                </span>
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Listbox>
+      </div>
+    </div>
+  );
+}
+
+export default Dropdown;
diff --git a/client/src/components/ui/Landing.jsx b/client/src/components/ui/Landing.jsx
index f2400f72b5..3412018382 100644
--- a/client/src/components/ui/Landing.jsx
+++ b/client/src/components/ui/Landing.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import useDocumentTitle from '~/hooks/useDocumentTitle';
-import Templates from '../Prompts/Templates';
+import Templates from '../ui/Templates';
 import SunIcon from '../svg/SunIcon';
 import LightningIcon from '../svg/LightningIcon';
 import CautionIcon from '../svg/CautionIcon';
diff --git a/client/src/components/Input/OpenAIOptions/ModelDropDown.jsx b/client/src/components/ui/ModelDropDown.jsx
similarity index 81%
rename from client/src/components/Input/OpenAIOptions/ModelDropDown.jsx
rename to client/src/components/ui/ModelDropDown.jsx
index c4da1cbd21..5df5acc6f0 100644
--- a/client/src/components/Input/OpenAIOptions/ModelDropDown.jsx
+++ b/client/src/components/ui/ModelDropDown.jsx
@@ -1,22 +1,27 @@
 import React from 'react';
-import CheckMark from '../../svg/CheckMark';
+import CheckMark from '../svg/CheckMark';
 import { Listbox } from '@headlessui/react';
 import { useRecoilValue } from 'recoil';
 import { cn } from '~/utils/';
 import store from '~/store';
 
-function ModelDropDown({ model, setModel, endpoint }) {
+function ModelDropDown({ model, setModel, endpoint, containerClassName, className }) {
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
 
   return (
-    <div className="flex items-center justify-center gap-2">
+    <div className={cn('flex items-center justify-center gap-2', containerClassName)}>
       <div className="relative w-full">
         <Listbox
           value={model}
           onChange={setModel}
         >
-          <Listbox.Button className="relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm">
+          <Listbox.Button
+            className={cn(
+              'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-green-600 focus:outline-none focus:ring-1 focus:ring-green-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
+              className || ''
+            )}
+          >
             <Listbox.Label
               className="block text-xs text-gray-700 dark:text-gray-500"
               id="headlessui-listbox-label-:r1:"
@@ -25,7 +30,9 @@ function ModelDropDown({ model, setModel, endpoint }) {
               Model
             </Listbox.Label>
             <span className="inline-flex w-full truncate">
-              <span className="flex h-6 items-center gap-1 truncate text-sm">{model}</span>
+              <span className="flex h-6 items-center gap-1 truncate text-sm text-black dark:text-white">
+                {model}
+              </span>
             </span>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
               <svg
diff --git a/client/src/components/Input/OpenAIOptions/ModelSelect.jsx b/client/src/components/ui/ModelSelect.jsx
similarity index 94%
rename from client/src/components/Input/OpenAIOptions/ModelSelect.jsx
rename to client/src/components/ui/ModelSelect.jsx
index 6ae9520f04..c8647fbaff 100644
--- a/client/src/components/Input/OpenAIOptions/ModelSelect.jsx
+++ b/client/src/components/ui/ModelSelect.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button } from '../../ui/Button.tsx';
+import { Button } from './Button.tsx';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,7 +8,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   DropdownMenuRadioItem
-} from '../../ui/DropdownMenu.tsx';
+} from './DropdownMenu.tsx';
 
 const ModelSelect = ({ model, onChange, availableModels, ...props }) => {
   const [menuOpen, setMenuOpen] = useState(false);
diff --git a/client/src/components/Prompts/Prompt.jsx b/client/src/components/ui/Prompt.jsx
similarity index 100%
rename from client/src/components/Prompts/Prompt.jsx
rename to client/src/components/ui/Prompt.jsx
diff --git a/client/src/components/Prompts/Templates.jsx b/client/src/components/ui/Templates.jsx
similarity index 100%
rename from client/src/components/Prompts/Templates.jsx
rename to client/src/components/ui/Templates.jsx
diff --git a/client/src/store/conversation.js b/client/src/store/conversation.js
index 6088c9957d..0e312a633d 100644
--- a/client/src/store/conversation.js
+++ b/client/src/store/conversation.js
@@ -27,7 +27,6 @@ import getDefaultConversation from '~/utils/getDefaultConversation';
 //   clientId: null,
 //   invocationId: 1,
 //   toneStyle: null,
-//   suggestions: []
 // };
 
 const conversation = atom({
@@ -62,10 +61,10 @@ const useConversation = () => {
 
   const switchToConversation = useRecoilCallback(
     ({ snapshot }) =>
-      async (_conversation, messages = null, targetEndpoint = null) => {
+      async (_conversation, messages = null, preset = null) => {
         const prevConversation = await snapshot.getPromise(conversation);
         const endpointsFilter = await snapshot.getPromise(endpoints.endpointsFilter);
-        _switchToConversation(_conversation, messages, targetEndpoint, {
+        _switchToConversation(_conversation, messages, preset, {
           endpointsFilter,
           prevConversation
         });
@@ -76,7 +75,7 @@ const useConversation = () => {
   const _switchToConversation = (
     conversation,
     messages = null,
-    targetEndpoint = null,
+    preset = null,
     { endpointsFilter = {}, prevConversation = {} }
   ) => {
     let { endpoint = null } = conversation;
@@ -87,7 +86,7 @@ const useConversation = () => {
         conversation,
         endpointsFilter,
         prevConversation,
-        targetEndpoint
+        preset
       });
 
     setConversation(conversation);
@@ -95,7 +94,7 @@ const useConversation = () => {
     resetLatestMessage();
   };
 
-  const newConversation = (template = {}, targetEndpoint = null) => {
+  const newConversation = (template = {}, preset) => {
     switchToConversation(
       {
         conversationId: 'new',
@@ -103,7 +102,7 @@ const useConversation = () => {
         ...template
       },
       [],
-      targetEndpoint
+      preset
     );
   };
 
diff --git a/client/src/store/index.js b/client/src/store/index.js
index e7c625b92c..f400853ac6 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -6,6 +6,7 @@ import user from './user';
 import text from './text';
 import submission from './submission';
 import search from './search';
+import preset from './preset';
 
 export default {
   ...conversation,
@@ -15,5 +16,6 @@ export default {
   ...user,
   text,
   ...submission,
-  ...search
+  ...search,
+  ...preset
 };
diff --git a/client/src/store/preset.js b/client/src/store/preset.js
new file mode 100644
index 0000000000..f2f342684e
--- /dev/null
+++ b/client/src/store/preset.js
@@ -0,0 +1,40 @@
+import endpoints from './endpoints';
+import { atom, selector, useSetRecoilState, useResetRecoilState, useRecoilCallback } from 'recoil';
+
+// preset structure is as same defination as conversation
+// sample structure
+// {
+//   presetId: 'new',
+//   title: 'New Chat',
+//   user: null,
+//   // endpoint: [azureOpenAI, openAI, bingAI, chatGPTBrowser]
+//   endpoint: 'azureOpenAI',
+//   // for azureOpenAI, openAI, chatGPTBrowser only
+//   model: 'gpt-3.5-turbo',
+//   // for azureOpenAI, openAI only
+//   chatGptLabel: null,
+//   promptPrefix: null,
+//   temperature: 1,
+//   top_p: 1,
+//   presence_penalty: 0,
+//   frequency_penalty: 0,
+//   // for bingAI only
+//   jailbreak: false,
+//   jailbreakConversationId: null,
+//   conversationSignature: null,
+//   clientId: null,
+//   invocationId: 1,
+//   toneStyle: null,
+// };
+
+// an array of saved presets.
+// sample structure
+// [preset1, preset2, preset3]
+const presets = atom({
+  key: 'presets',
+  default: []
+});
+
+export default {
+  presets
+};
diff --git a/client/src/utils/buildPresetByConversation.js b/client/src/utils/buildPresetByConversation.js
new file mode 100644
index 0000000000..73799f08c1
--- /dev/null
+++ b/client/src/utils/buildPresetByConversation.js
@@ -0,0 +1,56 @@
+const buildPresetByConversation = ({ title, conversation, ...others }) => {
+  const { endpoint } = conversation;
+
+  let preset = {};
+  if (endpoint === 'azureOpenAI' || endpoint === 'openAI') {
+    preset = {
+      endpoint,
+      model: conversation?.model || 'gpt-3.5-turbo',
+      chatGptLabel: conversation?.chatGptLabel || null,
+      promptPrefix: conversation?.promptPrefix || null,
+      temperature: conversation?.temperature || 1,
+      top_p: conversation?.top_p || 1,
+      presence_penalty: conversation?.presence_penalty || 0,
+      frequency_penalty: conversation?.frequency_penalty || 0,
+      title,
+      ...others
+    };
+  } else if (endpoint === 'bingAI') {
+    preset = {
+      endpoint,
+      jailbreak: conversation?.jailbreak || false,
+      jailbreakConversationId: conversation?.jailbreakConversationId || null,
+      conversationSignature: null,
+      clientId: null,
+      invocationId: 1,
+      toneStyle: conversation?.toneStyle || 'fast',
+      title,
+      ...others
+    };
+  } else if (endpoint === 'chatGPTBrowser') {
+    preset = {
+      endpoint,
+      model: conversation?.model || 'text-davinci-002-render-sha',
+      title,
+      ...others
+    };
+  } else if (endpoint === null) {
+    preset = {
+      ...conversation,
+      endpoint,
+      title,
+      ...others
+    };
+  } else {
+    console.error(`Unknown endpoint ${endpoint}`);
+    preset = {
+      endpoint: null,
+      title,
+      ...others
+    };
+  }
+
+  return preset;
+};
+
+export default buildPresetByConversation;
diff --git a/client/src/utils/fetchers.js b/client/src/utils/fetchers.js
index 24c430dbd1..175967f37a 100644
--- a/client/src/utils/fetchers.js
+++ b/client/src/utils/fetchers.js
@@ -3,14 +3,19 @@ import axios from 'axios';
 import useSWR from 'swr';
 import useSWRMutation from 'swr/mutation';
 
-const fetcher = (url) => fetch(url, { credentials: 'include' }).then((res) => res.json());
+const fetcher = url => fetch(url, { credentials: 'include' }).then(res => res.json());
 const axiosFetcher = async (url, params) => {
   console.log(params, 'params');
   return axios.get(url, params);
 };
 
-const postRequest = async (url, { arg }) => {
-  return await axios.post(url, { withCredentials: true, arg });
+export const postRequest = async (url, { arg }) => {
+  return await axios({
+    method: 'post',
+    url: url,
+    withCredentials: true,
+    data: { arg }
+  });
 };
 
 export const searchFetcher = async (pre, q, pageNumber, callback) => {
diff --git a/client/src/utils/getDefaultConversation.js b/client/src/utils/getDefaultConversation.js
index e736d5aefd..397f122ab4 100644
--- a/client/src/utils/getDefaultConversation.js
+++ b/client/src/utils/getDefaultConversation.js
@@ -44,7 +44,9 @@ const buildDefaultConversation = ({ conversation, endpoint, lastConversationSetu
   return conversation;
 };
 
-const getDefaultConversation = ({ conversation, prevConversation, endpointsFilter, targetEndpoint }) => {
+const getDefaultConversation = ({ conversation, prevConversation, endpointsFilter, preset }) => {
+  const { endpoint: targetEndpoint } = preset || {};
+
   if (targetEndpoint) {
     // try to use current model
     const endpoint = targetEndpoint;
@@ -52,7 +54,7 @@ const getDefaultConversation = ({ conversation, prevConversation, endpointsFilte
       conversation = buildDefaultConversation({
         conversation,
         endpoint,
-        lastConversationSetup: {}
+        lastConversationSetup: preset
       });
       return conversation;
     } else {