mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-18 09:20:15 +01:00
chore(EditPresetDialog.jsx): fix formatting and linting issues
feat(Settings.jsx): change max-height of the settings dialog to fit the content better
This commit is contained in:
parent
7fdc862042
commit
c1ddd07166
2 changed files with 22 additions and 20 deletions
|
|
@ -27,12 +27,12 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
|
||||||
const availableEndpoints = useRecoilValue(store.availableEndpoints);
|
const availableEndpoints = useRecoilValue(store.availableEndpoints);
|
||||||
const endpointsConfig = useRecoilValue(store.endpointsConfig);
|
const endpointsConfig = useRecoilValue(store.endpointsConfig);
|
||||||
|
|
||||||
const triggerExamples = () => setShowExamples(prev => !prev);
|
const triggerExamples = () => setShowExamples((prev) => !prev);
|
||||||
|
|
||||||
const setOption = param => (newValue) => {
|
const setOption = (param) => (newValue) => {
|
||||||
let update = {};
|
let update = {};
|
||||||
update[param] = newValue;
|
update[param] = newValue;
|
||||||
setPreset(prevState =>
|
setPreset((prevState) =>
|
||||||
cleanupPreset({
|
cleanupPreset({
|
||||||
preset: {
|
preset: {
|
||||||
...prevState,
|
...prevState,
|
||||||
|
|
@ -50,7 +50,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
|
||||||
currentExample[type] = { content: newValue };
|
currentExample[type] = { content: newValue };
|
||||||
current[i] = currentExample;
|
current[i] = currentExample;
|
||||||
update.examples = current;
|
update.examples = current;
|
||||||
setPreset(prevState =>
|
setPreset((prevState) =>
|
||||||
cleanupPreset({
|
cleanupPreset({
|
||||||
preset: {
|
preset: {
|
||||||
...prevState,
|
...prevState,
|
||||||
|
|
@ -66,7 +66,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
|
||||||
let current = preset?.examples.slice() || [];
|
let current = preset?.examples.slice() || [];
|
||||||
current.push({ input: { content: '' }, output: { content: '' } });
|
current.push({ input: { content: '' }, output: { content: '' } });
|
||||||
update.examples = current;
|
update.examples = current;
|
||||||
setPreset(prevState =>
|
setPreset((prevState) =>
|
||||||
cleanupPreset({
|
cleanupPreset({
|
||||||
preset: {
|
preset: {
|
||||||
...prevState,
|
...prevState,
|
||||||
|
|
@ -82,7 +82,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
|
||||||
let current = preset?.examples.slice() || [];
|
let current = preset?.examples.slice() || [];
|
||||||
if (current.length <= 1) {
|
if (current.length <= 1) {
|
||||||
update.examples = [{ input: { content: '' }, output: { content: '' } }];
|
update.examples = [{ input: { content: '' }, output: { content: '' } }];
|
||||||
setPreset(prevState =>
|
setPreset((prevState) =>
|
||||||
cleanupPreset({
|
cleanupPreset({
|
||||||
preset: {
|
preset: {
|
||||||
...prevState,
|
...prevState,
|
||||||
|
|
@ -95,7 +95,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
|
||||||
}
|
}
|
||||||
current.pop();
|
current.pop();
|
||||||
update.examples = current;
|
update.examples = current;
|
||||||
setPreset(prevState =>
|
setPreset((prevState) =>
|
||||||
cleanupPreset({
|
cleanupPreset({
|
||||||
preset: {
|
preset: {
|
||||||
...prevState,
|
...prevState,
|
||||||
|
|
@ -131,6 +131,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPreset(_preset);
|
setPreset(_preset);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [open]);
|
}, [open]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -148,7 +149,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
|
||||||
<Input
|
<Input
|
||||||
id="chatGptLabel"
|
id="chatGptLabel"
|
||||||
value={preset?.title || ''}
|
value={preset?.title || ''}
|
||||||
onChange={e => setOption('title')(e.target.value || '')}
|
onChange={(e) => setOption('title')(e.target.value || '')}
|
||||||
placeholder="Set a custom name, in case you can find this preset"
|
placeholder="Set a custom name, in case you can find this preset"
|
||||||
className={cn(
|
className={cn(
|
||||||
defaultTextProps,
|
defaultTextProps,
|
||||||
|
|
@ -187,7 +188,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
|
||||||
<div className="w-full p-0">
|
<div className="w-full p-0">
|
||||||
{((preset?.endpoint === 'google' && !showExamples) ||
|
{((preset?.endpoint === 'google' && !showExamples) ||
|
||||||
preset?.endpoint !== 'google') && (
|
preset?.endpoint !== 'google') && (
|
||||||
<Settings preset={_preset} setOption={setOption} />
|
<Settings preset={preset} setOption={setOption} />
|
||||||
)}
|
)}
|
||||||
{preset?.endpoint === 'google' && showExamples && (
|
{preset?.endpoint === 'google' && showExamples && (
|
||||||
<Examples
|
<Examples
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
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';
|
||||||
|
|
@ -29,7 +30,7 @@ function Settings(props) {
|
||||||
setOption,
|
setOption,
|
||||||
edit = false
|
edit = false
|
||||||
} = props;
|
} = props;
|
||||||
const maxHeight = edit ? 'max-h-[233px]' : 'max-h-[350px]';
|
const maxHeight = edit ? 'max-h-[305px]' : 'max-h-[350px]';
|
||||||
const endpointsConfig = useRecoilValue(store.endpointsConfig);
|
const endpointsConfig = useRecoilValue(store.endpointsConfig);
|
||||||
|
|
||||||
const setModel = setOption('model');
|
const setModel = setOption('model');
|
||||||
|
|
@ -67,7 +68,7 @@ function Settings(props) {
|
||||||
id="modelLabel"
|
id="modelLabel"
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={modelLabel || ''}
|
value={modelLabel || ''}
|
||||||
onChange={e => setModelLabel(e.target.value || null)}
|
onChange={(e) => setModelLabel(e.target.value || null)}
|
||||||
placeholder="Set a custom name for PaLM2"
|
placeholder="Set a custom name for PaLM2"
|
||||||
className={cn(
|
className={cn(
|
||||||
defaultTextProps,
|
defaultTextProps,
|
||||||
|
|
@ -83,7 +84,7 @@ function Settings(props) {
|
||||||
id="promptPrefix"
|
id="promptPrefix"
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={promptPrefix || ''}
|
value={promptPrefix || ''}
|
||||||
onChange={e => setPromptPrefix(e.target.value || null)}
|
onChange={(e) => setPromptPrefix(e.target.value || null)}
|
||||||
placeholder="Set custom instructions or context. Ignored if empty."
|
placeholder="Set custom instructions or context. Ignored if empty."
|
||||||
className={cn(
|
className={cn(
|
||||||
defaultTextProps,
|
defaultTextProps,
|
||||||
|
|
@ -103,7 +104,7 @@ function Settings(props) {
|
||||||
id="temp-int"
|
id="temp-int"
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={temperature}
|
value={temperature}
|
||||||
onChange={value => setTemperature(value)}
|
onChange={(value) => setTemperature(value)}
|
||||||
max={1}
|
max={1}
|
||||||
min={0}
|
min={0}
|
||||||
step={0.01}
|
step={0.01}
|
||||||
|
|
@ -120,7 +121,7 @@ function Settings(props) {
|
||||||
<Slider
|
<Slider
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={[temperature]}
|
value={[temperature]}
|
||||||
onValueChange={value => setTemperature(value[0])}
|
onValueChange={(value) => setTemperature(value[0])}
|
||||||
doubleClickHandler={() => setTemperature(1)}
|
doubleClickHandler={() => setTemperature(1)}
|
||||||
max={1}
|
max={1}
|
||||||
min={0}
|
min={0}
|
||||||
|
|
@ -140,7 +141,7 @@ function Settings(props) {
|
||||||
id="top-p-int"
|
id="top-p-int"
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={topP}
|
value={topP}
|
||||||
onChange={value => setTopP(value)}
|
onChange={(value) => setTopP(value)}
|
||||||
max={1}
|
max={1}
|
||||||
min={0}
|
min={0}
|
||||||
step={0.01}
|
step={0.01}
|
||||||
|
|
@ -157,7 +158,7 @@ function Settings(props) {
|
||||||
<Slider
|
<Slider
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={[topP]}
|
value={[topP]}
|
||||||
onValueChange={value => setTopP(value[0])}
|
onValueChange={(value) => setTopP(value[0])}
|
||||||
doubleClickHandler={() => setTopP(1)}
|
doubleClickHandler={() => setTopP(1)}
|
||||||
max={1}
|
max={1}
|
||||||
min={0}
|
min={0}
|
||||||
|
|
@ -178,7 +179,7 @@ function Settings(props) {
|
||||||
id="top-k-int"
|
id="top-k-int"
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={topK}
|
value={topK}
|
||||||
onChange={value => setTopK(value)}
|
onChange={(value) => setTopK(value)}
|
||||||
max={40}
|
max={40}
|
||||||
min={1}
|
min={1}
|
||||||
step={0.01}
|
step={0.01}
|
||||||
|
|
@ -195,7 +196,7 @@ function Settings(props) {
|
||||||
<Slider
|
<Slider
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={[topK]}
|
value={[topK]}
|
||||||
onValueChange={value => setTopK(value[0])}
|
onValueChange={(value) => setTopK(value[0])}
|
||||||
doubleClickHandler={() => setTopK(0)}
|
doubleClickHandler={() => setTopK(0)}
|
||||||
max={40}
|
max={40}
|
||||||
min={1}
|
min={1}
|
||||||
|
|
@ -216,7 +217,7 @@ function Settings(props) {
|
||||||
id="max-tokens-int"
|
id="max-tokens-int"
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={maxOutputTokens}
|
value={maxOutputTokens}
|
||||||
onChange={value => setMaxOutputTokens(value)}
|
onChange={(value) => setMaxOutputTokens(value)}
|
||||||
max={1024}
|
max={1024}
|
||||||
min={1}
|
min={1}
|
||||||
step={1}
|
step={1}
|
||||||
|
|
@ -233,7 +234,7 @@ function Settings(props) {
|
||||||
<Slider
|
<Slider
|
||||||
disabled={readonly}
|
disabled={readonly}
|
||||||
value={[maxOutputTokens]}
|
value={[maxOutputTokens]}
|
||||||
onValueChange={value => setMaxOutputTokens(value[0])}
|
onValueChange={(value) => setMaxOutputTokens(value[0])}
|
||||||
doubleClickHandler={() => setMaxOutputTokens(0)}
|
doubleClickHandler={() => setMaxOutputTokens(0)}
|
||||||
max={1024}
|
max={1024}
|
||||||
min={1}
|
min={1}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue