diff --git a/src/react/prompt_ux.tsx b/src/react/prompt_ux.tsx index 45718d5..1b27862 100644 --- a/src/react/prompt_ux.tsx +++ b/src/react/prompt_ux.tsx @@ -22,6 +22,55 @@ export function HeaderPrompt(props: { const [placeholder, setPlaceholder] = useState(placeholderType); const [buttonColor, setButtonColor] = useState(buttonDefaultColor); + const handleInsertTemplate = () => { + if (isLoadingTemplate) { + props.abortController.abort("User cancelled"); + setIsLoadingTemplate(false); + setButtonPrompt("Talk"); + setPlaceholder(placeholderType); + setPromptText(""); + setButtonColor(buttonDefaultColor); + } else { + setIsLoadingTemplate(true); + setButtonPrompt("Cancel"); + setPlaceholder(placeholderTalk); + setPromptText(""); + setButtonColor("bg-red-500"); + console.log("Inserting template: " + prompt); + props + .applyAgentEdits(prompt, props.treeView, props.abortController) + .then((result: PrompterResult) => { + switch (result) { + case "success": + console.log("Template inserted successfully"); + break; + case "tooManyErrors": + console.log("Too many errors"); + break; + case "tooManyEdits": + console.log("Too many edits"); + break; + case "aborted": + console.log("Aborted"); + break; + } + setButtonColor(buttonDefaultColor); + setIsLoadingTemplate(false); + setButtonPrompt("Talk"); + setPlaceholder(placeholderType); + setPromptText(prompt); + }); + } + }; + + // capture the return key to insert the template + // when the input field is focused + document.onkeydown = (e) => { + if (e.key === "Enter" && document.activeElement?.id === "insertTemplateInput") { + handleInsertTemplate(); + } + }; + return (
@@ -45,44 +94,7 @@ export function HeaderPrompt(props: { className={`${buttonColor} hover:bg-gray-800 text-white font-bold w-20 h-full py-1 px-2 rounded`} id="insertTemplateButton" onClick={() => { - if (isLoadingTemplate) { - props.abortController.abort("User cancelled"); - setIsLoadingTemplate(false); - setButtonPrompt("Talk"); - setPlaceholder(placeholderType); - setPromptText(""); - setButtonColor(buttonDefaultColor); - } else { - setIsLoadingTemplate(true); - setButtonPrompt("Cancel"); - setPlaceholder(placeholderTalk); - setPromptText(""); - setButtonColor("bg-red-500"); - console.log("Inserting template: " + prompt); - props - .applyAgentEdits(prompt, props.treeView, props.abortController) - .then((result: PrompterResult) => { - switch (result) { - case "success": - console.log("Template inserted successfully"); - break; - case "tooManyErrors": - console.log("Too many errors"); - break; - case "tooManyEdits": - console.log("Too many edits"); - break; - case "aborted": - console.log("Aborted"); - break; - } - setButtonColor(buttonDefaultColor); - setIsLoadingTemplate(false); - setButtonPrompt("Talk"); - setPlaceholder(placeholderType); - setPromptText(prompt); - }); - } + handleInsertTemplate(); }} > {buttonPrompt}