search

RocketChat / EmbeddedChat

An easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp
https://www.npmjs.com/package/@embeddedchat/react
107 stars 214 forks source link

[BUG] UI inconsistencies in quoted messages #563

Open Spiral-Memory opened 2 months ago

Spiral-Memory commented 2 months ago

Description:

Steps to reproduce:

  1. Setup Embedded Chat
  2. Quote a message and send it, compare it with RC (UI has to be fixed and match with RC)
  3. Now Quote a quoted message and do it recursively, the UI in EC will fail to render properly. In RC, 3 recursive messages can be quoted and 2 recent ones will be displayed on screen without fail.
  4. Try to quote a image / video attachment, no preview is available

Expected behavior:

UI consistency while quoting messages Even in case of recursive quoted messages, the UI should render correctly (Refer to RC) In case of attachment messages quoted, the preview should display correctly (In video, i have shown w.r.t image, test it with multiple attachments and ensure that everything is rendering properly.

Actual behavior:

UI inconsistencies are present and UI fails to render properly when recursive messages are quoted.

https://github.com/RocketChat/EmbeddedChat/assets/78961432/e837052c-3adb-4c2e-8b34-4091ef840e52

Note: I think the code is written in PinnedAttachment.js for rendering, make sure it must not break or change pinned message notification UI

Edit: The same has to be handled in QuoteAttachment preview as well.

https://github.com/RocketChat/EmbeddedChat/assets/78961432/e947d566-5a9e-41f3-b123-cd4f519b3390

Spiral-Memory commented 2 months ago

Hey Contributors, This is a very good issue to work on. If anyone is looking for an issue, it would be great to work on this one. I will work on it if no one shows interest. Otherwise, feel free to raise a PR for it.

Akshun-01 commented 2 months ago

Hey, nice find! Working on it 🚀

Spiral-Memory commented 2 months ago

Great !

Akshun-01 commented 2 months ago

Hi, Just an update from my side!

I have implemented the features mentioned in the issue. Just waiting for the quote message PR to get merged. Then I will make final changes and make a PR.

NOTE: I have not added the CSS for attachments as of now. It will be similar to what is with Text quoting. And, I would add it in the final PR.

Thankyou! ^^

PS: Before this the attachments were quoted like this: image

Spiral-Memory commented 2 months ago

Looks awesome 😳😲