feat: update env example.

feat: support OPENAI_REVERSE_PROXY
feat: support set availModels in env file

fix: chatgpt Browser send logic refactor.

fix: title wrong usage of responseMessage
BREAKING: some env paramaters has been changed!

client/src/components/Endpoints/EditPresetDialog.jsx

@@ -20,13 +20,18 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
   const setPresets = useSetRecoilState(store.presets);
 
   const availableEndpoints = useRecoilValue(store.availableEndpoints);
+  const endpointsFilter = useRecoilValue(store.endpointsFilter);
+
   const setOption = param => newValue => {
     let update = {};
     update[param] = newValue;
     setPreset(prevState =>
       cleanupPreset({
-        ...prevState,
-        ...update
+        preset: {
+          ...prevState,
+          ...update
+        },
+        endpointsFilter
       })
     );
   };
@@ -38,7 +43,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
     axios({
       method: 'post',
       url: '/api/presets',
-      data: cleanupPreset(preset),
+      data: cleanupPreset({ preset, endpointsFilter }),
       withCredentials: true
     }).then(res => {
       setPresets(res?.data);
@@ -47,7 +52,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
 
   const exportPreset = () => {
     exportFromJSON({
-      data: cleanupPreset(preset),
+      data: cleanupPreset({ preset, endpointsFilter }),
       fileName: `${preset?.title}.json`,
       exportType: exportFromJSON.types.json
     });

client/src/components/Endpoints/EndpointOptionsDialog.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
 import exportFromJSON from 'export-from-json';
 import DialogTemplate from '../ui/DialogTemplate.jsx';
 import { Dialog, DialogButton } from '../ui/Dialog.tsx';
@@ -7,12 +8,15 @@ import cleanupPreset from '~/utils/cleanupPreset';
 
 import Settings from './Settings';
 
+import store from '~/store';
+
 // A preset dialog to show readonly preset values.
 const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) => {
   //   const [title, setTitle] = useState('My Preset');
   const [preset, setPreset] = useState(_preset);
 
   const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
+  const endpointsFilter = useRecoilValue(store.endpointsFilter);
 
   const setOption = param => newValue => {
     let update = {};
@@ -29,7 +33,7 @@ const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }) =
 
   const exportPreset = () => {
     exportFromJSON({
-      data: cleanupPreset(preset),
+      data: cleanupPreset({ preset, endpointsFilter }),
       fileName: `${preset?.title}.json`,
       exportType: exportFromJSON.types.json
     });

client/src/components/Endpoints/SaveAsPresetDialog.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
 import axios from 'axios';
 import DialogTemplate from '../ui/DialogTemplate';
 import { Dialog } from '../ui/Dialog.tsx';
@@ -13,14 +13,18 @@ import store from '~/store';
 const SaveAsPresetDialog = ({ open, onOpenChange, preset }) => {
   const [title, setTitle] = useState(preset?.title || 'My Preset');
   const setPresets = useSetRecoilState(store.presets);
+  const endpointsFilter = useRecoilValue(store.endpointsFilter);
 
   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 = cleanupPreset({
-      ...preset,
-      title
+      preset: {
+        ...preset,
+        title
+      },
+      endpointsFilter
     });
 
     axios({

client/src/components/Input/ChatGPTOptions/index.jsx

@@ -21,6 +21,12 @@ function ChatGPTOptions() {
 
   const models = endpointsConfig?.['chatGPTBrowser']?.['availableModels'] || [];
 
+  // const modelMap = new Map([
+  //   ['Default (GPT-3.5)', 'text-davinci-002-render-sha'],
+  //   ['Legacy (GPT-3.5)', 'text-davinci-002-render-paid'],
+  //   ['GPT-4', 'gpt-4']
+  // ]);
+
   const setOption = param => newValue => {
     let update = {};
     update[param] = newValue;
@@ -43,7 +49,7 @@ function ChatGPTOptions() {
         showLabel={false}
         className={cn(
           cardStyle,
-          'min-w-48 z-50 flex h-[40px] w-48 flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
+          'z-50 flex h-[40px] w-[260px] min-w-[260px] flex-none items-center justify-center px-4 ring-0 hover:cursor-pointer hover:bg-slate-50 focus:ring-0 focus:ring-offset-0 data-[state=open]:bg-slate-50 dark:bg-gray-700 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
         )}
       />
     </div>

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useSetRecoilState } from 'recoil';
 import { FileUp } from 'lucide-react';
-import store from '~/store';
-import axios from 'axios';
 import cleanupPreset from '~/utils/cleanupPreset.js';
+import { useRecoilValue } from 'recoil';
+
+import store from '~/store';
 
 // async function fetchPresets(callback) {
 //   try {
@@ -21,6 +21,7 @@ import cleanupPreset from '~/utils/cleanupPreset.js';
 
 const FileUpload = ({ onFileSelected }) => {
   // const setPresets = useSetRecoilState(store.presets);
+  const endpointsFilter = useRecoilValue(store.endpointsFilter);
 
   const handleFileChange = event => {
     const file = event.target.files[0];
@@ -29,7 +30,7 @@ const FileUpload = ({ onFileSelected }) => {
     const reader = new FileReader();
     reader.onload = e => {
       const jsonData = JSON.parse(e.target.result);
-      onFileSelected({ ...cleanupPreset(jsonData), presetId: null });
+      onFileSelected({ ...cleanupPreset({ preset: jsonData, endpointsFilter }), presetId: null });
     };
     reader.readAsText(file);
   };