feat(chat): split own and other messages

[DorraJaouad]

☑️ Resolves

• Fix ↔️ Split own messages to other side #14944

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Before	🏡 After

🚧 Tasks

• Unread marker (needs substantial change, will come in a follow up)
• Reaction buttons and reply button in own message allegedly have different colors now (or I am color blind)
• Own messages cannot be tracked for guests after refresh (probably not fixable)
• Links cannot be detected from our end and they are treated as normal message (it can have the wrong grid layout)
• New grid layout for Quote reply?

🏁 Checklist

• 🌏 Tested with different browsers / clients:
  • Chromium (Chrome / Edge / Opera / Brave)
  • Firefox
  • Safari
  • Talk Desktop
  • Integrations with Files sidebar and other apps
  • Not risky to browser differences / client
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[Antreesy]

Should not be a problem to support both layouts, looking at changes. Some mid-review thoughts:

1. Settings toggle is ready, I would merge it separately and hide for now (less conflicts later). 🚧 -> new PR

2. We should split first MessageItem and SystemMessageItem. They have nothing in common but timestamp. That would ease up both components, logic, and resources required 🚧 -> new PR

Let's finish with first 2 before proceeding.

3. We can compute on MessagesList#prepareMessagesGroups(), whether it's a user message, and whether it's own message. We can then pass it to MessagesGroup and further and not compute anymore ❌ can wait for now

4. We can do maybe a half of styling things simply by passing CSS classes from MessagesGroup, rather than introducing new computed ❌ can wait for now

[Antreesy]

So far looks OK, I'm fine with follow-ups

[Antreesy]

This zone should react on hover effect. Otherwise it's hard to click the buttons

[DorraJaouad]

It is optional. Currently, we don't have a wrapper that covers the whole space.
A solution we can add a div and listen to its hovering to pass it to MessageButtonsBar

--> follow up

[Antreesy]

Didn't we reserve a place for this?

no hover	hover

[DorraJaouad]

It is reserved but in a second row, one solution is that once it reaches n reactions such that width is not available for n+1, it should wrap into n-1 reactions per row so add reaction button is not alone --> follow up

Keeping visible space in emtpy second row is not a solution 🚫