Send and receive messages in the customer portal

Summary

The customer portal includes a messaging system where customers can exchange text messages with the garage. Conversations are unified across channels - portal messages, WhatsApp, SMS, and voice call transcripts all appear in a single timeline. Customers can start new conversations and reply to existing ones directly from the portal. Messages update in real time.

The portal also gets AI auto-responses — when a customer sends a message, the AI assistant replies straight away with helpful answers, the same way it does on WhatsApp and SMS. The customer’s message also lands in the staff unified inbox so a person can step in if needed.

Customers can attach photos and PDFs to portal messages. See “Attaching photos and files” below.

Prerequisites

• The customer is signed in to the portal.

Steps

Viewing the conversation list

1. From the portal home page, click View Messages or open Messages from the profile menu.
2. The messages page heading reads Messages with the subtitle “Your conversations with the garage team”.
3. Each conversation card shows:
   • Vehicle registration plate, make, and model (if linked to a work order).
   • “General enquiry” label with a channel badge (if not linked to a work order).
   • Last message preview prefixed with “Garage:” or “You:” and a channel icon (portal, WhatsApp, SMS, or voice).
   • Relative timestamp (e.g. “5m ago”, “2h ago”, “3d ago”, or a date like “15 Mar”).
   • Unread count badge if there are unread messages from the garage.
4. Conversations are sorted by most recent message. The list updates in real time as new messages arrive.

Starting a new conversation

1. If the customer has no existing conversations, the messages page shows a compose view with the heading Need help with your vehicle? and the text “Send us a message and we’ll get back to you.”
2. The customer types a message in the text area (placeholder: “How can we help?”) with a 5,000 character limit shown as a counter.
3. Click Send to start the conversation. The portal redirects to the new conversation thread.

Reading a conversation thread

1. Click a conversation card to open the thread.
2. The thread page shows:
   • Header with vehicle details (registration plate, make, model, job reference prefixed with “WO-”) or “General enquiry” for conversations not linked to a work order.
   • Privacy notice in the top-right: “Messages are stored and visible to garage staff.”
   • Response time notice below the header showing expected response times.
3. Messages appear in a scrollable timeline, sorted oldest to newest. The view auto-scrolls to the latest message unless the customer has scrolled up.

Understanding the timeline

1. The timeline interleaves messages from all channels and voice call records:
   • Customer messages (sent from portal) appear on the right in a coloured bubble.
   • Staff messages appear on the left in a white bubble with the staff member’s name.
   • Each message shows a small channel badge icon (portal, WhatsApp, SMS) indicating which channel it came through.
   • Timestamps appear below each message (e.g. “Just now”, “5m ago”, “2h ago”).
   • Delivery status icons appear on customer messages:
     • Clock icon - pending.
     • Single tick - sent.
     • Double tick (grey) - delivered.
     • Double tick (coloured) - read.
   • Image attachments render inline. Other file types show a View attachment link.

Voice call cards

1. Voice calls appear in the timeline as collapsible cards with a left border accent. The collapsed view shows:
   • Phone icon and “Voice call” label.
   • Call duration (e.g. “2m 15s”).
   • Outcome (Completed, Transferred to staff, Voicemail, or Call failed).
   • Call summary text (if available).
   • Date and time of the call.
2. If a transcript is available, click the card to expand it. The transcript shows alternating speaker bubbles (bot on the left, customer on the right).

Sending a reply

1. Type a message in the input field at the bottom of the thread (placeholder: “Message [garage name]…”).
2. Press Enter to send, or Shift+Enter to add a new line. Alternatively, click the send button (arrow icon).
3. The message appears immediately in the timeline as a pending message. Once delivered, the status icon updates.

Empty conversation states

• If the thread has no messages and no voice calls, the customer sees “No messages yet” with “Send a message below to start the conversation.”
• If the thread has only voice calls and no text messages, the voice call cards are shown with a prompt: “Start a text conversation below.”

Expected Outcome

The customer can communicate with the garage without phoning. All messages from every channel appear in one place. New messages appear in real time without needing to refresh the page.

Attaching photos and files

Customers can attach photos and PDFs to messages they send through the portal: warning-light photos, damage shots, service-history PDFs, insurance documents. Attachments land in the staff unified inbox alongside the text message, with no work-around through WhatsApp needed. This part is mostly informational for staff, so you can answer questions. Customers do not need a separate guide, because the portal UI is self-explanatory.

What customers can attach

• Photos: JPEG, PNG, WebP, and iPhone HEIC (decoded to JPEG in the browser before upload).
• PDFs.
• Up to 10 MB per file, 25 MB total per message, and a maximum of 4 files per message.

Photos over about 1 MB are automatically compressed in the browser before upload, keeping mobile uploads under a second on a normal 4G signal. Compression preserves orientation, so portrait shots stay portrait, and uses a quality floor that keeps service stamps and VIN plates legible. The customer does not need to opt in. It just happens.

Video files are not supported in this version. They are rejected with “Videos can’t be sent yet — try a photo or PDF”.

How customers attach

1. From the portal Messages page, the customer taps the paperclip Attach button next to the Send box.
2. The phone or browser file picker opens. On mobile, this includes “Take Photo” and the photo library directly.
3. They pick one or more files. Preview chips appear next to the message text: photos show a thumbnail, PDFs show a document icon, filename, and size.
4. A small caption reads “Tap Send to attach these to your message”. Files are staged but not yet sent.
5. They can tap ✕ on a chip to remove it, or tap Attach again to add more, up to 4.
6. They tap Send. Files upload, then the message goes through.

If the text was empty, the message is recorded with the placeholder “[Photo attached]” so it shows correctly in the staff inbox and the customer’s thread.

What staff see

Attachments appear in the staff unified inbox in the same message bubble as the customer’s text. Each attachment is a thumbnail (for images) or a clickable file icon (for PDFs). Click to open or download.

Notes on attachments

• Attachment-only messages, with no text, are allowed, both for replies and to start a new conversation.
• Uploads are sequential per file, not parallel, to keep mobile uploads stable.
• Attachments do not cost AI credits. AI classification is skipped for attachment-only messages.

Troubleshooting

Problem	Cause	Fix
Messages are not updating in real time.	The real-time connection (SSE) may have dropped. The portal falls back to polling every 5 seconds automatically.	Refresh the page. If the issue persists, check the customer’s internet connection.
Customer sees “Conversation not found”.	The conversation ID in the URL does not match any conversation the customer has access to.	The customer should return to the messages list and open the correct conversation. If the issue persists, the conversation may have been removed.
Customer cannot send a message.	The send button is disabled when the input is empty or a message is currently being sent.	Ensure the text field is not empty. Wait for the previous message to finish sending.
WhatsApp or SMS messages are not showing in the portal.	Conversations are unified - messages from all channels should appear. If they are missing, the messages may not be linked to the customer’s conversation.	Check in Torqueflow that the customer’s WhatsApp or SMS messages are associated with the correct conversation record.
Customer says an iPhone photo will not upload.	A network drop during the upload, or a photo in an unusual format the in-browser decoder cannot read.	Ask them to retry. If it fails again, ask them to share the photo to themselves through their Photos app (for example by email) and re-upload the resulting copy, which re-encodes it into a standard JPEG.
Customer says “Videos can’t be sent yet”.	Video uploads are not supported in this version.	Ask for a photo of the issue, or ask them to upload to YouTube or iCloud and paste the link.
Customer says the file is too large.	The file is over 10 MB, the message would exceed 25 MB total, or they are attaching more than 4 files.	Ask them to take a smaller photo, split a multi-page PDF, or send across several messages.
An upload chip turns red.	The upload failed, usually a network drop on mobile.	The customer can retry the chip directly. The text and other staged files are kept.

Notes

• The message input has a character limit of 5,000 characters for new conversations.
• The portal marks staff messages as read automatically when the customer views the conversation.
• Real-time updates use Server-Sent Events (SSE). If the SSE connection fails after retries, the portal switches to polling every 5 seconds. The customer does not need to do anything.
• The conversation list refreshes automatically when the customer returns to the browser tab.
• Messages sent from the portal are tagged with the “portal” channel. The garage team sees these alongside WhatsApp, SMS, and voice messages in Torqueflow’s unified inbox.
• When a new message lands while the customer is looking at the conversation list, the new conversation row fades in and the unread badge briefly pulses. The portal respects the customer’s reduced-motion preference and skips the animation if they have it set.