Email sending tool (#3837)

### What problem does this PR solve?

_Briefly describe what this PR aims to solve. Include background context
that will help reviewers understand the purpose of the PR._
Added the function of sending emails through SMTP
Instructions for use-
Corresponding parameters need to be configured
Need to output upstream in a fixed format

![image](https://github.com/user-attachments/assets/93bc1af7-6d4f-4406-bd1d-bc042535dd82)


### Type of change


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

---------

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>

web/src/pages/flow/canvas/index.tsx

@@ -25,6 +25,7 @@ import styles from './index.less';
 import { RagNode } from './node';
 import { BeginNode } from './node/begin-node';
 import { CategorizeNode } from './node/categorize-node';
+import { EmailNode } from './node/email-node';
 import { GenerateNode } from './node/generate-node';
 import { InvokeNode } from './node/invoke-node';
 import { KeywordNode } from './node/keyword-node';
@@ -52,6 +53,7 @@ const nodeTypes = {
   keywordNode: KeywordNode,
   invokeNode: InvokeNode,
   templateNode: TemplateNode,
+  emailNode: EmailNode,
 };
 
 const edgeTypes = {

web/src/pages/flow/canvas/node/email-node.tsx

@@ -0,0 +1,78 @@
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import { useState } from 'react';
+import { Handle, NodeProps, Position } from 'reactflow';
+import { NodeData } from '../../interface';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import styles from './index.less';
+import NodeHeader from './node-header';
+
+export function EmailNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<NodeData>) {
+  const [showDetails, setShowDetails] = useState(false);
+
+  return (
+    <section
+      className={classNames(styles.ragNode, {
+        [styles.selectedNode]: selected,
+      })}
+    >
+      <Handle
+        id="c"
+        type="source"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={LeftHandleStyle}
+      ></Handle>
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={RightHandleStyle}
+        id="b"
+      ></Handle>
+      <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
+
+      <Flex vertical gap={8} className={styles.emailNodeContainer}>
+        <div
+          className={styles.emailConfig}
+          onClick={() => setShowDetails(!showDetails)}
+        >
+          <div className={styles.configItem}>
+            <span className={styles.configLabel}>SMTP:</span>
+            <span className={styles.configValue}>{data.form?.smtp_server}</span>
+          </div>
+          <div className={styles.configItem}>
+            <span className={styles.configLabel}>Port:</span>
+            <span className={styles.configValue}>{data.form?.smtp_port}</span>
+          </div>
+          <div className={styles.configItem}>
+            <span className={styles.configLabel}>From:</span>
+            <span className={styles.configValue}>{data.form?.email}</span>
+          </div>
+          <div className={styles.expandIcon}>{showDetails ? '▼' : '▶'}</div>
+        </div>
+
+        {showDetails && (
+          <div className={styles.jsonExample}>
+            <div className={styles.jsonTitle}>Expected Input JSON:</div>
+            <pre className={styles.jsonContent}>
+              {`{
+  "to_email": "...",
+  "cc_email": "...", 
+  "subject": "...",
+  "content": "..."
+}`}
+            </pre>
+          </div>
+        )}
+      </Flex>
+    </section>
+  );
+}

web/src/pages/flow/canvas/node/index.less

@@ -193,3 +193,80 @@
     .conditionLine;
   }
 }
+
+.emailNodeContainer {
+  padding: 8px;
+  font-size: 12px;
+
+  .emailConfig {
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 4px;
+    padding: 8px;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+
+    .configItem {
+      display: flex;
+      align-items: center;
+      margin-bottom: 4px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .configLabel {
+        color: #666;
+        width: 45px;
+        flex-shrink: 0;
+      }
+
+      .configValue {
+        color: #333;
+        word-break: break-all;
+      }
+    }
+
+    .expandIcon {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #666;
+      font-size: 12px;
+    }
+  }
+
+  .jsonExample {
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding: 8px;
+    margin-top: 4px;
+    animation: slideDown 0.2s ease-out;
+
+    .jsonTitle {
+      color: #666;
+      margin-bottom: 4px;
+    }
+
+    .jsonContent {
+      margin: 0;
+      color: #333;
+      font-family: monospace;
+    }
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}