[BUG] UI inconsistencies in quoted messages

[Spiral-Memory]

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.

2024-04-12.22-50-03.mp4

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.

2024-04-12.23-55-52.mp4

[Spiral-Memory]

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]

Hey, nice find! Working on it 🚀

[Spiral-Memory]

Great !

[Akshun-01]

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.

• Recurrsive Quotes:
  

• Quoting Attachments:

• Image:
  

• Video:
  

• Audio:
  

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:

[Spiral-Memory]

Looks awesome 😳😲