Feat: Collapse the excess portion of the tool node and retrieval node #9869 (#10604)

### What problem does this PR solve?

Feat: Collapse the excess portion of the tool node and retrieval node
#9869

### Type of change


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

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

@@ -1,3 +1,4 @@
+import { NodeCollapsible } from '@/components/collapse';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { IRetrievalNode } from '@/interfaces/database/flow';
@@ -44,8 +45,8 @@ function InnerRetrievalNode({
             [styles.nodeHeader]: knowledgeBaseIds.length > 0,
           })}
         ></NodeHeader>
-        <section className="flex flex-col gap-2">
-          {knowledgeBaseIds.map((id) => {
+        <NodeCollapsible items={knowledgeBaseIds}>
+          {(id) => {
             const item = knowledgeList.find((y) => id === y.id);
             const label = getLabel(id);
 
@@ -63,8 +64,8 @@ function InnerRetrievalNode({
                 </div>
               </div>
             );
-          })}
-        </section>
+          }}
+        </NodeCollapsible>
       </NodeWrapper>
     </ToolBar>
   );

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

@@ -1,3 +1,4 @@
+import { NodeCollapsible } from '@/components/collapse';
 import { IAgentForm, IToolNode } from '@/interfaces/database/agent';
 import { Handle, NodeProps, Position } from '@xyflow/react';
 import { get } from 'lodash';
@@ -51,32 +52,38 @@ function InnerToolNode({
         isConnectable={isConnectable}
         className="!bg-accent-primary !size-2"
       ></Handle>
-      <ul className="space-y-2">
-        {tools.map((x) => (
-          <ToolCard
-            key={x.component_name}
-            onClick={handleClick(x.component_name)}
-            className="cursor-pointer"
-            data-tool={x.component_name}
-          >
-            <div className="flex gap-1 items-center pointer-events-none">
-              <OperatorIcon name={x.component_name as Operator}></OperatorIcon>
-              {x.component_name}
-            </div>
-          </ToolCard>
-        ))}
+      <NodeCollapsible items={[tools, mcpList]}>
+        {(x) => {
+          if ('mcp_id' in x) {
+            const mcp = x as unknown as IAgentForm['mcp'][number];
+            return (
+              <ToolCard
+                onClick={handleClick(mcp.mcp_id)}
+                className="cursor-pointer"
+                data-tool={x.mcp_id}
+              >
+                {findMcpById(mcp.mcp_id)?.name}
+              </ToolCard>
+            );
+          }
 
-        {mcpList.map((x) => (
-          <ToolCard
-            key={x.mcp_id}
-            onClick={handleClick(x.mcp_id)}
-            className="cursor-pointer"
-            data-tool={x.mcp_id}
-          >
-            {findMcpById(x.mcp_id)?.name}
-          </ToolCard>
-        ))}
-      </ul>
+          const tool = x as unknown as IAgentForm['tools'][number];
+          return (
+            <ToolCard
+              onClick={handleClick(tool.component_name)}
+              className="cursor-pointer"
+              data-tool={tool.component_name}
+            >
+              <div className="flex gap-1 items-center pointer-events-none">
+                <OperatorIcon
+                  name={tool.component_name as Operator}
+                ></OperatorIcon>
+                {tool.component_name}
+              </div>
+            </ToolCard>
+          );
+        }}
+      </NodeCollapsible>
     </NodeWrapper>
   );
 }

web/src/pages/data-flow/canvas/node/parser-node.tsx

@@ -1,3 +1,4 @@
+import { NodeCollapsible } from '@/components/collapse';
 import { BaseNode } from '@/interfaces/database/agent';
 import { NodeProps, Position } from '@xyflow/react';
 import { memo } from 'react';
@@ -37,17 +38,18 @@ function ParserNode({
         isConnectableEnd={false}
       ></CommonHandle>
       <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-      <section className="space-y-2">
-        {data.form?.setups.map((x, idx) => (
+
+      <NodeCollapsible items={data.form?.setups}>
+        {(x, idx) => (
           <LabelCard
             key={idx}
-            className="flex justify- flex-col text-text-primary gap-1"
+            className="flex flex-col text-text-primary gap-1"
           >
             <span className="text-text-secondary">Parser {idx + 1}</span>
             {t(`dataflow.fileFormatOptions.${x.fileFormat}`)}
           </LabelCard>
-        ))}
-      </section>
+        )}
+      </NodeCollapsible>
     </NodeWrapper>
   );
 }