mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 00:40:14 +01:00
feat: style match
This commit is contained in:
Wentao Lyu
parent
9f1ded7f75
commit
579b53de29
6 changed files with 53 additions and 36 deletions
|
|
@ -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>
|
||||
</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."
|
||||
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-[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>
|
||||
)}
|
||||
{/* <HoverCard>
|
||||
<HoverCardTrigger className="grid w-full items-center gap-2">
|
||||
</HoverCardTrigger>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue