diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx index c207e0be..3aa8c54c 100644 --- a/frontend/src/preferences/PromptsModal.tsx +++ b/frontend/src/preferences/PromptsModal.tsx @@ -1,6 +1,7 @@ import { ActiveState } from '../models/misc'; import Exit from '../assets/exit.svg'; import Input from '../components/Input'; +import React from 'react'; function AddPrompt({ setModalState, @@ -9,6 +10,7 @@ function AddPrompt({ setNewPromptName, newPromptContent, setNewPromptContent, + disableSave, }: { setModalState: (state: ActiveState) => void; handleAddPrompt?: () => void; @@ -16,6 +18,7 @@ function AddPrompt({ setNewPromptName: (name: string) => void; newPromptContent: string; setNewPromptContent: (content: string) => void; + disableSave: boolean; }) { return (
@@ -23,6 +26,8 @@ function AddPrompt({ className="absolute top-3 right-4 m-2 w-3" onClick={() => { setModalState('INACTIVE'); + setNewPromptName(''); + setNewPromptContent(''); }} > @@ -41,7 +46,7 @@ function AddPrompt({ className="h-10 rounded-lg" value={newPromptName} onChange={(e) => setNewPromptName(e.target.value)} - > + />
Prompt Name @@ -62,6 +67,8 @@ function AddPrompt({ @@ -79,6 +86,7 @@ function EditPrompt({ editPromptContent, setEditPromptContent, currentPromptEdit, + disableSave, }: { setModalState: (state: ActiveState) => void; handleEditPrompt?: (id: string, type: string) => void; @@ -87,6 +95,7 @@ function EditPrompt({ editPromptContent: string; setEditPromptContent: (content: string) => void; currentPromptEdit: { name: string; id: string; type: string }; + disableSave: boolean; }) { return (
@@ -140,7 +149,8 @@ function EditPrompt({ handleEditPrompt && handleEditPrompt(currentPromptEdit.id, currentPromptEdit.type); }} - disabled={currentPromptEdit.type === 'public'} + disabled={currentPromptEdit.type === 'public' || disableSave} + title={disableSave && editPromptName ? 'Name already exists' : ''} > Save @@ -151,6 +161,7 @@ function EditPrompt({ } export default function PromptsModal({ + existingPrompts, modalState, setModalState, type, @@ -166,6 +177,7 @@ export default function PromptsModal({ handleAddPrompt, handleEditPrompt, }: { + existingPrompts: { name: string; id: string; type: string }[]; modalState: ActiveState; setModalState: (state: ActiveState) => void; type: 'ADD' | 'EDIT'; @@ -181,6 +193,25 @@ export default function PromptsModal({ handleAddPrompt?: () => void; handleEditPrompt?: (id: string, type: string) => void; }) { + const [disableSave, setDisableSave] = React.useState(true); + const handlePrompNameChange = (edit: boolean, newName: string) => { + const nameExists = existingPrompts.find( + (prompt) => newName === prompt.name, + ); + + if (newName && !nameExists) { + setDisableSave(false); + } else { + setDisableSave(true); + } + + if (edit) { + setEditPromptName(newName); + } else { + setNewPromptName(newName); + } + }; + let view; if (type === 'ADD') { @@ -189,9 +220,10 @@ export default function PromptsModal({ setModalState={setModalState} handleAddPrompt={handleAddPrompt} newPromptName={newPromptName} - setNewPromptName={setNewPromptName} + setNewPromptName={handlePrompNameChange.bind(null, false)} newPromptContent={newPromptContent} setNewPromptContent={setNewPromptContent} + disableSave={disableSave} /> ); } else if (type === 'EDIT') { @@ -200,10 +232,11 @@ export default function PromptsModal({ setModalState={setModalState} handleEditPrompt={handleEditPrompt} editPromptName={editPromptName} - setEditPromptName={setEditPromptName} + setEditPromptName={handlePrompNameChange.bind(null, true)} editPromptContent={editPromptContent} setEditPromptContent={setEditPromptContent} currentPromptEdit={currentPromptEdit} + disableSave={disableSave} /> ); } else { diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx index 9501b47d..6e1810e5 100644 --- a/frontend/src/settings/Prompts.tsx +++ b/frontend/src/settings/Prompts.tsx @@ -179,6 +179,7 @@ export default function Prompts({