diff --git a/client/src/components/Models/ModelDialog.jsx b/client/src/components/Models/ModelDialog.jsx index 122bf6688a..984cb7ba4d 100644 --- a/client/src/components/Models/ModelDialog.jsx +++ b/client/src/components/Models/ModelDialog.jsx @@ -19,7 +19,7 @@ import { export default function ModelDialog({ mutate, setModelSave, handleSaveState }) { const dispatch = useDispatch(); - const { modelMap, initial } = useSelector((state) => state.models); + const { modelMap, initial } = useSelector(state => state.models); const [chatGptLabel, setChatGptLabel] = useState(''); const [promptPrefix, setPromptPrefix] = useState(''); const [saveText, setSaveText] = useState('Save'); @@ -27,7 +27,7 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) { const inputRef = useRef(null); const updateCustomGpt = manualSWR(`/api/customGpts/`, 'post'); - const selectHandler = (e) => { + const selectHandler = e => { if (chatGptLabel.length === 0) { e.preventDefault(); setRequired(true); @@ -42,7 +42,7 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) { dispatch(setSubmission({})); }; - const saveHandler = (e) => { + const saveHandler = e => { e.preventDefault(); setModelSave(true); const value = chatGptLabel.toLowerCase(); @@ -56,7 +56,7 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) { updateCustomGpt.trigger({ value, chatGptLabel, promptPrefix }); mutate(); - setSaveText((prev) => prev + 'd!'); + setSaveText(prev => prev + 'd!'); setTimeout(() => { setSaveText('Save'); }, 2500); @@ -84,8 +84,7 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) { Customize ChatGPT - Note: important instructions are often better placed in your message rather than the - prefix.{' '} + Note: important instructions are often better placed in your message rather than the prefix.{' '} setChatGptLabel(e.target.value)} + onChange={e => setChatGptLabel(e.target.value)} placeholder="Set a custom name for ChatGPT" className=" col-span-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 invalid:border-red-400 invalid:text-red-600 invalid:placeholder-red-600 invalid:placeholder-opacity-70 invalid:ring-opacity-10 focus:ring-0 focus:invalid:border-red-400 focus:invalid:ring-red-300 dark:border-none dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:invalid:border-red-600 dark:invalid:text-red-300 dark:invalid:placeholder-opacity-80 dark:focus:border-none dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0 dark:focus:invalid:ring-red-600 dark:focus:invalid:ring-opacity-50" @@ -124,9 +123,9 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) { setPromptPrefix(e.target.value)} + onChange={e => setPromptPrefix(e.target.value)} placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'" - className="col-span-3 flex h-20 w-full resize-none rounded-md border border-gray-300 bg-transparent py-2 px-3 text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-none dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-none dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0" + className="col-span-3 flex h-20 max-h-52 w-full resize-none rounded-md border border-gray-300 bg-transparent py-2 px-3 text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-none dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-none dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0" />