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:
Danny Avila 2023-05-18 14:20:41 -04:00
parent 7fdc862042
commit c1ddd07166
2 changed files with 22 additions and 20 deletions

View file

@ -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

View file

@ -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}