Nodebb: Rewrite chat frontend

[julianlam]

For the following reasons, chat has not been given as much love 😄

• Built very early on, and has had many modifications made to it, and so is fairly difficult to theme
• Vanilla has not kept pace with Persona's updates to chat
• Mobile has always been an issue, with substandard usage of a bootstrap modal as a stand-in for a responsive view for chats
• /chats page was not usable on mobile devices

A foundational rewrite is in progress to address these shortcomings, and is available via the chat-rewrite branch. The corresponding theme branch is chat-rewrite on nodebb-theme-vanilla.

List of breaking changes

_including, but not limited to..._

• expanded-chat/* components have been renamed to chat/*
  
  
  
  • e.g. component="chat/controlsToggle"
  
  
• chat/leave component has been removed
• chat/room/name component moved to the modal header (instead of the input, which has now been removed)

[julianlam]

NB: Vanilla is purposely kept minimally styled to act as a base for themes.

In progress screenshots

Mobile view

[aStonedPenguin]

Fantastic, chats really need some work. Some backend changes for chats would be cool too.

• Ability to show users full chat history when adding them to a chat
• Mark all as read in the chats page instead of just the dropdown
• Delete all button in chats page
• Automatically purge chats with no users in them after X amount of time in ACP options
• Alternatively or additionally to the last idea the ability to automatically purge inactive chats after X days; I have 100s of chats open on my forums that neither I nor the sender/recipient will ever touch again. It's useless to store the data at this point.

[julianlam]

@aStonedPenguin Thanks for the feedback -- we'll work on building a solid base for chats first and aiming for feature parity before adding in more features.

Specifically in regards to archiving old chats, different admins view this topic differently. Some are very interested in maintaining a historical record, and so we likely won't implement any sort of auto-purging.

[aStonedPenguin]

Having it as an optional feature to fit everyones needs would be ideal.

[julianlam]

Cog settings menu replaced with dropdown

[mohammadhassan99]

@julianlam Good job 😃 👍
I suggest to make ability for searching messages.

[julianlam]

WIP pushed to https://community.nodebb.org -- please leave all feedback here (though remember, we're shooting for feature parity, new features come later!)

[mohammadhassan99]

Hello @julianlam , I like it more than the current chat interface 😃 .But I think something should be added:
When you want to edit a message, you click on the edit button. But then If you decide not to edit that message and cancel editing, you have to reopen the chat page. I think it is better to add a cancelling button for editing.

[julianlam]

I think it is better to add a cancelling button for editing.

Makes sense 👍

[FaizanZahid]

Guys, looks great to see a new re-write for the front-end chat. Btw current chat version is also 100% responsive on mobile, just saying.

Here are the features i think would make chat next level, (like Facebook messenger ;)

1. Allow users to upload pictures/videos and send to each other. (Users will love this), ( we can also host the uploaded images and videos on some 3rd party like imgur or cloud to avoid the burden on server)
   https://community.nodebb.org/topic/11770/ability-to-upload-and-send-pictures-videos-in-private-chat/2
   We can also make the chat input box HTML5 draggable to let the users drags pics/videos and upload in private chat.

2. Allow users to select from list of Emos or Gifs using lets say from this https://github.com/OneSignal/emoji-picker

3. Ability to mark individual conversations as read/unread.

4. Ability for users to hit a mic button next to chat, record a voice note and send the voice note,. (I know this is too demanding, but this can be thought of) like whatsapp voice notes.

5. Are you guys also thinking to add a global shoutbox (or global public chat room seen and to be used by everyone on the site) for the site in core (rather than the https://community.nodebb.org/topic/503/nodebb-plugin-shoutbox-shoutbox-plugin ) as the shoutbox plugin has few bugs and its not compatible with the latest node bb updates.

6. Allow users to speak something and convert the speak to text and write, this can be added in our post editor too. This will allow users to skip the typing and create content very fast!
   https://tutorialzine.com/2017/08/converting-from-speech-to-text-with-javascript
   https://demo.tutorialzine.com/2017/08/converting-from-speech-to-text-with-javascript/

[julianlam]

👍 Currently there are some issues with footer and header widgets. Investigating possible workarounds.

Also an issue that causes vertical height to not be calculated correctly 🤔

[mohammadhassan99]

@julianlam I've seen something in old chat system. When you are scrolling up and down in order to read previous messages, if the user your chatting with writes a new message, the system scrolls down to new message automatically. You know it bothers users, if they are reading messages they have to scroll repetitively If they receive new messages! . I think it is better to show a button when a new message sent. Like this
I hope you understand what I say.

[julianlam]

Yes, that's something I'd like fixed too... we call the method to scroll to bottom whenever a new message appears. Perhaps we can stop this if the mouse cursor is in the message box... 🤔

[mohammadhassan99]

Hi @julianlam , I saw a few problems in new chat design:
1- In this screenshot 👇 , I showed design problems with right arrows and squares. As you see, I think something should be changed.

Screenshot 1

2- Here when you change the language to fa-IR, you see that the setting icon and other icon ( sorry I don't know the name of that icon 😄) are separated from each other, as I marked with red square. And other design problems. Also we have this problem in chat pop up.

Screenshot 2
Screenshot 3

3- In old chat design, you could see previous message in chat list. But now you cannot.

Screenshot 4

[pitaj]

Looks like you have other CSS problems. The header is larger than it should be.

[julianlam]

Hmm, what you said about the header actually suggests my code is using a hard coded top margin, which should be updated.

[mohammadhassan99]

@pitaj What do you mean? should I try with other browsers?

[mohammadhassan99]

@julianlam As you know, now user can enable or disable receiving chat email in /setting page. I suggest to make this optional for each chat. I mean the user can disable or enable it for each chat room.

[julianlam]

• https://github.com/NodeBB/nodebb-theme-persona/commit/29164c74ad0579e295d9c63cdadf8e466ce46942
• https://github.com/NodeBB/nodebb-theme-vanilla/commit/53f7ad396e0ba901993b6a042af01a9e57502143

[julianlam]

[mohammadhassan99]

Hi @julianlam , when I want to add new user to room, the button doesn't work! It is noticeable that this problem happens when you open chat pop-up. When you open /chats page It doesn't have any problem

And also the sending button text is vise versa in fa-IR language 😃

[julianlam]

@mohammadhassan99 Darn, I thought I got it right for RTL... what do you mean it is vice versa? I made it so that the button is on the left... should it not be? Is the text backwards? :scream:

[mohammadhassan99]

Excuse me @julianlam ,I didn't mean correct. Yes I think it is backwards as you see.

[mohammadhassan99]

@julianlam When you delete your message, It doesn't delete that for user you are chatting with. Am I right?

[julianlam]

Yes I think it is backwards as you see.

No, actually, I don't see, as I cannot read any RTL languages :frowning: Can you show me what it is supposed to look like?

Chat messages can be deleted by the sending user only. They'll see it greyed out. The recipient will not see it.

[mohammadhassan99]

@julianlam It should be ارسال.
I think I found a bug and you should see this GIF.
The message disappears if you only refresh the page. Also after refreshing it can be seen if you hit chat icon !

[mohammadhassan99]

Hi @julianlam , it seems like that we have some design problems in new chat system! 👇

Screenshot

Skin: cerulean

[julianlam]

I don't think there will be compatibility with skins. Can you try without the skin please.

[mohammadhassan99]

@julianlam Even we have this problem without the skin!

[julianlam]

Unfortunately I am unable to reproduce. Perhaps you have some custom CSS interfering with the styling, but if I cannot reproduce this locally, then I cannot fix this issue for you.

[pitaj]

Also, try running ./nodebb build and restarting.

[julianlam]

Ah, there's the backwardness :cry:

[julianlam]

fd13f690aedf633254474b7821056920031055a3