Feat: When exporting the agent DSL, the tailkey, password, and history fields need to be cleared. #13281 (#13282)

### What problem does this PR solve?
Feat: When exporting the agent DSL, the tailkey, password, and history
fields need to be cleared. #13281

### Type of change


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

Co-authored-by: Yingfeng <yingfeng.zhang@gmail.com>

web/src/constants/agent.tsx

@@ -228,3 +228,49 @@ export const initialBeginValues = {
   mode: AgentDialogueMode.Conversational,
   prologue: `Hi! I'm your assistant. What can I do for you?`,
 };
+
+export const BeginId = 'begin';
+
+export const EmptyDsl = {
+  graph: {
+    nodes: [
+      {
+        id: BeginId,
+        type: 'beginNode',
+        position: {
+          x: 50,
+          y: 200,
+        },
+        data: {
+          label: 'Begin',
+          name: 'begin',
+          form: initialBeginValues,
+        },
+        sourcePosition: 'left',
+        targetPosition: 'right',
+      },
+    ],
+    edges: [],
+  },
+  components: {
+    begin: {
+      obj: {
+        component_name: 'Begin',
+        params: {},
+      },
+      downstream: [], // other edge target is downstream, edge source is current node id
+      upstream: [], // edge source is upstream, edge target is current node id
+    },
+  },
+  retrieval: [], // reference
+  history: [],
+  path: [],
+  variables: [],
+  globals: {
+    [AgentGlobals.SysQuery]: '',
+    [AgentGlobals.SysUserId]: '',
+    [AgentGlobals.SysConversationTurns]: 0,
+    [AgentGlobals.SysFiles]: [],
+    [AgentGlobals.SysHistory]: [],
+  },
+};

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

@@ -1,11 +1,7 @@
 import { FileUploadProps } from '@/components/file-upload';
 import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
 import message from '@/components/ui/message';
-import {
-  AgentCategory,
-  AgentGlobals,
-  initialBeginValues,
-} from '@/constants/agent';
+import { AgentCategory, AgentGlobals } from '@/constants/agent';
 import { useFetchTenantInfo } from '@/hooks/use-user-setting-request';
 import {
   IAgentLogResponse,
@@ -22,7 +18,6 @@ import {
   IDebugSingleRequestBody,
 } from '@/interfaces/request/agent';
 import i18n from '@/locales/config';
-import { BeginId } from '@/pages/agent/constant';
 import { IInputs } from '@/pages/agent/interface';
 import { useGetSharedChatSearchParams } from '@/pages/next-chats/hooks/use-send-shared-message';
 import agentService, {
@@ -78,50 +73,6 @@ export const enum AgentApiAction {
   FetchSessionByIdManually = 'fetchSessionByIdManually',
 }
 
-export const EmptyDsl = {
-  graph: {
-    nodes: [
-      {
-        id: BeginId,
-        type: 'beginNode',
-        position: {
-          x: 50,
-          y: 200,
-        },
-        data: {
-          label: 'Begin',
-          name: 'begin',
-          form: initialBeginValues,
-        },
-        sourcePosition: 'left',
-        targetPosition: 'right',
-      },
-    ],
-    edges: [],
-  },
-  components: {
-    begin: {
-      obj: {
-        component_name: 'Begin',
-        params: {},
-      },
-      downstream: [], // other edge target is downstream, edge source is current node id
-      upstream: [], // edge source is upstream, edge target is current node id
-    },
-  },
-  retrieval: [], // reference
-  history: [],
-  path: [],
-  variables: [],
-  globals: {
-    [AgentGlobals.SysQuery]: '',
-    [AgentGlobals.SysUserId]: '',
-    [AgentGlobals.SysConversationTurns]: 0,
-    [AgentGlobals.SysFiles]: [],
-    [AgentGlobals.SysHistory]: [],
-  },
-};
-
 export const useFetchAgentTemplates = () => {
   const { data } = useQuery<IFlowTemplate[]>({
     queryKey: [AgentApiAction.FetchAgentTemplates],
@@ -405,7 +356,7 @@ export const useUploadCanvasFile = () => {
         }
         return data;
       } catch (error) {
-        message.error('error');
+        message.error(error as string);
       }
     },
   });
@@ -413,9 +364,7 @@ export const useUploadCanvasFile = () => {
   return { data, loading, uploadCanvasFile: mutateAsync };
 };
 
-export const useUploadCanvasFileWithProgress = (
-  identifier?: Nullable<string>,
-) => {
+export const useUploadCanvasFileWithProgress = (identifier?: string | null) => {
   const { id } = useParams();
 
   type UploadParameters = Parameters<NonNullable<FileUploadProps['onUpload']>>;

web/src/pages/agent/constant/index.tsx

@@ -17,6 +17,7 @@ import {
 export {
   AgentDialogueMode,
   AgentStructuredOutputField,
+  BeginId,
   JsonSchemaDataType,
   Operator,
   initialBeginValues,
@@ -47,8 +48,6 @@ import {
   WrapText,
 } from 'lucide-react';
 
-export const BeginId = 'begin';
-
 export const CommonOperatorList = Object.values(Operator).filter(
   (x) => x !== Operator.Note,
 );

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

@@ -1,16 +1,42 @@
+import { EmptyDsl, Operator } from '@/constants/agent';
 import { useFetchAgent } from '@/hooks/use-agent-request';
 import { downloadJsonFile } from '@/utils/file-util';
-import { pick } from 'lodash';
+import { cloneDeepWith, get, isPlainObject, pick } from 'lodash';
 import { useCallback } from 'react';
 import { useBuildDslData } from './use-build-dsl';
 
+/**
+ * Recursively clear sensitive fields (api_key) from the DSL object
+ */
+
+const clearSensitiveFields = <T>(obj: T): T =>
+  cloneDeepWith(obj, (value) => {
+    if (
+      isPlainObject(value) &&
+      [Operator.TavilySearch, Operator.TavilyExtract, Operator.Google].includes(
+        value.component_name,
+      ) &&
+      get(value, 'params.api_key')
+    ) {
+      return { ...value, params: { ...value.params, api_key: '' } };
+    }
+  });
+
 export const useHandleExportJsonFile = () => {
   const { buildDslData } = useBuildDslData();
   const { data } = useFetchAgent();
 
   const handleExportJson = useCallback(() => {
     const dsl = pick(buildDslData(), ['graph', 'globals', 'variables']);
-    downloadJsonFile(dsl, `${data.title}.json`);
+
+    const sanitizedDsl = clearSensitiveFields(dsl) as typeof dsl;
+
+    const nextDsl = {
+      ...sanitizedDsl,
+      globals: { ...sanitizedDsl.globals, ...EmptyDsl.globals },
+    };
+
+    downloadJsonFile(nextDsl, `${data.title}.json`);
   }, [buildDslData, data.title]);
 
   return {

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

@@ -1,7 +1,6 @@
-import { AgentCategory, Operator } from '@/constants/agent';
+import { AgentCategory, EmptyDsl, Operator } from '@/constants/agent';
 import { useSetModalState } from '@/hooks/common-hooks';
-import { EmptyDsl, useSetAgent } from '@/hooks/use-agent-request';
-import { DSL } from '@/interfaces/database/agent';
+import { useSetAgent } from '@/hooks/use-agent-request';
 
 import { FileId, initialParserValues } from '@/pages/agent/constant';
 import { useCallback } from 'react';
@@ -87,7 +86,7 @@ export function useCreateAgentOrPipeline() {
       const isAgent = data.type === FlowType.Agent;
       const ret = await setAgent({
         title: data.name,
-        dsl: isAgent ? (EmptyDsl as DSL) : (DataflowEmptyDsl as DSL),
+        dsl: isAgent ? EmptyDsl : DataflowEmptyDsl,
         canvas_category: isAgent
           ? AgentCategory.AgentCanvas
           : AgentCategory.DataflowCanvas,

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

@@ -1,9 +1,9 @@
 import { useToast } from '@/components/hooks/use-toast';
 import message from '@/components/ui/message';
-import { AgentCategory, DataflowOperator } from '@/constants/agent';
+import { AgentCategory, DataflowOperator, EmptyDsl } from '@/constants/agent';
 import { FileMimeType } from '@/constants/common';
 import { useSetModalState } from '@/hooks/common-hooks';
-import { EmptyDsl, useSetAgent } from '@/hooks/use-agent-request';
+import { useSetAgent } from '@/hooks/use-agent-request';
 import { Node } from '@xyflow/react';
 import isEmpty from 'lodash/isEmpty';
 import { useCallback } from 'react';