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