Messages

Secure chat with your coordinator, the visa desk and the hospital.

<!-- GENERATED FILE. Do not edit by hand. Source: components/help/content/. Run npm run gen:docs. -->

Purpose & Business Context

Messages is the human channel of the patient app. Across a months-long cross-border case, the patient needs one trusted place to ask questions and get answers, without juggling email, phone and chat apps in different time zones. This screen consolidates every conversation, with the care coordinator as the default thread.

Commercially, fast, visible support is the strongest retention lever in medical travel. A responsive coordinator turns anxiety into confidence and keeps the patient moving through the journey rather than stalling on an unanswered question.

Screen Overview

A two-pane chat: a thread list on the left and the conversation on the right. The thread list shows each contact with an online dot and an unread badge. The conversation pane has a header (name, online status, call and video buttons), a scrolling message area, and a composer at the bottom.

Three threads are seeded: Priya Nair (Care Coordinator), the Visa Desk and Apollo's International Desk. Sending a message appends it and triggers a short canned reply.

Controls & Components

• Thread list: selectable conversations, each with an avatar, online dot, name, unread badge and a preview of the last message.
• Conversation header: the active contact's name, online status and role, plus call and video buttons.
• Message area: chat bubbles, right-aligned for the patient and left-aligned for the other party, each with a timestamp; it auto-scrolls to the latest.
• Composer: a text input plus a send button; pressing Enter also sends.

Field Definitions

• Thread: A conversation with one contact (e.g. Priya Nair, Visa Desk, Apollo Intl Desk), each with a role and online state.
• Unread badge: An amber count on a thread showing how many messages you have not yet read.
• Online status: A green dot and 'Online' label when the contact is available; otherwise just the role.
• Message bubble: A single message; yours are teal and right-aligned, theirs are white and left-aligned, each with a time.
• Composer: The input where you type; send with the button or the Enter key.

User Actions & Workflows

1. Pick a conversation from the thread list (the coordinator, Priya, is selected by default).
2. Read the history in the conversation pane; it scrolls to the most recent message automatically.
3. Type a message in the composer and press send or Enter.
4. Watch your message appear, followed shortly by a reply from that contact.
5. Switch threads to reach the visa desk or the hospital as needed.

Navigation & Relationships

Reached from: the sidebar Messages item, the Journey coordinator card, the Care Plan surgeon's Message button, and every Ask coordinator button on Find Care.

Shares state with: the rest of the portal. Threads live in PortalProvider, so unread counts stay consistent with the sidebar badge.

Complements: the Visa screen (the Visa Desk thread mirrors visa status) and the Care Plan (the coordinator and hospital threads).

Business Rules & Constraints

• Sending an empty or whitespace-only message does nothing.
• Each contact has a canned reply that arrives a moment after you send (a prototype stand-in for a real agent).
• Thread state is shared, so reading or sending updates the unread counts seen elsewhere.
• Patient-only screen within the portal.

Data Dependencies

Reads and updates threads via PortalProvider (seeded from threads in lib/data). Replies come from a small canned-reply map keyed by thread id; the active thread falls back to the first if none is selected.

• threads (PortalProvider): conversations, unread counts and messages
• canned reply map: per-thread automatic responses
• active thread id: which conversation is shown

Error Handling & Edge Cases

• Empty input: send is a no-op until there is non-whitespace text.
• No selection: the pane defaults to the first thread if the active id does not match.
• Long histories: the message area scrolls and pins to the newest message on open and on new messages.
• Mobile: the thread list narrows (showing avatars) so the conversation stays usable on small screens.

User Roles & Permissions

• Patient: Can read and send messages in any of their threads, and initiate calls (prototype) from the header.
• Coordinator / desks (out of scope here): Reply from staff tools in production; here their responses are canned for the demo.

Related Features & Functionalities

The Journey coordinator card, the Care Plan Message button, Find Care's Ask coordinator action, and the Visa Desk thread that pairs with the Visa screen. The shared thread state also drives the sidebar unread badge.

Flow & Screenshots

flowchart LR
  Msg[Messages] --> Threads[Thread list]
  Threads --> Conv[Conversation pane]
  Conv --> Composer[Composer]
  Composer -->|send / Enter| Sent[Your message appears]
  Sent --> Reply[Canned reply arrives]
  Threads -->|switch| Conv

Guided Walkthrough Steps

The in-app walkthrough for this screen has 5 steps (auto-advances every 5 seconds; Prev / Pause / Next; click outside to exit):

1. Messages ([data-tour="nav.msg"])

Your secure line to everyone helping with your case. You are on the Messages tab now.

1. Your conversations ([data-tour="msg.threads"])

Switch between your coordinator, the visa desk and the hospital. Unread badges show what is new.

1. Who you are talking to ([data-tour="msg.thread"])

The header shows the contact's name, role and online status, with quick call and video buttons.

1. Write a message ([data-tour="msg.composer"])

Type here and press send or Enter. Your message appears instantly, and a reply follows shortly.

1. Never miss a reply ([data-tour="topbar.notifications"])

New messages also show up in your notifications bell at the top, so you stay in the loop across the app.