fix(web): resolved web build issues with yarn and missing dependencies

[aagnone3]

Description

I had trouble building the web UI on my local machine. I resolve them via dependency changes and changing the package manager to yarn. Using yarn leads to faster install/build times and more general intelligence around managing dependencies, so I recommend we switch over. However, my main goal for this change is to establish a repeatable build process for the web UI.

Machine Information

• OS: mac
• Arch: arm64
• npm v10.5.0
• node v18.20.2

Issues

1. [Unreachable npm Registry] The current lockfile has references to Alibaba's npm registry, which is not publicly available (example).
2. [Installation Dependency Issues] Attempting to re-build package-lock.json with npm i resulted in an install failure due to a missing metadata.js dependency. I found this StackOverflow post, whose answer involved directly specifying monaco-editor as a dependency. I added that and then faced several failed dependency errors. I then tried yarn install and the install worked.
3. [Build Issues] Although the install succeeded, I still faced several build errors due to missing dependencies. I iterative fixed them with adding the missing dependencies.

How Has This Been Tested?

Steps to Reproduce

# on a macbook with Apple silicon (arm64 architecture)
cd web
# fails
npm i

# also fails
rm package-lock.json
npm i

Steps to Verify

# on a macbook with Apple silicon (arm64 architecture)
cd web && yarn && yarn build

Snapshots:

Install Fail on Alibaba Registry

(.venv) ➜  web git:(c57ee028) npm i
npm ERR! code ETIMEDOUT
npm ERR! syscall connect
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npm.alibaba-inc.com/escape-string-regexp/download/escape-string-regexp-5.0.0.tgz failed, reason: connect ETIMEDOUT 103.52.199.227:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network 
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

Install Fail on Fresh npm Install

(.venv) ➜  web git:(c57ee028) rm package-lock.json
(.venv) ➜  web git:(c57ee028) ✗ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR!   peer react@">=16.0.0" from @ant-design/[email protected]
npm ERR!   node_modules/@ant-design/icons
npm ERR!     @ant-design/icons@"^5.2.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.3.1" from [email protected]
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^18.2.0" from the root project
npm ERR!   peer react-dom@">=16.0.0" from @ant-design/[email protected]
npm ERR!   node_modules/@ant-design/icons
npm ERR!     @ant-design/icons@"^5.2.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Success with Yarn

# NOTE: this success happens after also adding the missing dependencies
(.venv) ➜  web git:(c57ee028) ✗ yarn     
yarn install v1.22.22
info No lockfile found.
[1/4] 🔍  Resolving packages...
<omitted warnings />
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
<omitted warnings />
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 40.44s.






(.venv) ➜  web git:(c57ee028) ✗ yarn build

<omitted warnings />

- info Skipping validation of types
- info Linting  
- info Collecting page data  
- info Generating static pages (14/14)
- info Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ /                                      20 kB           498 kB
├   /_app                                  0 B             363 kB
├ ○ /404                                   184 B           364 kB
├ ○ /agent                                 5.9 kB          434 kB
├ ○ /app                                   7.81 kB         493 kB
├ ○ /chat                                  2.05 kB         366 kB
├ ○ /database                              11.3 kB         459 kB
├ ○ /flow                                  3.58 kB         451 kB
├ ○ /flow/canvas                           20.1 kB         544 kB
├ ○ /knowledge                             23.2 kB         519 kB
├ ○ /knowledge/chunk                       4.53 kB         424 kB
├ ○ /knowledge/graph                       121 kB          485 kB
├ ○ /models                                5.43 kB         453 kB
└ ○ /prompt                                63 kB           498 kB
+ First Load JS shared by all              371 kB
  ├ chunks/framework-bc0a030fc1a78c10.js   45.2 kB
  ├ chunks/main-0b93b9919f9e60f7.js        27.8 kB
  ├ chunks/pages/_app-e613500bfe947c84.js  286 kB
  ├ chunks/webpack-2d4c47b76a086e8f.js     4.21 kB
  └ css/884756e1e449d22c.css               7.08 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

✨  Done in 22.46s.

Checklist:

• My code follows the style guidelines of this project
• I have already rebased the commits and make the commit message conform to the project standard.
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• Any dependent changes have been merged and published in downstream modules

[Aries-ckt]

@aagnone3, thanks for your contribution.

[Aralhi]

LGTM, thank you so much for doing what we always wanted to do but didn't. ❤️

[2976151305]

LGTM