[edtior][client] 2/n clear outputs functionality (#791)

[edtior][client] 2/n clear outputs functionality



added a button that clears all outputs.

- added an action
- call to server api

## Testplan

- Run prompt
- validate config has an output
- clear outputs
- validate config cleared outputs.


https://github.com/lastmile-ai/aiconfig/assets/141073967/f1622528-5a77-49cd-80a3-581520229a7f

Author: Ankush-lastmile

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

@@ -68,6 +68,11 @@ export default function Editor() {
     });
   }, []);
 
+  const clearOutputs = useCallback(async () => {
+    return await ufetch.post(ROUTE_TABLE.CLEAR_OUTPUTS, {
+    });
+  }, []);
+
   const runPrompt = useCallback(
     async (
       promptName: string,
@@ -153,6 +158,7 @@ export default function Editor() {
   const callbacks: AIConfigCallbacks = useMemo(
     () => ({
       addPrompt,
+      clearOutputs,
       deletePrompt,
       getModels,
       getServerStatus,
@@ -166,6 +172,7 @@ export default function Editor() {
     }),
     [
       addPrompt,
+      clearOutputs,
       deletePrompt,
       getModels,
       getServerStatus,

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

@@ -8,6 +8,7 @@ import {
   Text,
   Tooltip,
   Alert,
+  Group,
 } from "@mantine/core";
 import { Notifications, showNotification } from "@mantine/notifications";
 import {
@@ -71,11 +72,8 @@ type RunPromptStreamEvent =
 export type RunPromptStreamCallback = (event: RunPromptStreamEvent) => void;
 
 export type AIConfigCallbacks = {
-  addPrompt: (
-    promptName: string,
-    prompt: Prompt,
-    index: number
-  ) => Promise<{ aiconfig: AIConfig }>;
+  addPrompt: (promptName: string, prompt: Prompt, index: number) => Promise<{ aiconfig: AIConfig }>;
+  clearOutputs: () => Promise<{ aiconfig: AIConfig }>;
   deletePrompt: (promptName: string) => Promise<void>;
   getModels: (search: string) => Promise<string[]>;
   getServerStatus?: () => Promise<{ status: "OK" | "ERROR" }>;
@@ -543,6 +541,26 @@ export default function EditorContainer({
     [deletePromptCallback, dispatch]
   );
 
+  const clearOutputsCallback = callbacks.clearOutputs;
+  const onClearOutputs = useCallback(
+    async () => {
+      dispatch({
+        type: "CLEAR_OUTPUTS",
+      });
+      try {
+        await clearOutputsCallback();
+      } catch (err: unknown) {
+        const message = (err as RequestCallbackError).message ?? null;
+        showNotification({
+          title: "Error clearing outputs",
+          message,
+          color: "red",
+        });
+      }
+    },
+    [clearOutputsCallback, dispatch]
+  );
+
   const runPromptCallback = callbacks.runPrompt;
 
   const onRunPrompt = useCallback(
@@ -775,6 +793,11 @@ export default function EditorContainer({
       )}
       <Container maw="80rem">
         <Flex justify="flex-end" mt="md" mb="xs">
+          <Group>
+            <Button loading={undefined} onClick={onClearOutputs} size="xs" variant="gradient">
+              Clear Outputs
+            </Button>
+          
           <Tooltip
             label={isDirty ? "Save changes to config" : "No unsaved changes"}
           >
@@ -789,6 +812,7 @@ export default function EditorContainer({
               Save
             </Button>
           </Tooltip>
+          </Group>
         </Flex>
         <ConfigNameDescription
           name={aiconfigState.name}

python/src/aiconfig/editor/client/src/components/aiconfigReducer.ts

@@ -10,6 +10,7 @@ export type AIConfigReducerAction =
 
 export type MutateAIConfigAction =
   | AddPromptAction
+  | ClearOutputsAction
   | DeletePromptAction
   | RunPromptAction
   | SetDescriptionAction
@@ -34,6 +35,10 @@ export type AddPromptAction = {
   prompt: ClientPrompt;
 };
 
+export type ClearOutputsAction = {
+  type: "CLEAR_OUTPUTS";
+};
+
 export type DeletePromptAction = {
   type: "DELETE_PROMPT";
   id: string;
@@ -215,6 +220,29 @@ export default function aiconfigReducer(
     case "ADD_PROMPT_AT_INDEX": {
       return reduceInsertPromptAtIndex(dirtyState, action.index, action.prompt);
     }
+    case "CLEAR_OUTPUTS": {
+      const prompts = state.prompts.map((prompt) => {
+        if (prompt.outputs) {
+          return {
+             ...prompt,
+              outputs: undefined
+           }
+        } else {
+          return prompt;
+        }
+      });
+
+
+    for (const prompt of prompts) {
+      if (prompt.outputs) {
+        delete prompt.outputs;
+    }}
+
+      return {
+        ...dirtyState,
+        prompts,
+      };
+    }
     case "DELETE_PROMPT": {
       return {
         ...dirtyState,

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

@@ -10,6 +10,7 @@ const API_ENDPOINT = `${HOST_ENDPOINT}/api`;
 
 export const ROUTE_TABLE = {
   ADD_PROMPT: urlJoin(API_ENDPOINT, "/add_prompt"),
+  CLEAR_OUTPUTS: urlJoin(API_ENDPOINT, "/clear_outputs"),
   DELETE_PROMPT: urlJoin(API_ENDPOINT, "/delete_prompt"),
   SAVE: urlJoin(API_ENDPOINT, "/save"),
   SET_DESCRIPTION: urlJoin(API_ENDPOINT, "/set_description"),