From 579b53de2981044e117ba91018017a34cbfd6d32 Mon Sep 17 00:00:00 2001
From: Wentao Lyu <35-wentao.lyu@users.noreply.git.stereye.tech>
Date: Wed, 5 Apr 2023 03:07:46 +0800
Subject: [PATCH] feat: style match

---
 .../components/Endpoints/BingAI/Settings.jsx  | 67 ++++++++++++-------
 .../components/Endpoints/OpenAI/Settings.jsx  |  6 +-
 .../components/Input/BingAIOptions/index.jsx  |  4 +-
 .../components/Input/ChatGPTOptions/index.jsx |  4 +-
 .../components/Input/OpenAIOptions/index.jsx  |  4 +-
 client/src/components/ui/SelectDropDown.jsx   |  4 +-
 6 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Endpoints/BingAI/Settings.jsx b/client/src/components/Endpoints/BingAI/Settings.jsx
index e8b6efd20d..d024241e54 100644
--- a/client/src/components/Endpoints/BingAI/Settings.jsx
+++ b/client/src/components/Endpoints/BingAI/Settings.jsx
@@ -3,7 +3,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import { Input } from '~/components/ui/Input.tsx';
 import { Label } from '~/components/ui/Label.tsx';
 import { Checkbox } from '~/components/ui/Checkbox.tsx';
-import Dropdown from '~/components/ui/Dropdown';
+import SelectDropdown from '../../ui/SelectDropdown';
 import { axiosPost } from '~/utils/fetchers.js';
 import { cn } from '~/utils/';
 import debounce from 'lodash/debounce';
@@ -56,17 +56,27 @@ function Settings(props) {
       <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">
-            <Dropdown
+            <Label
+              htmlFor="toneStyle-dropdown"
+              className="text-left text-sm font-medium"
+            >
+              Tone Style <small className="opacity-40">(default: fast)</small>
+            </Label>
+            <SelectDropdown
               id="toneStyle-dropdown"
+              title={null}
               value={`${toneStyle.charAt(0).toUpperCase()}${toneStyle.slice(1)}`}
-              onChange={setToneStyle}
-              options={['Creative', 'Fast', 'Balanced', 'Precise']}
+              setValue={setToneStyle}
+              availableValues={['Creative', 'Fast', 'Balanced', 'Precise']}
+              disabled={readonly}
               className={cn(
                 defaultTextProps,
-                'flex h-10 max-h-10 w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
+                'flex w-full resize-none focus:outline-none focus:ring-0 focus:ring-opacity-0 focus:ring-offset-0'
               )}
               containerClassName="flex w-full resize-none"
             />
+          </div>
+          <div className="grid w-full items-center gap-2">
             <Label
               htmlFor="context"
               className="text-left text-sm font-medium"
@@ -89,7 +99,13 @@ function Settings(props) {
         </div>
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
-            <div className="flex items-center space-x-3">
+            <Label
+              htmlFor="jailbreak"
+              className="text-left text-sm font-medium"
+            >
+              Enable Sydney <small className="opacity-40">(default: false)</small>
+            </Label>
+            <div className="flex h-[40px] w-full items-center space-x-3">
               <Checkbox
                 id="jailbreak"
                 disabled={readonly}
@@ -101,11 +117,15 @@ function Settings(props) {
                 htmlFor="jailbreak"
                 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
               >
-                Jailbreak
+                Jailbreak <small>To enable Sydney</small>
               </label>
+            </div>
+          </div>
+          {showSystemMessage && (
+            <div className="grid w-full items-center gap-2">
               <Label
                 htmlFor="systemMessage"
-                className="mr-0 w-full text-right text-sm font-medium"
+                className="text-left text-sm font-medium"
                 style={{ opacity: showSystemMessage ? '1' : '0' }}
               >
                 <a
@@ -115,25 +135,22 @@ function Settings(props) {
                 >
                   System Message
                 </a>{' '}
-                <small className="opacity-40">(default: Sydney)</small>
+                <small className="opacity-40 dark:text-gray-50">(default: blank)</small>
               </Label>
+
+              <TextareaAutosize
+                id="systemMessage"
+                disabled={readonly}
+                value={systemMessage || ''}
+                onChange={e => setSystemMessage(e.target.value || null)}
+                placeholder="WARNING: Misuse of this feature can get you BANNED from using Bing! Click on 'System Message' for full instructions and the default message if omitted, which is the 'Sydney' preset that is considered safe."
+                className={cn(
+                  defaultTextProps,
+                  'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 placeholder:text-red-400'
+                )}
+              />
             </div>
-            {showSystemMessage && (
-              <>
-                <TextareaAutosize
-                  id="systemMessage"
-                  disabled={readonly}
-                  value={systemMessage || ''}
-                  onChange={e => setSystemMessage(e.target.value || null)}
-                  placeholder="WARNING: Misuse of this feature can get you BANNED from using Bing! Click on 'System Message' for full instructions and the default message if omitted, which is the 'Sydney' preset that is considered safe. Leave blank for the default message."
-                  className={cn(
-                    defaultTextProps,
-                    'flex max-h-[300px] min-h-[148px] w-full resize-none px-3 py-2 placeholder:text-red-400'
-                  )}
-                />
-              </>
-            )}
-          </div>
+          )}
           {/* <HoverCard>
             <HoverCardTrigger className="grid w-full items-center gap-2"> 
             </HoverCardTrigger>
diff --git a/client/src/components/Endpoints/OpenAI/Settings.jsx b/client/src/components/Endpoints/OpenAI/Settings.jsx
index 054e9df6ad..137cb2b2d3 100644
--- a/client/src/components/Endpoints/OpenAI/Settings.jsx
+++ b/client/src/components/Endpoints/OpenAI/Settings.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import TextareaAutosize from 'react-textarea-autosize';
-import SelectDropDown from '../../ui/SelectDropDown';
+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';
@@ -37,8 +37,8 @@ function Settings(props) {
       <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">
-            <SelectDropDown
-              model={model}
+            <SelectDropdown
+              value={model}
               setValue={setModel}
               availableValues={models}
               disabled={readonly}
diff --git a/client/src/components/Input/BingAIOptions/index.jsx b/client/src/components/Input/BingAIOptions/index.jsx
index 8965c6b11f..9c4efcc18b 100644
--- a/client/src/components/Input/BingAIOptions/index.jsx
+++ b/client/src/components/Input/BingAIOptions/index.jsx
@@ -4,7 +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 SelectDropdown from '../../ui/SelectDropdown';
 import Settings from '../../Endpoints/BingAI/Settings.jsx';
 import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
 import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
@@ -68,7 +68,7 @@ function BingAIOptions() {
           (!advancedMode ? ' show' : '')
         }
       >
-        <SelectDropDown
+        <SelectDropdown
           title="Mode"
           value={jailbreak ? 'Sydney' : 'BingAI'}
           setValue={value => setOption('jailbreak')(value === 'Sydney')}
diff --git a/client/src/components/Input/ChatGPTOptions/index.jsx b/client/src/components/Input/ChatGPTOptions/index.jsx
index eff013298a..2206c60d95 100644
--- 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, useRecoilValue } from 'recoil';
-import SelectDropDown from '../../ui/SelectDropDown.jsx';
+import SelectDropdown from '../../ui/SelectDropdown.jsx';
 import { cn } from '~/utils/';
 
 import store from '~/store';
@@ -35,7 +35,7 @@ function ChatGPTOptions() {
 
   return (
     <div className="openAIOptions-simple-container show flex w-full items-center justify-center gap-2">
-      <SelectDropDown
+      <SelectDropdown
         value={model}
         setValue={setOption('model')}
         availableValues={models}
diff --git a/client/src/components/Input/OpenAIOptions/index.jsx b/client/src/components/Input/OpenAIOptions/index.jsx
index d39b183101..40675fe7fc 100644
--- a/client/src/components/Input/OpenAIOptions/index.jsx
+++ b/client/src/components/Input/OpenAIOptions/index.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Settings2 } from 'lucide-react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import SelectDropDown from '../../ui/SelectDropDown';
+import SelectDropdown from '../../ui/SelectDropdown';
 import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
 import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
 import { Button } from '../../ui/Button.tsx';
@@ -89,7 +89,7 @@ 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'
           )}
         /> */}
-        <SelectDropDown
+        <SelectDropdown
           value={model}
           setValue={setOption('model')}
           availableValues={models}
diff --git a/client/src/components/ui/SelectDropDown.jsx b/client/src/components/ui/SelectDropDown.jsx
index 3ea1dd1170..d2e2e15f58 100644
--- a/client/src/components/ui/SelectDropDown.jsx
+++ b/client/src/components/ui/SelectDropDown.jsx
@@ -3,7 +3,7 @@ import CheckMark from '../svg/CheckMark.jsx';
 import { Listbox, Transition } from '@headlessui/react';
 import { cn } from '~/utils/';
 
-function SelectDropDown({
+function SelectDropdown({
   title = 'Model',
   value,
   disabled,
@@ -111,4 +111,4 @@ function SelectDropDown({
   );
 }
 
-export default SelectDropDown;
+export default SelectDropdown;