Lesson 3 of 7 · 5 min

Composing and Sending Messages

Write, format, mention teammates, reply in threads, and understand delivery status indicators.

Composing and Sending Messages

Video coming soon

3/7

Lesson Notes

01

On the webapp, the message composer lives at the bottom of the chat panel on a job's detail page. It uses a rich-text editor powered by TipTap. You can write multi-line text using Shift+Enter for a line break, or press Enter alone to send immediately. The composer placeholder text tells you which channel is active: 'Type a message for the client...' appears when you are on the Customer tab, and 'Type a message for the team...' appears on the Team tab. The Send button colour matches the active tab — blue for Customer, amber for Team — so you always know where your message is going before you hit send.

02

To mention a specific person, type @ inside the composer. A dropdown appears showing everyone who participates in this job: the assigned Technician, Editor, Project Manager, and Customer, plus any other member who has posted in the thread. Use the keyboard to navigate the list and press Enter or Tab to insert the mention. Inserted mentions appear as highlighted chips inside the message bubble. When your message sends, the mentioned user receives a notification. You can also click any rendered @mention in the chat history to see a small profile card showing that person's name, avatar, and role on the job.

03

To reply to a specific message, hover over any bubble to reveal the Reply button (an arrow icon labelled 'Reply'). Clicking it anchors a reply preview bar above the composer showing the original message's author and a snippet of the content. Your reply will be linked to that original message as a thread. To view the full thread — the original message plus all its replies — click the thread count link that appears below a bubble once it has received at least one reply (for example, '2 replies >'). This opens a right-side sheet with the full thread and its own reply composer.

04

Message delivery is shown by small status icons on your own outgoing bubbles. A single check mark means the message was sent to the server. Two grey check marks mean delivered. Two blue check marks mean at least one other participant in that channel has read the message. These read receipts are powered by a WebSocket connection that tracks when other users have the job open and scrolled to that message. The iOS app does not yet display delivery status icons on individual bubbles, but messages sync within 5 seconds via polling when the chat sheet is open.

05

On the iOS app, the composer is a plain expanding text field at the bottom of the ChatView sheet. Type your message and tap the circular send button (up arrow on a brand-coloured circle). To reply to a message, long-press any bubble to bring up the action sheet, then tap 'Reply'. The app prefixes the draft field with a quoted block (`> Author: quoted text\n\n`) so the recipient sees the context. When the reply renders in the thread, the quoted block appears as a left-accent-bar quote above the reply body — the same visual treatment you see in iMessage or Slack.

Key Takeaways

  • Press Enter to send on the web; Shift+Enter for a new line.
  • Type @ in the composer to mention someone; they receive a notification.
  • Hover over any bubble and click 'Reply' to start a thread; click the reply count to view the full thread in a side sheet.
  • Blue double-check marks on outgoing bubbles mean the message has been read.
  • On iOS, long-press a bubble and choose 'Reply' to quote it in your response.
Related documentation at docs.vremly.com