feat: playground add submenu

.env

@@ -1,2 +1,3 @@
 PORT=9000
 UMI_DEV_SERVER_COMPRESS=none
+

config/routes.ts

@@ -9,11 +9,30 @@ export default [
   },
   {
     name: 'playground',
-    title: 'Playground',
-    path: '/playground',
-    key: 'playground',
     icon: 'Comment',
-    component: './playground'
+    path: '/playground',
+    routes: [
+      {
+        path: '/playground',
+        redirect: '/playground/chat'
+      },
+      {
+        name: 'chat',
+        title: 'Chat',
+        path: '/playground/chat',
+        key: 'chat',
+        icon: 'Comment',
+        component: './playground/index'
+      },
+      {
+        name: 'rerank',
+        title: 'Rerank',
+        path: '/playground/rerank',
+        key: 'rerank',
+        icon: 'Comment',
+        component: './playground/rerank'
+      }
+    ]
   },
   {
     name: 'models',

package.json

@@ -36,9 +36,11 @@
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.11",
     "echarts": "^5.5.1",
+    "epubjs": "^0.3.93",
     "has-ansi": "^5.0.1",
     "highlight.js": "^11.10.0",
     "jotai": "^2.8.4",
+    "jszip": "^3.10.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "mammoth": "^1.8.0",
@@ -46,6 +48,7 @@
     "numeral": "^2.0.6",
     "overlayscrollbars": "^2.10.0",
     "overlayscrollbars-react": "^0.5.6",
+    "pdfjs-dist": "^4.7.76",
     "query-string": "^9.0.0",
     "rc-resize-observer": "^1.4.0",
     "rc-virtual-list": "^3.14.8",
@@ -78,6 +81,7 @@
     "prettier-plugin-packagejson": "^2.5.0",
     "prettier-plugin-two-style-order": "^1.0.1",
     "typescript": "^5.4.5",
-    "url-loader": "^4.1.1"
+    "url-loader": "^4.1.1",
+    "webpack-bundle-analyzer": "^4.10.2"
   }
 }

pnpm-lock.yaml

@@ -71,6 +71,9 @@ dependencies:
   echarts:
     specifier: ^5.5.1
     version: 5.5.1
+  epubjs:
+    specifier: ^0.3.93
+    version: 0.3.93
   has-ansi:
     specifier: ^5.0.1
     version: 5.0.1
@@ -80,6 +83,9 @@ dependencies:
   jotai:
     specifier: ^2.8.4
     version: 2.8.4(@types/react@18.3.1)(react@18.2.0)
+  jszip:
+    specifier: ^3.10.1
+    version: 3.10.1
   localforage:
     specifier: ^1.10.0
     version: 1.10.0
@@ -101,6 +107,9 @@ dependencies:
   overlayscrollbars-react:
     specifier: ^0.5.6
     version: 0.5.6(overlayscrollbars@2.10.0)(react@18.2.0)
+  pdfjs-dist:
+    specifier: ^4.7.76
+    version: 4.7.76
   query-string:
     specifier: ^9.0.0
     version: 9.0.0
@@ -196,6 +205,9 @@ devDependencies:
   url-loader:
     specifier: ^4.1.1
     version: 4.1.1(file-loader@6.2.0)(webpack@5.95.0)
+  webpack-bundle-analyzer:
+    specifier: ^4.10.2
+    version: 4.10.2
 
 packages:
 
@@ -1570,7 +1582,7 @@ packages:
       '@babel/helper-validator-identifier': 7.24.5
       chalk: 2.4.2
       js-tokens: 4.0.0
-      picocolors: 1.0.0
+      picocolors: 1.1.0
     dev: false
 
   /@babel/highlight@7.24.7:
@@ -3188,6 +3200,11 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /@discoveryjs/json-ext@0.5.7:
+    resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==, tarball: https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz}
+    engines: {node: '>=10.0.0'}
+    dev: true
+
   /@dnd-kit/accessibility@3.1.0(react@18.2.0):
     resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==, tarball: https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz}
     peerDependencies:
@@ -4399,6 +4416,26 @@ packages:
       react-is: 16.13.1
     dev: false
 
+  /@mapbox/node-pre-gyp@1.0.11:
+    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==, tarball: https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      detect-libc: 2.0.3
+      https-proxy-agent: 5.0.1
+      make-dir: 3.1.0
+      node-fetch: 2.7.0
+      nopt: 5.0.0
+      npmlog: 5.0.1
+      rimraf: 3.0.2
+      semver: 7.6.3
+      tar: 6.2.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+    optional: true
+
   /@monaco-editor/loader@1.4.0(monaco-editor@0.52.0):
     resolution: {integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==}
     peerDependencies:
@@ -4641,6 +4678,10 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@polka/url@1.0.0-next.28:
+    resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==, tarball: https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz}
+    dev: true
+
   /@radix-ui/popper@0.0.10:
     resolution: {integrity: sha512-YFKuPqQPKscreQid7NuB4it3PMzSwGg03vgrud6sVliHkI43QNAOHyrHyMNo015jg6QK5GVDn+7J2W5uygqSGA==, tarball: https://registry.npmjs.org/@radix-ui/popper/-/popper-0.0.10.tgz}
     dependencies:
@@ -5158,6 +5199,13 @@ packages:
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==, tarball: https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz}
 
+  /@types/localforage@0.0.34:
+    resolution: {integrity: sha512-tJxahnjm9dEI1X+hQSC5f2BSd/coZaqbIl1m3TCl0q9SVuC52XcXfV0XmoCU1+PmjyucuVITwoTnN8OlTbEXXA==, tarball: https://registry.npmjs.org/@types/localforage/-/localforage-0.0.34.tgz}
+    deprecated: This is a stub types definition for localforage (https://github.com/localForage/localForage). localforage provides its own type definitions, so you don't need @types/localforage installed!
+    dependencies:
+      localforage: 1.10.0
+    dev: false
+
   /@types/lodash-es@4.17.12:
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==, tarball: https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz}
     dependencies:
@@ -7085,6 +7133,11 @@ packages:
       '@webassemblyjs/ast': 1.12.1
       '@xtuc/long': 4.2.2
 
+  /@xmldom/xmldom@0.7.13:
+    resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==, tarball: https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.13.tgz}
+    engines: {node: '>=10.0.0'}
+    dev: false
+
   /@xmldom/xmldom@0.8.10:
     resolution: {integrity: sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==, tarball: https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz}
     engines: {node: '>=10.0.0'}
@@ -7112,6 +7165,12 @@ packages:
     resolution: {integrity: sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==, tarball: https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz}
     dev: false
 
+  /abbrev@1.1.1:
+    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==, tarball: https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -7142,6 +7201,13 @@ packages:
     dependencies:
       acorn: 8.11.3
 
+  /acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==, tarball: https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz}
+    engines: {node: '>=0.4.0'}
+    dependencies:
+      acorn: 8.12.1
+    dev: true
+
   /acorn@7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==, tarball: https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz}
     engines: {node: '>=0.4.0'}
@@ -7164,6 +7230,17 @@ packages:
       object-assign: 4.1.1
     dev: false
 
+  /agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==, tarball: https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz}
+    engines: {node: '>= 6.0.0'}
+    requiresBuild: true
+    dependencies:
+      debug: 4.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+    optional: true
+
   /ahooks@3.8.0(react@18.2.0):
     resolution: {integrity: sha512-M01m+mxLRNNeJ/PCT3Fom26UyreTj6oMqJBetUrJnK4VNI5j6eMA543Xxo53OBXn6XibA2FXKcCCgrT6YCTtKQ==, tarball: https://registry.npmjs.org/ahooks/-/ahooks-3.8.0.tgz}
     engines: {node: '>=8.0.0'}
@@ -7474,6 +7551,23 @@ packages:
       picomatch: 2.3.1
     dev: false
 
+  /aproba@2.0.0:
+    resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==, tarball: https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz}
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /are-we-there-yet@2.0.0:
+    resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==, tarball: https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz}
+    engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
+    requiresBuild: true
+    dependencies:
+      delegates: 1.0.0
+      readable-stream: 3.6.2
+    dev: false
+    optional: true
+
   /argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
     dependencies:
@@ -7627,7 +7721,7 @@ packages:
       caniuse-lite: 1.0.30001617
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.0
+      picocolors: 1.1.0
       postcss: 8.4.38
       postcss-value-parser: 4.2.0
     dev: false
@@ -7643,7 +7737,7 @@ packages:
       caniuse-lite: 1.0.30001617
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.0
+      picocolors: 1.1.0
       postcss: 8.4.47
       postcss-value-parser: 4.2.0
     dev: false
@@ -8163,6 +8257,20 @@ packages:
   /caniuse-lite@1.0.30001667:
     resolution: {integrity: sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==, tarball: https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz}
 
+  /canvas@2.11.2:
+    resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==, tarball: https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@mapbox/node-pre-gyp': 1.0.11
+      nan: 2.22.0
+      simple-get: 3.1.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+    optional: true
+
   /case-sensitive-paths-webpack-plugin@2.4.0:
     resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==, tarball: https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz}
     engines: {node: '>=4'}
@@ -8230,6 +8338,13 @@ packages:
       fsevents: 2.3.3
     dev: false
 
+  /chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==, tarball: https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz}
+    engines: {node: '>=10'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /chrome-trace-event@1.0.4:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==, tarball: https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz}
     engines: {node: '>=6.0'}
@@ -8356,6 +8471,13 @@ packages:
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  /color-support@1.1.3:
+    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==, tarball: https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz}
+    hasBin: true
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==, tarball: https://registry.npmjs.org/colord/-/colord-2.9.3.tgz}
     dev: false
@@ -8386,7 +8508,6 @@ packages:
   /commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==, tarball: https://registry.npmjs.org/commander/-/commander-7.2.0.tgz}
     engines: {node: '>= 10'}
-    dev: false
 
   /commander@8.3.0:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==, tarball: https://registry.npmjs.org/commander/-/commander-8.3.0.tgz}
@@ -8460,6 +8581,12 @@ packages:
     resolution: {integrity: sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==, tarball: https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz}
     dev: false
 
+  /console-control-strings@1.1.0:
+    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==, tarball: https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /constants-browserify@1.0.0:
     resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==, tarball: https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz}
     dev: false
@@ -8854,6 +8981,10 @@ packages:
     resolution: {integrity: sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==}
     dev: false
 
+  /debounce@1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==, tarball: https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz}
+    dev: true
+
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -8921,6 +9052,15 @@ packages:
     engines: {node: '>=14.16'}
     dev: false
 
+  /decompress-response@4.2.1:
+    resolution: {integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==, tarball: https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dependencies:
+      mimic-response: 2.1.0
+    dev: false
+    optional: true
+
   /deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -8989,6 +9129,12 @@ packages:
     resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==, tarball: https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz}
     dev: false
 
+  /delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==, tarball: https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -9021,6 +9167,13 @@ packages:
     hasBin: true
     dev: false
 
+  /detect-libc@2.0.3:
+    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==, tarball: https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /detect-newline@3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==, tarball: https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz}
     engines: {node: '>=8'}
@@ -9154,6 +9307,10 @@ packages:
       readable-stream: 2.3.8
     dev: false
 
+  /duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==, tarball: https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz}
+    dev: true
+
   /duplexify@4.1.3:
     resolution: {integrity: sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==}
     dependencies:
@@ -9351,6 +9508,20 @@ packages:
     engines: {node: '>=0.12'}
     dev: false
 
+  /epubjs@0.3.93:
+    resolution: {integrity: sha512-c06pNSdBxcXv3dZSbXAVLE1/pmleRhOT6mXNZo6INKmvuKpYB65MwU/lO7830czCtjIiK9i+KR+3S+p0wtljrw==, tarball: https://registry.npmjs.org/epubjs/-/epubjs-0.3.93.tgz}
+    dependencies:
+      '@types/localforage': 0.0.34
+      '@xmldom/xmldom': 0.7.13
+      core-js: 3.34.0
+      event-emitter: 0.3.5
+      jszip: 3.10.1
+      localforage: 1.10.0
+      lodash: 4.17.21
+      marks-pane: 1.0.9
+      path-webpack: 0.0.3
+    dev: false
+
   /errno@0.1.8:
     resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==, tarball: https://registry.npmjs.org/errno/-/errno-0.1.8.tgz}
     hasBin: true
@@ -9660,7 +9831,7 @@ packages:
     dev: false
 
   /escape-string-regexp@1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==, tarball: https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz}
     engines: {node: '>=0.8.0'}
 
   /escape-string-regexp@4.0.0:
@@ -10661,6 +10832,15 @@ packages:
       universalify: 2.0.1
     dev: false
 
+  /fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==, tarball: https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz}
+    engines: {node: '>= 8'}
+    requiresBuild: true
+    dependencies:
+      minipass: 3.3.6
+    dev: false
+    optional: true
+
   /fs-monkey@1.0.6:
     resolution: {integrity: sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==, tarball: https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz}
     dev: false
@@ -10698,6 +10878,24 @@ packages:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
     dev: false
 
+  /gauge@3.0.2:
+    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==, tarball: https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz}
+    engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
+    requiresBuild: true
+    dependencies:
+      aproba: 2.0.0
+      color-support: 1.1.3
+      console-control-strings: 1.1.0
+      has-unicode: 2.0.1
+      object-assign: 4.1.1
+      signal-exit: 3.0.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wide-align: 1.1.5
+    dev: false
+    optional: true
+
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -10935,6 +11133,13 @@ packages:
   /graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  /gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==, tarball: https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz}
+    engines: {node: '>=10'}
+    dependencies:
+      duplexer: 0.1.2
+    dev: true
+
   /handle-thing@2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
     dev: false
@@ -10990,6 +11195,12 @@ packages:
       has-symbols: 1.0.3
     dev: false
 
+  /has-unicode@2.0.1:
+    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==, tarball: https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /hash-base@3.0.4:
     resolution: {integrity: sha512-EeeoJKjTyt868liAlVmcv2ZsUfGHlE3Q+BICOXcZiwN3osr5Q/zFGYmTJpoIzuaSTAwndFy+GqhEwlU4L3j4Ow==, tarball: https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz}
     engines: {node: '>=4'}
@@ -11098,6 +11309,10 @@ packages:
     resolution: {integrity: sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==, tarball: https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz}
     dev: false
 
+  /html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==, tarball: https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz}
+    dev: true
+
   /html-minifier-terser@6.1.0:
     resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==, tarball: https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz}
     engines: {node: '>=12'}
@@ -11185,6 +11400,18 @@ packages:
     resolution: {integrity: sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==, tarball: https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz}
     dev: false
 
+  /https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==, tarball: https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz}
+    engines: {node: '>= 6'}
+    requiresBuild: true
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+    optional: true
+
   /human-signals@1.1.1:
     resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==, tarball: https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz}
     engines: {node: '>=8.12.0'}
@@ -11731,7 +11958,7 @@ packages:
     dev: false
 
   /isarray@1.0.0:
-    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==, tarball: https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz}
     dev: false
 
   /isarray@2.0.5:
@@ -12361,6 +12588,15 @@ packages:
       semver: 5.7.2
     optional: true
 
+  /make-dir@3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==, tarball: https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dependencies:
+      semver: 6.3.1
+    dev: false
+    optional: true
+
   /makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==, tarball: https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz}
     dependencies:
@@ -12406,6 +12642,10 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
+  /marks-pane@1.0.9:
+    resolution: {integrity: sha512-Ahs4oeG90tbdPWwAJkAAoHg2lRR8lAs9mZXETNPO9hYg3AkjUJBKi1NQ4aaIQZVGrig7c/3NUV1jANl8rFTeMg==, tarball: https://registry.npmjs.org/marks-pane/-/marks-pane-1.0.9.tgz}
+    dev: false
+
   /mathml-tag-names@2.1.3:
     resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
     dev: false
@@ -12569,6 +12809,13 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
+  /mimic-response@2.1.0:
+    resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==, tarball: https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /min-document@2.19.0:
     resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==}
     dependencies:
@@ -12631,16 +12878,50 @@ packages:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: false
 
+  /minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==, tarball: https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dependencies:
+      yallist: 4.0.0
+    dev: false
+    optional: true
+
   /minipass@4.2.8:
     resolution: {integrity: sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==, tarball: https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz}
     engines: {node: '>=8'}
     dev: false
 
+  /minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==, tarball: https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /minipass@7.1.1:
     resolution: {integrity: sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==}
     engines: {node: '>=16 || 14 >=14.17'}
     dev: false
 
+  /minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==, tarball: https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz}
+    engines: {node: '>= 8'}
+    requiresBuild: true
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+    dev: false
+    optional: true
+
+  /mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==, tarball: https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz}
+    engines: {node: '>=10'}
+    hasBin: true
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /mock.js@0.2.0:
     resolution: {integrity: sha512-DKI8Rh/h7Mma+fg+6aD0uUvwn0QXAjKG6q3s+lTaCboCQ/kvQMBN9IXRBzgEaz4aPiYoRnKU9jVsfZp0mHpWrQ==, tarball: https://registry.npmjs.org/mock.js/-/mock.js-0.2.0.tgz}
     dev: false
@@ -12660,6 +12941,11 @@ packages:
     resolution: {integrity: sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==, tarball: https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.0.tgz}
     dev: false
 
+  /mrmime@2.0.0:
+    resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==, tarball: https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz}
+    engines: {node: '>=10'}
+    dev: true
+
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: false
@@ -12681,6 +12967,12 @@ packages:
       object-assign: 4.1.1
     dev: false
 
+  /nan@2.22.0:
+    resolution: {integrity: sha512-nbajikzWTMwsW+eSsNm3QwlOs7het9gGJU5dDZzRTQGk03vyBOauxgI4VakDzE0PtsGTmXPsXTbbjVhRwR5mpw==, tarball: https://registry.npmjs.org/nan/-/nan-2.22.0.tgz}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -12839,6 +13131,16 @@ packages:
   /node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==, tarball: https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz}
 
+  /nopt@5.0.0:
+    resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==, tarball: https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz}
+    engines: {node: '>=6'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      abbrev: 1.1.1
+    dev: false
+    optional: true
+
   /normalize-package-data@2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
     dependencies:
@@ -12889,6 +13191,18 @@ packages:
     dependencies:
       path-key: 4.0.0
 
+  /npmlog@5.0.1:
+    resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==, tarball: https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz}
+    deprecated: This package is no longer supported.
+    requiresBuild: true
+    dependencies:
+      are-we-there-yet: 2.0.0
+      console-control-strings: 1.1.0
+      gauge: 3.0.2
+      set-blocking: 2.0.0
+    dev: false
+    optional: true
+
   /nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==, tarball: https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz}
     dependencies:
@@ -13101,6 +13415,11 @@ packages:
       yaml: 1.10.2
     dev: false
 
+  /opener@1.5.2:
+    resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==, tarball: https://registry.npmjs.org/opener/-/opener-1.5.2.tgz}
+    hasBin: true
+    dev: true
+
   /option@0.2.4:
     resolution: {integrity: sha512-pkEqbDyl8ou5cpq+VsnQbe/WlEy5qS7xPzMS1U55OCG9KPvwFD46zDbxQIj3egJSFc3D+XhYOPUzz49zQAVy7A==, tarball: https://registry.npmjs.org/option/-/option-0.2.4.tgz}
     dev: false
@@ -13311,6 +13630,17 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  /path-webpack@0.0.3:
+    resolution: {integrity: sha512-AmeDxedoo5svf7aB3FYqSAKqMxys014lVKBzy1o/5vv9CtU7U4wgGWL1dA2o6MOzcD53ScN4Jmiq6VbtLz1vIQ==, tarball: https://registry.npmjs.org/path-webpack/-/path-webpack-0.0.3.tgz}
+    dev: false
+
+  /path2d@0.2.1:
+    resolution: {integrity: sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==, tarball: https://registry.npmjs.org/path2d/-/path2d-0.2.1.tgz}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /pbkdf2@3.1.2:
     resolution: {integrity: sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==, tarball: https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz}
     engines: {node: '>=0.12'}
@@ -13322,6 +13652,17 @@ packages:
       sha.js: 2.4.11
     dev: false
 
+  /pdfjs-dist@4.7.76:
+    resolution: {integrity: sha512-8y6wUgC/Em35IumlGjaJOCm3wV4aY/6sqnIT3fVW/67mXsOZ9HWBn8GDKmJUK0GSzpbmX3gQqwfoFayp78Mtqw==, tarball: https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.7.76.tgz}
+    engines: {node: '>=18'}
+    optionalDependencies:
+      canvas: 2.11.2
+      path2d: 0.2.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
   /performance-now@2.1.0:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==, tarball: https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz}
     dev: false
@@ -14415,7 +14756,7 @@ packages:
     dev: false
 
   /process-nextick-args@2.0.1:
-    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==, tarball: https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz}
     dev: false
 
   /process-okam@0.11.10:
@@ -16093,7 +16434,7 @@ packages:
     dev: false
 
   /readable-stream@2.3.8:
-    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==, tarball: https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz}
     dependencies:
       core-util-is: 1.0.3
       inherits: 2.0.4
@@ -16105,7 +16446,7 @@ packages:
     dev: false
 
   /readable-stream@3.6.2:
-    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==, tarball: https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz}
     engines: {node: '>= 6'}
     dependencies:
       inherits: 2.0.4
@@ -16589,7 +16930,7 @@ packages:
     dev: false
 
   /safe-buffer@5.1.2:
-    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==, tarball: https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz}
     dev: false
 
   /safe-buffer@5.2.1:
@@ -16776,6 +17117,12 @@ packages:
       - supports-color
     dev: false
 
+  /set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==, tarball: https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -16799,7 +17146,7 @@ packages:
     dev: false
 
   /setimmediate@1.0.5:
-    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==, tarball: https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz}
     dev: false
 
   /setprototypeof@1.2.0:
@@ -16887,6 +17234,22 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  /simple-concat@1.0.1:
+    resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==, tarball: https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz}
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /simple-get@3.1.1:
+    resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==, tarball: https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz}
+    requiresBuild: true
+    dependencies:
+      decompress-response: 4.2.1
+      once: 1.4.0
+      simple-concat: 1.0.1
+    dev: false
+    optional: true
+
   /simplebar-core@1.2.6:
     resolution: {integrity: sha512-H5NYU+O+uvqOH5VXw3+lgoc1vTI6jL8LOZJsw4xgRpV7uIPjRpmLPdz0TrouxwKHBhpVLzVIlyKhaRLelIThMw==, tarball: https://registry.npmjs.org/simplebar-core/-/simplebar-core-1.2.6.tgz}
     dependencies:
@@ -16908,6 +17271,15 @@ packages:
     resolution: {integrity: sha512-9SQdmsyz4HSP+3gs6PJzhkaMEg+6zTlu9oxIghnwUX3eq+ajq4ft5egl0iyR55LAmO/UwvU8NgIWs/ZyQMa6dw==}
     dev: false
 
+  /sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==, tarball: https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.28
+      mrmime: 2.0.0
+      totalist: 3.0.1
+    dev: true
+
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -17233,7 +17605,7 @@ packages:
     dev: false
 
   /string_decoder@1.1.1:
-    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==, tarball: https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz}
     dependencies:
       safe-buffer: 5.1.2
     dev: false
@@ -17634,6 +18006,20 @@ packages:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==, tarball: https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz}
     engines: {node: '>=6'}
 
+  /tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==, tarball: https://registry.npmjs.org/tar/-/tar-6.2.1.tgz}
+    engines: {node: '>=10'}
+    requiresBuild: true
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+    dev: false
+    optional: true
+
   /terser-webpack-plugin@5.3.10(webpack@5.95.0):
     resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==, tarball: https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz}
     engines: {node: '>= 10.13.0'}
@@ -17663,7 +18049,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.11.3
+      acorn: 8.12.1
       commander: 2.20.3
       source-map-support: 0.5.21
     dev: false
@@ -17784,6 +18170,11 @@ packages:
     engines: {node: '>=0.6'}
     dev: false
 
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==, tarball: https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz}
+    engines: {node: '>=6'}
+    dev: true
+
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==, tarball: https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz}
     dev: false
@@ -18194,7 +18585,7 @@ packages:
     dependencies:
       browserslist: 4.23.0
       escalade: 3.1.2
-      picocolors: 1.0.0
+      picocolors: 1.1.0
     dev: false
 
   /update-browserslist-db@1.1.1(browserslist@4.24.0):
@@ -18233,7 +18624,7 @@ packages:
     resolution: {integrity: sha512-AM6OVeZNwKiirK3IwKxHuopgjX1jB0F8srK9OlCXN+wdmTNg6vgnN9xyQ5abhxq8Oj/kTleLU8OCfZ1FaEW37w==, tarball: https://registry.npmjs.org/url-okam/-/url-okam-0.11.1.tgz}
     dependencies:
       punycode: 1.4.1
-      qs: 6.12.1
+      qs: 6.13.0
     dev: false
 
   /url@0.11.3:
@@ -18507,6 +18898,28 @@ packages:
       javascript-stringify: 2.1.0
     dev: false
 
+  /webpack-bundle-analyzer@4.10.2:
+    resolution: {integrity: sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==, tarball: https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz}
+    engines: {node: '>= 10.13.0'}
+    hasBin: true
+    dependencies:
+      '@discoveryjs/json-ext': 0.5.7
+      acorn: 8.12.1
+      acorn-walk: 8.3.4
+      commander: 7.2.0
+      debounce: 1.2.1
+      escape-string-regexp: 4.0.0
+      gzip-size: 6.0.0
+      html-escaper: 2.0.2
+      opener: 1.5.2
+      picocolors: 1.1.0
+      sirv: 2.0.4
+      ws: 7.5.10
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: true
+
   /webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==, tarball: https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz}
     engines: {node: '>=10.13.0'}
@@ -18623,6 +19036,14 @@ packages:
     dependencies:
       isexe: 2.0.0
 
+  /wide-align@1.1.5:
+    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==, tarball: https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz}
+    requiresBuild: true
+    dependencies:
+      string-width: 4.2.3
+    dev: false
+    optional: true
+
   /word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -18678,6 +19099,19 @@ packages:
       signal-exit: 3.0.7
     dev: false
 
+  /ws@7.5.10:
+    resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==, tarball: https://registry.npmjs.org/ws/-/ws-7.5.10.tgz}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
   /xmlbuilder@10.1.1:
     resolution: {integrity: sha512-OyzrcFLL/nb6fMGHbiRDuPup9ljBycsdCypwuyg5AAHvyWzGfChJpCXMG88AGTIMFhGZ9RccFN1e6lhg3hkwKg==, tarball: https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-10.1.1.tgz}
     engines: {node: '>=4.0'}

src/locales/en-US/menu.ts

@@ -1,7 +1,8 @@
 export default {
   'menu.dashboard': 'Dashboard',
   'menu.playground': 'Playground',
-  'menu.chat': 'Chat',
+  'menu.playground.rerank': 'Rerank',
+  'menu.playground.chat': 'Chat',
   'menu.compare': 'Compare',
   'menu.models': 'Models',
   'menu.resources': 'Resources',

src/locales/zh-CN/menu.ts

@@ -1,7 +1,8 @@
 export default {
   'menu.dashboard': '概览',
   'menu.playground': '试验场',
-  'menu.chat': '聊天',
+  'menu.playground.rerank': 'Rerank',
+  'menu.playground.chat': '对话',
   'menu.compare': '多模型对比',
   'menu.models': '模型',
   'menu.resources': '资源',

src/pages/playground/components/ground-reranker.tsx

@@ -24,7 +24,7 @@ import ReferenceParams from './reference-params';
 import RerankMessage from './rerank-message';
 import RerankerParams from './reranker-params';
 import UploadFile from './upload-file';
-import ViewCodeModal from './view-code-modal';
+import ViewRerankCode from './view-rerank-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -34,6 +34,8 @@ interface MessageProps {
 
 const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
+  const acceptType =
+    '.txt, .doc, .docx, .xls, .xlsx, .csv, .md, .pdf, .eml, .msg, .ppt, .pptx, .xml, .epub, .html';
   const messageId = useRef<number>(0);
   const [messageList, setMessageList] = useState<MessageItem[]>([]);
 
@@ -42,7 +44,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [searchParams] = useSearchParams();
   const selectModel = searchParams.get('model') || '';
   const [parameters, setParams] = useState<any>({});
-  const [systemMessage, setSystemMessage] = useState('');
   const [show, setShow] = useState(false);
   const [loading, setLoading] = useState(false);
   const [tokenResult, setTokenResult] = useState<any>(null);
@@ -63,7 +64,10 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   >([]);
 
   const { initialize, updateScrollerPosition } = useOverlayScroller();
-  const { initialize: innitializeParams } = useOverlayScroller();
+  const {
+    initialize: innitializeParams,
+    updateScrollerPosition: updateDocumentScrollerPosition
+  } = useOverlayScroller();
 
   useImperativeHandle(ref, () => {
     return {
@@ -95,32 +99,15 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
       requestToken.current?.cancel?.();
       requestToken.current = requestSource();
 
-      controllerRef.current?.abort?.();
-      controllerRef.current = new AbortController();
-      const signal = controllerRef.current.signal;
-
-      currentMessageRef.current = current
-        ? [
-            {
-              content: current.content,
-              title: 'Query',
-              uid: messageId.current
-            }
-          ]
-        : [];
-
-      contentRef.current = '';
-      setMessageList((pre) => {
-        return [...currentMessageRef.current];
-      });
+      contentRef.current = current?.content || '';
 
       const documentList: any[] = [...textList, ...fileList];
-      console.log('documentList:', documentList);
+
       const result: any = await rerankerQuery(
         {
           model: parameters.model,
           top_n: parameters.top_n,
-          query: current?.content || '',
+          query: contentRef.current,
           documents: [
             ...textList.map((item) => item.text),
             ...fileList.map((item) => item.text)
@@ -135,9 +122,9 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
       setMessageId();
       setTokenResult(result.usage);
       setMessageList([
-        ...currentMessageRef.current,
         {
           title: 'Results',
+          role: '',
           content: result.results?.map((item: any) => {
             return {
               uid: item.index,
@@ -169,9 +156,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const handleSendMessage = (message: Omit<MessageItem, 'uid'>) => {
-    const currentMessage =
-      message.content || message.imgs?.length ? message : undefined;
-    submitMessage(currentMessage);
+    submitMessage(message);
   };
 
   const handleCloseViewCode = () => {
@@ -223,17 +208,15 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   }, [paramsRef.current, innitializeParams]);
 
   useEffect(() => {
-    if (loading) {
-      updateScrollerPosition();
-    }
-  }, [messageList, loading]);
+    updateScrollerPosition();
+  }, [messageList]);
 
   useEffect(() => {
-    if (messageList.length > messageListLengthCache.current) {
-      updateScrollerPosition();
+    if (textList.length + fileList.length > messageListLengthCache.current) {
+      updateDocumentScrollerPosition();
     }
-    messageListLengthCache.current = messageList.length;
-  }, [messageList.length]);
+    messageListLengthCache.current = textList.length + fileList.length;
+  }, [textList.length, fileList.length]);
 
   return (
     <div className="ground-left-wrapper">
@@ -241,7 +224,18 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
         <div className="message-list-wrap" ref={scroller}>
           <>
             <div className="content">
-              <RerankMessage dataList={messageList} />
+              <RerankMessage
+                dataList={messageList}
+                header={
+                  <div className="result-header">
+                    <span className="title">Results</span>
+                    <ReferenceParams
+                      usage={tokenResult}
+                      showOutput={false}
+                    ></ReferenceParams>
+                  </div>
+                }
+              />
               {loading && (
                 <Spin size="small">
                   <div style={{ height: '46px' }}></div>
@@ -250,24 +244,36 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
             </div>
           </>
         </div>
-        {tokenResult && (
-          <div style={{ height: 40 }}>
-            <ReferenceParams
-              usage={tokenResult}
-              showOutput={false}
-            ></ReferenceParams>
-          </div>
-        )}
+        <div
+          style={{
+            height: 70,
+            paddingLeft: 1
+          }}
+        >
+          <UploadFile
+            handleUpdateFileList={handleUpdateFileList}
+            accept={acceptType}
+          >
+            <div style={{ backgroundColor: 'var(--color-fill-sider)' }}>
+              <InboxOutlined className="font-size-16" />
+              <span className="m-l-10">
+                Click or drag file to this area to upload
+              </span>
+            </div>
+            <span className="text-tertiary">support {acceptType}</span>
+          </UploadFile>
+        </div>
         <div className="ground-left-footer">
           <MessageInput
             scope="reranker"
             loading={loading}
             disabled={!parameters.model}
             isEmpty={true}
+            shouldResetMessage={false}
             handleSubmit={handleSendMessage}
             handleAbortFetch={handleStopConversation}
             clearAll={handleClear}
-            modelList={modelList}
+            modelList={[]}
             placeholer={intl.formatMessage({
               id: 'playground.input.keyword.holder'
             })}
@@ -279,75 +285,62 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
           collapsed: collapse
         })}
         style={{
-          paddingBottom: 80
+          overflow: 'hidden',
+          paddingBottom: 16
         }}
-        ref={paramsRef}
       >
-        <div className="box" style={{ padding: collapse ? 0 : '0 16px' }}>
-          <RerankerParams
-            setParams={setParams}
-            params={parameters}
-            selectedModel={selectModel}
-            modelList={modelList}
-          />
-          <h3 className="m-b-20 m-l-10 flex-between flex-center font-size-14">
-            <span>Documents</span>
-            <Button
-              type="text"
-              icon={<ClearOutlined />}
-              size="middle"
-              onClick={handleClearDocuments}
-            ></Button>
-          </h3>
-          <InputList
-            textList={textList}
-            onChange={handleTextListChange}
-          ></InputList>
-          <div style={{ marginTop: 8 }}>
-            <FileList
-              fileList={fileList}
-              textListCount={textList.length || 0}
-              onDelete={handleDeleteFile}
-            ></FileList>
+        <div className="box" style={{ paddingInline: 0, height: '100%' }}>
+          <div style={{ padding: collapse ? 0 : '0 16px' }}>
+            <RerankerParams
+              setParams={setParams}
+              params={parameters}
+              selectedModel={selectModel}
+              modelList={modelList}
+            />
+            <h3 className="m-b-20 m-l-10 flex-between flex-center font-size-14">
+              <span>Documents</span>
+              <Button
+                type="text"
+                icon={<ClearOutlined />}
+                size="middle"
+                onClick={handleClearDocuments}
+              ></Button>
+            </h3>
           </div>
-        </div>
-
-        <div
-          style={{
-            height: collapse ? 0 : 60,
-            padding: '0 10px',
-            position: 'absolute',
-            overflow: 'hidden',
-            bottom: 20,
-            left: 0,
-            right: 0
-          }}
-        >
-          <UploadFile
-            handleUpdateFileList={handleUpdateFileList}
-            accept=".txt, .doc, .docx, .xls, .xlsx"
+          <div
+            className="docs-wrapper"
+            ref={paramsRef}
+            style={{
+              height: 'calc(100% - 210px)',
+              padding: '0 16px',
+              overflowY: 'auto'
+            }}
           >
-            <div style={{ backgroundColor: 'var(--color-fill-sider)' }}>
-              <InboxOutlined className="font-size-16" />
-              <span className="m-l-10">
-                Click or drag file to this area to upload
-              </span>
+            <InputList
+              textList={textList}
+              onChange={handleTextListChange}
+            ></InputList>
+            <div style={{ marginTop: 8 }}>
+              <FileList
+                fileList={fileList}
+                textListCount={textList.length || 0}
+                onDelete={handleDeleteFile}
+              ></FileList>
             </div>
-            <span className="text-tertiary">
-              support .txt, .doc, .docx, .xls, .xlsx
-            </span>
-          </UploadFile>
+          </div>
         </div>
       </div>
 
-      <ViewCodeModal
+      <ViewRerankCode
         open={show}
-        systemMessage={systemMessage}
-        messageList={messageList}
-        parameters={parameters}
+        documentList={[...textList, ...fileList].map((item) => item.text)}
+        parameters={{
+          ...parameters,
+          query: contentRef.current
+        }}
         onCancel={handleCloseViewCode}
         title={intl.formatMessage({ id: 'playground.viewcode' })}
-      ></ViewCodeModal>
+      ></ViewRerankCode>
     </div>
   );
 });

src/pages/playground/components/message-input.tsx

@@ -73,6 +73,7 @@ interface MessageInputProps {
   isEmpty?: boolean;
   scope: string;
   placeholer?: string;
+  shouldResetMessage?: boolean;
 }
 
 const MessageInput: React.FC<MessageInputProps> = ({
@@ -89,7 +90,8 @@ const MessageInput: React.FC<MessageInputProps> = ({
   disabled,
   isEmpty,
   scope,
-  placeholer
+  placeholer,
+  shouldResetMessage = true
 }) => {
   const { TextArea } = Input;
   const intl = useIntl();
@@ -126,7 +128,9 @@ const MessageInput: React.FC<MessageInputProps> = ({
   };
   const handleSendMessage = () => {
     handleSubmit({ ...message });
-    resetMessage();
+    if (shouldResetMessage) {
+      resetMessage();
+    }
   };
   const onStop = () => {
     handleAbortFetch();
@@ -360,17 +364,18 @@ const MessageInput: React.FC<MessageInputProps> = ({
               )}
             </>
           )}
-          <Tooltip
-            title={intl.formatMessage({ id: 'playground.toolbar.clearmsg' })}
-          >
-            <Button
-              type="text"
-              icon={<ClearOutlined />}
-              size="middle"
-              disabled={loading}
-              onClick={handleClearAll}
-            ></Button>
-          </Tooltip>
+          {scope !== 'reranker' && (
+            <Tooltip
+              title={intl.formatMessage({ id: 'playground.toolbar.clearmsg' })}
+            >
+              <Button
+                type="text"
+                icon={<ClearOutlined />}
+                size="middle"
+                onClick={handleClearAll}
+              ></Button>
+            </Tooltip>
+          )}
           {updateLayout && (
             <>
               <Divider type="vertical" style={{ margin: 0 }} />

src/pages/playground/components/rerank-message.tsx

@@ -1,4 +1,3 @@
-import { StarFilled } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import _ from 'lodash';
 import React from 'react';
@@ -6,17 +5,22 @@ import '../style/content-item.less';
 import '../style/rerank-message.less';
 
 interface RerankMessageProps {
+  header?: React.ReactNode;
   dataList: { title?: string; content: any; uid: number | string }[];
 }
-const RerankMessage: React.FC<RerankMessageProps> = ({ dataList }) => {
+const RerankMessage: React.FC<RerankMessageProps> = ({ header, dataList }) => {
+  if (!dataList || dataList.length === 0) {
+    return null;
+  }
   return (
     <div className="rerank-message">
+      {header}
       {dataList.map((item) => {
         return (
           <div className="content-item" key={item.uid}>
-            <div className="content-item-role">
+            {/* <div className="content-item-role">
               <span className="role">{item.title}</span>
-            </div>
+            </div> */}
             <div className="content-item-content">
               {Array.isArray(item.content) ? (
                 <div className="result">
@@ -24,20 +28,15 @@ const RerankMessage: React.FC<RerankMessageProps> = ({ dataList }) => {
                     return (
                       <dl className="content-item-text" key={sItem.uid}>
                         <dt className="rank">
-                          <span>[{sItem.docIndex + 1}]</span>
-                          <span className="score">
-                            <Tooltip
-                              title={
-                                <span>Score: {_.round(sItem.score, 2)}</span>
-                              }
-                            >
-                              <StarFilled className="m-r-5" />
-                              {_.round(sItem.score, 2)}
-                            </Tooltip>
+                          <span className="doc-index">
+                            {sItem.docIndex + 1}
                           </span>
                         </dt>
-                        <dd className="text">{sItem.text}</dd>
-                        {/* <dd className="doc-name">《{sItem.title}》</dd> */}
+                        <Tooltip
+                          title={<span>Score: {_.round(sItem.score, 2)}</span>}
+                        >
+                          <dd className="text">{sItem.text}</dd>
+                        </Tooltip>
                       </dl>
                     );
                   })}

src/pages/playground/components/upload-file.tsx

@@ -1,4 +1,10 @@
-import { readBlob, readExcelContent, readWordContent } from '@/utils';
+import { readBlob } from '@/utils';
+import readEpubContent from '@/utils/epub-reader';
+import readExcelContent from '@/utils/excel-reader';
+import readPDFContent from '@/utils/pdf-reader';
+import readPptxContent from '@/utils/pptx-reader';
+import readHtmlContent from '@/utils/read-html';
+import readWordContent from '@/utils/word-reader';
 import { PaperClipOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip, Upload } from 'antd';
@@ -26,16 +32,11 @@ const UploadImg: React.FC<UploadImgProps> = ({
   const uploadRef = useRef<any>(null);
 
   const wordReg = /\.(doc|docx)$/;
+  const pptReg = /\.(ppt|pptx)$/;
+  const pdfReg = /\.(pdf)$/;
+  const epubReg = /\.(epub)$/;
   const excelReg = /\.(xls|xlsx)$/;
-
-  const getBase64 = useCallback((file: RcFile): Promise<string> => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = (error) => reject(error);
-    });
-  }, []);
+  const htmlReg = /\.(html)$/;
 
   const debouncedUpdate = useCallback(
     debounce(
@@ -58,12 +59,33 @@ const UploadImg: React.FC<UploadImgProps> = ({
               const context = await readWordContent(
                 item.originFileObj as RcFile
               );
+
               item.url = context;
             } else if (excelReg.test(item.name)) {
               const context = await readExcelContent(
                 item.originFileObj as RcFile
               );
               item.url = context;
+            } else if (epubReg.test(item.name)) {
+              const context = await readEpubContent(
+                item.originFileObj as RcFile
+              );
+              item.url = context;
+            } else if (pdfReg.test(item.name)) {
+              const context = await readPDFContent(
+                item.originFileObj as RcFile
+              );
+              item.url = context;
+            } else if (pptReg.test(item.name)) {
+              const context = await readPptxContent(
+                item.originFileObj as RcFile
+              );
+              item.url = context;
+            } else if (htmlReg.test(item.name)) {
+              const context = await readHtmlContent(
+                item.originFileObj as RcFile
+              );
+              item.url = context;
             } else {
               const context = await readBlob(item.originFileObj as RcFile);
               item.url = context;
@@ -86,10 +108,10 @@ const UploadImg: React.FC<UploadImgProps> = ({
           debouncedUpdate(files);
         }
       } catch (error) {
-        // console.log('error', error);
+        console.log('error', error);
       }
     },
-    [debouncedUpdate, getBase64]
+    [debouncedUpdate]
   );
 
   return (

src/pages/playground/components/view-rerank-code.tsx

@@ -0,0 +1,165 @@
+import EditorWrap from '@/components/editor-wrap';
+import HighlightCode from '@/components/highlight-code';
+import { BulbOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Modal } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+type ViewModalProps = {
+  documentList: string[];
+  parameters: any;
+  title: string;
+  open: boolean;
+  apiType?: string;
+  onCancel: () => void;
+};
+
+const langMap = {
+  shell: 'bash',
+  python: 'python',
+  javascript: 'javascript'
+};
+
+const langOptions = [
+  { label: 'Curl', value: langMap.shell },
+  { label: 'Python', value: langMap.python },
+  { label: 'JavaScript', value: langMap.javascript }
+];
+
+const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
+  const {
+    title,
+    open,
+    onCancel,
+    documentList = [],
+    parameters = {}
+  } = props || {};
+
+  const intl = useIntl();
+  const [codeValue, setCodeValue] = useState('');
+  const [lang, setLang] = useState(langMap.shell);
+
+  const BaseURL = `${window.location.origin}/v1/rerank`;
+
+  const generateCode = () => {
+    if (lang === langMap.shell) {
+      const code = `curl ${window.location.origin}/v1-openai \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
+        {
+          ...parameters,
+          documents: documentList
+        },
+        null,
+        2
+      )}'`;
+      setCodeValue(code);
+    } else if (lang === langMap.javascript) {
+      const data = {
+        ...parameters,
+        documents: documentList
+      };
+      const headers = {
+        'Content-type': 'application/json',
+        Authorization: `Bearer $\{YOUR_GPUSTACK_API_KEY}`
+      };
+      const code = `import axios from 'axios';\n\nconst url = "${BaseURL}";\n\nconst headers = ${JSON.stringify(headers, null, 2)};\n\nconst data = ${JSON.stringify(data, null, 2)};\n\naxios.post(url, data, { headers }).then((response) => {\n  console.log(response.data);\n});`;
+      setCodeValue(code);
+    } else if (lang === langMap.python) {
+      const data = {
+        ...parameters,
+        documents: documentList
+      };
+      const headers = {
+        'Content-type': 'application/json',
+        Authorization: `Bearer $\{YOUR_GPUSTACK_API_KEY}`
+      };
+      const code = `import requests\n\nurl="${BaseURL}"\n\nheaders = ${JSON.stringify(headers, null, 2)}\n\ndata=${JSON.stringify(data, null, 2)}\n\nresponse = requests.post(url, headers=headers, json=data)\n\nprint(response.json())`;
+      setCodeValue(code);
+    }
+  };
+
+  const handleOnChangeLang = (value: string) => {
+    setLang(value);
+  };
+
+  const handleClose = () => {
+    setLang(langMap.shell);
+    onCancel();
+  };
+
+  useEffect(() => {
+    generateCode();
+  }, [lang, parameters, documentList]);
+
+  return (
+    <>
+      <Modal
+        title={title}
+        open={open}
+        centered={true}
+        onCancel={handleClose}
+        destroyOnClose={true}
+        closeIcon={true}
+        maskClosable={false}
+        keyboard={false}
+        width={600}
+        footer={null}
+      >
+        <div style={{ marginBottom: '10px' }}>
+          {intl.formatMessage({ id: 'playground.viewcode.info' })}
+        </div>
+        <div>
+          <EditorWrap
+            copyText={codeValue}
+            langOptions={langOptions}
+            defaultValue={langMap.shell}
+            showHeader={true}
+            onChangeLang={handleOnChangeLang}
+            styles={{
+              wrapper: {
+                backgroundColor: 'var(--color-editor-dark)'
+              }
+            }}
+          >
+            <HighlightCode
+              height={380}
+              theme="dark"
+              code={codeValue}
+              lang={lang}
+              copyable={false}
+            ></HighlightCode>
+          </EditorWrap>
+          <div
+            style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}
+          >
+            <BulbOutlined className="m-r-8" />
+            <span>
+              {intl.formatMessage(
+                { id: 'playground.viewcode.tips' },
+                {
+                  here: (
+                    <Button
+                      type="link"
+                      size="small"
+                      href="#/api-keys"
+                      target="_blank"
+                      style={{ paddingInline: 2 }}
+                    >
+                      <span>
+                        {' '}
+                        {intl.formatMessage({
+                          id: 'playground.viewcode.here'
+                        })}
+                      </span>
+                    </Button>
+                  )
+                }
+              )}
+            </span>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default ViewCodeModal;

src/pages/playground/index.tsx

@@ -29,7 +29,7 @@ const Playground: React.FC = () => {
   const [loaded, setLoaded] = useState(false);
   const optionsList = [
     {
-      label: intl.formatMessage({ id: 'menu.chat' }),
+      label: intl.formatMessage({ id: 'menu.playground.chat' }),
       value: 'chat',
       icon: <MessageOutlined />
     },
@@ -46,8 +46,12 @@ const Playground: React.FC = () => {
   ];
 
   const handleViewCode = useCallback(() => {
-    groundLeftRef.current?.viewCode?.();
-  }, [groundLeftRef]);
+    if (activeKey === 'reranker') {
+      groundRerankerRef.current?.viewCode?.();
+    } else if (activeKey === 'chat') {
+      groundLeftRef.current?.viewCode?.();
+    }
+  }, [groundLeftRef, groundRerankerRef, activeKey]);
 
   const handleToggleCollapse = useCallback(() => {
     if (activeKey === 'reranker') {
@@ -186,7 +190,7 @@ const Playground: React.FC = () => {
       header={{
         title: (
           <div className="flex items-center">
-            {intl.formatMessage({ id: 'menu.playground' })}
+            {intl.formatMessage({ id: 'menu.playground.chat' })}
             {
               <Segmented
                 options={optionsList}
@@ -196,7 +200,8 @@ const Playground: React.FC = () => {
               ></Segmented>
             }
           </div>
-        )
+        ),
+        breadcrumb: {}
       }}
       extra={renderExtra()}
       className={classNames('playground-container', {

src/pages/playground/rerank.tsx

@@ -0,0 +1,124 @@
+import IconFont from '@/components/icon-font';
+import HotKeys from '@/config/hotkeys';
+import { PageContainer } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import { Button, Space } from 'antd';
+import classNames from 'classnames';
+import _ from 'lodash';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { queryModelsList } from './apis';
+import GroundReranker from './components/ground-reranker';
+import './style/play-ground.less';
+
+const PlaygroundRerank: React.FC = () => {
+  const intl = useIntl();
+  const groundLeftRef = useRef<any>(null);
+  const groundRerankerRef = useRef<any>(null);
+  const [rerankerModelList, setRerankerModelList] = useState<
+    Global.BaseOption<string>[]
+  >([]);
+  const [loaded, setLoaded] = useState(false);
+
+  const handleViewCode = useCallback(() => {
+    groundRerankerRef.current?.viewCode?.();
+  }, [groundRerankerRef]);
+
+  const handleToggleCollapse = useCallback(() => {
+    groundRerankerRef.current?.setCollapse?.();
+  }, [groundRerankerRef]);
+
+  useEffect(() => {
+    const getModelListByReranker = async () => {
+      try {
+        const params = {
+          reranker: true
+        };
+        const res = await queryModelsList(params);
+        const list = _.map(res.data || [], (item: any) => {
+          return {
+            value: item.id,
+            label: item.id
+          };
+        }) as Global.BaseOption<string>[];
+        return list;
+      } catch (error) {
+        console.error(error);
+        return [];
+      }
+    };
+    const fetchData = async () => {
+      try {
+        const [rerankerModelList] = await Promise.all([
+          getModelListByReranker()
+        ]);
+        setRerankerModelList(rerankerModelList);
+      } catch (error) {
+        setLoaded(true);
+      }
+    };
+    fetchData();
+  }, []);
+
+  const renderExtra = () => {
+    return (
+      <Space key="buttons">
+        <Button
+          size="middle"
+          onClick={handleViewCode}
+          icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
+        >
+          {intl.formatMessage({ id: 'playground.viewcode' })}
+        </Button>
+        <Button
+          size="middle"
+          onClick={handleToggleCollapse}
+          icon={
+            <IconFont
+              type="icon-a-layout6-line"
+              className="font-size-16"
+            ></IconFont>
+          }
+        ></Button>
+      </Space>
+    );
+  };
+
+  useHotkeys(
+    HotKeys.RIGHT.join(','),
+    () => {
+      groundLeftRef.current?.setCollapse?.();
+    },
+    {
+      preventDefault: true
+    }
+  );
+
+  return (
+    <PageContainer
+      ghost
+      header={{
+        title: (
+          <div className="flex items-center">
+            {intl.formatMessage({ id: 'menu.playground.rerank' })}
+          </div>
+        ),
+        breadcrumb: {}
+      }}
+      extra={renderExtra()}
+      className={classNames('playground-container chat')}
+    >
+      <div className="play-ground">
+        <div className="chat">
+          <GroundReranker
+            ref={groundRerankerRef}
+            modelList={rerankerModelList}
+            loaded={loaded}
+          ></GroundReranker>
+        </div>
+      </div>
+    </PageContainer>
+  );
+};
+
+export default PlaygroundRerank;

src/pages/playground/style/file-list.less

@@ -33,6 +33,7 @@
     .title {
       display: flex;
       align-items: center;
+      max-width: 300px;
     }
   }
 }

src/pages/playground/style/rerank-message.less

@@ -4,8 +4,7 @@
 
   .rank {
     margin-right: 10px;
-    max-width: 75px;
-    min-width: 55px;
+    min-width: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -14,6 +13,15 @@
       margin-left: 5px;
       color: var(--ant-rate-star-color);
     }
+
+    .doc-index {
+      border: 1px solid var(--ant-color-border);
+      padding: 0 12px;
+      font-size: 12px;
+      border-radius: 12px;
+      line-height: 1.4em;
+      color: var(--ant-color-text-secondary);
+    }
   }
 
   .result {
@@ -26,6 +34,7 @@
     margin-bottom: 0;
     display: flex;
     align-items: center;
+    line-height: 2;
   }
 
   .text {
@@ -42,4 +51,23 @@
     font-weight: var(--font-weight-bold);
     font-style: italic;
   }
+
+  .content-item-content {
+    padding: 14px;
+    border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
+  }
+
+  .result-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 4px 4px 0 0;
+    background: var(--ant-color-fill-tertiary);
+    padding: 0 14px;
+    border-bottom: 1px solid var(--ant-color-split);
+
+    .title {
+      font-weight: var(--font-weight-medium);
+    }
+  }
 }

src/utils/epub-reader.ts

@@ -0,0 +1,29 @@
+import ePub from 'epubjs';
+
+export default function readEpubContent(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = function (e: any) {
+      const arrayBuffer = e.target.result;
+      const book = ePub(arrayBuffer);
+
+      book.loaded?.spine?.then?.((spine: any) => {
+        const chapterPromises = spine.spineItems?.map?.((chapter: any) => {
+          return book.load(chapter.href).then((content: any) => {
+            return content.body?.textContent || '';
+          });
+        });
+        Promise.all(chapterPromises)
+          .then((chaptersText) => {
+            const result = chaptersText.join('');
+            resolve(result);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsArrayBuffer(file);
+  });
+}

src/utils/excel-reader.ts

@@ -0,0 +1,16 @@
+import XLSX from 'xlsx';
+
+export default function readExcelContent(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = function (e: any) {
+      const arrayBuffer = e.target.result;
+      const workbook = XLSX.read(arrayBuffer, { type: 'string' });
+      const ws = workbook.Sheets[workbook.SheetNames[0]]; // get the first worksheet
+      const data = XLSX.utils.sheet_to_json(ws);
+      resolve(JSON.stringify(data));
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsArrayBuffer(file);
+  });
+}

src/utils/index.ts

@@ -1,6 +1,4 @@
 import _ from 'lodash';
-import mammoth from 'mammoth';
-import XLSX from 'xlsx';
 
 export const isNotEmptyValue = (value: any) => {
   if (Array.isArray(value)) {
@@ -196,35 +194,3 @@ export function readBlob(blob: Blob): Promise<string> {
     reader.readAsText(blob, 'utf-8');
   });
 }
-
-export function readWordContent(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = function (e: any) {
-      const arrayBuffer = e.target.result;
-      mammoth
-        .extractRawText({ arrayBuffer })
-        .then((result) => {
-          resolve(result.value);
-        })
-        .catch((error) => reject(error));
-    };
-    reader.onerror = (error) => reject(error);
-    reader.readAsArrayBuffer(file);
-  });
-}
-
-export function readExcelContent(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = function (e: any) {
-      const arrayBuffer = e.target.result;
-      const workbook = XLSX.read(arrayBuffer, { type: 'string' });
-      const ws = workbook.Sheets[workbook.SheetNames[0]]; // get the first worksheet
-      const data = XLSX.utils.sheet_to_json(ws);
-      resolve(JSON.stringify(data));
-    };
-    reader.onerror = (error) => reject(error);
-    reader.readAsArrayBuffer(file);
-  });
-}

src/utils/pdf-reader.ts

@@ -0,0 +1,48 @@
+import * as pdfjsLib from 'pdfjs-dist';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.mjs',
+  // @ts-ignore
+  import.meta.url
+).href;
+
+const readPDFContent = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = async function (e: any) {
+      try {
+        const arrayBuffer = e.target.result;
+        const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
+
+        const pdf = await loadingTask.promise;
+        const numPages = pdf.numPages;
+
+        const pagePromises = [];
+
+        for (let i = 1; i <= numPages; i++) {
+          const pagePromise = pdf.getPage(i).then(function (page) {
+            return page.getTextContent().then(function (textContent) {
+              return textContent.items
+                .map(function (item: any) {
+                  return item.str;
+                })
+                .join(' ');
+            });
+          });
+          pagePromises.push(pagePromise);
+        }
+
+        const pageTexts = await Promise.all(pagePromises);
+        const result = pageTexts?.join(' ');
+        resolve(result);
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    reader.onerror = (error) => reject(error);
+    reader.readAsArrayBuffer(file);
+  });
+};
+
+export default readPDFContent;

src/utils/pptx-reader.ts

@@ -0,0 +1,40 @@
+import JSZip from 'jszip';
+
+const readPptxContent = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = function (e: any) {
+      const arrayBuffer = e.target.result;
+      JSZip.loadAsync(arrayBuffer).then(function (zip: any) {
+        const slideFiles = Object.keys(zip.files).filter(function (fileName) {
+          return (
+            fileName.startsWith('ppt/slides/slide') && fileName.endsWith('.xml')
+          );
+        });
+
+        let slideText = '';
+        const slidePromises = slideFiles.map((slideFile) =>
+          zip
+            .file(slideFile)
+            .async('string')
+            .then(function (content: any) {
+              const parser = new DOMParser();
+              const xmlDoc = parser.parseFromString(content, 'application/xml');
+              const texts = xmlDoc.getElementsByTagName('a:t');
+              for (let i = 0; i < texts.length; i++) {
+                slideText += texts[i].textContent + '\n';
+              }
+            })
+        );
+
+        Promise.all(slidePromises).then(() => {
+          resolve(slideText);
+        });
+      });
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsArrayBuffer(file);
+  });
+};
+
+export default readPptxContent;

src/utils/read-html.ts

@@ -0,0 +1,15 @@
+export default function readHtmlContent(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = function (e: any) {
+      const fileContent = e.target.result;
+
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(fileContent, 'text/html');
+      const textContent = doc.body.textContent || '';
+      resolve(textContent);
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsText(file);
+  });
+}

src/utils/word-reader.ts

@@ -0,0 +1,18 @@
+import mammoth from 'mammoth';
+
+export default function readWordContent(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = function (e: any) {
+      const arrayBuffer = e.target.result;
+      mammoth
+        .extractRawText({ arrayBuffer })
+        .then((result) => {
+          resolve(result.value);
+        })
+        .catch((error) => reject(error));
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsArrayBuffer(file);
+  });
+}