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/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';