[editor] Support Running Prompt with Shift or CTRL + Enter (lastmile-…

…ai#1135)

[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

Update: Show notification if trying to run a prompt while a prompt is
already running:
![Screenshot 2024-02-05 at 6 50 56
PM](https://github.com/lastmile-ai/aiconfig/assets/5060851/3893ac29-f4bd-4f24-9d03-14f3e12ea2ec)
![Screenshot 2024-02-05 at 6 51 11
PM](https://github.com/lastmile-ai/aiconfig/assets/5060851/82519044-af0f-4f77-a9a6-f07122e02089)



## 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)

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}
     />
   );

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,14 +92,40 @@ 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}>
       <RunPromptButton
         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>

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
       />