Thread View — Messages and Actions

Overview

The Thread View is the main conversation workspace where landlords read and send messages for a specific chat thread. It unifies all communication related to a property or reservation — including direct Hububb messages, OTA conversations (via Channex), and support threads with the Hububb Operations team.

Each thread view includes:

• The message timeline (conversation history)

• A message composer for sending messages, notes, or WhatsApp/SMS communications

• A context panel for viewing reservation and property details

Layout Overview

1. Header

The header provides quick access to essential information and controls:

• Title — Guest name, channel, or “Support Chat” for operations threads.

• Property context — Property name/nickname and stay dates if a reservation is linked.

• Actions

  • Mark as read/unread

  • Mark as important/unimportant

  • Add or remove tags (up to 5 per thread)

2. Message Timeline

• Displays all messages in chronological order with infinite scroll upward for older messages.

• Day separators show breaks between days (e.g., “Today,” “Yesterday”).

• Compact timestamps (e.g., “5:04 PM”) keep the view clean.

• OTA “Reservation Inquiry” messages appear as highlighted blocks with booking info.

• Message bubbles differ by type and author for clarity.

3. Composer (Bottom)

• Tabs for Message, Note, WhatsApp, and (when available) SMS.

• Smart input area for typing, using saved replies, or selecting templates.

• “Send” button and attachment support (images for OTA threads only).

• Channel restrictions guide which tabs or inputs are active.

4. Side Panels (Large Screens)

• Reservation Panel: Displays key booking details for linked reservations.

• Notes Panel: Lists all internal note-type messages in a slide-out view.

  • Only visible to your internal team, never to guests.

Message Types and Visuals

Type	Appearance	Visibility
Message	Standard chat bubble (dark for you, light for the recipient)	Visible to all participants
Note	Yellow-tinted background	Internal only (not sent externally)
WhatsApp	Green bubbles (dark for outgoing, light for incoming)	Visible in Hububb and WhatsApp
SMS	Blue bubbles (outgoing darker, incoming lighter)	Sent via Twilio, when active
Operations Message	Light pink bubble	Sent by Operations or support team

Attachments (e.g., images) display as thumbnails; clicking opens them fullscreen. Links are detected automatically and openable directly from the message.

Message Composer Behavior

Tabs

• Message: Default text message tab (delivered via Channex for OTA threads).

• Note: Internal-only comment; not visible to guests or OTAs.

• WhatsApp: Available when the property is connected to WhatsApp.

• SMS: Supported by the system but hidden in most interfaces for landlords. For operations, it is visible, but available only when the property is connected to SMS.

If there is no reservation linked to the thread (meaning there is not property linked, as well), the WhatsApp and SMS tabs are not visible

WhatsApp Rules

To comply with WhatsApp Business policies:

• The property must have an active WhatsApp subscription.

• You must start communication by sending a template message.

• After a guest replies, you have a 24-hour window for free-form replies.

• Outside that window, you must send another approved template.

• The composer enforces these rules automatically — showing clear messages if you can’t send.

SMS Rules

• Requires an active SMS subscription.

• If inactive, the composer shows a prompt to subscribe before sending.

Notes

• When switching to “Note,” the composer hint changes to “Add an internal note.”

• Notes are stored as message type note and stay internal to your team.

Saved Replies & Templates

Saved Replies

• Predefined snippets for common responses.

• Loaded from your personal saved replies (user_settings/{userId}/saved_replies).

• Selecting one inserts it directly into the composer input.

• Manage them via the “Manage Saved Replies” settings link.

WhatsApp Templates

• Predefined, pre-approved message templates for guest communication.

• Selecting one immediately sends it and displays it as a temporary message while confirmation is pending.

• Templates are fetched dynamically via the useGetWhatsAppTemplates API.

Sending Messages and Attachments

General Rules

• Press Enter to send.

• Shift + Enter inserts a newline.

• Blank or whitespace-only messages are blocked.

Flow for Sending

1. When you send, the composer immediately creates a temporary message (optimistic UI).

2. Once confirmed in Firestore, it becomes a permanent record.

3. If sending fails, you’ll see a visual error and can retry.

OTA Threads

• Text messages are first sent to Channex, which assigns an external ID, then mirrored to Hububb.

• Image uploads:

  • Convert to Base64

  • Upload to Channex

  • Sent as message + stored in Hububb with attachment info

Direct Threads (Hububb)

• Sent and stored directly in Firestore — no external sync needed.

Thread-Level Actions

Action	Description
Mark as Read/Unread	Toggles attention for you in Firestore and via /api/chat/threads/{id}/read or /unread.
Mark Important/Unimportant	Stars or unstars a thread; updates both Firestore and the UI instantly.
Tags	Add or remove up to 5 tags. Updates Firestore and Elasticsearch for quick filtering.

Changes trigger real-time UI refreshes through Firestore subscriptions.

Inquiry and Reservation Context

• OTA threads with new inquiries display a Reservation Inquiry banner at the top of the timeline.

• This banner includes property name, stay dates, and estimated payout info.

• The Reservation Panel shows linked booking and guest context, helping you chat in context without switching screens.

Read, Seen, and Scrolling Behavior

• Opening a thread automatically marks it as seen (PATCH /api/chat/threads/{id}/seen).

• The chat auto-scrolls to the latest message.

• Scrolling upward loads older messages progressively.

• When messages are updated or removed in Firestore, the timeline refreshes live.

Temporary Messages and Reliability

• Messages appear semi-transparent while pending confirmation.

• Once confirmed or updated, they become solid.

• Failures (e.g., upload errors or external send issues) display inline error prompts.

• Retry after resolving the issue (e.g., network reconnect, subscription activation).

Role and Subscription Rules

Role / Subscription	Behavior
Landlord (with Guest Coordinator active)	Composer disabled for guest chats — guest messages handled by the coordination team.
Landlord (no coordinator)	Full messaging access via OTA or Hububb.
WhatsApp / SMS	Require property-level subscription before sending.
Support Chat (Operations)	Works normally — visible to both landlords and operations.

Error Handling & Feedback

• The composer disables “Send” when inputs are invalid or restricted.

• Upload progress and temporary message states show live feedback.

• Failed sends surface a retry option; errors log to the console.

🧪 QA Testing Checklist

🔹 Timeline Rendering

• Messages group by date with correct timestamps.

• Each message type (Message, Note, WhatsApp, SMS, Operations) renders in correct color/style.

• Attachments display thumbnails and open on click.

• Temporary messages transition to confirmed states correctly.

🔹 Sending Behavior

• Sending creates a temporary message immediately.

• Message persists in Firestore after confirmation.

• OTA messages include external IDs and sync correctly.

• WhatsApp and SMS tabs respect subscription and compliance rules.

• Shift+Enter inserts newline; Enter sends message.

🔹 Thread Actions

• Mark Read/Unread toggles correctly and updates instantly.

• Mark Important updates the thread star icon and reflects in filters.

• Tag operations (add/remove) update Firestore and the UI live.

🔹 Context & Panels

• Reservation panel shows correct guest and booking info.

• Notes panel lists internal notes and hides from guests.

• Inquiry banner appears for new OTA inquiries.

🔹 Role Gating

• Guest Coordinator landlords see composer disabled in guest threads.

• Operations see all threads and can message normally.

• Subscription prompts appear for inactive WhatsApp/SMS.

Summary

The Thread View is where landlords manage all their communications in Hububb — from OTA inquiries to direct chats and support discussions. It combines message history, quick actions, and reservation context in one interface, supporting rich messaging, internal notes, and compliance with external platforms like WhatsApp and Channex.