Feat: Exported Agent JSON Should Include Conversation Variables Configuration #11796 (#12579)

### What problem does this PR solve?

Feat: Exported Agent JSON Should Include Conversation Variables
Configuration #11796

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/use-agent-request.ts

@@ -97,6 +97,7 @@ export const EmptyDsl = {
   retrieval: [], // reference
   history: [],
   path: [],
+  variables: [],
   globals: {
     [AgentGlobals.SysQuery]: '',
     [AgentGlobals.SysUserId]: '',

web/src/pages/agent/hooks/use-export-json.ts

@@ -1,5 +1,6 @@
 import { useFetchAgent } from '@/hooks/use-agent-request';
 import { downloadJsonFile } from '@/utils/file-util';
+import { pick } from 'lodash';
 import { useCallback } from 'react';
 import { useBuildDslData } from './use-build-dsl';
 
@@ -8,7 +9,8 @@ export const useHandleExportJsonFile = () => {
   const { data } = useFetchAgent();
 
   const handleExportJson = useCallback(() => {
-    downloadJsonFile(buildDslData().graph, `${data.title}.json`);
+    const dsl = pick(buildDslData(), ['graph', 'globals', 'variables']);
+    downloadJsonFile(dsl, `${data.title}.json`);
   }, [buildDslData, data.title]);
 
   return {

web/src/pages/agents/hooks/use-create-agent.ts

@@ -71,6 +71,7 @@ export const DataflowEmptyDsl = {
   history: [],
   path: [],
   globals: {},
+  variables: [],
 };
 
 export function useCreateAgentOrPipeline() {

web/src/pages/agents/use-import-json.ts

@@ -34,25 +34,36 @@ export const useHandleImportJsonFile = () => {
           return;
         }
 
-        const graphStr = await file.text();
+        const graphOrDslStr = await file.text();
         const errorMessage = t('flow.jsonUploadContentErrorMessage');
         try {
-          const graph = JSON.parse(graphStr);
-          if (graphStr && !isEmpty(graph) && Array.isArray(graph?.nodes)) {
-            const nodes: Node[] = graph.nodes;
-
+          const graphOrDsl = JSON.parse(graphOrDslStr);
+          if (graphOrDslStr && !isEmpty(graphOrDsl)) {
             let isAgent = true;
+            // Compatible with older versions
+            const graph = graphOrDsl?.graph ? graphOrDsl.graph : graphOrDsl;
+            if (Array.isArray(graph?.nodes)) {
+              const nodes: Node[] = graph.nodes;
 
-            if (
-              hasNode(nodes, DataflowOperator.Begin) &&
-              hasNode(nodes, DataflowOperator.Parser)
-            ) {
-              isAgent = false;
+              if (
+                hasNode(nodes, DataflowOperator.Begin) &&
+                hasNode(nodes, DataflowOperator.Parser)
+              ) {
+                isAgent = false;
+              }
             }
 
             const dsl = isAgent
-              ? { ...EmptyDsl, graph }
-              : { ...DataflowEmptyDsl, graph };
+              ? { ...EmptyDsl, graph: graph }
+              : { ...DataflowEmptyDsl, graph: graph };
+
+            if (graphOrDsl.globals) {
+              dsl.globals = graphOrDsl.globals;
+            }
+
+            if (graphOrDsl.variables) {
+              dsl.variables = graphOrDsl.variables;
+            }
 
             setAgent({
               title: name,
@@ -66,6 +77,7 @@ export const useHandleImportJsonFile = () => {
             message.error(errorMessage);
           }
         } catch (error) {
+          console.log('🚀 ~ useHandleImportJsonFile ~ error:', error);
           message.error(errorMessage);
         }
       }