Chat

Overview and Purpose

The Hububb Chat module centralizes all guest and operations communication into one workspace. It combines direct Hububb messages, external OTA messages (via Channex), and internal operations chat, so teams can manage guest conversations, booking context, and internal coordination without switching tools.

Core Concepts

Threads

Each thread represents a single conversation. It includes:

• Participants (guests, staff, or both)

• Message history

• Source (Hububb Direct or external channel)

• Optional linked reservation

Threads can be:

• Guest-facing, connected to a reservation or inquiry

• Internal, used for coordination between operations team members and landlords

Users can mark threads as important or for attention to manage priorities.

Messages

Messages belong to a thread and can contain:

• Text messages

• Attachments

• Structured blocks (e.g., payment prompts)

For OTA integrations, messages are automatically fetched from the external channel to keep timelines complete and synchronized.

Participants

Depending on the thread type:

• Guest-facing threads include the guest and relevant staff

• Internal operations threads include only staff members and landlord

Reservation Context

If the thread is linked to a reservation:

• The chat header shows the listing name and stay dates

• On larger screens, a right-side panel provides reservation details and notes

This ensures users always see booking context while chatting.

Layout Overview

Area	Description
Left	Thread list drawer — shows all conversations with filters, search, and source icons
Center	Message timeline — full conversation history with typing and send bar
Right	Reservation and Notes panels (visible on larger screens) for quick access to related info

The layout adapts responsively — on smaller screens, the right panel collapses to focus on the conversation.

Key Capabilities

• Unified inbox — View and reply to messages from Hububb Direct and OTA channels in one place.

• Message composer — Send messages with text or attachments

• Read & follow-up tracking — Mark threads as read, unread, or “for attention.”

• Tags and notes — Add tags for triage or internal classification; attach internal notes to threads.

• Reservation linkage — See booking info inline without leaving the chat.

Thread Lifecycle & Sync

• Opening a thread marks it as seen for the current user.

• For external sources, messages are fetched and merged from the OTA channel.

• The chat view updates in real time as new messages arrive or statuses change.

• Temporary messages appear immediately in the UI and sync once saved to ensure smooth, instant feedback.

Performance & UX

• Infinite scrolling loads older messages smoothly as you scroll up.

• Visual layout minimizes distractions with clean separators and subtle headers.

• On smaller screens, chat focuses on the message timeline while hiding side panels.

🧪 QA Testing Checklist

🔹 Chat Overview & General Behavior

• The Chat module is accessible from the main navigation.

• The interface loads with three main areas:

  • Left: thread list

  • Center: conversation view

  • Right: reservation or notes panel (on larger screens)

• The layout adapts correctly on mobile (right panel collapses, message input remains visible).

• Infinite scroll loads older messages as you reach the top of the conversation.

🔹 Threads & Listing Behavior

• Each thread in the left drawer displays:

  • Guest name or conversation title

  • Source/channel indicator (Hububb Direct, Airbnb, Booking.com, etc.)

  • Last message preview and timestamp

• Clicking a thread loads the full conversation in the center panel.

• The selected thread is visually highlighted.

• Threads marked important or for attention display their visual indicators.

• Searching or filtering threads works correctly (no missing or duplicated entries).

🔹 Messages & Sending

• New messages appear instantly in the conversation with a “sending” state.

• Once confirmed by the system, the message state updates from pending to delivered.

• Messages are timestamped correctly and sorted in chronological order.

• Line breaks and emojis render correctly in text messages.

• Attachments can be uploaded and sent successfully.

• For external threads (e.g., OTA), messages sync and display correctly from the external source.

• Sending a message in one client (e.g., another user) instantly appears for others.

🔹 Read & Attention States

• Opening a thread marks it as read for the current user.

• Marking a thread unread correctly resets its status and notification badge.

• Marking for attention visually flags the thread for follow-up.

• Thread status changes (read/unread/attention) persist after page reload.

🔹 Reservation Context & Side Panel

• If a thread is linked to a reservation, the header shows:

  • Property name

  • Unit name (if applicable)

  • Check-in and check-out dates

• The right-side panel (on desktop) shows reservation details and internal notes.

• Clicking a note or reservation link opens the correct related view or popup.

• On mobile, the side panel collapses and does not overlap the conversation area.

🔹 Performance & UX

• Message input remains responsive during long threads.

• Scroll position is preserved when new messages arrive.

• Chat retains the last opened thread after reload or navigation.

• Popovers, date separators, and visual dividers render cleanly without overlap.

🔹 Data Consistency & Sync

• Message content is the same between the chat view and backend data (after refresh).

• New messages appear without delay on both sender and receiver sides.

• The unread count in the header updates accurately when messages arrive or are read.

🔹 Error Handling

• Network or API errors while sending show a visible toast or retry message.

• The system prevents empty message submissions.

• Uploading unsupported file types shows a clear validation message.