Overview
The inline message drawer is a slide-out panel that opens from the right side of the screen whenever you click a Message button on a host card — a reservation card on the Today page, a row on the Reservations list, a damage claim, a guest issue, or a task. You stay on the page you were on. Your scroll position, filters, and any open expansions don't move.
How it works
Opening the drawer
Click any Message button in the host UI. The drawer slides in from the right with:
- The reservation's full message history (most recent at the bottom).
- A composer textbox at the bottom for your reply.
- An AI Draft button (
✨ AI Draft) inside the composer for one-click reply generation.
The button text reads Message on action rows and inside detail headers. On compact rows (a damage claim row, an issue row) it's an envelope icon only with aria-label="Message {guest}".
Closing the drawer
Three ways, all equivalent:
- Click the X in the drawer header.
- Click the dimmed area outside the drawer.
- Press Escape.
The drawer remembers nothing across closes — opening it again loads fresh messages.
Sizing
- On mobile (under 768px wide): the drawer fills the screen at
100vw. - On tablet and desktop (768px and up): the drawer is a fixed panel
min(420px, 100vw)anchored to the right edge.
The drawer sits above the bottom navigation and the PWA update prompt in the z-stack. Bottom padding respects the iOS safe-area inset on notched devices.
The AI Draft button
✨ AI Draft lives inside the composer, not on the trigger button. Click it and the textbox fills with a drafted reply tuned to the surface you opened from:
- Check-in surface → welcoming, arrival-readiness tone.
- Check-out surface → warm thank-you, review-ask tone.
- Mid-stay surface → quick check-in tone.
- Needs review surface → coordinating-clarification tone.
- Guest activity surface → gentle reminder about pending items.
You edit the draft, then click Send. The AI never sends without your edit + click.
For more on AI Draft, see AI Draft.
What happens when you're offline
If your device is offline when you open the drawer, the message list shows:
Couldn't load messages. Check connection and try again.
No spinner, no blank state. Try again once you're back on connection.
Plan gating
The drawer requires the messaging feature, included on:
- Host plan ✓
- Portfolio plan ✓
- Comply plan ✗ — drawer opens in upgrade-prompt mode
- Trial plan ✗ — drawer opens in upgrade-prompt mode
On Comply and Trial, the drawer still opens. You can see past messages read-only (so you have context). The composer area shows an upgrade card instead of a textbox:
Upgrade to Host to reply and use AI Draft. [Upgrade]
The AI Draft button is hidden on locked plans.
Where the drawer is available
| Surface | Trigger |
|---|---|
| Today page reservation cards | Message button in the card action row |
| Reservations list | Message button in each card |
| Property page Reservations panel | Message button in each card |
| Today page Overdue + Tasks Due rows | Envelope icon on each row |
| Damage list | Envelope icon on rows with a linked reservation |
| Damage claim detail header | Message button next to the claim title |
| Reservation detail issues panel | Envelope icon on each issue row |
/tasks page | Envelope icon on rows with a linked reservation |
The reservation detail page (/reservations/[id]) keeps the full MessagePanel inline — same flow, no drawer.
Limits and requirements
- One drawer at a time. Opening Message on a second card closes the first drawer.
- Drawer state is local to your browser tab. It doesn't sync to other devices.
- The drawer code loads on first click, not on page load. That keeps the Today page fast — the first Message click takes ~200ms longer than subsequent clicks while the drawer fetches.
FAQ
Can I drag the drawer to a different position?
No. The drawer is anchored to the right edge. The width adjusts to your screen size.
Why does the AI Draft button look greyed out?
Either it's currently generating a draft (button text reads "Drafting…" and it's disabled), or your plan doesn't include messaging. Comply and Trial plans see the upgrade prompt instead of the AI Draft button.
The drawer remembers nothing? What if I'm mid-compose and accidentally hit Escape?
That draft is lost. We don't auto-save composer state across closes. Treat the drawer like a quick reply tool — type, edit, send. For longer conversations, the Reservation detail page (/reservations/[id]) has the full message panel inline and the draft persists while you're on the page.
Why does the drawer feel slow the first time I open it?
The drawer module loads only when you click — it stays out of the initial page bundle. First click is ~200ms slower while it downloads. Subsequent clicks open instantly. This is intentional and keeps the Today and Reservations pages fast for everyone.
Can I open the drawer from a keyboard shortcut?
Not yet. Each Message button is keyboard-reachable (tab to focus, Enter or Space to open). The drawer itself supports Escape to close. A dedicated shortcut isn't on the near-term roadmap.