Feat: Use memo to wrap canvas nodes to improve fluency #3221 (#7929)

### What problem does this PR solve?

Feat: Use memo to wrap canvas nodes to improve fluency #3221

### Type of change


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

web/src/components/llm-select/llm-label.tsx

 import { getLLMIconName, getLlmNameAndFIdByLlmId } from '@/utils/llm-util';
+import { memo } from 'react';
 import { LlmIcon } from '../svg-icon';
 
 interface IProps {
   );
 };
 
-export default LLMLabel;
+export default memo(LLMLabel);

web/src/components/llm-select/next.tsx

 import { LlmModelType } from '@/constants/knowledge';
 import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { forwardRef, useState } from 'react';
+import { forwardRef, memo, useState } from 'react';
 import { LlmSettingFieldItems } from '../llm-setting-items/next';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { Select, SelectTrigger, SelectValue } from '../ui/select';
   disabled?: boolean;
 }
 
-export const NextLLMSelect = forwardRef<
+const NextInnerLLMSelect = forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   IProps
 >(({ value, disabled }, ref) => {
   );
 });
 
-NextLLMSelect.displayName = 'LLMSelect';
+NextInnerLLMSelect.displayName = 'LLMSelect';
+
+export const NextLLMSelect = memo(NextInnerLLMSelect);

web/src/pages/agent/agent-sidebar.tsx

   SidebarHeader,
   SidebarMenu,
 } from '@/components/ui/sidebar';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import {
   AgentOperatorList,
   Operator,
   );
 }
 
-export function AgentSidebar() {
+function InnerAgentSidebar() {
   const agentOperatorList = useMemo(() => {
     return componentMenuList.filter((x) =>
       AgentOperatorList.some((y) => y === x.name),
     </Sidebar>
   );
 }
+
+export const AgentSidebar = memo(InnerAgentSidebar);

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

 import styles from './index.less';
 
 // TODO: do not allow other nodes to connect to this node
-function Node({ selected, data }: NodeProps<IBeginNode>) {
+function InnerBeginNode({ selected, data }: NodeProps<IBeginNode>) {
   const { t } = useTranslation();
   const query: BeginQuery[] = get(data, 'form.query', []);
   const { theme } = useTheme();
   );
 }
 
-export const BeginNode = memo(Node);
+export const BeginNode = memo(InnerBeginNode);

web/src/pages/agent/canvas/node/categorize-handle.tsx

 import { Handle, Position } from '@xyflow/react';
 
-import React from 'react';
+import React, { memo } from 'react';
 import styles from './index.less';
 
 const DEFAULT_HANDLE_STYLE = {
   );
 };
 
-export default CategorizeHandle;
+export default memo(CategorizeHandle);

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

 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
+import { memo } from 'react';
 import { RightHandleStyle } from './handle-icon';
 import { useBuildCategorizeHandlePositions } from './hooks';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
-export function CategorizeNode({
+export function InnerCategorizeNode({
   id,
   data,
   selected,
     </section>
   );
 }
+
+export const CategorizeNode = memo(InnerCategorizeNode);

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

 import { Handle, NodeProps, Position } from '@xyflow/react';
 import { Flex } from 'antd';
 import classNames from 'classnames';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
-export function EmailNode({
+export function InnerEmailNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const EmailNode = memo(InnerEmailNode);

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

 import { Handle, NodeProps, Position } from '@xyflow/react';
 import classNames from 'classnames';
 import { get } from 'lodash';
+import { memo } from 'react';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
-export function GenerateNode({
+export function InnerGenerateNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const GenerateNode = memo(InnerGenerateNode);

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

 import { IRagNode } from '@/interfaces/database/flow';
 import { Handle, NodeProps, Position } from '@xyflow/react';
 import classNames from 'classnames';
+import { memo } from 'react';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
-export function RagNode({
+function InnerRagNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const RagNode = memo(InnerRagNode);

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

 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';
 
-export function InvokeNode({
+function InnerInvokeNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const InvokeNode = memo(InnerInvokeNode);

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

 import { cn } from '@/lib/utils';
 import { Handle, NodeProps, NodeResizeControl, Position } from '@xyflow/react';
 import { ListRestart } from 'lucide-react';
+import { memo } from 'react';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
   cursor: 'nwse-resize',
 };
 
-export function IterationNode({
+export function InnerIterationNode({
   id,
   data,
   isConnectable = true,
   );
 }
 
-export function IterationStartNode({
+function InnerIterationStartNode({
   isConnectable = true,
   selected,
 }: NodeProps<IIterationStartNode>) {
     </section>
   );
 }
+
+export const IterationStartNode = memo(InnerIterationStartNode);
+
+export const IterationNode = memo(InnerIterationNode);

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

 import { Handle, NodeProps, Position } from '@xyflow/react';
 import classNames from 'classnames';
 import { get } from 'lodash';
+import { memo } from 'react';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
-export function KeywordNode({
+export function InnerKeywordNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const KeywordNode = memo(InnerKeywordNode);

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

 import { ILogicNode } from '@/interfaces/database/flow';
 import { Handle, NodeProps, Position } from '@xyflow/react';
 import classNames from 'classnames';
+import { memo } from 'react';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
-export function LogicNode({
+export function InnerLogicNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const LogicNode = memo(InnerLogicNode);

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

 import { Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
+import { memo } from 'react';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
-export function MessageNode({
+function InnerMessageNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const MessageNode = memo(InnerMessageNode);

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

 import NodeDropdown from './dropdown';
 import { NextNodePopover } from './popover';
 
+import { memo } from 'react';
 import { RunTooltip } from '../../flow-tooltip';
 interface IProps {
   id: string;
   );
 }
 
-const NodeHeader = ({
+const InnerNodeHeader = ({
   label,
   id,
   name,
   );
 };
 
+const NodeHeader = memo(InnerNodeHeader);
+
 export default NodeHeader;

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

 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';
 
-export function RelevantNode({ id, data, selected }: NodeProps<IRelevantNode>) {
+function InnerRelevantNode({ id, data, selected }: NodeProps<IRelevantNode>) {
   const yes = get(data, 'form.yes');
   const no = get(data, 'form.no');
   const replaceIdWithName = useReplaceIdWithName();
     </section>
   );
 }
+
+export const RelevantNode = memo(InnerRelevantNode);

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

 import { Avatar, Flex } from 'antd';
 import classNames from 'classnames';
 import { get } from 'lodash';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
-export function RetrievalNode({
+function InnerRetrievalNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const RetrievalNode = memo(InnerRetrievalNode);

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

 import { Handle, NodeProps, Position } from '@xyflow/react';
 import classNames from 'classnames';
 import { get } from 'lodash';
+import { memo } from 'react';
 import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
 import styles from './index.less';
 import NodeHeader from './node-header';
 
-export function RewriteNode({
+function InnerRewriteNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const RewriteNode = memo(InnerRewriteNode);

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

 import { Handle, NodeProps, Position } from '@xyflow/react';
 import { Divider, Flex } from 'antd';
 import classNames from 'classnames';
+import { memo } from 'react';
 import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query';
 import { RightHandleStyle } from './handle-icon';
 import { useBuildSwitchHandlePositions } from './hooks';
   );
 };
 
-export function SwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
+function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
   const { positions } = useBuildSwitchHandlePositions({ data, id });
   const { theme } = useTheme();
   return (
     </section>
   );
 }
+
+export const SwitchNode = memo(InnerSwitchNode);

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

 import NodeHeader from './node-header';
 
 import { ITemplateNode } from '@/interfaces/database/flow';
+import { memo } from 'react';
 import styles from './index.less';
 
-export function TemplateNode({
+function InnerTemplateNode({
   id,
   data,
   isConnectable = true,
     </section>
   );
 }
+
+export const TemplateNode = memo(InnerTemplateNode);