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/components/collapse.tsx

@@ -5,6 +5,8 @@ import {
 } from '@/components/ui/collapsible';
 import { cn } from '@/lib/utils';
 import { CollapsibleProps } from '@radix-ui/react-collapsible';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
 import {
   PropsWithChildren,
   ReactNode,
@@ -67,3 +69,53 @@ export function Collapse({
     </Collapsible>
   );
 }
+
+export type NodeCollapsibleProps<T extends any[]> = {
+  items?: T;
+  children: (item: T[0], idx: number) => ReactNode;
+  className?: string;
+};
+export function NodeCollapsible<T extends any[]>({
+  items = [] as unknown as T,
+  children,
+  className,
+}: NodeCollapsibleProps<T>) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const nextClassName = cn('space-y-2', className);
+
+  const nextItems = items.every((x) => Array.isArray(x)) ? items.flat() : items;
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className={cn('relative', nextClassName)}
+    >
+      {nextItems.slice(0, 3).map(children)}
+      <CollapsibleContent className={nextClassName}>
+        {nextItems.slice(3).map(children)}
+      </CollapsibleContent>
+      {nextItems.length > 3 && (
+        <CollapsibleTrigger
+          asChild
+          onClick={(e) => e.stopPropagation()}
+          className="absolute left-1/2 -translate-x-1/2 bottom-0 translate-y-1/2 cursor-pointer"
+        >
+          <div
+            className={cn(
+              'size-3 bg-text-secondary rounded-full flex items-center justify-center',
+              { 'bg-text-primary': isOpen },
+            )}
+          >
+            {isOpen ? (
+              <ChevronUp className="stroke-bg-component" />
+            ) : (
+              <ChevronDown className="stroke-bg-component" />
+            )}
+          </div>
+        </CollapsibleTrigger>
+      )}
+    </Collapsible>
+  );
+}

web/src/components/ui/button.tsx

@@ -17,7 +17,7 @@ const buttonVariants = cva(
         outline:
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
-          'bg-bg-input text-secondary-foreground shadow-xs hover:bg-bg-input/80',
+          'bg-bg-input text-text-primary shadow-xs hover:bg-bg-input/80 border border-border-button',
         ghost:
           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',

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