feat: realtime sidebars

[Spiral-Memory]

Brief Title

This PR adds real-time updates for pinned, starred, and mentioned messages in the sidebar by utilizing messages directly as messages are updated in realtime, rather than explicitly fetching them from APIs.

Acceptance Criteria fulfillment

• [x] Real-time update integration in the pinned messages sidebar
• [x] Real-time update integration in the starred messages sidebar
• [x] Real-time update integration in the mentioned messages sidebar

Fixes #543

Video/Screenshots

https://github.com/RocketChat/EmbeddedChat/assets/78961432/0e8580ce-d018-4fbb-a501-858738dde9d7

[Spiral-Memory]

@sidmohanty11 , I have used the messages array to extract all the details for pinned messages, starred messages, and mentioned messages, as the messages array is updated through the real-time API. In threads, it is already updated in real-time as it uses the messages array.

Regarding the user status of members, I couldn't find any real-time API that can handle this. For files, many details necessary to render the sidebar are not available in the "attachments" key. Hence, it's better to utilize the REST API instead of messages. Even in the Rocket.Chat app, the information is incomplete and requires a refresh to render the complete details of a file.

Edit: Even in Rocket.Chat, it can't show the complete detail without a refresh (refer to the first attachment, where only the icon with no file info is shown), so I don't think it will be good to add real-time updates to files at this stage. When Rocket.Chat adds complete details of the file into messages itself, at that time we can consider it, or if at a later stage it provides a real-time API to update files, then it can be done.

[Spiral-Memory]

@JeffreytheCoder @sidmohanty11 Is it fine to use useEffect here with messages as the dependency array as it will only recalculate when messages array changes? Is there a way to further optimize it? If I use useMemo instead of messageList state with useEffect will it be better or the same thing? , Also, how will I be able to handle the loading state if i use useMemo? Please let me know your thoughts guys.

[JeffreytheCoder]

I guess you can separate filtering message to useMemo and updating loading state to useEffect, both having messages as the dependency. ChatGPT says useMemo runs before the component re-renders and useEffect runs afterwards. You can try it out to see if it works.

[Spiral-Memory]

I tried that approach, but there wasn't much effect. Also, separating loading in useEffect won't work properly, as we want to stop loading once useMemo finishes its job. For the first loading, it will be fine using it, but for further loading, it won't work.

Okay then, let's keep it like this for now.

If I see any better approach for optimization, I'll do it separately!

Thanks for your response @JeffreytheCoder

@sidmohanty11 Ready for review.