Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 11:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: set max height on customgpt prompt prefix

Browse source
This commit is contained in:
Danny Avila 2023-03-28 08:10:22 -04:00
parent 5b8483828b
commit e434b3afea
1 changed files with 8 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/src/components/Models/ModelDialog.jsx
View file

@ -19,7 +19,7 @@ import {
export default function ModelDialog({ mutate, setModelSave, handleSaveState }) { export default function ModelDialog({ mutate, setModelSave, handleSaveState }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { modelMap, initial } = useSelector((state) => state.models); const { modelMap, initial } = useSelector(state => state.models);
const [chatGptLabel, setChatGptLabel] = useState(''); const [chatGptLabel, setChatGptLabel] = useState('');
const [promptPrefix, setPromptPrefix] = useState(''); const [promptPrefix, setPromptPrefix] = useState('');
const [saveText, setSaveText] = useState('Save'); const [saveText, setSaveText] = useState('Save');
@ -27,7 +27,7 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) {
const inputRef = useRef(null); const inputRef = useRef(null);
const updateCustomGpt = manualSWR(`/api/customGpts/`, 'post'); const updateCustomGpt = manualSWR(`/api/customGpts/`, 'post');
const selectHandler = (e) => { const selectHandler = e => {
if (chatGptLabel.length === 0) { if (chatGptLabel.length === 0) {
e.preventDefault(); e.preventDefault();
setRequired(true); setRequired(true);
@ -42,7 +42,7 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) {
dispatch(setSubmission({})); dispatch(setSubmission({}));
}; };
const saveHandler = (e) => { const saveHandler = e => {
e.preventDefault(); e.preventDefault();
setModelSave(true); setModelSave(true);
const value = chatGptLabel.toLowerCase(); const value = chatGptLabel.toLowerCase();
@ -56,7 +56,7 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) {
updateCustomGpt.trigger({ value, chatGptLabel, promptPrefix }); updateCustomGpt.trigger({ value, chatGptLabel, promptPrefix });
mutate(); mutate();
setSaveText((prev) => prev + 'd!'); setSaveText(prev => prev + 'd!');
setTimeout(() => { setTimeout(() => {
setSaveText('Save'); setSaveText('Save');
}, 2500); }, 2500);
@ -84,8 +84,7 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) {
<DialogHeader> <DialogHeader>
<DialogTitle className="text-gray-800 dark:text-white">Customize ChatGPT</DialogTitle> <DialogTitle className="text-gray-800 dark:text-white">Customize ChatGPT</DialogTitle>
<DialogDescription className="text-gray-600 dark:text-gray-300"> <DialogDescription className="text-gray-600 dark:text-gray-300">
Note: important instructions are often better placed in your message rather than the Note: important instructions are often better placed in your message rather than the prefix.{' '}
prefix.{' '}
<a <a
href="https://platform.openai.com/docs/guides/chat/instructing-chat-models" href="https://platform.openai.com/docs/guides/chat/instructing-chat-models"
target="_blank" target="_blank"
@ -107,7 +106,7 @@ export default function ModelDialog({ mutate, setModelSave, handleSaveState }) {
id="chatGptLabel" id="chatGptLabel"
value={chatGptLabel} value={chatGptLabel}
ref={inputRef} ref={inputRef}
onChange={(e) => setChatGptLabel(e.target.value)} onChange={e => setChatGptLabel(e.target.value)}
placeholder="Set a custom name for ChatGPT" 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 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" 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 }) {
<TextareaAutosize <TextareaAutosize
id="promptPrefix" id="promptPrefix"
value={promptPrefix} value={promptPrefix}
onChange={(e) => 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.'" 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"
/> />
</div> </div>
</div> </div>