feature: support configurable left and right message layout

[MrGaoGang]

Pull Request Type

• ✨ feat
• 🐛 fix
• ♻️ refactor
• 💄 style
• 🔨 chore
• 📝 docs

resolves #3253

What is in this change?

• In Appearance add [Message Direction] config!

The Message default direction is align left, follow the online! , we can change the different direction use the bottom bubble

• In Message List:

  • default direction
  
  • left to right direction
  

• Impact on code

  • Step1: Write direction config: frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
  • Step2: Register Direction Config: frontend/src/pages/GeneralSettings/Appearance/index.jsx
  • Step3: Change The Message Direction use Class name
    • frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
    • frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx

Developer Validations

• I ran yarn lint from the root of the repo & committed changes
• Relevant documentation has been updated
• I have tested my code functionality
• Docker build succeeds locally

[timothycarambat]

While I am not against this kind of style option - can I ask as to why? Is this a common style preference available in other tools that you personally like to us?

Usually, for things like the,is a better option is:

• Create an issue to see if it gets 👍 upvotes (shows user need)
• Maintain this on an independent fork

This PR doesn't have an issue (and it should!) so its hard to gauge if adding this is worth it. Keep in mind after anyone makes a contribution we have to support it forever!

[MrGaoGang]

While I am not against this kind of style option - can I ask as to why? Is this a common style preference available in other tools that you personally like to us?

Usually, for things like the,is a better option is:

• Create an issue to see if it gets 👍 upvotes (shows user need)
• Maintain this on an independent fork

This PR doesn't have an issue (and it should!) so its hard to gauge if adding this is worth it. Keep in mind after anyone makes a contribution we have to support it forever!

First of all, thank you @timothycarambat very much for your reply. I have added an issue to let everyone choose whether to use this feature.
The reason for adding this style configuration is that in China, the left-right layout of IM messaging software is more in line with everyone's usage habits; in this PR, the default layout method still maintains the online left layout, and the left-right layout becomes an option

[timothycarambat]

Ah I see now, okay understood. Will review and see what we can do

[timothycarambat]

@MrGaoGang - can you pull in my changes and re-confirm that functionality works as you intended? Did some UI refactors for dark and light mode + prevented rerenders of the hook on every chat message for performance reasons.

If all looks good, please reply so and ill merge. My end looks good to me.

[MrGaoGang]

@MrGaoGang - can you pull in my changes and re-confirm that functionality works as you intended? Did some UI refactors for dark and light mode + prevented rerenders of the hook on every chat message for performance reasons.

If all looks good, please reply so and ill merge. My end looks good to me.

@timothycarambat Yes, thanks. I have just tested it and it works fine. Thank you very much for your commit, which makes the project run better.

[shatfield4]

LGTM

Tested:

• Desktop
• Mobile
• Light mode
• Dark mode