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);

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

@@ -613,7 +613,7 @@ export const CategorizeAnchorPointPositions = [
 // key is the source of the edge, value is the target of the edge
 // no connection lines are allowed between key and value
 export const RestrictedUpstreamMap = {
-  [Operator.Begin]: [Operator.Relevant],
+  [Operator.Begin]: [Operator.Begin],
   [Operator.Categorize]: [Operator.Begin, Operator.Categorize],
   [Operator.Retrieval]: [Operator.Begin, Operator.Retrieval],
   [Operator.Message]: [
@@ -623,12 +623,10 @@ export const RestrictedUpstreamMap = {
     Operator.RewriteQuestion,
     Operator.Categorize,
   ],
-  [Operator.Relevant]: [Operator.Begin],
   [Operator.RewriteQuestion]: [
     Operator.Begin,
     Operator.Message,
     Operator.RewriteQuestion,
-    Operator.Relevant,
   ],
   [Operator.DuckDuckGo]: [Operator.Begin, Operator.Retrieval],
   [Operator.Wikipedia]: [Operator.Begin, Operator.Retrieval],
@@ -678,7 +676,6 @@ export const NodeMap = {
   [Operator.Categorize]: 'categorizeNode',
   [Operator.Retrieval]: 'retrievalNode',
   [Operator.Message]: 'messageNode',
-  [Operator.Relevant]: 'relevantNode',
   [Operator.RewriteQuestion]: 'rewriteNode',
   [Operator.DuckDuckGo]: 'ragNode',
   [Operator.Wikipedia]: 'ragNode',

web/src/pages/agent/form-sheet/form-config-map.tsx

@@ -23,7 +23,6 @@ import LoopForm from '../form/loop-form';
 import MessageForm from '../form/message-form';
 import ParserForm from '../form/parser-form';
 import PubMedForm from '../form/pubmed-form';
-import RelevantForm from '../form/relevant-form';
 import RetrievalForm from '../form/retrieval-form/next';
 import RewriteQuestionForm from '../form/rewrite-question-form';
 import SearXNGForm from '../form/searxng-form';
@@ -54,9 +53,6 @@ export const FormConfigMap = {
   [Operator.Message]: {
     component: MessageForm,
   },
-  [Operator.Relevant]: {
-    component: RelevantForm,
-  },
   [Operator.RewriteQuestion]: {
     component: RewriteQuestionForm,
   },

web/src/pages/agent/form/relevant-form/hooks.ts

@@ -1,41 +0,0 @@
-import pick from 'lodash/pick';
-import { useCallback, useEffect } from 'react';
-import { IOperatorForm } from '../../interface';
-import useGraphStore from '../../store';
-
-export const useBuildRelevantOptions = () => {
-  const nodes = useGraphStore((state) => state.nodes);
-
-  const buildRelevantOptions = useCallback(
-    (toList: string[]) => {
-      return nodes
-        .filter(
-          (x) => !toList.some((y) => y === x.id), // filter out selected values ​​in other to fields from the current drop-down box options
-        )
-        .map((x) => ({ label: x.data.name, value: x.id }));
-    },
-    [nodes],
-  );
-
-  return buildRelevantOptions;
-};
-
-/**
- *  monitor changes in the connection and synchronize the target to the yes and no fields of the form
- *  similar to the categorize-form's useHandleFormValuesChange method
- * @param param0
- */
-export const useWatchConnectionChanges = ({ nodeId, form }: IOperatorForm) => {
-  const getNode = useGraphStore((state) => state.getNode);
-  const node = getNode(nodeId);
-
-  const watchFormChanges = useCallback(() => {
-    if (node) {
-      form?.setFieldsValue(pick(node, ['yes', 'no']));
-    }
-  }, [node, form]);
-
-  useEffect(() => {
-    watchFormChanges();
-  }, [watchFormChanges]);
-};

web/src/pages/agent/form/relevant-form/index.tsx

@@ -1,49 +0,0 @@
-import LLMSelect from '@/components/llm-select';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Select } from 'antd';
-import { Operator } from '../../constant';
-import { useBuildFormSelectOptions } from '../../form-hooks';
-import { IOperatorForm } from '../../interface';
-import { useWatchConnectionChanges } from './hooks';
-
-const RelevantForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
-  const buildRelevantOptions = useBuildFormSelectOptions(
-    Operator.Relevant,
-    node?.id,
-  );
-  useWatchConnectionChanges({ nodeId: node?.id, form });
-
-  return (
-    <Form
-      name="basic"
-      labelCol={{ span: 4 }}
-      wrapperCol={{ span: 20 }}
-      onValuesChange={onValuesChange}
-      autoComplete="off"
-      form={form}
-    >
-      <Form.Item
-        name={'llm_id'}
-        label={t('model', { keyPrefix: 'chat' })}
-        tooltip={t('modelTip', { keyPrefix: 'chat' })}
-      >
-        <LLMSelect></LLMSelect>
-      </Form.Item>
-      <Form.Item label={t('yes')} name={'yes'}>
-        <Select
-          allowClear
-          options={buildRelevantOptions([form?.getFieldValue('no')])}
-        />
-      </Form.Item>
-      <Form.Item label={t('no')} name={'no'}>
-        <Select
-          allowClear
-          options={buildRelevantOptions([form?.getFieldValue('yes')])}
-        />
-      </Form.Item>
-    </Form>
-  );
-};
-
-export default RelevantForm;

web/src/pages/agent/hooks/use-add-node.ts

@@ -34,7 +34,6 @@ import {
   initialNoteValues,
   initialParserValues,
   initialPubMedValues,
-  initialRelevantValues,
   initialRetrievalValues,
   initialRewriteQuestionValues,
   initialSearXNGValues,
@@ -129,7 +128,6 @@ export const useInitializeOperatorParams = () => {
       [Operator.Begin]: initialBeginValues,
       [Operator.Retrieval]: initialRetrievalValues,
       [Operator.Categorize]: { ...initialCategorizeValues, llm_id: llmId },
-      [Operator.Relevant]: { ...initialRelevantValues, llm_id: llmId },
       [Operator.RewriteQuestion]: {
         ...initialRewriteQuestionValues,
         llm_id: llmId,

web/src/pages/agent/hooks/use-get-begin-query.tsx

@@ -125,12 +125,7 @@ export function useBuildParentOutputOptions(parentId?: string) {
 }
 
 // exclude nodes with branches
-const ExcludedNodes = [
-  Operator.Categorize,
-  Operator.Relevant,
-  Operator.Begin,
-  Operator.Note,
-];
+const ExcludedNodes = [Operator.Categorize, Operator.Begin, Operator.Note];
 
 const StringList = [
   BeginQueryType.Line,

web/src/pages/agent/store.ts

@@ -301,12 +301,7 @@ const useGraphStore = create<RFState>()(
         });
       },
       deleteEdgeById: (id: string) => {
-        const {
-          edges,
-          updateNodeForm,
-          getOperatorTypeFromId,
-          updateSwitchFormData,
-        } = get();
+        const { edges, getOperatorTypeFromId, updateSwitchFormData } = get();
         const currentEdge = edges.find((x) => x.id === id);
 
         if (currentEdge) {
@@ -314,11 +309,6 @@ const useGraphStore = create<RFState>()(
           const operatorType = getOperatorTypeFromId(source);
           // After deleting the edge, set the corresponding field in the node's form field to undefined
           switch (operatorType) {
-            case Operator.Relevant:
-              updateNodeForm(source, {
-                [sourceHandle as string]: undefined,
-              });
-              break;
             // case Operator.Categorize:
             //   if (sourceHandle)
             //     updateNodeForm(source, undefined, [

web/src/pages/agent/utils.ts

@@ -569,12 +569,6 @@ export const duplicateNodeForm = (nodeData?: RAGFlowNodeType['data']) => {
     }, {});
   }
 
-  // Delete the downstream nodes corresponding to the yes and no fields of the Relevant operator
-  if (nodeData?.label === Operator.Relevant) {
-    form.yes = undefined;
-    form.no = undefined;
-  }
-
   return {
     ...(nodeData ?? { label: '' }),
     form,