[editor] Set Up run_prompt Callbacks

python/src/aiconfig/editor/client/src/Editor.tsx

@@ -1,8 +1,10 @@
-import EditorContainer from "./components/EditorContainer";
+import EditorContainer, {
+  AIConfigCallbacks,
+} from "./components/EditorContainer";
 import { ClientAIConfig } from "./shared/types";
 import { Flex, Loader, MantineProvider } from "@mantine/core";
 import { AIConfig, Prompt } from "aiconfig";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { ufetch } from "ufetch";
 import { ROUTE_TABLE } from "./utils/api";
 
@@ -19,7 +21,7 @@ export default function Editor() {
     loadConfig();
   }, [loadConfig]);
 
-  const onSave = useCallback(async (aiconfig: AIConfig) => {
+  const save = useCallback(async (aiconfig: AIConfig) => {
     const res = await ufetch.post(ROUTE_TABLE.SAVE, {
       // path: file path,
       aiconfig,
@@ -49,6 +51,22 @@ export default function Editor() {
     []
   );
 
+  const runPrompt = useCallback(async (promptName: string) => {
+    return await ufetch.post(ROUTE_TABLE.RUN_PROMPT, {
+      prompt_name: promptName,
+    });
+  }, []);
+
+  const callbacks: AIConfigCallbacks = useMemo(
+    () => ({
+      addPrompt,
+      getModels,
+      runPrompt,
+      save,
+    }),
+    [save, getModels, addPrompt, runPrompt]
+  );
+
   return (
     <div>
       <MantineProvider withGlobalStyles withNormalizeCSS>
@@ -57,12 +75,7 @@ export default function Editor() {
             <Loader size="xl" />
           </Flex>
         ) : (
-          <EditorContainer
-            aiconfig={aiconfig}
-            onSave={onSave}
-            getModels={getModels}
-            addPrompt={addPrompt}
-          />
+          <EditorContainer aiconfig={aiconfig} callbacks={callbacks} />
         )}
       </MantineProvider>
     </div>

python/src/aiconfig/editor/client/src/components/EditorContainer.tsx

@@ -10,13 +10,18 @@ import { getDefaultNewPromptName } from "../utils/aiconfigStateUtils";
 
 type Props = {
   aiconfig: ClientAIConfig;
+  callbacks: AIConfigCallbacks;
+};
+
+export type AIConfigCallbacks = {
   addPrompt: (
     promptName: string,
     prompt: Prompt,
     index: number
   ) => Promise<{ aiconfig: AIConfig }>;
-  onSave: (aiconfig: AIConfig) => Promise<void>;
   getModels: (search: string) => Promise<string[]>;
+  runPrompt: (promptName: string) => Promise<void>;
+  save: (aiconfig: AIConfig) => Promise<void>;
 };
 
 const useStyles = createStyles((theme) => ({
@@ -51,9 +56,7 @@ const useStyles = createStyles((theme) => ({
 
 export default function EditorContainer({
   aiconfig: initialAIConfig,
-  addPrompt,
-  onSave,
-  getModels,
+  callbacks,
 }: Props) {
   const [isSaving, setIsSaving] = useState(false);
   const [aiconfigState, dispatch] = useReducer(
@@ -64,10 +67,10 @@ export default function EditorContainer({
   const stateRef = useRef(aiconfigState);
   stateRef.current = aiconfigState;
 
-  const save = useCallback(async () => {
+  const onSave = useCallback(async () => {
     setIsSaving(true);
     try {
-      await onSave(clientConfigToAIConfig(aiconfigState));
+      await callbacks.save(clientConfigToAIConfig(aiconfigState));
     } catch (err: any) {
       showNotification({
         title: "Error saving",
@@ -77,7 +80,7 @@ export default function EditorContainer({
     } finally {
       setIsSaving(false);
     }
-  }, [aiconfigState, onSave]);
+  }, [aiconfigState, callbacks.save]);
 
   const onChangePromptInput = useCallback(
     async (promptIndex: number, newPromptInput: PromptInput) => {
@@ -135,7 +138,7 @@ export default function EditorContainer({
       dispatch(action);
 
       try {
-        const serverConfigRes = await addPrompt(
+        const serverConfigRes = await callbacks.addPrompt(
           promptName,
           newPrompt,
           promptIndex
@@ -153,7 +156,23 @@ export default function EditorContainer({
         });
       }
     },
-    [addPrompt, dispatch]
+    [callbacks.addPrompt, dispatch]
+  );
+
+  const onRunPrompt = useCallback(
+    async (promptIndex: number) => {
+      const promptName = aiconfigState.prompts[promptIndex].name;
+      try {
+        await callbacks.runPrompt(promptName);
+      } catch (err: any) {
+        showNotification({
+          title: "Error running prompt",
+          message: err.message,
+          color: "red",
+        });
+      }
+    },
+    [callbacks.runPrompt]
   );
 
   const { classes } = useStyles();
@@ -167,7 +186,7 @@ export default function EditorContainer({
           {/* <Text sx={{ textOverflow: "ellipsis", overflow: "hidden" }} size={14}>
             {path || "No path specified"}
           </Text> */}
-          <Button loading={isSaving} ml="lg" onClick={save}>
+          <Button loading={isSaving} ml="lg" onClick={onSave}>
             Save
           </Button>
         </Group>
@@ -180,13 +199,14 @@ export default function EditorContainer({
                 index={i}
                 prompt={prompt}
                 onChangePromptInput={onChangePromptInput}
+                onRunPrompt={onRunPrompt}
                 onUpdateModelSettings={onUpdatePromptModelSettings}
                 onUpdateParameters={onUpdatePromptParameters}
                 defaultConfigModelName={aiconfigState.metadata.default_model}
               />
               <div className={classes.addPromptRow}>
                 <AddPromptButton
-                  getModels={getModels}
+                  getModels={callbacks.getModels}
                   addPrompt={(model: string) =>
                     onAddPrompt(
                       i + 1 /* insert below current prompt index */,

python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx

@@ -14,6 +14,7 @@ import RunPromptButton from "./RunPromptButton";
 type Props = {
   prompt: ClientPrompt;
   promptSchema?: PromptSchema;
+  onRunPrompt: () => Promise<void>;
   onUpdateModelSettings: (settings: Record<string, unknown>) => void;
   onUpdateParameters: (data: {
     promptName?: string;
@@ -36,6 +37,7 @@ function getPromptParameters(prompt: ClientPrompt) {
 export default memo(function PromptActionBar({
   prompt,
   promptSchema,
+  onRunPrompt,
   onUpdateModelSettings,
   onUpdateParameters,
 }: Props) {
@@ -88,7 +90,7 @@ export default memo(function PromptActionBar({
               )}
             </Tabs>
           </Container>
-          <RunPromptButton prompt={prompt} size="full" />
+          <RunPromptButton runPrompt={onRunPrompt} size="full" />
         </>
       ) : (
         <Flex direction="column" justify="space-between" h="100%">
@@ -97,7 +99,7 @@ export default memo(function PromptActionBar({
               <IconClearAll />
             </ActionIcon>
           </Flex>
-          <RunPromptButton prompt={prompt} size="compact" />
+          <RunPromptButton runPrompt={onRunPrompt} size="compact" />
         </Flex>
       )}
     </Flex>

python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx

@@ -12,9 +12,13 @@ import PromptOutputBar from "./PromptOutputBar";
 type Props = {
   index: number;
   prompt: ClientPrompt;
-  onChangePromptInput: (i: number, newPromptInput: AIConfigPromptInput) => void;
-  onUpdateModelSettings: (i: number, newModelSettings: any) => void;
-  onUpdateParameters: (i: number, newParameters: any) => void;
+  onChangePromptInput: (
+    promptIndex: number,
+    newPromptInput: AIConfigPromptInput
+  ) => void;
+  onRunPrompt(promptIndex: number): Promise<void>;
+  onUpdateModelSettings: (promptIndex: number, newModelSettings: any) => void;
+  onUpdateParameters: (promptIndex: number, newParameters: any) => void;
   defaultConfigModelName?: string;
 };
 
@@ -38,6 +42,7 @@ export default memo(function PromptContainer({
   index,
   onChangePromptInput,
   defaultConfigModelName,
+  onRunPrompt,
   onUpdateModelSettings,
   onUpdateParameters,
 }: Props) {
@@ -69,6 +74,11 @@ export default memo(function PromptContainer({
     [index, onUpdateParameters]
   );
 
+  const runPrompt = useCallback(
+    async () => await onRunPrompt(index),
+    [index, onRunPrompt]
+  );
+
   // TODO: When adding support for custom PromptContainers, implement a PromptContainerRenderer which
   // will take in the index and callback and render the appropriate PromptContainer with new memoized
   // callback and not having to pass index down to PromptContainer
@@ -99,6 +109,7 @@ export default memo(function PromptContainer({
         <PromptActionBar
           prompt={prompt}
           promptSchema={promptSchema}
+          onRunPrompt={runPrompt}
           onUpdateModelSettings={updateModelSettings}
           onUpdateParameters={updateParameters}
         />

python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx

@@ -1,10 +1,9 @@
-import { ClientPrompt } from "../../shared/types";
 import { Button, createStyles, Flex, Text } from "@mantine/core";
 import { IconPlayerPlayFilled } from "@tabler/icons-react";
 import { memo } from "react";
 
 type Props = {
-  prompt: ClientPrompt;
+  runPrompt: () => Promise<void>;
   size: "compact" | "full";
 };
 
@@ -16,11 +15,11 @@ const useStyles = createStyles(() => ({
   },
 }));
 
-export default memo(function RunPromptButton({ prompt, size }: Props) {
+export default memo(function RunPromptButton({ runPrompt, size }: Props) {
   const { classes } = useStyles();
   return (
     <Button
-      onClick={() => {}}
+      onClick={runPrompt}
       p="xs"
       size="xs"
       fullWidth={size === "full"}

python/src/aiconfig/editor/client/src/utils/aiconfigStateUtils.ts

@@ -8,3 +8,7 @@ export function getDefaultNewPromptName(aiconfig: AIConfig): string {
   }
   return `prompt_${i}`;
 }
+
+export function getPromptName(aiconfig: AIConfig, promptIndex: number): string {
+  return aiconfig.prompts[promptIndex]!.name;
+}

python/src/aiconfig/editor/client/src/utils/api.ts

@@ -13,4 +13,5 @@ export const ROUTE_TABLE = {
   SAVE: urlJoin(API_ENDPOINT, "/save"),
   LOAD: urlJoin(API_ENDPOINT, "/load"),
   LIST_MODELS: urlJoin(API_ENDPOINT, "/list_models"),
+  RUN_PROMPT: urlJoin(API_ENDPOINT, "/run"),
 };