Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 08:50:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

feat: style match

Browse source
This commit is contained in:
Wentao Lyu 2023-04-05 03:07:46 +08:00
parent 9f1ded7f75
commit 579b53de29
6 changed files with 53 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

49
client/src/components/Endpoints/BingAI/Settings.jsx
View file

@ -3,7 +3,7 @@ import TextareaAutosize from 'react-textarea-autosize';
import { Input } from '~/components/ui/Input.tsx'; import { Input } from '~/components/ui/Input.tsx';
import { Label } from '~/components/ui/Label.tsx'; import { Label } from '~/components/ui/Label.tsx';
import { Checkbox } from '~/components/ui/Checkbox.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 { axiosPost } from '~/utils/fetchers.js';
import { cn } from '~/utils/'; import { cn } from '~/utils/';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
@ -56,17 +56,27 @@ function Settings(props) {
<div className="grid gap-6 sm:grid-cols-2"> <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="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2"> <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" id="toneStyle-dropdown"
title={null}
value={`${toneStyle.charAt(0).toUpperCase()}${toneStyle.slice(1)}`} value={`${toneStyle.charAt(0).toUpperCase()}${toneStyle.slice(1)}`}
onChange={setToneStyle} setValue={setToneStyle}
options={['Creative', 'Fast', 'Balanced', 'Precise']} availableValues={['Creative', 'Fast', 'Balanced', 'Precise']}
disabled={readonly}
className={cn( className={cn(
defaultTextProps, 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" containerClassName="flex w-full resize-none"
/> />
</div>
<div className="grid w-full items-center gap-2">
<Label <Label
htmlFor="context" htmlFor="context"
className="text-left text-sm font-medium" className="text-left text-sm font-medium"
@ -89,7 +99,13 @@ function Settings(props) {
</div> </div>
<div className="col-span-1 flex flex-col items-center justify-start gap-6"> <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="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 <Checkbox
id="jailbreak" id="jailbreak"
disabled={readonly} disabled={readonly}
@ -101,11 +117,15 @@ function Settings(props) {
htmlFor="jailbreak" htmlFor="jailbreak"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50" 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> </label>
</div>
</div>
{showSystemMessage && (
<div className="grid w-full items-center gap-2">
<Label <Label
htmlFor="systemMessage" 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' }} style={{ opacity: showSystemMessage ? '1' : '0' }}
> >
<a <a
@ -115,25 +135,22 @@ function Settings(props) {
> >
System Message System Message
</a>{' '} </a>{' '}
<small className="opacity-40">(default: Sydney)</small> <small className="opacity-40 dark:text-gray-50">(default: blank)</small>
</Label> </Label>
</div>
{showSystemMessage && (
<>
<TextareaAutosize <TextareaAutosize
id="systemMessage" id="systemMessage"
disabled={readonly} disabled={readonly}
value={systemMessage || ''} value={systemMessage || ''}
onChange={e => setSystemMessage(e.target.value || null)} 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." 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( className={cn(
defaultTextProps, defaultTextProps,
'flex max-h-[300px] min-h-[148px] w-full resize-none px-3 py-2 placeholder:text-red-400' 'flex max-h-[300px] min-h-[100px] w-full resize-none px-3 py-2 placeholder:text-red-400'
)} )}
/> />
</>
)}
</div> </div>
)}
{/* <HoverCard> {/* <HoverCard>
<HoverCardTrigger className="grid w-full items-center gap-2"> <HoverCardTrigger className="grid w-full items-center gap-2">
</HoverCardTrigger> </HoverCardTrigger>

6
client/src/components/Endpoints/OpenAI/Settings.jsx
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import TextareaAutosize from 'react-textarea-autosize'; import TextareaAutosize from 'react-textarea-autosize';
import SelectDropDown from '../../ui/SelectDropDown'; import SelectDropdown from '../../ui/SelectDropdown';
import { Input } from '~/components/ui/Input.tsx'; import { Input } from '~/components/ui/Input.tsx';
import { Label } from '~/components/ui/Label.tsx'; import { Label } from '~/components/ui/Label.tsx';
import { Slider } from '~/components/ui/Slider.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="grid gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-center justify-start gap-6"> <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="grid w-full items-center gap-2">
<SelectDropDown <SelectDropdown
model={model} value={model}
setValue={setModel} setValue={setModel}
availableValues={models} availableValues={models}
disabled={readonly} disabled={readonly}

4
client/src/components/Input/BingAIOptions/index.jsx
View file

@ -4,7 +4,7 @@ import { cn } from '~/utils';
import { Button } from '../../ui/Button.tsx'; import { Button } from '../../ui/Button.tsx';
import { Settings2 } from 'lucide-react'; import { Settings2 } from 'lucide-react';
import { Tabs, TabsList, TabsTrigger } from '../../ui/Tabs.tsx'; 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 Settings from '../../Endpoints/BingAI/Settings.jsx';
import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover'; import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog'; import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
@ -68,7 +68,7 @@ function BingAIOptions() {
(!advancedMode ? ' show' : '') (!advancedMode ? ' show' : '')
} }
> >
<SelectDropDown <SelectDropdown
title="Mode" title="Mode"
value={jailbreak ? 'Sydney' : 'BingAI'} value={jailbreak ? 'Sydney' : 'BingAI'}
setValue={value => setOption('jailbreak')(value === 'Sydney')} setValue={value => setOption('jailbreak')(value === 'Sydney')}

4
client/src/components/Input/ChatGPTOptions/index.jsx
View file

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil'; import { useRecoilState, useRecoilValue } from 'recoil';
import SelectDropDown from '../../ui/SelectDropDown.jsx'; import SelectDropdown from '../../ui/SelectDropdown.jsx';
import { cn } from '~/utils/'; import { cn } from '~/utils/';
import store from '~/store'; import store from '~/store';
@ -35,7 +35,7 @@ function ChatGPTOptions() {
return ( return (
<div className="openAIOptions-simple-container show flex w-full items-center justify-center gap-2"> <div className="openAIOptions-simple-container show flex w-full items-center justify-center gap-2">
<SelectDropDown <SelectDropdown
value={model} value={model}
setValue={setOption('model')} setValue={setOption('model')}
availableValues={models} availableValues={models}

4
client/src/components/Input/OpenAIOptions/index.jsx
View file

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Settings2 } from 'lucide-react'; import { Settings2 } from 'lucide-react';
import { useRecoilState, useRecoilValue } from 'recoil'; import { useRecoilState, useRecoilValue } from 'recoil';
import SelectDropDown from '../../ui/SelectDropDown'; import SelectDropdown from '../../ui/SelectDropdown';
import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover'; import EndpointOptionsPopover from '../../Endpoints/EndpointOptionsPopover';
import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog'; import SaveAsPresetDialog from '../../Endpoints/SaveAsPresetDialog';
import { Button } from '../../ui/Button.tsx'; 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' ' 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} value={model}
setValue={setOption('model')} setValue={setOption('model')}
availableValues={models} availableValues={models}

4
client/src/components/ui/SelectDropDown.jsx
View file

@ -3,7 +3,7 @@ import CheckMark from '../svg/CheckMark.jsx';
import { Listbox, Transition } from '@headlessui/react'; import { Listbox, Transition } from '@headlessui/react';
import { cn } from '~/utils/'; import { cn } from '~/utils/';
function SelectDropDown({ function SelectDropdown({
title = 'Model', title = 'Model',
value, value,
disabled, disabled,
@ -111,4 +111,4 @@ function SelectDropDown({
); );
} }
export default SelectDropDown; export default SelectDropdown;