What This Screen Does
This is the built-in messaging centre where you can have real-time conversations with members and colleagues. Think of it like a private messaging app inside your dashboard. You can start one-on-one chats, create group conversations, add or remove participants, rename chats, share images, and download attachments – all without leaving the platform.
How to Get There
Open the dashboard.
In the left-hand menu, click Chat.
You are now on the Chat screen.
Step-by-Step Guide
1. Understand the Layout
The screen is divided into three panels:
Panel | Location | What It Shows |
Conversation list | Left side | All your existing chats, sorted by most recent message. |
Message area | Centre | The messages for the conversation you have selected. |
Details panel | Right side | Participant info, chat settings, and shared attachments. |
On smaller screens the left and right panels become slide-out drawers to save space.
2. Set Your Status
At the top of the conversation list you will see your avatar with a coloured status badge.
Click your avatar to open the status popover.
Choose a status from the dropdown:
Status | What It Means |
Online | You are active and available. |
Away | You have stepped away temporarily. |
Busy | You prefer not to be disturbed. |
Offline | You appear offline to others. |
3. Search for Contacts or Conversations
Use the Search contacts… field at the top of the conversation list.
As you type, results appear in two sections:
Groups – existing group conversations that match your query.
Contacts – individual members whose name matches your query.
Click a result to open that conversation.
Click away from the search field to close the results and return to the full conversation list.
4. Start a New Conversation
Click the new-conversation icon (person with a plus sign) at the top of the conversation list.
The header area switches to a “To:” compose field.
Start typing a name in the + Recipients field.
The system searches members as you type and shows matching results with their name, email, and avatar.
Select a recipient from the list.
The system creates a new chat behind the scenes and opens it immediately.
You can now type your first message.
5. Select an Existing Conversation
In the conversation list, click any conversation row.
The conversation loads in the centre panel.
Each row shows:
The participant’s avatar (or a group avatar for group chats).
The display name.
A preview of the last message.
How long ago the last message was sent.
A red dot if there are unread messages.
6. Send a Message
Click the message input field at the bottom of the centre panel.
Type your message.
Press Enter on your keyboard to send.
The message appears instantly in the conversation for all participants thanks to the real-time connection.
Field | Required | What to Enter |
Message text | Yes | The text you want to send. Cannot be empty. |
The input field is disabled until you have selected or created a conversation.
7. View Images and Attachments
If a message contains an image, it is displayed inline as a thumbnail.
Click the image to open it in a full-screen lightbox viewer.
Use the lightbox controls to zoom, navigate between images, or close.
8. Interact with Individual Messages
Hover over any message to reveal action icons:
Action | Icon | What It Does |
Reply | Arrow icon | Indicates a reply action on the message. |
React | Smiley face icon | Indicates a reaction action on the message. |
Delete | Trash bin icon | Indicates a delete action on the message. |
9. Add a Participant to an Existing Chat
With a conversation open, click the add-person icon (person with a plus sign) in the header area.
A search field appears in place of the participant info.
Type a name to search for members.
Select a person from the results.
They are added to the conversation immediately.
Click the icon again to close the search field.
10. View Participant Details (One-on-One Chat)
In the details panel on the right, you will see the other person’s:
Avatar (large)
Full name
Role
Expand the Information section to see their:
Phone number
Email address
11. View and Manage Participants (Group Chat)
In the details panel, the In room (N) section lists all participants (excluding yourself).
Each participant shows their avatar, name, and role.
Click a participant to open a detail dialog with:
Their avatar, role, and full name.
A phone button to call them.
An email button to send them an email.
A remove button to remove them from the chat.
Action | What Happens |
Phone button | Opens your device’s phone dialer with their number pre-filled. |
Email button | Opens your default email client with their address pre-filled. |
Remove button | Removes the participant from this conversation. The participant list updates immediately. |
12. Rename a Chat
In the details panel, expand the Adjust chat section.
Click Change chat name.
A dialog appears with a single field:
Field | Required | What to Enter |
Name | No | The new display name for the chat. |
Type the new name and click Save Changes.
You will see a green “Update success!” notification.
The conversation list refreshes to show the updated name.
13. Download Attachments
In the details panel, expand the Attachments (N) section.
All files shared in the conversation are listed with:
A thumbnail or file-type icon.
The file name.
The date it was shared.
Click a file thumbnail to download it to your computer.
14. Delete a Conversation
With a conversation open, click the three-dot menu icon in the header area.
Click Delete (shown in red).
The system will:
Leave the real-time chat channel.
Delete the conversation from the server.
Deselect the conversation.
Refresh your conversation list.
15. Collapse or Expand Panels
Conversation list: Click the arrow icon at the top of the list to collapse it to just avatars, or expand it back to full width. On mobile, tap the small button on the left edge of the screen to open the conversation drawer.
Details panel: Click the arrow icon on the border of the details panel to collapse or expand it. On mobile, it opens as a slide-out drawer from the right.
What Happens Behind the Scenes
You open the Chat screen
|
v
SignalR hub connects to /hubs/chat with your access token
|
v
API call: ChatsService.index() -- loads all your conversations
|
v
For each conversation, hub.invoke("join", chatUid) -- joins the real-time channel
|
v
You select a conversation
|
v
API call: ChatsService.details({ id }) -- loads full conversation with messages
|
v
Messages from other users are automatically marked as seen (local state update)
|
v
You type a message and press Enter
|
v
hub.invoke("sendMessage", messageData) -- sends via SignalR
|
v
All participants receive the message instantly via the "receiveMessage" event
|
v
Message appears in the conversation for everyone
Creating a New Conversation
You click the new-conversation icon and select a recipient
|
v
API call: ChatsService.create({ participants: [recipient, you] })
|
v
Server creates the chat and returns the new chat object
|
v
hub.invoke("join", newChatUid) -- joins the real-time channel
|
v
API call: ChatsService.index() -- refreshes the conversation list
|
v
API call: ChatsService.details({ id }) -- loads the new conversation
|
v
You can now send messages
Deleting a Conversation
You click the three-dot menu and choose "Delete"
|
v
hub.invoke("leave", chatUid) -- leaves the real-time channel
|
v
API call: ChatsService.deleteChat({ id })
|
v
Selected conversation is cleared
|
v
API call: ChatsService.index() -- refreshes the conversation list
Troubleshooting
“I do not see any conversations in the list”
The conversation list loads once the real-time connection is established. If your internet is slow, it may take a moment.
Try refreshing the page. If the list is still empty, you may not have any conversations yet – start a new one using the new-conversation icon.
Check your internet connection. The chat requires a stable connection to the SignalR hub.
“My messages are not sending”
Make sure you pressed Enter after typing your message. There is no separate send button.
If the message input is greyed out (disabled), you have not selected a conversation or created a new one yet. Pick a conversation first.
Check your internet connection. If the real-time connection dropped, messages cannot be sent. Refresh the page to reconnect.
“I do not see new messages from other people”
New messages arrive in real time through the SignalR connection. If the connection was interrupted, you will stop receiving updates.
Refresh the page to re-establish the connection and reload messages.
Make sure your browser tab is not blocked from maintaining background connections (some battery-saver or privacy extensions can interfere).
“I cannot find the person I want to message”
The search in the To: field and the conversation-list search both look up members in the system. If the person is not registered as a member, they will not appear.
Double-check the spelling of their name.
If you still cannot find them, ask an administrator to verify that the person has an account in the system.
“I accidentally deleted a conversation”
Deletion is immediate and cannot be undone from the chat screen. All messages in that conversation are removed from the server.
If you need to recover the conversation, contact your system administrator as soon as possible.
“The details panel on the right is missing”
The details panel only appears when you have a conversation selected.
On smaller screens (below the large breakpoint), the panel is hidden by default. Click the arrow icon on the right edge of the message area to open it as a drawer.
“I removed someone from a group chat by mistake”
You can re-add them by clicking the add-person icon in the header, searching for their name, and selecting them again.
The person will rejoin the conversation but will not see messages that were sent while they were removed.
“The chat name did not update after I saved”
Make sure you clicked Save Changes in the rename dialog and saw the green “Update success!” notification.
If the name still looks the same in the conversation list, try refreshing the page. The list should update automatically, but a manual refresh guarantees it.
“I see a red dot on a conversation but no new messages”
The red dot (unread indicator) appears when there are messages you have not opened yet. Click the conversation to open it – the dot will disappear once the messages are marked as seen.
If the dot persists after opening the conversation, refresh the page.
“The page is showing a loading skeleton that never finishes”
This usually means the initial API call to load conversations is taking too long or failed silently.
Check your internet connection and refresh the page.
If the problem continues, the chat server may be experiencing issues. Contact your system administrator.