From 32566a618d94234f9496fbee4d56985a811571d5 Mon Sep 17 00:00:00 2001
From: Ryan Holinshead <>
Date: Mon, 5 Feb 2024 18:36:41 -0500
Subject: [PATCH] [editor] Support Running Prompt with Shift or CTRL + Enter

# [editor] Support Running Prompt with Shift or CTRL + Enter

From https://github.com/lastmile-ai/aiconfig/pull/1121/files (and also general editor feedback), add support for executing text-input prompts with Shift+Enter (or CTRL+Enter)


https://github.com/lastmile-ai/aiconfig/assets/5060851/e103bf62-3edf-4a03-b2a8-09a7c1b1c9ce


## Testing:
- Ensure execution via button (and cancelation) work
- Ensure newlines can be added with enter (no shift/ctrl modifier)
- Ensure shift + enter and ctrl + enter run the prompt; ensure they do not run it when it's already running or when readOnly is true (though can't even edit then anyway)
- Ensure the same for a prompt with no schema (hf facebook/mms-tts-eng)
---
 .../PromptInputConfigRenderer.tsx             |  8 +++++
 .../prompt_input/PromptInputRenderer.tsx      | 33 +++++++++++++++++--
 .../PromptInputSchemaRenderer.tsx             |  7 ++++
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx
index 8816f06c5..b774d09dc 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx
@@ -7,11 +7,13 @@ import { TextRenderer } from "../TextRenderer";
 type Props = {
   input: PromptInput;
   onChangeInput: (value: PromptInput) => void;
+  runPrompt: () => Promise<void>;
 };
 
 export default memo(function PromptInputConfigRenderer({
   input,
   onChangeInput,
+  runPrompt,
 }: Props) {
   const { readOnly } = useContext(AIConfigContext);
   return readOnly ? (
@@ -31,6 +33,12 @@ export default memo(function PromptInputConfigRenderer({
       label="Prompt"
       value={input as string}
       onChange={(e) => onChangeInput(e.target.value)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" && (event.shiftKey || event.ctrlKey)) {
+          event.preventDefault();
+          runPrompt();
+        }
+      }}
       disabled={readOnly}
     />
   );
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputRenderer.tsx
index ca7095b08..2e98c98e3 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputRenderer.tsx
@@ -1,5 +1,5 @@
 import { PromptInput } from "aiconfig";
-import { memo, useState } from "react";
+import { memo, useCallback, useContext, useState } from "react";
 import { PromptInputSchema } from "../../../utils/promptUtils";
 import PromptInputSchemaRenderer from "./schema_renderer/PromptInputSchemaRenderer";
 import PromptInputConfigRenderer from "./PromptInputConfigRenderer";
@@ -10,6 +10,7 @@ import { Text } from "@mantine/core";
 import JSONRenderer from "../../JSONRenderer";
 import JSONEditorToggleButton from "../../JSONEditorToggleButton";
 import RunPromptButton from "../RunPromptButton";
+import NotificationContext from "../../notifications/NotificationContext";
 
 type Props = {
   input: PromptInput;
@@ -91,6 +92,32 @@ export default memo(function PromptInputRenderer({
     </Flex>
   );
 
+  const { showNotification } = useContext(NotificationContext);
+
+  const runPrompt = useCallback(async () => {
+    if (isRunning) {
+      showNotification({
+        title: "Prompt already running",
+        message:
+          "Cannot run prompt while it is currently running. Click run button to cancel",
+        type: "warning",
+      });
+      return;
+    }
+
+    if (isRunButtonDisabled) {
+      // other prompt running, can't get here if readOnly
+      showNotification({
+        title: "Another prompt is running",
+        message: "Cannot run prompt while another prompt is running",
+        type: "warning",
+      });
+      return;
+    }
+
+    await onRunPrompt();
+  }, [isRunButtonDisabled, isRunning, onRunPrompt, showNotification]);
+
   const runPromptButton = (
     // Wrap with a div to prevent it from expanding to input height
     <div className={classes.promptInputButtonWrapper}>
@@ -98,7 +125,7 @@ export default memo(function PromptInputRenderer({
         isRunning={isRunning}
         disabled={isRunButtonDisabled}
         cancel={onCancelRun}
-        runPrompt={onRunPrompt}
+        runPrompt={runPrompt}
       />
     </div>
   );
@@ -111,11 +138,13 @@ export default memo(function PromptInputRenderer({
             input={input}
             schema={schema}
             onChangeInput={onChangeInput}
+            runPrompt={runPrompt}
           />
         ) : (
           <PromptInputConfigRenderer
             input={input}
             onChangeInput={onChangeInput}
+            runPrompt={runPrompt}
           />
         )}
       </div>
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx
index 60b9d20a2..206715a4a 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx
@@ -15,6 +15,7 @@ type Props = {
   input: PromptInput;
   schema: PromptInputSchema;
   onChangeInput: (value: PromptInput) => void;
+  runPrompt: () => Promise<void>;
 };
 
 type SchemaRendererProps = Props & {
@@ -95,6 +96,12 @@ export default memo(function PromptInputSchemaRenderer(props: Props) {
         value={props.input}
         label="Prompt"
         onChange={(e) => props.onChangeInput(e.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && (event.shiftKey || event.ctrlKey)) {
+            event.preventDefault();
+            props.runPrompt();
+          }
+        }}
         placeholder="Type a prompt"
         autosize
       />