Chat UI can be divided into two main sections. On the left there are lists of conversations and on the right is conversation content with it's messages.
Through header you can go to chat settings or chat search, and the lists show direct conversations, and below it, private groups.
Conversation content shows messages of conversation which is selected.
Conversations lists
You can access chat settings by clicking on arrow 1. In same section is magnifying glass icon 2 which will open chat search panel where you can search for messages and documents in all conversations.
Direct conversation represents conversation with particular user in your company. Initially, list will be empty until you add direct conversation with the user with whom you want to chat. Add conversation by clicking on the plus icon or on the label at the bottom of direct conversation list 3.
Each interlocutor has his status indicated in colored circle on his avatar 4. Status indicators show if user is online, inactive, or offline.
NOTE: online indicates that user is logged-in and has been interacting with application it in the past 10 minutes
inactive indicates that user is logged-in but hasn't been interacting with application in the past 10 minutes
offline indicates that user is not logged-in
Conversation which is selected and which's content is displayed on the right is colored in blue.
When you receive message from another user and conversation with that user is not currently opened, indicator of new, unread messages 5 will be shown.
Private groups list holds conversations with group of users. You can create a private group by clicking on plus icon 6.
If you already have a private group, but you have removed it from list, you can add it back by clicking on label on the bottom of the list 7.
Conversation
This section contains messages 8 from currently selected conversation 9.
Messages are grouped by date when they were sent 10.
Bellow messages is input filed 11 where you can enter message and send it to other user(s) in the conversation. Input fields size can be changed by dragging icon 13.
NOTE: You can include web address as part of your message by typing it or pasting it in the input field.
If you wish to send a document to other participant(s) in conversation, you can do so by clicking on the green button 12. and file selection popup will appear.
If you send a message and other user(s) in the conversations haven't read it yet, it will be indicated as unread by icon 14. In case that message is sent to a group placing mouse on said icon will show popup with names of user(s) who haven't yet seen the message.


Like and share