feat: add jailbreak option for bingai

fix some bugs.
2025-12-17 17:00:15 +01:00 · 2023-04-05 02:46:22 +08:00 · 2023-04-05 02:46:22 +08:00 · 9f1ded7f75
commit 9f1ded7f75
parent efb440128a
7 changed files with 67 additions and 111 deletions
--- a/client/src/components/Endpoints/OpenAI/Settings.jsx
+++ b/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'
--- a/client/src/components/Input/BingAIOptions/index.jsx
+++ b/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={
--- a/client/src/components/Input/ChatGPTOptions/index.jsx
+++ b/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(
--- a/client/src/components/Input/OpenAIOptions/index.jsx
+++ b/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(
--- a/client/src/components/ui/SelectDropDown.jsx
+++ b/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({
-  model,
+function SelectDropDown({
+  title = 'Model',
+  value,
  disabled,
-  setModel,
-  endpoint,
+  setValue,
+  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}
-          onChange={setModel}
+          value={value}
+          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>}
-                    {model}
+                    {!showLabel && <span className="text-xs text-gray-700 dark:text-gray-500">{title}:</span>}
+                    {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;
--- a/client/src/utils/cleanupPreset.js
+++ b/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'
    };
--- a/client/src/utils/getDefaultConversation.js
+++ b/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,
-      toneStyle: lastConversationSetup?.toneStyle || 'fast'
+      invocationId: 1
    };
  } else if (endpoint === 'chatGPTBrowser') {
    conversation = {