feat: support user-provided token to bingAI and chatgptBrowser

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

@@ -1,8 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { DropdownMenuRadioItem } from '../../ui/DropdownMenu.tsx';
+import { Settings } from 'lucide-react';
 import getIcon from '~/utils/getIcon';
+import { useRecoilValue } from 'recoil';
+import SetTokenDialog from '../SetTokenDialog';
+
+import store from '../../../store';
 
 export default function ModelItem({ endpoint, value, onSelect }) {
+  const [setTokenDialogOpen, setSetTokenDialogOpen] = useState(false);
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+
   const icon = getIcon({
     size: 20,
     endpoint,
@@ -10,15 +18,37 @@ export default function ModelItem({ endpoint, value, onSelect }) {
     className: 'mr-2'
   });
 
+  const isuserProvide = endpointsConfig?.[endpoint]?.userProvide;
+
   // regular model
   return (
-    <DropdownMenuRadioItem
-      value={value}
-      className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
-    >
-      {icon}
-      {endpoint}
-      {!!['azureOpenAI', 'openAI'].find(e => e === endpoint) && <sup>$</sup>}
-    </DropdownMenuRadioItem>
+    <>
+      <DropdownMenuRadioItem
+        value={value}
+        className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
+      >
+        {icon}
+        {endpoint}
+        {!!['azureOpenAI', 'openAI'].find(e => e === endpoint) && <sup>$</sup>}
+        <div className="flex w-4 flex-1" />
+        {isuserProvide ? (
+          <button
+            className="invisible m-0 mr-1 flex-initial rounded-md p-0 text-xs font-medium text-gray-400 hover:text-gray-700 group-hover:visible dark:font-normal dark:text-gray-400 dark:hover:text-gray-200"
+            onClick={e => {
+              e.preventDefault();
+              setSetTokenDialogOpen(true);
+            }}
+          >
+            <Settings className="mr-1 inline-block w-[16px] items-center stroke-1" />
+            Config Token
+          </button>
+        ) : null}
+      </DropdownMenuRadioItem>
+      <SetTokenDialog
+        open={setTokenDialogOpen}
+        onOpenChange={setSetTokenDialogOpen}
+        endpoint={endpoint}
+      />
+    </>
   );
 }

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

@@ -7,7 +7,7 @@ import store from '~/store';
 
 const FileUpload = ({ onFileSelected }) => {
   // const setPresets = useSetRecoilState(store.presets);
-  const endpointsFilter = useRecoilValue(store.endpointsFilter);
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
 
   const handleFileChange = event => {
     const file = event.target.files[0];
@@ -16,7 +16,7 @@ const FileUpload = ({ onFileSelected }) => {
     const reader = new FileReader();
     reader.onload = e => {
       const jsonData = JSON.parse(e.target.result);
-      onFileSelected({ ...cleanupPreset({ preset: jsonData, endpointsFilter }), presetId: null });
+      onFileSelected({ ...cleanupPreset({ preset: jsonData, endpointsConfig }), presetId: null });
     };
     reader.readAsText(file);
   };
@@ -24,10 +24,10 @@ const FileUpload = ({ onFileSelected }) => {
   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"
+      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 transition-colors 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>
+      <FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
+      <span className="flex text-xs ">Import</span>
       <input
         id="file-upload"
         value=""

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

@@ -1,8 +1,9 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import EditPresetDialog from '../../Endpoints/EditPresetDialog';
 import EndpointItems from './EndpointItems';
 import PresetItems from './PresetItems';
+import { Trash2 } from 'lucide-react';
 import FileUpload from './FileUpload';
 import getIcon from '~/utils/getIcon';
 import { useDeletePresetMutation, useCreatePresetMutation } from '~/data-provider';
@@ -36,14 +37,17 @@ export default function NewConversationMenu() {
   const createPresetMutation = useCreatePresetMutation();
 
   const importPreset = jsonData => {
-    createPresetMutation.mutate({...jsonData}, {
-      onSuccess: (data) => {
-        setPresets(data);
-      },
-      onError: (error) => {
-        console.error('Error uploading the preset:', error);
+    createPresetMutation.mutate(
+      { ...jsonData },
+      {
+        onSuccess: data => {
+          setPresets(data);
+        },
+        onError: error => {
+          console.error('Error uploading the preset:', error);
+        }
       }
-    })
+    );
   };
 
   // update the default model when availableModels changes
@@ -85,11 +89,11 @@ export default function NewConversationMenu() {
   };
 
   const clearAllPresets = () => {
-    deletePresetsMutation.mutate({arg: {}});
+    deletePresetsMutation.mutate({ arg: {} });
   };
 
   const onDeletePreset = preset => {
-    deletePresetsMutation.mutate({arg: preset});
+    deletePresetsMutation.mutate({ arg: preset });
   };
 
   const icon = getIcon({
@@ -146,12 +150,18 @@ export default function NewConversationMenu() {
             <FileUpload onFileSelected={importPreset} />
             <Dialog>
               <DialogTrigger asChild>
-                <Button
+                <label
+                  htmlFor="file-upload"
+                  className=" mr-1 flex h-[32px] h-auto cursor-pointer  items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal text-gray-600 transition-colors hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500"
+                >
+                  {/* <Button
                   type="button"
                   className="h-auto bg-transparent px-2 py-1 text-xs font-medium font-normal text-red-700 hover:bg-slate-200 hover:text-red-700 dark:bg-transparent dark:text-red-400 dark:hover:bg-gray-800 dark:hover:text-red-400"
-                >
+                > */}
+                  <Trash2 className="mr-1 flex w-[22px] items-center stroke-1" />
                   Clear All
-                </Button>
+                  {/* </Button> */}
+                </label>
               </DialogTrigger>
               <DialogTemplate
                 title="Clear presets"