Project Communication

Project Communication

The Communication tab on every Project Detail page provides threaded messaging linked directly to that project. The component — ProjectCommunication.vue — manages both internal team discussions and external email-based conversations with clients and freelancers.

Where It Lives

Navigate to any project and select the Communication tab. Threads are stored via a polymorphic relationship: context_type = project and context_id = the project UUID. This means every thread is permanently associated with its project.

Discussion Types

Each thread must have a discussion type. Eight options are available, each with a distinct icon and colour:

Type	Icon	Colour
Client Communication	mdi-account-tie	Primary (blue)
Crew Discussion	mdi-account-group	Indigo
Equipment	mdi-speaker	Orange
Logistics & Transport	mdi-truck	Teal
Venue	mdi-map-marker	Purple
Change Request	mdi-swap-horizontal	Warning (amber)
Issue	mdi-alert-circle	Error (red)
General	mdi-message-text	Grey

Creating a New Thread

1. Click the New Thread button (primary colour, mdi-plus icon).
2. A ResponsiveDialog opens (max-width 600px) with the following fields:
   • Subject — required text field.
   • Type — dropdown selector showing each discussion type with its icon and colour.
   • Recipients — autocomplete field that searches CRM client contacts and freelancers. Placeholder text reads "Search CRM contacts, freelancers...".
   • Initial Message — optional textarea (4 rows) to start the conversation.
3. If you select "Client Communication" as the type, the primary contact is auto-added to recipients.
4. When external recipients are present, a Send email to recipients immediately checkbox appears (checked by default).

Recipient Chips

Selected recipients appear as coloured chips inside the autocomplete field. Colours indicate the contact type:

• Client contacts — primary (blue), icon mdi-domain
• Freelancers — orange, icon mdi-account-hard-hat
• Team members — indigo, icon mdi-account-tie

If a contact is the primary contact, a small star icon (mdi-star) appears on their chip.

Thread List

All threads for the project appear as outlined cards sorted by last activity (newest first). Each card displays:

• Subject in bold text.
• Unread badge — a small primary chip showing the count (e.g. "3 new").
• Status chip — tonal chip coloured by status: active = success (green), archived = grey, closed = info (blue).
• Discussion type chip — outlined chip with the type icon and colour.
• Last message preview — truncated to 400px width.
• Message count — mdi-message icon with total messages.
• Last activity — mdi-clock-outline icon with relative time (e.g. "2 hours ago").
• External recipients — mdi-email-outline icon with count.

Filter Chips

Above the thread list, two mandatory filter chips appear:

• All — shows every thread.
• Unread — shows only threads with unread messages. An error-coloured badge displays the unread thread count.

Thread View

Clicking a thread card opens a ResponsiveDialog (max-width 800px, fullscreen on mobile). The dialog contains:

• Header — thread subject, message count, and external recipient count.
• Message list — each message shows a coloured avatar with sender initials (primary for internal, orange for external), the sender name, an "External" chip (orange tonal) or "Internal Note" chip (grey tonal), a relative timestamp, and the message content. Email HTML is sanitised before rendering; plain text messages use standard sanitisation.
• Composer area — below a divider, with an "Internal note" checkbox, a textarea (Ctrl+Enter to send), and a send button (mdi-send icon, primary colour, disabled when empty).

Optimistic Updates

When you send a message, it is appended to the local message list immediately. The thread card in the list updates its last_activity_at, increments messages_count, and refreshes the preview — all before the server response returns.