feat: add jailbreak option for bingai

fix some bugs.

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

@@ -4,6 +4,7 @@ import { cn } from '~/utils';
 import { Button } from '../../ui/Button.tsx';
 import { Settings2 } from 'lucide-react';
 import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx';
+import SelectDropDown from '../../ui/SelectDropDown';
 import Settings from '../../Endpoints/BingAI/Settings.jsx';
 import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
 import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
@@ -34,8 +35,7 @@ function BingAIOptions() {
     setConversation(prevState => ({
       ...prevState,
       context: null,
-      systemMessage: null,
-      jailbreak: null
+      systemMessage: null
     }));
     setAdvancedMode(false);
   };
@@ -68,6 +68,19 @@ function BingAIOptions() {
           (!advancedMode ? ' show' : '')
         }
       >
+        <SelectDropDown
+          title="Mode"
+          value={jailbreak ? 'Sydney' : 'BingAI'}
+          setValue={value => setOption('jailbreak')(value === 'Sydney')}
+          availableValues={['BingAI', 'Sydney']}
+          showAbove={true}
+          showLabel={false}
+          className={cn(
+            cardStyle,
+            'min-w-36 z-50 flex h-[40px] w-36 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'
+          )}
+        />
+
         <Tabs
           value={toneStyle}
           className={

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
-import ModelDropDown from '../../ui/ModelDropDown.jsx';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import SelectDropDown from '../../ui/SelectDropDown.jsx';
 import { cn } from '~/utils/';
 
 import store from '~/store';
@@ -10,7 +10,8 @@ function ChatGPTOptions() {
   const { endpoint, conversationId } = conversation;
   const { model } = conversation;
 
-  console.log('ChatGPTOptions', endpoint, model);
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+
   useEffect(() => {
     if (endpoint !== 'chatGPTBrowser') return;
   }, [conversation]);
@@ -18,6 +19,8 @@ function ChatGPTOptions() {
   if (endpoint !== 'chatGPTBrowser') return null;
   if (conversationId !== 'new') return null;
 
+  const models = endpointsConfig?.['chatGPTBrowser']?.['availableModels'] || [];
+
   const setOption = param => newValue => {
     let update = {};
     update[param] = newValue;
@@ -31,11 +34,11 @@ function ChatGPTOptions() {
     'transition-colors shadow-md rounded-md min-w-[75px] font-normal bg-white border-black/10 hover:border-black/10 focus:border-black/10 dark:border-black/10 dark:hover:border-black/10 dark:focus:border-black/10 border dark:bg-gray-700 text-black dark:text-white';
 
   return (
-    <div className="openAIOptions-simple-container flex w-full items-center justify-center gap-2 show">
-      <ModelDropDown
-        model={model}
-        setModel={setOption('model')}
-        endpoint="chatGPTBrowser"
+    <div className="openAIOptions-simple-container show flex w-full items-center justify-center gap-2">
+      <SelectDropDown
+        value={model}
+        setValue={setOption('model')}
+        availableValues={models}
         showAbove={true}
         showLabel={false}
         className={cn(

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

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Settings2 } from 'lucide-react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import ModelSelect from '../../ui/ModelSelect';
-import ModelDropDown from '../../ui/ModelDropDown';
+import SelectDropDown from '../../ui/SelectDropDown';
 import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
 import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
 import { Button } from '../../ui/Button.tsx';
@@ -20,6 +19,8 @@ function OpenAIOptions() {
   const { model, chatGptLabel, promptPrefix, temperature, top_p, presence_penalty, frequency_penalty } =
     conversation;
 
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+
   useEffect(() => {
     if (endpoint !== 'openAI') return;
 
@@ -37,6 +38,8 @@ function OpenAIOptions() {
   if (endpoint !== 'openAI') return null;
   if (conversationId !== 'new') return null;
 
+  const models = endpointsConfig?.['openAI']?.['availableModels'] || [];
+
   const triggerAdvancedMode = () => setAdvancedMode(prev => !prev);
 
   const switchToSimpleMode = () => {
@@ -86,10 +89,10 @@ function OpenAIOptions() {
             ' z-50 flex h-[40px] items-center justify-center px-4 hover:bg-slate-50 data-[state=open]:bg-slate-50 dark:hover:bg-gray-600 dark:data-[state=open]:bg-gray-600'
           )}
         /> */}
-        <ModelDropDown
-          model={model}
-          setModel={setOption('model')}
-          endpoint="openAI"
+        <SelectDropDown
+          value={model}
+          setValue={setOption('model')}
+          availableValues={models}
           showAbove={true}
           showLabel={false}
           className={cn(