diff --git a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx index c3c2d12d6..b993db7d3 100644 --- a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx +++ b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx @@ -38,7 +38,7 @@ export type AIConfigCallbacks = { ) => Promise<{ aiconfig: AIConfig }>; deletePrompt: (promptName: string) => Promise; getModels: (search: string) => Promise; - runPrompt: (promptName: string) => Promise; + runPrompt: (promptName: string) => Promise<{ aiconfig: AIConfig }>; save: (aiconfig: AIConfig) => Promise; updateModel: ( promptName?: string, @@ -307,9 +307,22 @@ export default function EditorContainer({ const onRunPrompt = useCallback( async (promptId: string) => { - const promptName = getPrompt(stateRef.current, promptId)!.name; + const action: AIConfigReducerAction = { + type: "RUN_PROMPT", + id: promptId, + }; + + dispatch(action); + try { - await callbacks.runPrompt(promptName); + const promptName = getPrompt(stateRef.current, promptId)!.name; + const serverConfigRes = await callbacks.runPrompt(promptName); + + dispatch({ + type: "CONSOLIDATE_AICONFIG", + action, + config: serverConfigRes.aiconfig, + }); } catch (err: any) { showNotification({ title: "Error running prompt", diff --git a/python/src/aiconfig/editor/client/src/components/aiconfigReducer.ts b/python/src/aiconfig/editor/client/src/components/aiconfigReducer.ts index 78cf8fcc9..cc5ffbe01 100644 --- a/python/src/aiconfig/editor/client/src/components/aiconfigReducer.ts +++ b/python/src/aiconfig/editor/client/src/components/aiconfigReducer.ts @@ -9,6 +9,7 @@ export type AIConfigReducerAction = export type MutateAIConfigAction = | AddPromptAction | DeletePromptAction + | RunPromptAction | UpdatePromptInputAction | UpdatePromptNameAction | UpdatePromptModelAction @@ -32,6 +33,11 @@ export type DeletePromptAction = { id: string; }; +export type RunPromptAction = { + type: "RUN_PROMPT"; + id: string; +}; + export type UpdatePromptInputAction = { type: "UPDATE_PROMPT_INPUT"; id: string; @@ -131,6 +137,22 @@ function reduceConsolidateAIConfig( consolidatePrompt ); } + case "RUN_PROMPT": { + return reduceReplacePrompt(state, action.id, (prompt) => { + const responsePrompt = responseConfig.prompts.find( + (resPrompt) => resPrompt.name === prompt.name + ); + + return { + ...prompt, + _ui: { + ...prompt._ui, + isRunning: false, + }, + outputs: responsePrompt!.outputs, + }; + }); + } case "UPDATE_PROMPT_INPUT": { return reduceReplacePrompt(state, action.id, consolidatePrompt); } @@ -154,6 +176,15 @@ export default function aiconfigReducer( prompts: state.prompts.filter((prompt) => prompt._ui.id !== action.id), }; } + case "RUN_PROMPT": { + return reduceReplacePrompt(state, action.id, (prompt) => ({ + ...prompt, + _ui: { + ...prompt._ui, + isRunning: true, + }, + })); + } case "UPDATE_PROMPT_INPUT": { return reduceReplaceInput(state, action.id, () => action.input); } diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx index 7d705e512..c625654e2 100644 --- a/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx +++ b/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx @@ -99,7 +99,11 @@ export default memo(function PromptActionBar({ - + )} diff --git a/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx b/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx index 80bf0db10..4c0813fcb 100644 --- a/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx +++ b/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx @@ -1,8 +1,9 @@ -import { Button, createStyles, Flex, Text } from "@mantine/core"; -import { IconPlayerPlayFilled } from "@tabler/icons-react"; +import { Button, createStyles, Flex, Loader, Text } from "@mantine/core"; +import { IconPlayerPlayFilled, IconPlayerStop } from "@tabler/icons-react"; import { memo } from "react"; type Props = { + isRunning?: boolean; runPrompt: () => Promise; size: "compact" | "full"; }; @@ -15,18 +16,36 @@ const useStyles = createStyles(() => ({ }, })); -export default memo(function RunPromptButton({ runPrompt, size }: Props) { +export default memo(function RunPromptButton({ + runPrompt, + size, + isRunning = false, +}: Props) { const { classes } = useStyles(); return ( ); }); diff --git a/python/src/aiconfig/editor/client/src/shared/types.ts b/python/src/aiconfig/editor/client/src/shared/types.ts index 47280e345..6902f7238 100644 --- a/python/src/aiconfig/editor/client/src/shared/types.ts +++ b/python/src/aiconfig/editor/client/src/shared/types.ts @@ -12,6 +12,7 @@ export type EditorFile = { export type ClientPrompt = Prompt & { _ui: { id: string; + isRunning?: boolean; }; };