Project Chat Interface

Page Overview

The Project Chat Interface is a real-time communication tool embedded within a project workspace that allows team members to exchange messages, share files, and collaborate effectively. This chat system displays a chronological feed of conversations between project participants, with messages organized by date and time stamps. The interface supports various types of content including plain text messages, file uploads, web links, and Zoom meeting invitations. Messages are visually distinguished based on the sender – the current user's messages appear on the right side with a green highlight, while other users' messages appear on the left. The system includes a mention feature where users can notify specific team members by using "@username" or "@all" to alert everyone. Mentioned messages are highlighted in yellow for the recipients. The chat also displays system activity notifications such as tracker item updates, user join/leave events, and automated messages from services like Jenkins for build notifications. At the bottom of the interface is a message composition area with a text input field and send button, along with various control buttons for features like file uploads, meeting creation, and notification settings.

UI Elements

Chat Header – Located at the top of the panel, displays "Chat" as the title with a detach window icon on the right side that allows users to open the chat in a separate window.

Retrieve Older Messages Button – Positioned at the top of the message area, this small button allows users to load previous chat history that isn't currently displayed.

Message List – The main scrollable area containing all chat messages, organized chronologically with date and time delimiters separating different periods of conversation.

User Avatar Images – Small circular profile pictures appearing next to each message on the left side, representing the message sender and serving as clickable elements for user filtering.

Message Bubbles – Individual message containers that display the sender's username, timestamp, and message content. Current user messages appear on the right with green highlighting, while others appear on the left.

Time Delimiters – Horizontal dividers showing dates and times (like "Sep 3, 2025" or "11:00 AM") that separate messages into chronological groups.

Link Previews – Embedded previews for shared URLs, including Zoom meeting links with thumbnails and descriptions, and generic web links with titles and URLs.

Activity Messages – System-generated notifications about project activities like tracker item updates, user status changes, and build notifications, displayed with special formatting.

Mention Highlights – Messages containing "@username" or "@all" mentions are highlighted in yellow to draw attention to notifications directed at specific users.

Delete Message Icons – Small "X" icons appearing on the current user's messages, allowing them to delete their own messages.

Zoom Button – Located in the bottom toolbar, provides quick access to start Zoom meetings with the project team.

Activity Notifications Toggle – A button in the bottom right showing a tasks icon, allowing users to enable/disable activity notifications.

Sound Toggle Button – Located in the bottom toolbar, lets users turn chat notification sounds on or off, indicated by a speaker icon.

File Upload Button – A button with an upload icon in the bottom toolbar for sharing files with the chat.

User List Dropdown – Shows the number of online users (displayed as "3") with a dropdown arrow, revealing a list of currently active chat participants when clicked.

Message Input Area – A large text area at the bottom where users can type new messages, with auto-complete and mention functionality.

Send Button – Located to the right of the message input area, allows users to submit their typed messages to the chat.