Feat: Replace antd with shadcn and delete the template node. #10427 (#11693)

### What problem does this PR solve?

Feat: Replace antd with shadcn and delete the template node. #10427
### Type of change


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

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

@@ -59,7 +59,6 @@ import { NextStepDropdown } from './node/dropdown/next-step-dropdown';
 import { ExitLoopNode } from './node/exit-loop-node';
 import { ExtractorNode } from './node/extractor-node';
 import { FileNode } from './node/file-node';
-import { InvokeNode } from './node/invoke-node';
 import { IterationNode, IterationStartNode } from './node/iteration-node';
 import { KeywordNode } from './node/keyword-node';
 import { ListOperationsNode } from './node/list-operations-node';
@@ -68,12 +67,10 @@ import { MessageNode } from './node/message-node';
 import NoteNode from './node/note-node';
 import ParserNode from './node/parser-node';
 import { PlaceholderNode } from './node/placeholder-node';
-import { RelevantNode } from './node/relevant-node';
 import { RetrievalNode } from './node/retrieval-node';
 import { RewriteNode } from './node/rewrite-node';
 import { SplitterNode } from './node/splitter-node';
 import { SwitchNode } from './node/switch-node';
-import { TemplateNode } from './node/template-node';
 import TokenizerNode from './node/tokenizer-node';
 import { ToolNode } from './node/tool-node';
 import { VariableAggregatorNode } from './node/variable-aggregator-node';
@@ -84,15 +81,12 @@ export const nodeTypes: NodeTypes = {
   categorizeNode: CategorizeNode,
   beginNode: BeginNode,
   placeholderNode: PlaceholderNode,
-  relevantNode: RelevantNode,
   noteNode: NoteNode,
   switchNode: SwitchNode,
   retrievalNode: RetrievalNode,
   messageNode: MessageNode,
   rewriteNode: RewriteNode,
   keywordNode: KeywordNode,
-  invokeNode: InvokeNode,
-  templateNode: TemplateNode,
   // emailNode: EmailNode,
   group: IterationNode,
   iterationStartNode: IterationStartNode,

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

@@ -1,80 +0,0 @@
-import { IEmailNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { memo, useState } from 'react';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-export function InnerEmailNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IEmailNode>) {
-  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>
-  );
-}
-
-export const EmailNode = memo(InnerEmailNode);

web/src/pages/agent/canvas/node/invoke-node.tsx

@@ -1,62 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { IInvokeNode } from '@/interfaces/database/flow';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-function InnerInvokeNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<IInvokeNode>) {
-  const { t } = useTranslation();
-  const { theme } = useTheme();
-  const url = get(data, 'form.url');
-  return (
-    <section
-      className={classNames(
-        styles.ragNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [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}
-        id="b"
-        style={RightHandleStyle}
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-      <Flex vertical>
-        <div>{t('flow.url')}</div>
-        <div className={styles.nodeText}>{url}</div>
-      </Flex>
-    </section>
-  );
-}
-
-export const InvokeNode = memo(InnerInvokeNode);

web/src/pages/agent/canvas/node/message-node.tsx

@@ -1,9 +1,11 @@
+import { NodeCollapsible } from '@/components/collapse';
 import { IMessageNode } from '@/interfaces/database/flow';
+import { cn } from '@/lib/utils';
 import { NodeProps } from '@xyflow/react';
-import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { memo } from 'react';
+import { LabelCard } from './card';
 import { LeftEndHandle } from './handle';
 import styles from './index.less';
 import NodeHeader from './node-header';
@@ -11,20 +13,11 @@ import { NodeWrapper } from './node-wrapper';
 import { ToolBar } from './toolbar';
 
 function InnerMessageNode({ id, data, selected }: NodeProps<IMessageNode>) {
-  const messages: string[] = get(data, 'form.messages', []);
+  const messages: string[] = get(data, 'form.content', []);
   return (
     <ToolBar selected={selected} id={id} label={data.label}>
       <NodeWrapper selected={selected}>
         <LeftEndHandle></LeftEndHandle>
-        {/* <CommonHandle
-          type="source"
-          position={Position.Right}
-          isConnectable={isConnectable}
-          style={RightHandleStyle}
-          id={NodeHandleId.Start}
-          nodeId={id}
-          isConnectableEnd={false}
-        ></CommonHandle> */}
         <NodeHeader
           id={id}
           name={data.name}
@@ -33,15 +26,17 @@ function InnerMessageNode({ id, data, selected }: NodeProps<IMessageNode>) {
             [styles.nodeHeader]: messages.length > 0,
           })}
         ></NodeHeader>
-        <Flex vertical gap={8} className={styles.messageNodeContainer}>
-          {messages.map((message, idx) => {
-            return (
-              <div className={styles.nodeText} key={idx}>
-                {message}
-              </div>
-            );
-          })}
-        </Flex>
+        <section
+          className={cn('flex flex-col gap-2', styles.messageNodeContainer)}
+        >
+          <NodeCollapsible items={messages}>
+            {(x, idx) => (
+              <LabelCard key={idx} className="truncate">
+                {x}
+              </LabelCard>
+            )}
+          </NodeCollapsible>
+        </section>
       </NodeWrapper>
     </ToolBar>
   );

web/src/pages/agent/canvas/node/placeholder-node.tsx

@@ -1,5 +1,5 @@
+import { Skeleton } from '@/components/ui/skeleton';
 import { NodeProps, Position } from '@xyflow/react';
-import { Skeleton } from 'antd';
 import { memo } from 'react';
 import { NodeHandleId } from '../../constant';
 import { CommonHandle } from './handle';
@@ -17,19 +17,10 @@ function InnerPlaceholderNode({ id, selected }: NodeProps) {
         nodeId={id}
         id={NodeHandleId.End}
       ></CommonHandle>
-
-      <section className="flex items-center gap-2">
-        <Skeleton.Avatar
-          active
-          size={24}
-          shape="square"
-          style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}
-        />
-      </section>
-
-      <section className={'flex gap-2 flex-col'} style={{ marginTop: 10 }}>
-        <Skeleton.Input active style={{ width: '100%', height: 30 }} />
-      </section>
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-8 rounded-full" />
+        <Skeleton className="h-6 w-full" />
+      </div>
     </NodeWrapper>
   );
 }

web/src/pages/agent/canvas/node/relevant-node.tsx

@@ -1,73 +0,0 @@
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { RightHandleStyle } from './handle-icon';
-
-import { useTheme } from '@/components/theme-provider';
-import { IRelevantNode } from '@/interfaces/database/flow';
-import { get } from 'lodash';
-import { memo } from 'react';
-import { useReplaceIdWithName } from '../../hooks';
-import styles from './index.less';
-import NodeHeader from './node-header';
-
-function InnerRelevantNode({ id, data, selected }: NodeProps<IRelevantNode>) {
-  const yes = get(data, 'form.yes');
-  const no = get(data, 'form.no');
-  const replaceIdWithName = useReplaceIdWithName();
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-        {
-          [styles.selectedNode]: selected,
-        },
-      )}
-    >
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable
-        className={styles.handle}
-        id={'a'}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable
-        className={styles.handle}
-        id={'yes'}
-        style={{ ...RightHandleStyle, top: 57 + 20 }}
-      ></Handle>
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable
-        className={styles.handle}
-        id={'no'}
-        style={{ ...RightHandleStyle, top: 115 + 20 }}
-      ></Handle>
-      <NodeHeader
-        id={id}
-        name={data.name}
-        label={data.label}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-
-      <Flex vertical gap={10}>
-        <Flex vertical>
-          <div className={styles.relevantLabel}>Yes</div>
-          <div className={styles.nodeText}>{replaceIdWithName(yes)}</div>
-        </Flex>
-        <Flex vertical>
-          <div className={styles.relevantLabel}>No</div>
-          <div className={styles.nodeText}>{replaceIdWithName(no)}</div>
-        </Flex>
-      </Flex>
-    </section>
-  );
-}
-
-export const RelevantNode = memo(InnerRelevantNode);

web/src/pages/agent/canvas/node/template-node.tsx

@@ -1,78 +0,0 @@
-import { useTheme } from '@/components/theme-provider';
-import { Handle, NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
-import classNames from 'classnames';
-import { get } from 'lodash';
-import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
-import { IGenerateParameter } from '../../interface';
-import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
-
-import { ITemplateNode } from '@/interfaces/database/flow';
-import { memo } from 'react';
-import styles from './index.less';
-
-function InnerTemplateNode({
-  id,
-  data,
-  isConnectable = true,
-  selected,
-}: NodeProps<ITemplateNode>) {
-  const parameters: IGenerateParameter[] = get(data, 'form.parameters', []);
-  const getLabel = useGetComponentLabelByValue(id);
-  const { theme } = useTheme();
-  return (
-    <section
-      className={classNames(
-        styles.logicNode,
-        theme === 'dark' ? styles.dark : '',
-
-        {
-          [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}
-        className={styles.nodeHeader}
-      ></NodeHeader>
-
-      <Flex gap={8} vertical className={styles.generateParameters}>
-        {parameters.map((x) => (
-          <Flex
-            key={x.id}
-            align="center"
-            gap={6}
-            className={styles.conditionBlock}
-          >
-            <label htmlFor="">{x.key}</label>
-            <span className={styles.parameterValue}>
-              {getLabel(x.component_id)}
-            </span>
-          </Flex>
-        ))}
-      </Flex>
-    </section>
-  );
-}
-
-export const TemplateNode = memo(InnerTemplateNode);