feat: add jailbreak option for bingai

fix some bugs.

client/src/components/Endpoints/OpenAI/Settings.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import { useRecoilValue } from 'recoil';
 import TextareaAutosize from 'react-textarea-autosize';
-import ModelDropDown from '../../ui/ModelDropDown';
+import SelectDropDown from '../../ui/SelectDropDown';
 import { Input } from '~/components/ui/Input.tsx';
 import { Label } from '~/components/ui/Label.tsx';
 import { Slider } from '~/components/ui/Slider.tsx';
@@ -14,9 +15,13 @@ const defaultTextProps =
 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';
 
+import store from '~/store';
+
 function Settings(props) {
   const { readonly, model, chatGptLabel, promptPrefix, temperature, topP, freqP, presP, setOption } = props;
 
+  const endpointsConfig = useRecoilValue(store.endpointsConfig);
+
   const setModel = setOption('model');
   const setChatGptLabel = setOption('chatGptLabel');
   const setPromptPrefix = setOption('promptPrefix');
@@ -25,16 +30,18 @@ function Settings(props) {
   const setFreqP = setOption('presence_penalty');
   const setPresP = setOption('frequency_penalty');
 
+  const models = endpointsConfig?.['openAI']?.['availableModels'] || [];
+
   return (
     <>
       <div className="grid gap-6 sm:grid-cols-2">
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
-            <ModelDropDown
+            <SelectDropDown
               model={model}
+              setValue={setModel}
+              availableValues={models}
               disabled={readonly}
-              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'

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,
+      systemMessage: null
-      jailbreak: 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 { useRecoilState, useRecoilValue } from 'recoil';
-import ModelDropDown from '../../ui/ModelDropDown.jsx';
+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">
+    <div className="openAIOptions-simple-container show flex w-full items-center justify-center gap-2">
-      <ModelDropDown
+      <SelectDropDown
-        model={model}
+        value={model}
-        setModel={setOption('model')}
+        setValue={setOption('model')}
-        endpoint="chatGPTBrowser"
+        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 SelectDropDown from '../../ui/SelectDropDown';
-import ModelDropDown from '../../ui/ModelDropDown';
 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
+        <SelectDropDown
-          model={model}
+          value={model}
-          setModel={setOption('model')}
+          setValue={setOption('model')}
-          endpoint="openAI"
+          availableValues={models}
           showAbove={true}
           showLabel={false}
           className={cn(

client/src/components/ui/SelectDropDown.jsx

@@ -1,29 +1,25 @@
 import React from 'react';
-import CheckMark from '../svg/CheckMark';
+import CheckMark from '../svg/CheckMark.jsx';
 import { Listbox, Transition } from '@headlessui/react';
-import { useRecoilValue } from 'recoil';
 import { cn } from '~/utils/';
-import store from '~/store';
 
-function ModelDropDown({
+function SelectDropDown({
-  model,
+  title = 'Model',
+  value,
   disabled,
-  setModel,
+  setValue,
-  endpoint,
+  availableValues,
   showAbove = false,
   showLabel = true,
   containerClassName,
   className
 }) {
-  const endpointsConfig = useRecoilValue(store.endpointsConfig);
-  const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
-
   return (
     <div className={cn('flex items-center justify-center gap-2', containerClassName)}>
       <div className="relative w-full">
         <Listbox
-          value={model}
+          value={value}
-          onChange={setModel}
+          onChange={setValue}
           disabled={disabled}
         >
           {({ open }) => (
@@ -41,7 +37,7 @@ function ModelDropDown({
                     id="headlessui-listbox-label-:r1:"
                     data-headlessui-state=""
                   >
-                    Model
+                    {title}
                   </Listbox.Label>
                 )}
                 <span className="inline-flex w-full truncate">
@@ -51,8 +47,8 @@ function ModelDropDown({
                       !showLabel ? 'text-xs' : ''
                     )}
                   >
-                    {!showLabel && <span className="text-xs text-gray-700 dark:text-gray-500">Model:</span>}
+                    {!showLabel && <span className="text-xs text-gray-700 dark:text-gray-500">{title}:</span>}
-                    {model}
+                    {value}
                   </span>
                 </span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -82,22 +78,22 @@ function ModelDropDown({
                 className={showAbove ? 'bottom-full mb-3' : 'top-full mt-3'}
               >
                 <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%]">
-                  {models.map((modelOption, i) => (
+                  {availableValues.map((option, i) => (
                     <Listbox.Option
                       key={i}
-                      value={modelOption}
+                      value={option}
                       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',
-                            modelOption === model ? 'font-semibold' : ''
+                            option === value ? 'font-semibold' : ''
                           )}
                         >
-                          {modelOption}
+                          {option}
                         </span>
-                        {modelOption === model && (
+                        {option === value && (
                           <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
                             <CheckMark />
                           </span>
@@ -109,72 +105,10 @@ function ModelDropDown({
               </Transition>
             </>
           )}
-
-          {/* 
-          <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:"
-              data-headlessui-state=""
-            >
-              Model
-            </Listbox.Label>
-            <span className="inline-flex w-full truncate">
-              <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
-                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%]">
-            {models.map((modelOption, i) => (
-              <Listbox.Option
-                key={i}
-                value={modelOption}
-                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',
-                      modelOption === model ? 'font-semibold' : ''
-                    )}
-                  >
-                    {modelOption}
-                  </span>
-                  {modelOption === model && (
-                    <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 ModelDropDown;
+export default SelectDropDown;

client/src/utils/cleanupPreset.js

@@ -22,10 +22,6 @@ const cleanupPreset = _preset => {
       jailbreak: _preset?.jailbreak || false,
       context: _preset?.context || null,
       systemMessage: _preset?.systemMessage || null,
-      jailbreakpresetId: _preset?._jailbreakpresetId || null,
-      presetSignature: null,
-      clientId: null,
-      invocationId: 1,
       toneStyle: _preset?.toneStyle || 'fast',
       title: _preset?.title || 'New Preset'
     };

client/src/utils/getDefaultConversation.js

@@ -16,13 +16,13 @@ const buildDefaultConversation = ({ conversation, endpoint, lastConversationSetu
       ...conversation,
       endpoint,
       jailbreak: lastConversationSetup?.jailbreak || false,
-      systemMessage: lastConversationSetup?.systemMessage || null,
       context: lastConversationSetup?.context || null,
+      systemMessage: lastConversationSetup?.systemMessage || null,
+      toneStyle: lastConversationSetup?.toneStyle || 'fast',
       jailbreakConversationId: lastConversationSetup?.jailbreakConversationId || null,
       conversationSignature: null,
       clientId: null,
-      invocationId: 1,
+      invocationId: 1
-      toneStyle: lastConversationSetup?.toneStyle || 'fast'
     };
   } else if (endpoint === 'chatGPTBrowser') {
     conversation = {