From 5883493c7d4fd8528979ef9d716e1eff6313fcbb Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 2 Jan 2025 16:10:41 +0800
Subject: [PATCH] Feat: Add FileUploadDialog #3221 (#4327)

### What problem does this PR solve?

Feat: Add FileUploadDialog #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/package-lock.json                         | 1115 ++++-------------
 web/package.json                              |    5 +-
 .../components/file-upload-dialog/index.tsx   |   57 +
 web/src/components/file-uploader.tsx          |  332 +++++
 web/src/components/rename-dialog/index.tsx    |    6 +-
 web/src/components/ui/progress.tsx            |   28 +
 web/src/components/ui/scroll-area.tsx         |   48 +
 web/src/components/ui/tabs.tsx                |    4 +-
 web/src/hooks/use-callback-ref.ts             |   27 +
 web/src/hooks/use-controllable-state.ts       |   67 +
 web/src/lib/utils.ts                          |   18 +
 web/src/pages/dataset/dataset/hooks.ts        |  230 ++++
 web/src/pages/dataset/dataset/index.tsx       |   19 +-
 web/src/pages/datasets/index.tsx              |    9 +-
 14 files changed, 1091 insertions(+), 874 deletions(-)
 create mode 100644 web/src/components/file-upload-dialog/index.tsx
 create mode 100644 web/src/components/file-uploader.tsx
 create mode 100644 web/src/components/ui/progress.tsx
 create mode 100644 web/src/components/ui/scroll-area.tsx
 create mode 100644 web/src/hooks/use-callback-ref.ts
 create mode 100644 web/src/hooks/use-controllable-state.ts
 create mode 100644 web/src/pages/dataset/dataset/hooks.ts

diff --git a/web/package-lock.json b/web/package-lock.json
index 85fab136d..fe34f5cc4 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -22,6 +22,8 @@
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-navigation-menu": "^1.2.1",
         "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-progress": "^1.1.1",
+        "@radix-ui/react-scroll-area": "^1.2.2",
         "@radix-ui/react-select": "^2.1.2",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slider": "^1.2.1",
@@ -59,8 +61,8 @@
         "openai-speech-stream-player": "^1.0.8",
         "rc-tween-one": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
+        "react-dropzone": "^14.3.5",
         "react-error-boundary": "^4.0.13",
-        "react-force-graph": "^1.44.4",
         "react-hook-form": "^7.53.1",
         "react-i18next": "^14.0.0",
         "react-infinite-scroll-component": "^6.1.0",
@@ -74,6 +76,7 @@
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.0",
         "remark-math": "^6.0.0",
+        "sonner": "^1.7.1",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
         "umi": "^4.0.90",
@@ -4962,6 +4965,82 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-progress/-/react-progress-1.1.1.tgz",
+      "integrity": "sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
@@ -5006,6 +5085,117 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.2.tgz",
+      "integrity": "sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-select/-/react-select-2.1.2.tgz",
@@ -5598,14 +5788,6 @@
       "resolved": "https://registry.npmmirror.com/@sinclair/typebox/-/typebox-0.27.8.tgz",
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA=="
     },
-    "node_modules/@sindresorhus/is": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmmirror.com/@sindresorhus/is/-/is-0.14.0.tgz",
-      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@sinonjs/commons": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/@sinonjs/commons/-/commons-3.0.1.tgz",
@@ -5814,17 +5996,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@szmarczak/http-timer": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
-      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
-      "dependencies": {
-        "defer-to-connect": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@tailwindcss/line-clamp": {
       "version": "0.4.4",
       "resolved": "https://registry.npmmirror.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
@@ -6226,11 +6397,6 @@
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
       "devOptional": true
     },
-    "node_modules/@tweenjs/tween.js": {
-      "version": "23.1.3",
-      "resolved": "https://registry.npmmirror.com/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
-      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA=="
-    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmmirror.com/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -8845,49 +9011,6 @@
         "d3-zoom": "^3.0.0"
       }
     },
-    "node_modules/3d-force-graph": {
-      "version": "1.73.3",
-      "resolved": "https://registry.npmmirror.com/3d-force-graph/-/3d-force-graph-1.73.3.tgz",
-      "integrity": "sha512-azb65Lwn2yr/fJ4+qrxjmstVxogjzwJIZL/fdboCKBg6ph/FLW+xdvYFEBZW92XxBn1C8yRKS3d2VkVT3BzLSw==",
-      "dependencies": {
-        "accessor-fn": "1",
-        "kapsule": "1",
-        "three": ">=0.118 <1",
-        "three-forcegraph": "1",
-        "three-render-objects": "^1.29"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/3d-force-graph-ar": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmmirror.com/3d-force-graph-ar/-/3d-force-graph-ar-1.8.4.tgz",
-      "integrity": "sha512-GnggtrFODQqEfkFTJeQnPvwQVcYtJ81cE5/lsFdDumLkPWB2WoHSbs5k2tSNCZVGIUsKQs5kkEGCbNDeOhueiw==",
-      "dependencies": {
-        "aframe-forcegraph-component": "3",
-        "kapsule": "1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/3d-force-graph-vr": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmmirror.com/3d-force-graph-vr/-/3d-force-graph-vr-2.2.5.tgz",
-      "integrity": "sha512-Lq31Ido+QQE0iWZNmyKVcsY2rmyMJaBzRgqG/4zZUY2nOBOmf/8TQF7kHSsW564UaZtx4FvjamHyVSkenPy9BA==",
-      "dependencies": {
-        "accessor-fn": "1",
-        "aframe": "^1.5",
-        "aframe-extras": "^7.2",
-        "aframe-forcegraph-component": "3",
-        "kapsule": "1",
-        "polished": "4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/abab/-/abab-2.0.6.tgz",
@@ -8907,14 +9030,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/accessor-fn": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmmirror.com/accessor-fn/-/accessor-fn-1.5.1.tgz",
-      "integrity": "sha512-zZpFYBqIL1Aqg+f2qmYHJ8+yIZF7/tP6PUGx2/QM0uGPSO5UegpinmkNwDohxWtOj586BpMPVRUjce2HI6xB3A==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.3.tgz",
@@ -8980,78 +9095,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/aframe": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmmirror.com/aframe/-/aframe-1.6.0.tgz",
-      "integrity": "sha512-+P1n2xKGZQbCNW4lTwfue9in2KmfAwYD/BZOU5uXKrJCTegPyUZZX/haJRR9Rb33ij+KPj3vFdwT5ALaucXTNA==",
-      "dependencies": {
-        "buffer": "^6.0.3",
-        "debug": "^4.3.4",
-        "deep-assign": "^2.0.0",
-        "load-bmfont": "^1.2.3",
-        "super-animejs": "^3.1.0",
-        "three": "npm:super-three@0.164.0",
-        "three-bmfont-text": "github:dmarcos/three-bmfont-text#eed4878795be9b3e38cf6aec6b903f56acd1f695",
-        "webvr-polyfill": "^0.10.12"
-      },
-      "engines": {
-        "node": ">= 4.6.0",
-        "npm": ">= 2.15.9"
-      }
-    },
-    "node_modules/aframe-extras": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmmirror.com/aframe-extras/-/aframe-extras-7.5.0.tgz",
-      "integrity": "sha512-9GmDfjfq6qCzSSkvkzf82hqVkEqGVPyCU81ttlfk0yL9+mepLFmVC+Wda8DCP25jZGoY7wm33vs0QadDelnxTg==",
-      "dependencies": {
-        "nipplejs": "^0.10.2",
-        "three": "^0.164.0",
-        "three-pathfinding": "^1.3.0"
-      }
-    },
-    "node_modules/aframe-extras/node_modules/three": {
-      "version": "0.164.1",
-      "resolved": "https://registry.npmmirror.com/three/-/three-0.164.1.tgz",
-      "integrity": "sha512-iC/hUBbl1vzFny7f5GtqzVXYjMJKaTPxiCxXfrvVdBi1Sf+jhd1CAkitiFwC7mIBFCo3MrDLJG97yisoaWig0w=="
-    },
-    "node_modules/aframe-forcegraph-component": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmmirror.com/aframe-forcegraph-component/-/aframe-forcegraph-component-3.0.8.tgz",
-      "integrity": "sha512-ir1SzOYWYVQ4wtG18QwZRR/aVeZlZDXDbcRgFxSIc8A1YB6Mz3Mh0f0zMFKE3jAq481xNgpktxMvsWGZTPi63Q==",
-      "dependencies": {
-        "accessor-fn": "1",
-        "three-forcegraph": "1"
-      }
-    },
-    "node_modules/aframe/node_modules/buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmmirror.com/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
-    },
-    "node_modules/aframe/node_modules/three": {
-      "name": "super-three",
-      "version": "0.164.0",
-      "resolved": "https://registry.npmmirror.com/super-three/-/super-three-0.164.0.tgz",
-      "integrity": "sha512-yMtOkw2hSXfIvGlwcghCbhHGsKRAmh8ksDeOo/0HI7KlEVoIYKHiYLYe9GF6QBViNwzKGpMIz77XUDRveZ4XJg=="
-    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
@@ -9117,11 +9160,6 @@
         "ajv": "^6.9.1"
       }
     },
-    "node_modules/an-array": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/an-array/-/an-array-1.0.0.tgz",
-      "integrity": "sha512-M175GYI7RmsYu24Ok383yZQa3eveDfNnmhTe3OQ3bm70bEovz2gWenH+ST/n32M8lrwLWk74hcPds5CDRPe2wg=="
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmmirror.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -9353,14 +9391,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/array-shuffle": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/array-shuffle/-/array-shuffle-1.0.1.tgz",
-      "integrity": "sha512-PBqgo1Y2XWSksBzq3GFPEb798ZrW2snAcmr4drbVeF/6MT/5aBlkGJEvu5A/CzXHf4EjbHOj/ZowatjlIiVidA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/array-tree-filter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
@@ -9475,11 +9505,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/as-number": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/as-number/-/as-number-1.0.0.tgz",
-      "integrity": "sha512-HkI/zLo2AbSRO4fqVkmyf3hms0bJDs3iboHqTrNuwTiCRvdYXM7HFhfhB6Dk51anV2LM/IMB83mtK9mHw4FlAg=="
-    },
     "node_modules/asn1.js": {
       "version": "4.10.1",
       "resolved": "https://registry.npmmirror.com/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -9604,6 +9629,14 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmmirror.com/attr-accept/-/attr-accept-2.2.5.tgz",
+      "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.19",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.19.tgz",
@@ -9862,15 +9895,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/bezier-js": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmmirror.com/bezier-js/-/bezier-js-6.1.4.tgz",
-      "integrity": "sha512-PA0FW9ZpcHbojUCMu28z9Vg/fNkwTj5YhusSAjHHDfHDGLxJ6YUKrAN2vk1fP2MMOxVw4Oko16FMlRGVBGqLKg==",
-      "funding": {
-        "type": "individual",
-        "url": "https://github.com/Pomax/bezierjs/blob/master/FUNDING.md"
-      }
-    },
     "node_modules/big-integer": {
       "version": "1.6.52",
       "resolved": "https://registry.npmmirror.com/big-integer/-/big-integer-1.6.52.tgz",
@@ -10160,14 +10184,6 @@
         "isarray": "^1.0.0"
       }
     },
-    "node_modules/buffer-equal": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmmirror.com/buffer-equal/-/buffer-equal-0.0.1.tgz",
-      "integrity": "sha512-RgSV6InVQ9ODPdLWJ5UAqBqJBOg370Nz6ZQtRzpt6nUjc8v0St97uJ4PYC6NztqIScrAXafKM3mZPMygSe1ggA==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -10242,58 +10258,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/cacheable-request": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmmirror.com/cacheable-request/-/cacheable-request-6.1.0.tgz",
-      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
-      "dependencies": {
-        "clone-response": "^1.0.2",
-        "get-stream": "^5.1.0",
-        "http-cache-semantics": "^4.0.0",
-        "keyv": "^3.0.0",
-        "lowercase-keys": "^2.0.0",
-        "normalize-url": "^4.1.0",
-        "responselike": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cacheable-request/node_modules/get-stream": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dependencies": {
-        "pump": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/cacheable-request/node_modules/json-buffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/json-buffer/-/json-buffer-3.0.0.tgz",
-      "integrity": "sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ=="
-    },
-    "node_modules/cacheable-request/node_modules/keyv": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/keyv/-/keyv-3.1.0.tgz",
-      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
-      "dependencies": {
-        "json-buffer": "3.0.0"
-      }
-    },
-    "node_modules/cacheable-request/node_modules/lowercase-keys": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.7.tgz",
@@ -10382,40 +10346,11 @@
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001618.tgz",
       "integrity": "sha512-p407+D1tIkDvsEAPS22lJxLQQaG8OTBEqo0KhzfABGk0TU4juBNDSfH0hyAp/HRyx+M8L17z/ltyhxh27FTfQg=="
     },
-    "node_modules/canvas-color-tracker": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmmirror.com/canvas-color-tracker/-/canvas-color-tracker-1.2.2.tgz",
-      "integrity": "sha512-r+u/Ft2ka4Rj274Ts4L9bhYZLuMvbuJ/yL4seP0s+Pi+i9CM0caD+Sd//yseS5EVBJ2SKSmq36h2mNYUCdmTfA==",
-      "dependencies": {
-        "tinycolor2": "^1.6.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/cardboard-vr-display": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmmirror.com/cardboard-vr-display/-/cardboard-vr-display-1.0.19.tgz",
-      "integrity": "sha512-+MjcnWKAkb95p68elqZLDPzoiF/dGncQilLGvPBM5ZorABp/ao3lCs7nnRcYBckmuNkg1V/5rdGDKoUaCVsHzQ==",
-      "dependencies": {
-        "gl-preserve-state": "^1.0.0",
-        "nosleep.js": "^0.7.0",
-        "webvr-polyfill-dpdb": "^1.0.17"
-      }
-    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/ccount/-/ccount-2.0.1.tgz",
       "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="
     },
-    "node_modules/centra": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmmirror.com/centra/-/centra-2.7.0.tgz",
-      "integrity": "sha512-PbFMgMSrmgx6uxCdm57RUos9Tc3fclMvhLSATYN39XsDV29B89zZ3KA89jmY0vwSGazyU+uerqwa6t+KaodPcg==",
-      "dependencies": {
-        "follow-redirects": "^1.15.6"
-      }
-    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz",
@@ -10759,17 +10694,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/clone-response": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/clone-response/-/clone-response-1.0.3.tgz",
-      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
-      "dependencies": {
-        "mimic-response": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/clsx/-/clsx-2.1.1.tgz",
@@ -12006,18 +11930,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-scale-chromatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
-      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-interpolate": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/d3-scale/node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/d3-array/-/d3-array-3.2.4.tgz",
@@ -12131,17 +12043,6 @@
         "lodash": "^4.17.15"
       }
     },
-    "node_modules/data-joint": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmmirror.com/data-joint/-/data-joint-1.3.1.tgz",
-      "integrity": "sha512-tMK0m4OVGqiA3zkn8JmO6YAqD8UwJqIAx4AAwFl1SKTtKAqcXePuT+n2aayiX9uITtlN3DFtKKTOxJRUc2+HvQ==",
-      "dependencies": {
-        "index-array-by": "^1.4.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -12282,17 +12183,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/decompress-response": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmmirror.com/decompress-response/-/decompress-response-3.3.0.tgz",
-      "integrity": "sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==",
-      "dependencies": {
-        "mimic-response": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/dedent": {
       "version": "1.5.3",
       "resolved": "https://registry.npmmirror.com/dedent/-/dedent-1.5.3.tgz",
@@ -12307,17 +12197,6 @@
         }
       }
     },
-    "node_modules/deep-assign": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/deep-assign/-/deep-assign-2.0.0.tgz",
-      "integrity": "sha512-2QhG3Kxulu4XIF3WL5C5x0sc/S17JLgm1SfvDfIRsR/5m7ZGmcejII7fZ2RyWhN0UWIJm0TNM/eKow6LAn3evQ==",
-      "dependencies": {
-        "is-obj": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -12439,11 +12318,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/defer-to-connect": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmmirror.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
-      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ=="
-    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -12734,7 +12608,8 @@
     "node_modules/dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz",
-      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
+      "dev": true
     },
     "node_modules/domain-browser": {
       "version": "1.2.0",
@@ -12805,14 +12680,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/dtype": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/dtype/-/dtype-2.0.0.tgz",
-      "integrity": "sha512-s2YVcLKdFGS0hpFqJaTwscsyt0E8nNFdmo73Ocd81xNPj4URI4rj6D60A+vFMIw7BXWlb4yRkEwfBqcZzPGiZg==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
     "node_modules/duck": {
       "version": "0.1.12",
       "resolved": "https://registry.npmmirror.com/duck/-/duck-0.1.12.tgz",
@@ -12827,11 +12694,6 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "dev": true
     },
-    "node_modules/duplexer3": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmmirror.com/duplexer3/-/duplexer3-0.1.5.tgz",
-      "integrity": "sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA=="
-    },
     "node_modules/duplexify": {
       "version": "4.1.2",
       "resolved": "https://registry.npmmirror.com/duplexify/-/duplexify-4.1.2.tgz",
@@ -14412,6 +14274,17 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/file-selector/-/file-selector-2.1.2.tgz",
+      "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
+      "dependencies": {
+        "tslib": "^2.7.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmmirror.com/filesize/-/filesize-8.0.7.tgz",
@@ -14563,30 +14436,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/force-graph": {
-      "version": "1.43.5",
-      "resolved": "https://registry.npmmirror.com/force-graph/-/force-graph-1.43.5.tgz",
-      "integrity": "sha512-HveLELh9yhZXO/QOfaFS38vlwJZ/3sKu+jarfXzRmbmihSOH/BbRWnUvmg8wLFiYy6h4HlH4lkRfZRccHYmXgA==",
-      "dependencies": {
-        "@tweenjs/tween.js": "18 - 23",
-        "accessor-fn": "1",
-        "bezier-js": "3 - 6",
-        "canvas-color-tracker": "1",
-        "d3-array": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-force-3d": "2 - 3",
-        "d3-scale": "1 - 4",
-        "d3-scale-chromatic": "1 - 3",
-        "d3-selection": "2 - 3",
-        "d3-zoom": "2 - 3",
-        "index-array-by": "1",
-        "kapsule": "^1.14",
-        "lodash-es": "4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -14771,25 +14620,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/fromentries": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmmirror.com/fromentries/-/fromentries-1.3.2.tgz",
-      "integrity": "sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
     "node_modules/front-matter": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/front-matter/-/front-matter-4.0.2.tgz",
@@ -14980,11 +14810,6 @@
       "resolved": "https://registry.npmmirror.com/gl-matrix/-/gl-matrix-3.4.3.tgz",
       "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
     },
-    "node_modules/gl-preserve-state": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/gl-preserve-state/-/gl-preserve-state-1.0.0.tgz",
-      "integrity": "sha512-zQZ25l3haD4hvgJZ6C9+s0ebdkW9y+7U2qxvGu1uWOJh8a4RU+jURIKEQhf8elIlFpMH6CrAY2tH0mYrRjet3Q=="
-    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
@@ -15022,6 +14847,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/global/-/global-4.4.0.tgz",
       "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dev": true,
       "dependencies": {
         "min-document": "^2.19.0",
         "process": "^0.11.10"
@@ -15111,38 +14937,6 @@
         "get-intrinsic": "^1.1.3"
       }
     },
-    "node_modules/got": {
-      "version": "9.6.0",
-      "resolved": "https://registry.npmmirror.com/got/-/got-9.6.0.tgz",
-      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
-      "dependencies": {
-        "@sindresorhus/is": "^0.14.0",
-        "@szmarczak/http-timer": "^1.1.2",
-        "cacheable-request": "^6.0.0",
-        "decompress-response": "^3.3.0",
-        "duplexer3": "^0.1.4",
-        "get-stream": "^4.1.0",
-        "lowercase-keys": "^1.0.1",
-        "mimic-response": "^1.0.1",
-        "p-cancelable": "^1.0.0",
-        "to-readable-stream": "^1.0.0",
-        "url-parse-lax": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/got/node_modules/get-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-      "dependencies": {
-        "pump": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -15978,11 +15772,6 @@
       "resolved": "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz",
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
     },
-    "node_modules/http-cache-semantics": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmmirror.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
-    },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmmirror.com/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -16236,14 +16025,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/index-array-by": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmmirror.com/index-array-by/-/index-array-by-1.4.2.tgz",
-      "integrity": "sha512-SP23P27OUKzXWEC/TOyWlwLviofQkCSCKONnc62eItjp69yCZZPqDQtr3Pw5gJDnPeUMqExmKydNZaJO0FU9pw==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
@@ -16473,7 +16254,8 @@
     "node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "dev": true
     },
     "node_modules/is-callable": {
       "version": "1.2.7",
@@ -16622,11 +16404,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-function": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
-    },
     "node_modules/is-generator-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
@@ -16720,14 +16497,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/is-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-path-inside": {
       "version": "3.0.3",
       "resolved": "https://registry.npmmirror.com/is-path-inside/-/is-path-inside-3.0.3.tgz",
@@ -17091,14 +16860,6 @@
       "resolved": "https://registry.npmmirror.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg=="
     },
-    "node_modules/jerrypick": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmmirror.com/jerrypick/-/jerrypick-1.1.1.tgz",
-      "integrity": "sha512-XTtedPYEyVp4t6hJrXuRKr/jHj8SC4z+4K0b396PMkov6muL+i8IIamJIvZWe3jUspgIJak0P+BaWKawMYNBLg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmmirror.com/jest/-/jest-29.7.0.tgz",
@@ -19659,17 +19420,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/kapsule": {
-      "version": "1.14.5",
-      "resolved": "https://registry.npmmirror.com/kapsule/-/kapsule-1.14.5.tgz",
-      "integrity": "sha512-H0iSpTynUzZw3tgraDmReprpFRmH5oP5GPmaNsurSwLx2H5iCpOMIkp5q+sfhB4Tz/UJd1E1IbEE9Z6ksnJ6RA==",
-      "dependencies": {
-        "lodash-es": "4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/katex": {
       "version": "0.16.11",
       "resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.11.tgz",
@@ -19722,16 +19472,6 @@
       "resolved": "https://registry.npmmirror.com/kolorist/-/kolorist-1.8.0.tgz",
       "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ=="
     },
-    "node_modules/layout-bmfont-text": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmmirror.com/layout-bmfont-text/-/layout-bmfont-text-1.3.4.tgz",
-      "integrity": "sha512-mceomHZ8W7pSKQhTdLvOe1Im4n37u8xa5Gr0J3KPCHRMO/9o7+goWIOzZcUUd+Xgzy3+22bvoIQ0OaN3LRtgaw==",
-      "dependencies": {
-        "as-number": "^1.0.0",
-        "word-wrapper": "^1.0.7",
-        "xtend": "^4.0.0"
-      }
-    },
     "node_modules/less": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/less/-/less-4.1.3.tgz",
@@ -20285,21 +20025,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/load-bmfont": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmmirror.com/load-bmfont/-/load-bmfont-1.4.2.tgz",
-      "integrity": "sha512-qElWkmjW9Oq1F9EI5Gt7aD9zcdHb9spJCW1L/dmPf7KzCCEJxq8nhHz5eCgI9aMf7vrG/wyaCqdsI+Iy9ZTlog==",
-      "dependencies": {
-        "buffer-equal": "0.0.1",
-        "mime": "^1.3.4",
-        "parse-bmfont-ascii": "^1.0.3",
-        "parse-bmfont-binary": "^1.0.5",
-        "parse-bmfont-xml": "^1.1.4",
-        "phin": "^3.7.1",
-        "xhr": "^2.0.1",
-        "xtend": "^4.0.0"
-      }
-    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -20349,7 +20074,9 @@
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true,
+      "peer": true
     },
     "node_modules/lodash._reinterpolate": {
       "version": "3.0.0",
@@ -20590,14 +20317,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/lowercase-keys": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
-      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/lowlight": {
       "version": "1.20.0",
       "resolved": "https://registry.npmmirror.com/lowlight/-/lowlight-1.20.0.tgz",
@@ -20700,22 +20419,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/map-limit": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmmirror.com/map-limit/-/map-limit-0.0.1.tgz",
-      "integrity": "sha512-pJpcfLPnIF/Sk3taPW21G/RQsEEirGaFpCW3oXRwH9dnFHPHNGjNyvh++rdmC2fNqEaTw2MhYJraoJWAHx8kEg==",
-      "dependencies": {
-        "once": "~1.3.0"
-      }
-    },
-    "node_modules/map-limit/node_modules/once": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmmirror.com/once/-/once-1.3.3.tgz",
-      "integrity": "sha512-6vaNInhu+CHxtONf3zw3vq4SP2DOQhjBvIa3rNcG0+P7eKWlYH6Peu7rHizSloRU2EwMz6GraLieis9Ac9+p1w==",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
     "node_modules/map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/map-obj/-/map-obj-4.3.0.tgz",
@@ -21434,18 +21137,11 @@
         "node": ">=6"
       }
     },
-    "node_modules/mimic-response": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/min-document": {
       "version": "2.19.0",
       "resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz",
       "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dev": true,
       "dependencies": {
         "dom-walk": "^0.1.0"
       }
@@ -21482,7 +21178,8 @@
     "node_modules/minimist": {
       "version": "1.2.8",
       "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
     },
     "node_modules/minimist-options": {
       "version": "4.1.0",
@@ -21694,69 +21391,12 @@
       "integrity": "sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==",
       "dev": true
     },
-    "node_modules/new-array": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/new-array/-/new-array-1.0.0.tgz",
-      "integrity": "sha512-K5AyFYbuHZ4e/ti52y7k18q8UHsS78FlRd85w2Fmsd6AkuLipDihPflKC0p3PN5i8II7+uHxo+CtkLiJDfmS5A=="
-    },
     "node_modules/next-tick": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/next-tick/-/next-tick-1.1.0.tgz",
       "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
       "dev": true
     },
-    "node_modules/ngraph.events": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmmirror.com/ngraph.events/-/ngraph.events-1.2.2.tgz",
-      "integrity": "sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ=="
-    },
-    "node_modules/ngraph.forcelayout": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmmirror.com/ngraph.forcelayout/-/ngraph.forcelayout-3.3.1.tgz",
-      "integrity": "sha512-MKBuEh1wujyQHFTW57y5vd/uuEOK0XfXYxm3lC7kktjJLRdt/KEKEknyOlc6tjXflqBKEuYBBcu7Ax5VY+S6aw==",
-      "dependencies": {
-        "ngraph.events": "^1.0.0",
-        "ngraph.merge": "^1.0.0",
-        "ngraph.random": "^1.0.0"
-      }
-    },
-    "node_modules/ngraph.graph": {
-      "version": "20.0.1",
-      "resolved": "https://registry.npmmirror.com/ngraph.graph/-/ngraph.graph-20.0.1.tgz",
-      "integrity": "sha512-VFsQ+EMkT+7lcJO1QP8Ik3w64WbHJl27Q53EO9hiFU9CRyxJ8HfcXtfWz/U8okuoYKDctbciL6pX3vG5dt1rYA==",
-      "dependencies": {
-        "ngraph.events": "^1.2.1"
-      }
-    },
-    "node_modules/ngraph.merge": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/ngraph.merge/-/ngraph.merge-1.0.0.tgz",
-      "integrity": "sha512-5J8YjGITUJeapsomtTALYsw7rFveYkM+lBj3QiYZ79EymQcuri65Nw3knQtFxQBU1r5iOaVRXrSwMENUPK62Vg=="
-    },
-    "node_modules/ngraph.random": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/ngraph.random/-/ngraph.random-1.1.0.tgz",
-      "integrity": "sha512-h25UdUN/g8U7y29TzQtRm/GvGr70lK37yQPvPKXXuVfs7gCm82WipYFZcksQfeKumtOemAzBIcT7lzzyK/edLw=="
-    },
-    "node_modules/nice-color-palettes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/nice-color-palettes/-/nice-color-palettes-3.0.0.tgz",
-      "integrity": "sha512-lL4AjabAAFi313tjrtmgm/bxCRzp4l3vCshojfV/ij3IPdtnRqv6Chcw+SqJUhbe7g3o3BecaqCJYUNLswGBhQ==",
-      "dependencies": {
-        "got": "^9.2.2",
-        "map-limit": "0.0.1",
-        "minimist": "^1.2.0",
-        "new-array": "^1.0.0"
-      },
-      "bin": {
-        "nice-color-palettes": "bin/index.js"
-      }
-    },
-    "node_modules/nipplejs": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmmirror.com/nipplejs/-/nipplejs-0.10.2.tgz",
-      "integrity": "sha512-XGxFY8C2DOtobf1fK+MXINTzkkXJLjZDDpfQhOUZf4TSytbc9s4bmA0lB9eKKM8iDivdr9NQkO7DpIQfsST+9g=="
-    },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/no-case/-/no-case-3.0.4.tgz",
@@ -21990,19 +21630,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-url": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmmirror.com/normalize-url/-/normalize-url-4.5.1.tgz",
-      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nosleep.js": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmmirror.com/nosleep.js/-/nosleep.js-0.7.0.tgz",
-      "integrity": "sha512-Z4B1HgvzR+en62ghwZf6BwAR6x4/pjezsiMcbF9KMLh7xoscpoYhaSXfY3lLkqC68AtW+/qLJ1lzvBIj0FGaTA=="
-    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -22343,14 +21970,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/p-cancelable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/p-cancelable/-/p-cancelable-1.1.0.tgz",
-      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/p-event": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/p-event/-/p-event-4.2.0.tgz",
@@ -22493,25 +22112,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/parse-bmfont-ascii": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmmirror.com/parse-bmfont-ascii/-/parse-bmfont-ascii-1.0.6.tgz",
-      "integrity": "sha512-U4RrVsUFCleIOBsIGYOMKjn9PavsGOXxbvYGtMOEfnId0SVNsgehXh1DxUdVPLoxd5mvcEtvmKs2Mmf0Mpa1ZA=="
-    },
-    "node_modules/parse-bmfont-binary": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmmirror.com/parse-bmfont-binary/-/parse-bmfont-binary-1.0.6.tgz",
-      "integrity": "sha512-GxmsRea0wdGdYthjuUeWTMWPqm2+FAd4GI8vCvhgJsFnoGhTrLhXDDupwTo7rXVAgaLIGoVHDZS9p/5XbSqeWA=="
-    },
-    "node_modules/parse-bmfont-xml": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmmirror.com/parse-bmfont-xml/-/parse-bmfont-xml-1.1.6.tgz",
-      "integrity": "sha512-0cEliVMZEhrFDwMh4SxIyVJpqYoOWDJ9P895tFuS+XuNzI5UBmBk5U5O4KuJdTnZpSBI4LFA2+ZiJaiwfSwlMA==",
-      "dependencies": {
-        "xml-parse-from-string": "^1.0.0",
-        "xml2js": "^0.5.0"
-      }
-    },
     "node_modules/parse-entities": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/parse-entities/-/parse-entities-4.0.1.tgz",
@@ -22532,11 +22132,6 @@
       "resolved": "https://registry.npmmirror.com/@types/unist/-/unist-2.0.10.tgz",
       "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
     },
-    "node_modules/parse-headers": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
-      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
-    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz",
@@ -22691,17 +22286,6 @@
       "resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
     },
-    "node_modules/phin": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmmirror.com/phin/-/phin-3.7.1.tgz",
-      "integrity": "sha512-GEazpTWwTZaEQ9RhL7Nyz0WwqilbqgLahDM3D0hxWwmVDI52nXEybHqiN6/elwpkJBhcuj+WbBu+QfT0uhPGfQ==",
-      "dependencies": {
-        "centra": "^2.7.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -22918,17 +22502,6 @@
       "resolved": "https://registry.npmmirror.com/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
       "integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
     },
-    "node_modules/polished": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmmirror.com/polished/-/polished-4.3.1.tgz",
-      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
-      "dependencies": {
-        "@babel/runtime": "^7.17.8"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmmirror.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -23621,14 +23194,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/prepend-http": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/prepend-http/-/prepend-http-2.0.0.tgz",
-      "integrity": "sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/prettier": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.2.4.tgz",
@@ -23829,15 +23394,6 @@
       "resolved": "https://registry.npmmirror.com/bn.js/-/bn.js-4.12.0.tgz",
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
     },
-    "node_modules/pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "dependencies": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
     "node_modules/punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-1.4.1.tgz",
@@ -23895,16 +23451,6 @@
         "node": ">=0.6"
       }
     },
-    "node_modules/quad-indices": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/quad-indices/-/quad-indices-2.0.1.tgz",
-      "integrity": "sha512-6jtmCsEbGAh5npThXrBaubbTjPcF0rMbn57XCJVI7LkW8PUT56V+uIrRCCWCn85PSgJC9v8Pm5tnJDwmOBewvA==",
-      "dependencies": {
-        "an-array": "^1.0.0",
-        "dtype": "^2.0.0",
-        "is-buffer": "^1.0.2"
-      }
-    },
     "node_modules/query-string": {
       "version": "6.14.1",
       "resolved": "https://registry.npmmirror.com/query-string/-/query-string-6.14.1.tgz",
@@ -24972,6 +24518,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.3.5",
+      "resolved": "https://registry.npmmirror.com/react-dropzone/-/react-dropzone-14.3.5.tgz",
+      "integrity": "sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==",
+      "dependencies": {
+        "attr-accept": "^2.2.4",
+        "file-selector": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-error-boundary": {
       "version": "4.0.13",
       "resolved": "https://registry.npmmirror.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
@@ -24993,25 +24555,6 @@
       "resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
-    "node_modules/react-force-graph": {
-      "version": "1.44.4",
-      "resolved": "https://registry.npmmirror.com/react-force-graph/-/react-force-graph-1.44.4.tgz",
-      "integrity": "sha512-mi/jRKssT++kl2R1YonFi/2hpK+a1omz6AvJ/oQa++HbXrRGtxg/xo1skO04tGZ/dUbR6SqJcpoUPYHzEle9mA==",
-      "dependencies": {
-        "3d-force-graph": "1",
-        "3d-force-graph-ar": "1",
-        "3d-force-graph-vr": "2",
-        "force-graph": "1",
-        "prop-types": "15",
-        "react-kapsule": "2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-helmet-async": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
@@ -25088,21 +24631,6 @@
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
-    "node_modules/react-kapsule": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmmirror.com/react-kapsule/-/react-kapsule-2.4.0.tgz",
-      "integrity": "sha512-w4Yv9CgWdj8kWGQEPNWFGJJ08dYEZHZpiaFR/DgZjCMBNqv9wus2Gy1qvHVJmJbzvAZbq6jdvFC+NYzEqAlNhQ==",
-      "dependencies": {
-        "fromentries": "^1.3.2",
-        "jerrypick": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "react": ">=16.13.1"
-      }
-    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -26980,14 +26508,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/responselike": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/responselike/-/responselike-1.0.2.tgz",
-      "integrity": "sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==",
-      "dependencies": {
-        "lowercase-keys": "^1.0.0"
-      }
-    },
     "node_modules/restore-cursor": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/restore-cursor/-/restore-cursor-4.0.0.tgz",
@@ -27178,7 +26698,8 @@
     "node_modules/sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.3.0.tgz",
-      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
+      "optional": true
     },
     "node_modules/saxes": {
       "version": "6.0.0",
@@ -27669,6 +27190,15 @@
         "atomic-sleep": "^1.0.0"
       }
     },
+    "node_modules/sonner": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmmirror.com/sonner/-/sonner-1.7.1.tgz",
+      "integrity": "sha512-b6LHBfH32SoVasRFECrdY8p8s7hXPDn3OHUFbZZbiB1ctLS9Gdh6rpX2dVrpQA0kiL5jcRzDDldwwLkSKk3+QQ==",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/sort-object-keys": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/sort-object-keys/-/sort-object-keys-1.1.3.tgz",
@@ -28462,11 +27992,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/super-animejs": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/super-animejs/-/super-animejs-3.1.0.tgz",
-      "integrity": "sha512-6MFAFJDRuvwkovxQZPruuyHinTa4rgj4hNLOndjcYYhZLckoXtVRY9rJPuq8p6c/tgZJrFYEAYAfJ2/hhNtUCA=="
-    },
     "node_modules/superjson": {
       "version": "1.13.3",
       "resolved": "https://registry.npmmirror.com/superjson/-/superjson-1.13.3.tgz",
@@ -28946,71 +28471,6 @@
         "real-require": "^0.1.0"
       }
     },
-    "node_modules/three": {
-      "version": "0.167.0",
-      "resolved": "https://registry.npmmirror.com/three/-/three-0.167.0.tgz",
-      "integrity": "sha512-9Y1a66fpjqF3rhq7ivKTaKtjQLZ97Hj/lZ00DmZWaKHaQFH4uzYT1znwRDWQOcgMmCcOloQzo61gDmqO8l9xmA=="
-    },
-    "node_modules/three-bmfont-text": {
-      "version": "3.0.0",
-      "resolved": "git+ssh://git@github.com/dmarcos/three-bmfont-text.git#eed4878795be9b3e38cf6aec6b903f56acd1f695",
-      "integrity": "sha512-5KULChxHm4qAQZx1MfEF5ADC+2PEX5Gvo2eiEiF9N4RyTNPpHPBRSpW5n8LyD8gOwC0TAdWwafoOGrqPCR1sUA==",
-      "license": "MIT",
-      "dependencies": {
-        "array-shuffle": "^1.0.1",
-        "layout-bmfont-text": "^1.2.0",
-        "nice-color-palettes": "^3.0.0",
-        "quad-indices": "^2.0.1"
-      }
-    },
-    "node_modules/three-forcegraph": {
-      "version": "1.41.14",
-      "resolved": "https://registry.npmmirror.com/three-forcegraph/-/three-forcegraph-1.41.14.tgz",
-      "integrity": "sha512-W/cZElLXO0l6ffdMmDakh4bUGSYuSv/YxInOHMN9KAQgDwJ8904SOBh8qkTnGu7UPsi0mAsrUgkfViW8heloTA==",
-      "dependencies": {
-        "accessor-fn": "1",
-        "d3-array": "1 - 3",
-        "d3-force-3d": "2 - 3",
-        "d3-scale": "1 - 4",
-        "d3-scale-chromatic": "1 - 3",
-        "data-joint": "1",
-        "kapsule": "1",
-        "ngraph.forcelayout": "3",
-        "ngraph.graph": "20",
-        "tinycolor2": "1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "three": ">=0.118.3"
-      }
-    },
-    "node_modules/three-pathfinding": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/three-pathfinding/-/three-pathfinding-1.3.0.tgz",
-      "integrity": "sha512-LKxMI3/YqdMYvt6AdE2vB6s5ueDFczt/DWoxhtPNgRsH6E0D8LMYQxz+eIrmKo0MQpDvMVzXYUMBk+b86+k97w==",
-      "peerDependencies": {
-        "three": "0.x.x"
-      }
-    },
-    "node_modules/three-render-objects": {
-      "version": "1.29.4",
-      "resolved": "https://registry.npmmirror.com/three-render-objects/-/three-render-objects-1.29.4.tgz",
-      "integrity": "sha512-E6YwTN5zNsaMjo/5rosgnK44b1aq//3YJGJ5BxG9t7+euRm7ZAmNX3NIqFkoDhKtFC5WLoOxZjyNoq8Uc49gaA==",
-      "dependencies": {
-        "@tweenjs/tween.js": "18 - 23",
-        "accessor-fn": "1",
-        "kapsule": "1",
-        "polished": "4"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "three": "*"
-      }
-    },
     "node_modules/throttle-debounce": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
@@ -29097,14 +28557,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/to-readable-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
-      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/to-regex": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/to-regex/-/to-regex-3.0.2.tgz",
@@ -29284,9 +28736,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -29917,17 +29369,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/url-parse-lax": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-      "integrity": "sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==",
-      "dependencies": {
-        "prepend-http": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/use/-/use-3.1.1.tgz",
@@ -30832,19 +30273,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/webvr-polyfill": {
-      "version": "0.10.12",
-      "resolved": "https://registry.npmmirror.com/webvr-polyfill/-/webvr-polyfill-0.10.12.tgz",
-      "integrity": "sha512-trDJEVUQnRIVAnmImjEQ0BlL1NfuWl8+eaEdu+bs4g59c7OtETi/5tFkgEFDRaWEYwHntXs/uFF3OXZuutNGGA==",
-      "dependencies": {
-        "cardboard-vr-display": "^1.0.19"
-      }
-    },
-    "node_modules/webvr-polyfill-dpdb": {
-      "version": "1.0.18",
-      "resolved": "https://registry.npmmirror.com/webvr-polyfill-dpdb/-/webvr-polyfill-dpdb-1.0.18.tgz",
-      "integrity": "sha512-O0S1ZGEWyPvyZEkS2VbyV7mtir/NM9MNK3EuhbHPoJ8EHTky2pTXehjIl+IiDPr+Lldgx129QGt3NGly7rwRPw=="
-    },
     "node_modules/whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
@@ -30958,11 +30386,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/word-wrapper": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmmirror.com/word-wrapper/-/word-wrapper-1.0.7.tgz",
-      "integrity": "sha512-VOPBFCm9b6FyYKQYfn9AVn2dQvdR/YOVFV6IBRA1TBMJWKffvhEX1af6FMGrttILs2Q9ikCRhLqkbY2weW6dOQ=="
-    },
     "node_modules/workerize-loader": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/workerize-loader/-/workerize-loader-2.0.2.tgz",
@@ -31099,17 +30522,6 @@
         }
       }
     },
-    "node_modules/xhr": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmmirror.com/xhr/-/xhr-2.6.0.tgz",
-      "integrity": "sha512-/eCGLb5rxjx5e3mF1A7s+pLlR6CGyqWN91fv1JgER5mVWg1MZmlhBvy9kjcsOdRk8RrIujotWyJamfyrp+WIcA==",
-      "dependencies": {
-        "global": "~4.4.0",
-        "is-function": "^1.0.1",
-        "parse-headers": "^2.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -31119,31 +30531,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/xml-parse-from-string": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz",
-      "integrity": "sha512-ErcKwJTF54uRzzNMXq2X5sMIy88zJvfN2DmdoQvy7PAFJ+tPRU6ydWuOKNMyfmOjdyBQTFREi60s0Y0SyI0G0g=="
-    },
-    "node_modules/xml2js": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmmirror.com/xml2js/-/xml2js-0.5.0.tgz",
-      "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/xml2js/node_modules/xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmmirror.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/xmlbuilder": {
       "version": "10.1.1",
       "resolved": "https://registry.npmmirror.com/xmlbuilder/-/xmlbuilder-10.1.1.tgz",
diff --git a/web/package.json b/web/package.json
index a6b93aedb..c5a23a75e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -33,6 +33,8 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.1",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
@@ -70,8 +72,8 @@
     "openai-speech-stream-player": "^1.0.8",
     "rc-tween-one": "^3.0.6",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-dropzone": "^14.3.5",
     "react-error-boundary": "^4.0.13",
-    "react-force-graph": "^1.44.4",
     "react-hook-form": "^7.53.1",
     "react-i18next": "^14.0.0",
     "react-infinite-scroll-component": "^6.1.0",
@@ -85,6 +87,7 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
+    "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "umi": "^4.0.90",
diff --git a/web/src/components/file-upload-dialog/index.tsx b/web/src/components/file-upload-dialog/index.tsx
new file mode 100644
index 000000000..5d9d12fa6
--- /dev/null
+++ b/web/src/components/file-upload-dialog/index.tsx
@@ -0,0 +1,57 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { IModalProps } from '@/interfaces/common';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FileUploader } from '../file-uploader';
+
+export function UploaderTabs() {
+  const { t } = useTranslation();
+
+  const [files, setFiles] = useState<File[]>([]);
+  console.log('🚀 ~ TabsDemo ~ files:', files);
+
+  return (
+    <Tabs defaultValue="account">
+      <TabsList className="grid w-full grid-cols-2 mb-4">
+        <TabsTrigger value="account">{t('fileManager.local')}</TabsTrigger>
+        <TabsTrigger value="password">{t('fileManager.s3')}</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <FileUploader
+          maxFileCount={8}
+          maxSize={8 * 1024 * 1024}
+          onValueChange={setFiles}
+        />
+      </TabsContent>
+      <TabsContent value="password">{t('common.comingSoon')}</TabsContent>
+    </Tabs>
+  );
+}
+
+export function FileUploadDialog({ hideModal }: IModalProps<any>) {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{t('fileManager.uploadFile')}</DialogTitle>
+        </DialogHeader>
+        <UploaderTabs></UploaderTabs>
+        <DialogFooter>
+          <Button type="submit" variant={'tertiary'} size={'sm'}>
+            {t('common.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/web/src/components/file-uploader.tsx b/web/src/components/file-uploader.tsx
new file mode 100644
index 000000000..b16cf2ee5
--- /dev/null
+++ b/web/src/components/file-uploader.tsx
@@ -0,0 +1,332 @@
+// https://github.com/sadmann7/file-uploader
+
+'use client';
+
+import { FileText, Upload, X } from 'lucide-react';
+import * as React from 'react';
+import Dropzone, {
+  type DropzoneProps,
+  type FileRejection,
+} from 'react-dropzone';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useControllableState } from '@/hooks/use-controllable-state';
+import { cn, formatBytes } from '@/lib/utils';
+
+function isFileWithPreview(file: File): file is File & { preview: string } {
+  return 'preview' in file && typeof file.preview === 'string';
+}
+
+interface FileCardProps {
+  file: File;
+  onRemove: () => void;
+  progress?: number;
+}
+
+interface FilePreviewProps {
+  file: File & { preview: string };
+}
+
+function FilePreview({ file }: FilePreviewProps) {
+  if (file.type.startsWith('image/')) {
+    return (
+      <img
+        src={file.preview}
+        alt={file.name}
+        width={48}
+        height={48}
+        loading="lazy"
+        className="aspect-square shrink-0 rounded-md object-cover"
+      />
+    );
+  }
+
+  return (
+    <FileText className="size-10 text-muted-foreground" aria-hidden="true" />
+  );
+}
+
+function FileCard({ file, progress, onRemove }: FileCardProps) {
+  return (
+    <div className="relative flex items-center gap-2.5">
+      <div className="flex flex-1 gap-2.5">
+        {isFileWithPreview(file) ? <FilePreview file={file} /> : null}
+        <div className="flex w-full flex-col gap-2">
+          <div className="flex flex-col gap-px">
+            <p className="line-clamp-1 text-sm font-medium text-foreground/80">
+              {file.name}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {formatBytes(file.size)}
+            </p>
+          </div>
+          {progress ? <Progress value={progress} /> : null}
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="size-7"
+          onClick={onRemove}
+        >
+          <X className="size-4" aria-hidden="true" />
+          <span className="sr-only">Remove file</span>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Value of the uploader.
+   * @type File[]
+   * @default undefined
+   * @example value={files}
+   */
+  value?: File[];
+
+  /**
+   * Function to be called when the value changes.
+   * @type (files: File[]) => void
+   * @default undefined
+   * @example onValueChange={(files) => setFiles(files)}
+   */
+  onValueChange?: (files: File[]) => void;
+
+  /**
+   * Function to be called when files are uploaded.
+   * @type (files: File[]) => Promise<void>
+   * @default undefined
+   * @example onUpload={(files) => uploadFiles(files)}
+   */
+  onUpload?: (files: File[]) => Promise<void>;
+
+  /**
+   * Progress of the uploaded files.
+   * @type Record<string, number> | undefined
+   * @default undefined
+   * @example progresses={{ "file1.png": 50 }}
+   */
+  progresses?: Record<string, number>;
+
+  /**
+   * Accepted file types for the uploader.
+   * @type { [key: string]: string[]}
+   * @default
+   * ```ts
+   * { "image/*": [] }
+   * ```
+   * @example accept={["image/png", "image/jpeg"]}
+   */
+  accept?: DropzoneProps['accept'];
+
+  /**
+   * Maximum file size for the uploader.
+   * @type number | undefined
+   * @default 1024 * 1024 * 2 // 2MB
+   * @example maxSize={1024 * 1024 * 2} // 2MB
+   */
+  maxSize?: DropzoneProps['maxSize'];
+
+  /**
+   * Maximum number of files for the uploader.
+   * @type number | undefined
+   * @default 1
+   * @example maxFileCount={4}
+   */
+  maxFileCount?: DropzoneProps['maxFiles'];
+
+  /**
+   * Whether the uploader should accept multiple files.
+   * @type boolean
+   * @default false
+   * @example multiple
+   */
+  multiple?: boolean;
+
+  /**
+   * Whether the uploader is disabled.
+   * @type boolean
+   * @default false
+   * @example disabled
+   */
+  disabled?: boolean;
+}
+
+export function FileUploader(props: FileUploaderProps) {
+  const {
+    value: valueProp,
+    onValueChange,
+    onUpload,
+    progresses,
+    accept = {
+      'image/*': [],
+    },
+    maxSize = 1024 * 1024 * 2,
+    maxFileCount = 1,
+    multiple = false,
+    disabled = false,
+    className,
+    ...dropzoneProps
+  } = props;
+
+  const [files, setFiles] = useControllableState({
+    prop: valueProp,
+    onChange: onValueChange,
+  });
+
+  const onDrop = React.useCallback(
+    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {
+        toast.error('Cannot upload more than 1 file at a time');
+        return;
+      }
+
+      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {
+        toast.error(`Cannot upload more than ${maxFileCount} files`);
+        return;
+      }
+
+      const newFiles = acceptedFiles.map((file) =>
+        Object.assign(file, {
+          preview: URL.createObjectURL(file),
+        }),
+      );
+
+      const updatedFiles = files ? [...files, ...newFiles] : newFiles;
+
+      setFiles(updatedFiles);
+
+      if (rejectedFiles.length > 0) {
+        rejectedFiles.forEach(({ file }) => {
+          toast.error(`File ${file.name} was rejected`);
+        });
+      }
+
+      if (
+        onUpload &&
+        updatedFiles.length > 0 &&
+        updatedFiles.length <= maxFileCount
+      ) {
+        const target =
+          updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;
+
+        toast.promise(onUpload(updatedFiles), {
+          loading: `Uploading ${target}...`,
+          success: () => {
+            setFiles([]);
+            return `${target} uploaded`;
+          },
+          error: `Failed to upload ${target}`,
+        });
+      }
+    },
+
+    [files, maxFileCount, multiple, onUpload, setFiles],
+  );
+
+  function onRemove(index: number) {
+    if (!files) return;
+    const newFiles = files.filter((_, i) => i !== index);
+    setFiles(newFiles);
+    onValueChange?.(newFiles);
+  }
+
+  // Revoke preview url when component unmounts
+  React.useEffect(() => {
+    return () => {
+      if (!files) return;
+      files.forEach((file) => {
+        if (isFileWithPreview(file)) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;
+
+  return (
+    <div className="relative flex flex-col gap-6 overflow-hidden">
+      <Dropzone
+        onDrop={onDrop}
+        accept={accept}
+        maxSize={maxSize}
+        maxFiles={maxFileCount}
+        multiple={maxFileCount > 1 || multiple}
+        disabled={isDisabled}
+      >
+        {({ getRootProps, getInputProps, isDragActive }) => (
+          <div
+            {...getRootProps()}
+            className={cn(
+              'group relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-muted-foreground/25 px-5 py-2.5 text-center transition hover:bg-muted/25',
+              'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+              isDragActive && 'border-muted-foreground/50',
+              isDisabled && 'pointer-events-none opacity-60',
+              className,
+            )}
+            {...dropzoneProps}
+          >
+            <input {...getInputProps()} />
+            {isDragActive ? (
+              <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
+                <div className="rounded-full border border-dashed p-3">
+                  <Upload
+                    className="size-7 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                </div>
+                <p className="font-medium text-muted-foreground">
+                  Drop the files here
+                </p>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
+                <div className="rounded-full border border-dashed p-3">
+                  <Upload
+                    className="size-7 text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div className="flex flex-col gap-px">
+                  <p className="font-medium text-muted-foreground">
+                    Drag {`'n'`} drop files here, or click to select files
+                  </p>
+                  <p className="text-sm text-muted-foreground/70">
+                    You can upload
+                    {maxFileCount > 1
+                      ? ` ${maxFileCount === Infinity ? 'multiple' : maxFileCount}
+                      files (up to ${formatBytes(maxSize)} each)`
+                      : ` a file with ${formatBytes(maxSize)}`}
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </Dropzone>
+      {files?.length ? (
+        <ScrollArea className="h-fit w-full px-3">
+          <div className="flex max-h-48 flex-col gap-4">
+            {files?.map((file, index) => (
+              <FileCard
+                key={index}
+                file={file}
+                onRemove={() => onRemove(index)}
+                progress={progresses?.[file.name]}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web/src/components/rename-dialog/index.tsx b/web/src/components/rename-dialog/index.tsx
index c1be4eabe..369b726fa 100644
--- a/web/src/components/rename-dialog/index.tsx
+++ b/web/src/components/rename-dialog/index.tsx
@@ -2,7 +2,6 @@ import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -11,7 +10,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
-export function DialogDemo() {
+export function RenameDialog() {
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -20,9 +19,6 @@ export function DialogDemo() {
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid grid-cols-4 items-center gap-4">
diff --git a/web/src/components/ui/progress.tsx b/web/src/components/ui/progress.tsx
new file mode 100644
index 000000000..f2473debb
--- /dev/null
+++ b/web/src/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/web/src/components/ui/scroll-area.tsx b/web/src/components/ui/scroll-area.tsx
new file mode 100644
index 000000000..141463d83
--- /dev/null
+++ b/web/src/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
index 299dcaed1..5f88ceaeb 100644
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'inline-flex h-10 items-center justify-center rounded-md bg-colors-background-inverse-standard p-1 text-colors-text-neutral-standard',
       className,
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-colors-background-inverse-strong data-[state=active]:text-colors-text-inverse-strong data-[state=active]:shadow-sm',
       className,
     )}
     {...props}
diff --git a/web/src/hooks/use-callback-ref.ts b/web/src/hooks/use-callback-ref.ts
new file mode 100644
index 000000000..ea0dd8f2d
--- /dev/null
+++ b/web/src/hooks/use-callback-ref.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: never[]) => unknown>(
+  callback: T | undefined,
+): T {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)) as T,
+    [],
+  );
+}
+
+export { useCallbackRef };
diff --git a/web/src/hooks/use-controllable-state.ts b/web/src/hooks/use-controllable-state.ts
new file mode 100644
index 000000000..54b1ed5f1
--- /dev/null
+++ b/web/src/hooks/use-controllable-state.ts
@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import { useCallbackRef } from '@/hooks/use-callback-ref';
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
+ */
+
+type UseControllableStateParams<T> = {
+  prop?: T | undefined;
+  defaultProp?: T | undefined;
+  onChange?: (state: T) => void;
+};
+
+type SetStateFn<T> = (prevState?: T) => T;
+
+function useUncontrolledState<T>({
+  defaultProp,
+  onChange,
+}: Omit<UseControllableStateParams<T>, 'prop'>) {
+  const uncontrolledState = React.useState<T | undefined>(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React.useRef(value);
+  const handleChange = useCallbackRef(onChange);
+
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value as T);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+
+  return uncontrolledState;
+}
+
+function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange = () => {},
+}: UseControllableStateParams<T>) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+    defaultProp,
+    onChange,
+  });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = useCallbackRef(onChange);
+
+  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> =
+    React.useCallback(
+      (nextValue) => {
+        if (isControlled) {
+          const setter = nextValue as SetStateFn<T>;
+          const value =
+            typeof nextValue === 'function' ? setter(prop) : nextValue;
+          if (value !== prop) handleChange(value as T);
+        } else {
+          setUncontrolledProp(nextValue);
+        }
+      },
+      [isControlled, prop, setUncontrolledProp, handleChange],
+    );
+
+  return [value, setValue] as const;
+}
+
+export { useControllableState };
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 2819a830d..3b3f77e8a 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -4,3 +4,21 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function formatBytes(
+  bytes: number,
+  opts: {
+    decimals?: number;
+    sizeType?: 'accurate' | 'normal';
+  } = {},
+) {
+  const { decimals = 0, sizeType = 'normal' } = opts;
+
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const accurateSizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB'];
+  if (bytes === 0) return '0 Byte';
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${
+    sizeType === 'accurate' ? accurateSizes[i] ?? 'Bytes' : sizes[i] ?? 'Bytes'
+  }`;
+}
diff --git a/web/src/pages/dataset/dataset/hooks.ts b/web/src/pages/dataset/dataset/hooks.ts
new file mode 100644
index 000000000..c847cac7c
--- /dev/null
+++ b/web/src/pages/dataset/dataset/hooks.ts
@@ -0,0 +1,230 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import {
+  useCreateNextDocument,
+  useNextWebCrawl,
+  useRunNextDocument,
+  useSaveNextDocumentName,
+  useSetNextDocumentParser,
+  useUploadNextDocument,
+} from '@/hooks/document-hooks';
+import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
+import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
+import { getUnSupportedFilesCount } from '@/utils/document-util';
+import { UploadFile } from 'antd';
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'umi';
+
+export const useNavigateToOtherPage = () => {
+  const navigate = useNavigate();
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+
+  const linkToUploadPage = useCallback(() => {
+    navigate(`/knowledge/dataset/upload?id=${knowledgeId}`);
+  }, [navigate, knowledgeId]);
+
+  const toChunk = useCallback((id: string) => {}, []);
+
+  return { linkToUploadPage, toChunk };
+};
+
+export const useRenameDocument = (documentId: string) => {
+  const { saveName, loading } = useSaveNextDocumentName();
+
+  const {
+    visible: renameVisible,
+    hideModal: hideRenameModal,
+    showModal: showRenameModal,
+  } = useSetModalState();
+
+  const onRenameOk = useCallback(
+    async (name: string) => {
+      const ret = await saveName({ documentId, name });
+      if (ret === 0) {
+        hideRenameModal();
+      }
+    },
+    [hideRenameModal, saveName, documentId],
+  );
+
+  return {
+    renameLoading: loading,
+    onRenameOk,
+    renameVisible,
+    hideRenameModal,
+    showRenameModal,
+  };
+};
+
+export const useCreateEmptyDocument = () => {
+  const { createDocument, loading } = useCreateNextDocument();
+
+  const {
+    visible: createVisible,
+    hideModal: hideCreateModal,
+    showModal: showCreateModal,
+  } = useSetModalState();
+
+  const onCreateOk = useCallback(
+    async (name: string) => {
+      const ret = await createDocument(name);
+      if (ret === 0) {
+        hideCreateModal();
+      }
+    },
+    [hideCreateModal, createDocument],
+  );
+
+  return {
+    createLoading: loading,
+    onCreateOk,
+    createVisible,
+    hideCreateModal,
+    showCreateModal,
+  };
+};
+
+export const useChangeDocumentParser = (documentId: string) => {
+  const { setDocumentParser, loading } = useSetNextDocumentParser();
+
+  const {
+    visible: changeParserVisible,
+    hideModal: hideChangeParserModal,
+    showModal: showChangeParserModal,
+  } = useSetModalState();
+
+  const onChangeParserOk = useCallback(
+    async (parserId: string, parserConfig: IChangeParserConfigRequestBody) => {
+      const ret = await setDocumentParser({
+        parserId,
+        documentId,
+        parserConfig,
+      });
+      if (ret === 0) {
+        hideChangeParserModal();
+      }
+    },
+    [hideChangeParserModal, setDocumentParser, documentId],
+  );
+
+  return {
+    changeParserLoading: loading,
+    onChangeParserOk,
+    changeParserVisible,
+    hideChangeParserModal,
+    showChangeParserModal,
+  };
+};
+
+export const useGetRowSelection = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: (newSelectedRowKeys: React.Key[]) => {
+      setSelectedRowKeys(newSelectedRowKeys);
+    },
+  };
+
+  return rowSelection;
+};
+
+export const useHandleUploadDocument = () => {
+  const {
+    visible: documentUploadVisible,
+    hideModal: hideDocumentUploadModal,
+    showModal: showDocumentUploadModal,
+  } = useSetModalState();
+  const { uploadDocument, loading } = useUploadNextDocument();
+
+  const onDocumentUploadOk = useCallback(
+    async (fileList: UploadFile[]): Promise<number | undefined> => {
+      if (fileList.length > 0) {
+        const ret: any = await uploadDocument(fileList);
+        if (typeof ret?.message !== 'string') {
+          return;
+        }
+        const count = getUnSupportedFilesCount(ret?.message);
+        /// 500 error code indicates that some file types are not supported
+        let code = ret?.code;
+        if (
+          ret?.code === 0 ||
+          (ret?.code === 500 && count !== fileList.length) // Some files were not uploaded successfully, but some were uploaded successfully.
+        ) {
+          code = 0;
+          hideDocumentUploadModal();
+        }
+        return code;
+      }
+    },
+    [uploadDocument, hideDocumentUploadModal],
+  );
+
+  return {
+    documentUploadLoading: loading,
+    onDocumentUploadOk,
+    documentUploadVisible,
+    hideDocumentUploadModal,
+    showDocumentUploadModal,
+  };
+};
+
+export const useHandleWebCrawl = () => {
+  const {
+    visible: webCrawlUploadVisible,
+    hideModal: hideWebCrawlUploadModal,
+    showModal: showWebCrawlUploadModal,
+  } = useSetModalState();
+  const { webCrawl, loading } = useNextWebCrawl();
+
+  const onWebCrawlUploadOk = useCallback(
+    async (name: string, url: string) => {
+      const ret = await webCrawl({ name, url });
+      if (ret === 0) {
+        hideWebCrawlUploadModal();
+        return 0;
+      }
+      return -1;
+    },
+    [webCrawl, hideWebCrawlUploadModal],
+  );
+
+  return {
+    webCrawlUploadLoading: loading,
+    onWebCrawlUploadOk,
+    webCrawlUploadVisible,
+    hideWebCrawlUploadModal,
+    showWebCrawlUploadModal,
+  };
+};
+
+export const useHandleRunDocumentByIds = (id: string) => {
+  const { runDocumentByIds, loading } = useRunNextDocument();
+  const [currentId, setCurrentId] = useState<string>('');
+  const isLoading = loading && currentId !== '' && currentId === id;
+
+  const handleRunDocumentByIds = async (
+    documentId: string,
+    isRunning: boolean,
+    shouldDelete: boolean = false,
+  ) => {
+    if (isLoading) {
+      return;
+    }
+    setCurrentId(documentId);
+    try {
+      await runDocumentByIds({
+        documentIds: [documentId],
+        run: isRunning ? 2 : 1,
+        shouldDelete,
+      });
+      setCurrentId('');
+    } catch (error) {
+      setCurrentId('');
+    }
+  };
+
+  return {
+    handleRunDocumentByIds,
+    loading: isLoading,
+  };
+};
diff --git a/web/src/pages/dataset/dataset/index.tsx b/web/src/pages/dataset/dataset/index.tsx
index d9d4e356b..99b3c3117 100644
--- a/web/src/pages/dataset/dataset/index.tsx
+++ b/web/src/pages/dataset/dataset/index.tsx
@@ -1,15 +1,32 @@
+import { FileUploadDialog } from '@/components/file-upload-dialog';
 import ListFilterBar from '@/components/list-filter-bar';
 import { Upload } from 'lucide-react';
 import { DatasetTable } from './dataset-table';
+import { useHandleUploadDocument } from './hooks';
 
 export default function Dataset() {
+  const {
+    documentUploadVisible,
+    hideDocumentUploadModal,
+    showDocumentUploadModal,
+    onDocumentUploadOk,
+    documentUploadLoading,
+  } = useHandleUploadDocument();
   return (
     <section className="p-8 text-foreground">
-      <ListFilterBar title="Files">
+      <ListFilterBar title="Files" showDialog={showDocumentUploadModal}>
         <Upload />
         Upload file
       </ListFilterBar>
       <DatasetTable></DatasetTable>
+
+      {documentUploadVisible && (
+        <FileUploadDialog
+          hideModal={hideDocumentUploadModal}
+          onOk={onDocumentUploadOk}
+          loading={documentUploadLoading}
+        ></FileUploadDialog>
+      )}
     </section>
   );
 }
diff --git a/web/src/pages/datasets/index.tsx b/web/src/pages/datasets/index.tsx
index 867b08917..a82958845 100644
--- a/web/src/pages/datasets/index.tsx
+++ b/web/src/pages/datasets/index.tsx
@@ -1,6 +1,7 @@
 import ListFilterBar from '@/components/list-filter-bar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react';
 import { DatasetCreatingDialog } from './dataset-creating-dialog';
 import { useSaveKnowledge } from './hooks';
@@ -88,6 +89,8 @@ export default function Datasets() {
     onCreateOk,
     loading: creatingLoading,
   } = useSaveKnowledge();
+  const { navigateToDataset } = useNavigatePage();
+
   return (
     <section className="p-8 text-foreground">
       <ListFilterBar title="Datasets" showDialog={showModal}>
@@ -122,7 +125,11 @@ export default function Datasets() {
                     Created {dataset.created}
                   </p>
                 </div>
-                <Button variant="secondary" size="icon">
+                <Button
+                  variant="secondary"
+                  size="icon"
+                  onClick={navigateToDataset}
+                >
                   <ChevronRight className="h-6 w-6" />
                 </Button>
               </div>