Skip to content

Conversation

@vladvelici
Copy link
Contributor

  • dashboard support chat draft 1
  • support chat update
  • support chat

@coderabbitai
Copy link

coderabbitai bot commented Dec 18, 2025

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@vladvelici vladvelici force-pushed the support-dashboard-chat branch from a727ed8 to 9748d2a Compare December 18, 2025 09:27
Copy link
Contributor

@m-hulbert m-hulbert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Vlad.

I've dropped some high-level feedback on this. I think we need to look at the order and flow of information, as well as the prominence we give to certain features over patterns and recommendations.


This guide covers both sides of a support chat system with Ably, with particular attention to the architectural patterns that make agent dashboards work at scale.

<div class="mb-6">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't need to wrap these in particular classes. Were they made be design or by you?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It just looks better wrapped as it adds some margin at the bottom. Otherwise there is no vertical whitespace between image and text.

I'm happy to follow whatever style we should follow but simply putting the picture without any wrapping seems to give a poor result.

I made the mockup myself, I had feedback on another guide to produce these. Happy to get them changed with design-provided ones everywhere.

meta_keywords: "support chat, help desk, customer support, agent dashboard, Ably Chat, chat SDK, realtime messaging, AI support, chatbot, dependability"
---

Building support chat is unlike other chat applications. The customer-facing widget requires reliable messaging, presence detection, typing indicators, and seamless reconnection. Ably Chat handles all of these challenges for you. The agent dashboard presents a different class of complexity: managing multiple concurrent conversations, discovering new tickets in realtime, coordinating between agents, and integrating automation and AI.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should lay out that we're discussing 2 different aspects here - the customer-facing component and a separate dashbaord for agents.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed


![Ably Architecture Overview Diagram](../../../../images/content/diagrams/architecture-overview.png)

Delivering chat messages in realtime is key to a smooth support experience. Ably's [serverless architecture](/docs/platform/architecture) eliminates the need for you to manage websocket servers. It automatically scales to handle millions of concurrent connections without provisioning or maintenance. Ably routinely handles 600 billion messages every month globally, across 2 billion devices with median delivery [latencies](/docs/platform/architecture/latency#message-delivery-latency) under 6.5ms even during peak traffic. Ably also handles all of the edge-cases around delivery, failover, and scaling.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should stick to the 37ms latency headline from that page for consistency.


Delivering chat messages in realtime is key to a smooth support experience. Ably's [serverless architecture](/docs/platform/architecture) eliminates the need for you to manage websocket servers. It automatically scales to handle millions of concurrent connections without provisioning or maintenance. Ably routinely handles 600 billion messages every month globally, across 2 billion devices with median delivery [latencies](/docs/platform/architecture/latency#message-delivery-latency) under 6.5ms even during peak traffic. Ably also handles all of the edge-cases around delivery, failover, and scaling.

## Scale without limits
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We switch between 'conversations', 'tickets' and 'rooms' here. I think we need to use 1 term between 'conversations' and 'tickets' and then show that map of 1:1 to a chat room for the recommended architecture pattern.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see we cover this in the next section. Maybe swap the order around?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

swapped sections (initially, then removed the standalone scale section since it wasn't adding value - moved any bits of useful content in the 'why ably' section


Ably uses [consistent hashing](/docs/platform/architecture/platform-scalability) to evenly distribute the management of chat rooms across instances, enabling the number of rooms to grow without limit and without causing load spikes. Whether you're managing 100 support conversations or 100,000 simultaneous tickets, the architecture remains the same.

Ably routinely handles 600 billion messages every month globally, across 2 billion devices. Your support chat benefits from this same infrastructure, ensuring that peak support hours or viral incidents don't overwhelm your system.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These stats are repeated from the final paragraph in the previous section.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

merged paragraphs


Components handle message display with history loading, editing and deletion, reactions, typing indicators, and presence. [Providers](/docs/chat/react-ui-kit/providers) manage themes, avatars, and chat settings. See the [getting started guide](/docs/chat/getting-started/react-ui-kit) for setup details.

## Assigning tickets to agents
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These details are more important than the chat feature above IMO.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The guide flow is (top-level sections):

  • customer-facing widget, includes how a ticket is created and the chat features,
  • ticket allocation,
  • agent dashboard.

Do you think it should be different?


### Shared inbox queue

If you don't assign tickets to agents on the server, you can use a shared inbox channel, for example `support:inbox`. This Pub/Sub channel is subscribed to by all agents. When a new ticket is created, publish it to this channel:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need some pros/cons or when you'd use one approach over the other.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not quite sure what to add in a pros/cons list for those, as this choice is about how their system works, not how they use Ably.

I think it really depends on the application and how people want it to work. The two suggestions here differ technically but they are just two ways to handle agent-ticket allocation - to show we support both use cases.


Instead of using a channel per agent, use a channel per team or department, for example `support:sales` or `support:engineering`. Follow the same pattern as the server-side ticket assignment to decide which channel to use for each ticket, then apply the shared inbox queue pattern for tickets that reach a team or department.

## Agent dashboard <a id="agent-dashboard"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a H2 for 'architecture' further up, but then we're opening this section talking about architecture. Should we have architectural decisions together?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't talk about architecture much? It uses the word but says little else than just setting the context.


Each attachment maintains a subscription with new messages, typing indicators, and presence updates. Keeping attachments focused reduces client-side memory, network traffic, and cost. Attach to rooms when agents start working on the relevant ticket and detach when the ticket is resolved, paused, or reassigned.

### Agent presence and availability <a id="agent-presence"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agent presence was covered in the previous section, so we're repeating slightly different info here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I should make it clearer it's two presence sets I'm discussing.

  1. presence for a ticket (users see agent, agent sees user)
  2. presence for colleagues - agent sees other agents online (like a mini-slack in the agent dashboard)


**Room-level presence** shows the customer that their agent is present. When an agent opens a ticket room, they enter presence with their role and name, providing reassurance that help has arrived. Agents can also see if customers are still active.

### Push notifications for agents <a id="push-notifications"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Web push I assume?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing says agents can't have apps on a tablet, phone, or native apps on laptops. But probably web push, yes.

@vladvelici vladvelici force-pushed the support-dashboard-chat branch from 4f3e02d to ab1e56d Compare December 30, 2025 22:14
@vladvelici vladvelici requested a review from m-hulbert December 30, 2025 22:17
@vladvelici
Copy link
Contributor Author

I've address all comments that I could, left questions for some. Did a few cycles of AI reviews as well so moved some sections around.

@m-hulbert When re-reviewing, would you please be able to go through the old comments and mark as resolved those that you think are now ok?

@vladvelici vladvelici marked this pull request as ready for review December 30, 2025 22:17
@vladvelici vladvelici force-pushed the support-dashboard-chat branch from ab1e56d to 2785b71 Compare December 30, 2025 22:46
@vladvelici vladvelici force-pushed the support-dashboard-chat branch from 2785b71 to 2db1b92 Compare December 30, 2025 23:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants