Feat: Add AgentNode component #3221 (#8019)

### What problem does this PR solve?

Feat: Add AgentNode component #3221

### Type of change


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

web/src/pages/agent/constant.tsx

@@ -59,6 +59,7 @@ import {
 } from '@ant-design/icons';
 import upperFirst from 'lodash/upperFirst';
 import {
+  Box,
   CirclePower,
   CloudUpload,
   CodeXml,
@@ -112,6 +113,7 @@ export enum Operator {
   IterationStart = 'IterationItem',
   Code = 'Code',
   WaitingDialogue = 'WaitingDialogue',
+  Agent = 'Agent',
 }
 
 export const CommonOperatorList = Object.values(Operator).filter(
@@ -132,6 +134,7 @@ export const AgentOperatorList = [
   Operator.Iteration,
   Operator.WaitingDialogue,
   Operator.Note,
+  Operator.Agent,
 ];
 
 export const operatorIconMap = {
@@ -173,6 +176,7 @@ export const operatorIconMap = {
   [Operator.IterationStart]: CirclePower,
   [Operator.Code]: CodeXml,
   [Operator.WaitingDialogue]: MessageSquareMore,
+  [Operator.Agent]: Box,
 };
 
 export const operatorMap: Record<
@@ -313,6 +317,7 @@ export const operatorMap: Record<
   [Operator.IterationStart]: { backgroundColor: '#e6f7ff' },
   [Operator.Code]: { backgroundColor: '#4c5458' },
   [Operator.WaitingDialogue]: { backgroundColor: '#a5d65c' },
+  [Operator.Agent]: { backgroundColor: '#a5d65c' },
 };
 
 export const componentMenuList = [
@@ -356,6 +361,9 @@ export const componentMenuList = [
   {
     name: Operator.WaitingDialogue,
   },
+  {
+    name: Operator.Agent,
+  },
   {
     name: Operator.Note,
   },
@@ -682,6 +690,14 @@ export const initialCodeValues = {
 
 export const initialWaitingDialogueValues = {};
 
+export const initialAgentValues = {
+  ...initialLlmBaseValues,
+  sys_prompt: ``,
+  prompts: [],
+  message_history_window_size: 12,
+  tools: [],
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -806,6 +822,7 @@ export const NodeMap = {
   [Operator.IterationStart]: 'iterationStartNode',
   [Operator.Code]: 'ragNode',
   [Operator.WaitingDialogue]: 'ragNode',
+  [Operator.Agent]: 'agentNode',
 };
 
 export const LanguageOptions = [