feat: add export workflow and import workflow

Author: potter-sun

packages/demo/pages/ui/+Page.tsx

@@ -119,7 +119,7 @@ export default function UI() {
 
   const getTokenByclient = useCallback(async () => {
     const TOKEN =
-      "Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6Ijg5QzAwNzc1RTlGNDhEQUZGN0QzQzZGMjBBNkZDQTdDN0FDMzNDQjIiLCJ4NXQiOiJpY0FIZGVuMGphXzMwOGJ5Q21fS2ZIckRQTEkiLCJ0eXAiOiJhdCtqd3QifQ.eyJpc3MiOiJodHRwczovL2F1dGgtc3RhdGlvbi1kZXYtc3RhZ2luZy5hZXZhdGFyLmFpLyIsImV4cCI6MTc2MTExNDQ1MCwiaWF0IjoxNzYwOTQxNjUxLCJhdWQiOiJBZXZhdGFyIiwic2NvcGUiOiJBZXZhdGFyIG9mZmxpbmVfYWNjZXNzIiwianRpIjoiNzVlNTAzNzQtMDAwYS00OWUzLWFlZDYtOGM0N2IwN2YzYzFjIiwic3ViIjoiNTdiYWIyMjAtOTVkZS1kNDYxLTFlODMtM2ExY2VlOGYwYzIzIiwicHJlZmVycmVkX3VzZXJuYW1lIjoiYWZ2b2ppIiwiZW1haWwiOiJhZnZvamlAc25hcG1haWwuY2MiLCJyb2xlIjpbImJhc2ljVXNlciIsIjgwNmQzY2M2LTI2OTMtYTg0NS05Y2FhLTNhMWNlZThmNDY2ZV9Pd25lciIsIjVhN2VkOTI0LTM4NWYtMDA2YS04OWU2LTNhMWNlZThmNDU1NV9Pd25lciJdLCJwaG9uZV9udW1iZXJfdmVyaWZpZWQiOiJGYWxzZSIsImVtYWlsX3ZlcmlmaWVkIjoiRmFsc2UiLCJ1bmlxdWVfbmFtZSI6ImFmdm9qaSIsInNlY3VyaXR5X3N0YW1wIjoiR1NCNE4ySUIyTElBWk5CRzUyM0tGNVo0T0YyUUo3WDIiLCJvaV9wcnN0IjoiQWV2YXRhckF1dGhTZXJ2ZXIiLCJvaV9hdV9pZCI6ImFlNzQ5Yzk4LTg0YzgtODFmMy1lZTkzLTNhMWNlZThmMGUxMiIsImNsaWVudF9pZCI6IkFldmF0YXJBdXRoU2VydmVyIiwib2lfdGtuX2lkIjoiZGY1MTBmMWQtZWQ2ZS1kZmE5LTZlOTYtM2ExZDEyN2EwZjE1In0.LQp9Exri0cOToeXWrf8_eRl7CwBw0bCk1Wt5ypfIF-G6V7dG96I7jvaSRGub_a1EtQAz3yOZvqGyt9Qq-vayyzNITnFm05a2Ry4fkjCM_n7LS1HwDo3CRkkLkv0CsDKhL2-XI-2dmDXw9CX552UyUVC3ouqNY1VOsVATX1h29ZqozxInWHzm2MIN_KqOBDrWe36M1j5jaT0ZcHRxgIB7rr3PCw-IxrIsaUJUidVL1vuMiqRFmdtfse8F1tveeZLl6LP9UnrEsbjYnhAdguNEudUETmt4_NxYfO6zOKGJnhxvAWFE34Q7BmVuGULg2RURgDOTsUyEemmC3QNz62POZw";
+      "Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6Ijg5QzAwNzc1RTlGNDhEQUZGN0QzQzZGMjBBNkZDQTdDN0FDMzNDQjIiLCJ4NXQiOiJpY0FIZGVuMGphXzMwOGJ5Q21fS2ZIckRQTEkiLCJ0eXAiOiJhdCtqd3QifQ.eyJpc3MiOiJodHRwczovL2F1dGgtc3RhdGlvbi1kZXYtc3RhZ2luZy5hZXZhdGFyLmFpLyIsImV4cCI6MTc2MTgwNTk2MywiaWF0IjoxNzYxNjMzMTY0LCJhdWQiOiJBZXZhdGFyIiwic2NvcGUiOiJBZXZhdGFyIG9mZmxpbmVfYWNjZXNzIiwianRpIjoiNzA2N2VkZWYtMGIwZi00MDNlLTkyNTQtNDBlZTBjNjJiMTdjIiwic3ViIjoiNTdiYWIyMjAtOTVkZS1kNDYxLTFlODMtM2ExY2VlOGYwYzIzIiwicHJlZmVycmVkX3VzZXJuYW1lIjoiYWZ2b2ppIiwiZW1haWwiOiJhZnZvamlAc25hcG1haWwuY2MiLCJyb2xlIjpbImJhc2ljVXNlciIsIjgwNmQzY2M2LTI2OTMtYTg0NS05Y2FhLTNhMWNlZThmNDY2ZV9Pd25lciIsIjVhN2VkOTI0LTM4NWYtMDA2YS04OWU2LTNhMWNlZThmNDU1NV9Pd25lciJdLCJwaG9uZV9udW1iZXJfdmVyaWZpZWQiOiJGYWxzZSIsImVtYWlsX3ZlcmlmaWVkIjoiRmFsc2UiLCJ1bmlxdWVfbmFtZSI6ImFmdm9qaSIsInNlY3VyaXR5X3N0YW1wIjoiR1NCNE4ySUIyTElBWk5CRzUyM0tGNVo0T0YyUUo3WDIiLCJvaV9wcnN0IjoiQWV2YXRhckF1dGhTZXJ2ZXIiLCJvaV9hdV9pZCI6ImFlNzQ5Yzk4LTg0YzgtODFmMy1lZTkzLTNhMWNlZThmMGUxMiIsImNsaWVudF9pZCI6IkFldmF0YXJBdXRoU2VydmVyIiwib2lfdGtuX2lkIjoiNmRiNTQ2ZjQtZWE0My0wZDQyLTI5N2MtM2ExZDNiYjFiNGM3In0.Oe866mgfN96JSxM45iMa62dNosvYECMPSllj1cFPoC0DOxgNXZH9dFi77_fmAQAZgelHLFXHu8qy2NHEq-kKW22tQcbAvGxSQhnWgjAZ1xlWUTAp3kRybVJNNOlFm5G2EvLzTcTE9NhDf5Vm0_PQ3IgEFWxOdNwSM_11zCLLzesJeu6Yaz5ikFR2OVICbLPoYjSP0mK04edjFX0WVeZ-u19b-yfXXD4io3m2P-zztLL2McD42RLWR58qtEcEK-5qne5va6RU16qJyUjOWI1rtTzaVKPdJ_IkQaLRANSw6ch8VxNVO1mxyhzjdz4P6SWsXrhnoR7HQAnNA3phtim6bw";
     aevatarAI.fetchRequest.setHeaders({
       Authorization: TOKEN,
     });
@@ -268,12 +268,6 @@ export default function UI() {
                 setStage(undefined);
               }}
               editWorkflow={editWorkflow}
-              onDuplicateWorkflow={async (workflow) => {
-                setStage(undefined);
-                await sleep(1000);
-                setEditWorkflow(workflow);
-                onShowWorkflow();
-              }}
             />
           </FullScreen>
         )}

packages/ui-react/src/components/WorkflowList/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "react";
 import { v4 as uuidv4 } from "uuid";
 import WorkflowListInner from "../WorkflowListInner";
-import { aevatarAI } from "../../utils";
+import { aevatarAI, validateWorkflowData } from "../../utils";
 import type {
   IAgentInfoDetail,
   IWorkflowCoordinatorState,
@@ -24,6 +24,7 @@ import Loading from "../../assets/svg/loading.svg?react";
 import { IS_NULL_ID } from "../../constants";
 import type { IWorkflowConfigurationState } from "../WorkflowConfiguration";
 import { useToastLoading } from "../../hooks/useToastLoading";
+import dayjs from "dayjs";
 
 export interface IWorkflowListProps {
   className?: string;
@@ -260,10 +261,9 @@ export default forwardRef(function WorkflowList(
     }
   }, [onDelete, toast]);
 
-  const onDuplicateWorkflow = useCallback(
-    async (workflow: IWorkflowCoordinatorState & IAgentInfoDetail) => {
-      console.log("workflowId===", workflow);
-      const randomId = uuidv4().replace(/-/g, '').substring(0, 6)
+  const copyWorkflowViewData = useCallback(
+    (workflow: IWorkflowCoordinatorState & IAgentInfoDetail) => {
+      const randomId = uuidv4().replace(/-/g, "").substring(0, 6);
       const workflowName = `${workflow.name}_${randomId}`;
       const workflowNodeList = workflow.properties?.workflowNodeList?.map(
         (item) => {
@@ -282,6 +282,16 @@ export default forwardRef(function WorkflowList(
           name: workflowName,
         },
       };
+      return workflowViewData;
+    },
+    []
+  );
+
+  const onDuplicateWorkflow = useCallback(
+    async (workflow: IWorkflowCoordinatorState & IAgentInfoDetail) => {
+      console.log("workflowId===", workflow);
+
+      const workflowViewData = copyWorkflowViewData(workflow);
       const { dismiss } = toastLoading("Copying workflow");
 
       try {
@@ -297,7 +307,120 @@ export default forwardRef(function WorkflowList(
         });
       }
     },
-    [onEditWorkflow, toastLoading, toast]
+    [onEditWorkflow, toastLoading, toast, copyWorkflowViewData]
+  );
+
+  const onExportWorkflow = useCallback(
+    async (workflow: IWorkflowCoordinatorState & IAgentInfoDetail) => {
+      const workflowViewData = copyWorkflowViewData(workflow);
+
+      try {
+        // Convert workflow data to JSON string
+        const jsonString = JSON.stringify(workflowViewData, null, 2);
+
+        // Create Blob and download link
+        const blob = new Blob([jsonString], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+
+        // Generate filename with workflow name and timestamp
+        const timestamp = dayjs().format("YYYYMMDDHHmmss");
+        const filename = `${workflow.name}_${timestamp}.json`;
+        link.download = filename;
+
+        // Trigger download
+        document.body.appendChild(link);
+        link.click();
+
+        // Cleanup
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+
+        // Show success toast
+        toast({
+          description: `Workflow exported successfully as ${filename}`,
+          duration: 3000,
+        });
+      } catch (error) {
+        toast({
+          title: "error",
+          description: handleErrorMessage(error, "Failed to export workflow."),
+          duration: 3000,
+        });
+      }
+    },
+    [copyWorkflowViewData, toast]
+  );
+
+  const onImportWorkflow = useCallback(
+    async (file: File) => {
+      try {
+        // Read and parse file
+        const text = await file.text();
+        let workflowData: any;
+        
+        try {
+          workflowData = JSON.parse(text);
+        } catch {
+          toast({
+            title: "error",
+            description: "Invalid JSON file format. Please ensure the file is valid JSON.",
+            duration: 3000,
+          });
+          return;
+        }
+
+        // Validate workflow data structure
+        const validation = validateWorkflowData(workflowData);
+        if (!validation.isValid) {
+          toast({
+            title: "error",
+            description: validation.error || "Invalid workflow file format.",
+            duration: 3000,
+          });
+          return;
+        }
+
+        // Show loading toast
+        const { dismiss } = toastLoading("Importing workflow");
+
+        try {
+          // Create workflow from imported data
+          const result = await aevatarAI.services.workflow.createWorkflowViewData(
+            workflowData as IWorkflowViewDataParams
+          );
+          dismiss();
+
+          // Show success toast and refresh list
+          toast({
+            description: `Workflow imported successfully as ${workflowData.name}`,
+            duration: 3000,
+          });
+
+          // Refresh workflow list
+          await sleep(500);
+          getWorkflowsLoop();
+
+          // Navigate to edit page if onEditWorkflow is provided
+          if (result.id) onEditWorkflow?.(result.id);
+        } catch (error) {
+          dismiss();
+          toast({
+            title: "error",
+            description: handleErrorMessage(error, "Failed to import workflow."),
+            duration: 3000,
+          });
+        }
+      } catch (error) {
+        toast({
+          title: "error",
+          description: handleErrorMessage(error, "Failed to import workflow."),
+          duration: 3000,
+        });
+      }
+    },
+    [toast, toastLoading, getWorkflowsLoop, onEditWorkflow]
   );
 
   return (
@@ -310,6 +433,8 @@ export default forwardRef(function WorkflowList(
         onEditWorkflow={onEditWorkflow}
         onDeleteWorkflow={onDeleteWorkflow}
         onDuplicateWorkflow={onDuplicateWorkflow}
+        onExportWorkflow={onExportWorkflow}
+        onImportWorkflow={onImportWorkflow}
       />
       <DeleteGAevatarConfirm
         open={deleteOpen}

packages/ui-react/src/components/WorkflowListInner/index.tsx

@@ -12,7 +12,9 @@ import type {
 import { workflowColumns } from "./columns";
 
 import { Select, SelectContent, SelectItem, SelectTrigger } from "../ui/select";
-import { Ellipsis } from "lucide-react";
+import { Ellipsis, Import } from "lucide-react";
+import Dropzone from "react-dropzone";
+import { toast } from "../../hooks/use-toast";
 
 interface WorkflowListInnerProps {
   workflowsList: (IWorkflowCoordinatorState & IAgentInfoDetail)[];
@@ -25,7 +27,13 @@ interface WorkflowListInnerProps {
   ) => void;
   onViewExecutions?: (workflowId: string) => void;
   onNewWorkflow: () => void;
-  onDuplicateWorkflow: (workflow: IWorkflowCoordinatorState & IAgentInfoDetail) => void;
+  onDuplicateWorkflow: (
+    workflow: IWorkflowCoordinatorState & IAgentInfoDetail
+  ) => void;
+  onExportWorkflow: (
+    workflow: IWorkflowCoordinatorState & IAgentInfoDetail
+  ) => void;
+  onImportWorkflow: (file: File) => void;
 }
 
 const actionItemCls =
@@ -49,6 +57,7 @@ enum ActionType {
   ViewExecutions = "ViewExecutions",
   DuplicateWorkflow = "DuplicateWorkflow",
   DeleteWorkflow = "deleteWorkflow",
+  ExportWorkflow = "exportWorkflow",
 }
 
 export default function WorkflowListInner({
@@ -61,6 +70,8 @@ export default function WorkflowListInner({
   onViewExecutions,
   onNewWorkflow,
   onDuplicateWorkflow,
+  onExportWorkflow,
+  onImportWorkflow,
 }: WorkflowListInnerProps) {
   const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
   const tableData = useMemo(
@@ -90,6 +101,8 @@ export default function WorkflowListInner({
                   onViewExecutions?.(item.id);
                 } else if (value === ActionType.DeleteWorkflow) {
                   setDeleteItemId(item.id);
+                } else if (value === ActionType.ExportWorkflow) {
+                  onExportWorkflow?.(item);
                 }
               }}>
               <SelectTrigger
@@ -130,6 +143,14 @@ export default function WorkflowListInner({
                     value={ActionType.DuplicateWorkflow}>
                     Duplicate
                   </SelectItem>
+                  <SelectItem
+                    className={clsx(
+                      actionItemCls,
+                      "aevatar-workflow-action-select-export"
+                    )}
+                    value={ActionType.ExportWorkflow}>
+                    Export
+                  </SelectItem>
                   <SelectItem
                     className={clsx(
                       actionItemCls,
@@ -145,7 +166,13 @@ export default function WorkflowListInner({
           </div>
         ),
       })),
-    [workflowsList, onEditWorkflow, onViewExecutions, onDuplicateWorkflow]
+    [
+      workflowsList,
+      onEditWorkflow,
+      onViewExecutions,
+      onDuplicateWorkflow,
+      onExportWorkflow,
+    ]
   );
 
   return (
@@ -163,7 +190,39 @@ export default function WorkflowListInner({
           id="node-6202_82361">
           <p>Workflows</p>
         </div>
-        <div>
+        <div className="sdk:flex sdk:items-center sdk:gap-[10px]">
+          <Dropzone
+            accept={{
+              "application/json": [".json"],
+            }}
+            onDropAccepted={async (acceptedFiles) => {
+              onImportWorkflow(acceptedFiles[0]);
+            }}
+            onDropRejected={(error) => {
+              toast({
+                description:
+                  error[0]?.errors?.[0]?.message ?? "Upload file error",
+              });
+            }}
+            multiple={false}>
+            {({ getRootProps, getInputProps }) => (
+              <div
+                {...getRootProps({
+                  className: clsx(
+                    "sdk:flex sdk:items-center sdk:justify-center sdk:cursor-pointer"
+                  ),
+                  "data-testid": "dropzone-workflow-import-id",
+                })}>
+                <input {...getInputProps()} />
+                <Button
+                  variant="outline"
+                  className="sdk:text-[12px] sdk:font-geist sdk:font-semibold sdk:flex sdk:items-center sdk:gap-[5px] sdk:cursor-pointer">
+                  <Import style={{ width: 14, height: 14 }} />
+                  Import Workflow
+                </Button>
+              </div>
+            )}
+          </Dropzone>
           <Button
             variant="primary"
             className="sdk:text-[12px] sdk:font-geist sdk:font-semibold sdk:flex sdk:items-center sdk:gap-[5px] sdk:cursor-pointer"

packages/ui-react/src/utils/index.tsx

@@ -1,2 +1,3 @@
 export * from "./aevatarAI";
 export * from "./typeUtils";
+export * from "./workflowValidation";