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 endpointsConfig = useRecoilValue(store.endpointsConfig);
const triggerExamples = () => setShowExamples(prev => !prev);
const triggerExamples = () => setShowExamples((prev) => !prev);
const setOption = param => (newValue) => {
const setOption = (param) => (newValue) => {
let update = {};
update[param] = newValue;
setPreset(prevState =>
setPreset((prevState) =>
cleanupPreset({
preset: {
...prevState,
@ -50,7 +50,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
currentExample[type] = { content: newValue };
current[i] = currentExample;
update.examples = current;
setPreset(prevState =>
setPreset((prevState) =>
cleanupPreset({
preset: {
...prevState,
@ -66,7 +66,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
let current = preset?.examples.slice() || [];
current.push({ input: { content: '' }, output: { content: '' } });
update.examples = current;
setPreset(prevState =>
setPreset((prevState) =>
cleanupPreset({
preset: {
...prevState,
@ -82,7 +82,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
let current = preset?.examples.slice() || [];
if (current.length <= 1) {
update.examples = [{ input: { content: '' }, output: { content: '' } }];
setPreset(prevState =>
setPreset((prevState) =>
cleanupPreset({
preset: {
...prevState,
@ -95,7 +95,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
}
current.pop();
update.examples = current;
setPreset(prevState =>
setPreset((prevState) =>
cleanupPreset({
preset: {
...prevState,
@ -131,6 +131,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
useEffect(() => {
setPreset(_preset);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
return (
@ -148,7 +149,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
<Input
id="chatGptLabel"
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"
className={cn(
defaultTextProps,
@ -187,7 +188,7 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
<div className="w-full p-0">
{((preset?.endpoint === 'google' && !showExamples) ||
preset?.endpoint !== 'google') && (
<Settings preset={_preset} setOption={setOption} />
<Settings preset={preset} setOption={setOption} />
)}
{preset?.endpoint === 'google' && showExamples && (
<Examples

View file

@ -1,3 +1,4 @@
import React from 'react';
import { useRecoilValue } from 'recoil';
import TextareaAutosize from 'react-textarea-autosize';
import SelectDropDown from '../../ui/SelectDropDown';
@ -29,7 +30,7 @@ function Settings(props) {
setOption,
edit = false
} = 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 setModel = setOption('model');
@ -67,7 +68,7 @@ function Settings(props) {
id="modelLabel"
disabled={readonly}
value={modelLabel || ''}
onChange={e => setModelLabel(e.target.value || null)}
onChange={(e) => setModelLabel(e.target.value || null)}
placeholder="Set a custom name for PaLM2"
className={cn(
defaultTextProps,
@ -83,7 +84,7 @@ function Settings(props) {
id="promptPrefix"
disabled={readonly}
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."
className={cn(
defaultTextProps,
@ -103,7 +104,7 @@ function Settings(props) {
id="temp-int"
disabled={readonly}
value={temperature}
onChange={value => setTemperature(value)}
onChange={(value) => setTemperature(value)}
max={1}
min={0}
step={0.01}
@ -120,7 +121,7 @@ function Settings(props) {
<Slider
disabled={readonly}
value={[temperature]}
onValueChange={value => setTemperature(value[0])}
onValueChange={(value) => setTemperature(value[0])}
doubleClickHandler={() => setTemperature(1)}
max={1}
min={0}
@ -140,7 +141,7 @@ function Settings(props) {
id="top-p-int"
disabled={readonly}
value={topP}
onChange={value => setTopP(value)}
onChange={(value) => setTopP(value)}
max={1}
min={0}
step={0.01}
@ -157,7 +158,7 @@ function Settings(props) {
<Slider
disabled={readonly}
value={[topP]}
onValueChange={value => setTopP(value[0])}
onValueChange={(value) => setTopP(value[0])}
doubleClickHandler={() => setTopP(1)}
max={1}
min={0}
@ -178,7 +179,7 @@ function Settings(props) {
id="top-k-int"
disabled={readonly}
value={topK}
onChange={value => setTopK(value)}
onChange={(value) => setTopK(value)}
max={40}
min={1}
step={0.01}
@ -195,7 +196,7 @@ function Settings(props) {
<Slider
disabled={readonly}
value={[topK]}
onValueChange={value => setTopK(value[0])}
onValueChange={(value) => setTopK(value[0])}
doubleClickHandler={() => setTopK(0)}
max={40}
min={1}
@ -216,7 +217,7 @@ function Settings(props) {
id="max-tokens-int"
disabled={readonly}
value={maxOutputTokens}
onChange={value => setMaxOutputTokens(value)}
onChange={(value) => setMaxOutputTokens(value)}
max={1024}
min={1}
step={1}
@ -233,7 +234,7 @@ function Settings(props) {
<Slider
disabled={readonly}
value={[maxOutputTokens]}
onValueChange={value => setMaxOutputTokens(value[0])}
onValueChange={(value) => setMaxOutputTokens(value[0])}
doubleClickHandler={() => setMaxOutputTokens(0)}
max={1024}
min={1}