Feature/export import stage 2 (#3063)

* add export all function

* modify exportAll to reuse existing code from other services

* modify routes of export-import

* add exportAll function into UI

* add errorhandler

* add importAll Function into UI for ChatFlow

* modify importAll Function to import tools

* remove appServer variable

* modify exportAll to exportData for new requirement in backend

* chore modify type camelCase to PascalCase in exportImportService

* add import export for variables, assistants, and checkboxes for UI

---------

Co-authored-by: Henry <hzj94@hotmail.com>

packages/ui/src/utils/errorHandler.js

@@ -0,0 +1,19 @@
+const isErrorWithMessage = (error) => {
+    return typeof error === 'object' && error !== null && 'message' in error && typeof error.message === 'string'
+}
+
+const toErrorWithMessage = (maybeError) => {
+    if (isErrorWithMessage(maybeError)) return maybeError
+
+    try {
+        return new Error(JSON.stringify(maybeError))
+    } catch {
+        // fallback in case there's an error stringifying the maybeError
+        // like with circular references for example.
+        return new Error(String(maybeError))
+    }
+}
+
+export const getErrorMessage = (error) => {
+    return toErrorWithMessage(error).message
+}

packages/ui/src/utils/exportImport.js

@@ -0,0 +1,88 @@
+import { getErrorMessage } from './errorHandler'
+import { generateExportFlowData } from './genericHelper'
+
+const sanitizeTool = (Tool) => {
+    try {
+        return Tool.map((tool) => {
+            return {
+                id: tool.id,
+                name: tool.name,
+                description: tool.description,
+                color: tool.color,
+                iconSrc: tool.iconSrc,
+                schema: tool.schema,
+                func: tool.func
+            }
+        })
+    } catch (error) {
+        throw new Error(`exportImport.sanitizeTool ${getErrorMessage(error)}`)
+    }
+}
+
+const sanitizeChatflow = (ChatFlow) => {
+    try {
+        return ChatFlow.map((chatFlow) => {
+            const sanitizeFlowData = generateExportFlowData(JSON.parse(chatFlow.flowData))
+            return {
+                id: chatFlow.id,
+                name: chatFlow.name,
+                flowData: stringify(sanitizeFlowData),
+                type: chatFlow.type
+            }
+        })
+    } catch (error) {
+        throw new Error(`exportImport.sanitizeChatflow ${getErrorMessage(error)}`)
+    }
+}
+
+const sanitizeVariable = (Variable) => {
+    try {
+        return Variable.map((variable) => {
+            return {
+                id: variable.id,
+                name: variable.name,
+                value: variable.value,
+                type: variable.type
+            }
+        })
+    } catch (error) {
+        throw new Error(`exportImport.sanitizeVariable ${getErrorMessage(error)}`)
+    }
+}
+
+const sanitizeAssistant = (Assistant) => {
+    try {
+        return Assistant.map((assistant) => {
+            return {
+                id: assistant.id,
+                details: assistant.details,
+                credential: assistant.credential,
+                iconSrc: assistant.iconSrc
+            }
+        })
+    } catch (error) {
+        throw new Error(`exportImport.sanitizeAssistant ${getErrorMessage(error)}`)
+    }
+}
+
+export const stringify = (object) => {
+    try {
+        return JSON.stringify(object, null, 2)
+    } catch (error) {
+        throw new Error(`exportImport.stringify ${getErrorMessage(error)}`)
+    }
+}
+
+export const exportData = (exportAllData) => {
+    try {
+        return {
+            Tool: sanitizeTool(exportAllData.Tool),
+            ChatFlow: sanitizeChatflow(exportAllData.ChatFlow),
+            AgentFlow: sanitizeChatflow(exportAllData.AgentFlow),
+            Variable: sanitizeVariable(exportAllData.Variable),
+            Assistant: sanitizeAssistant(exportAllData.Assistant)
+        }
+    } catch (error) {
+        throw new Error(`exportImport.exportData ${getErrorMessage(error)}`)
+    }
+}

packages/ui/src/utils/genericHelper.js

@@ -1,5 +1,5 @@
-import moment from 'moment'
 import { uniq } from 'lodash'
+import moment from 'moment'
 
 export const getUniqueNodeId = (nodeData, nodes) => {
     // Get amount of same nodes
@@ -373,18 +373,6 @@ export const getFolderName = (base64ArrayStr) => {
     }
 }
 
-export const sanitizeChatflows = (arrayChatflows) => {
-    const sanitizedChatflows = arrayChatflows.map((chatFlow) => {
-        const sanitizeFlowData = generateExportFlowData(JSON.parse(chatFlow.flowData))
-        return {
-            id: chatFlow.id,
-            name: chatFlow.name,
-            flowData: JSON.stringify(sanitizeFlowData, null, 2)
-        }
-    })
-    return sanitizedChatflows
-}
-
 export const generateExportFlowData = (flowData) => {
     const nodes = flowData.nodes
     const edges = flowData.edges