The next feature that I’m EXTREMELY proud of, despite it still needing a lot of work, is the messaging system. This system brought about a lot of changes and a lot of challenges, but it was so much fun to make. The initial idea was to create something similar to Facebook Messenger, but to integrate it into our software to give our customers a dedicated chat platform within their own environment. I ended up adding the profile pictures piece to the product so that it made the messaging system a bit more personable. Profile pictures are uploaded through the user’s control panel and automatically deactivate the previous image from your profile. Ideally I’d like to implement a feature that allows a user to select a previously uploaded image as well, but I’ve not quite made it that far with this piece yet. This system is actually pretty far from being complete in my mind. I say that because there are some keypress handlers that have not been implemented as well as some other user experience features (deleting conversations, conversation information, notification messages, etc.) that have yet to be fully implemented.
I had quite a few requirements for this messaging system that I ended up designing myself… the core requirements I had in mind are as follows: Clicking the compose button meant that I needed to create an empty block titled “New Message” and keep it at the top. It also meant that I needed to be able to switch between threads while keeping that one on the screen until the user pressed the “X” button on that new thread. Clicking a message thread needed to mark all unread messages in that thread as read. Sending a message needs to refresh the view and mark the messages as read as well (pending there are unread messages in that thread). Hovering over the send arrow needed to perform some sort of action so it wasn’t static and boring. I rotate the icon 90 degrees and transition it to the blue color that you see in the messages that you send to the other person(s). Group messaging is a must… that being said, to comply with the UI I have it setup where group conversations require a conversation name. A user with unread messages needs to be aware of unread messages. To do this, I created an unread messages icon for the “Inbox” menu item. This displays a small “orangered” circle within the mail icon (just a modified version of the ionicons image.