🔥🚀 feat: CDN (Firebase) & feat: account section

[berry-13]

Summary

I have implemented CDN support using Firebase. Currently, it's specifically designed for uploading profile pictures, but we plan to extend its functionality to support images within the chat and file uploads as well. Additionally, there have been some minor graphical changes, including new icons, and a reorganization of folders in the Settings Tabs. The CDN for profile pictures is currently working for Google, Facebook, Github, and Discord (OpenID support is not yet implemented). Before being uploaded, the images undergo transformation and conversion into the webp format. On average, a profile picture weighs around 3kb, with some as low as 300B. The upload profile picture functionality works for those who don't use Firebase as well. Also, DALL-E plugin support firebase

Here are some frontend images showcasing the image upload

https://github.com/danny-avila/LibreChat/assets/81851188/d1ed5973-1546-4101-a112-bbb1715aef57

fixed some bugs in the settings tab when the theme was light

Change Type

• [x] Bug fix (non-breaking change which fixes an issue)
• [x] Style update
• [x] New feature (non-breaking change which adds functionality)
• [x] This change requires a documentation update

Testing

...

• tested automatic disable "auto avatar upload with social logins": Google, Facebook, Github and Discord
• refactor login tested with Google, Facebook, Github and Discord

Checklist

• [x] My code adheres to this project's style guidelines
• [x] I have performed a self-review of my own code
• [x] I have commented in any complex areas of my code
• [x] I have made pertinent documentation changes
• [x] My changes do not introduce new warnings
• [x] I have written tests demonstrating that my changes are effective or that my feature works
• [x] Local unit tests pass with my changes
• [x] Any changes dependent on mine have been merged and published in downstream modules.

[danny-avila]

Did you create new backend tests? I believe you need to import the mocked logger, there are some tests that do this already not sure which.

TypeError: path.basename is not a function

[danny-avila]

Did you create new backend tests? I believe you need to import the mocked logger, there are some tests that do this already not sure which.

TypeError: path.basename is not a function

@Berry-13 I would like to merge this soon so I will make edits from here if you are mostly done.

[berry-13]

Did you create new backend tests? I believe you need to import the mocked logger, there are some tests that do this already not sure which.

TypeError: path.basename is not a function

@Berry-13 I would like to merge this soon so I will make edits from here if you are mostly done.

sure, thank you!

[danny-avila]

My /api review is done, I just want to fix a few things on the frontend now

[danny-avila]

Noteable changes in the backend outside of the main firebase update:

• DALL-E/DALL-E-3 now uses the image basename from a url to test whether the DALL-E did correctly generate an image.

This fixes an issue where a reverse proxy may generate a different image url like so: media.mandrillai.tech/herearerandomcharscters.jpg

• When tools are loaded, they will pass the userId in case they are needed, such as the case with DALL-E

@Berry-13 following are some todos, which are not needed to merge the PR but will be needed some time after

• TODO: do not use Model directly, such as when you use User.findById, instead use a service method that uses the model; for example, we need a method similar to getMessages but instead getUserById
  • this is done incorrectly a few other places in the codebase (not by you)
• TODO: JSDocs are needed for all new functions. Should be typed out as much as possible.
• TODO: stable diffusion needs the same treatment as the DALL-E plugin

[danny-avila]

Noteable changes in the frontend outside of the main firebase/profile picture update:

• User object now uses recoil atom state instead of useState.

Allows changing the avatar URL to dynamically render across the app once uploaded. I've observed no issues with this change as AuthContext still handles the user object the same.

• Toast has a new z-index order of 1000 to show on top of dialog overlays