Chat: A how to guide for replies #2712

splindsay-92 · 2025-07-11T10:50:37Z

Context

Chat currently doesn't have native support for things like replies and quotes, so we need a short guide to give users an idea as to how they might implement a solution with the Chat SDK in the mean time.

As a temporary fix, I've added typescript to the langs list, I've had to override the langs for the replies page in the nav bar though, so it displays nothing. This is because the selection bar doesn't seem to support typescript yet - thats fine for my doc as there is only one language for the whole doc. Also, nowhere else uses typescript tag, so it shouldn't break other docs.

CHA-1016

Description

This PR adds a guide that covers a basic replies setup, using the Chat SDK, and sending message reply metadata in the metadata field of a chat message.

Commits have been rebased.
Linting has been run against the changed file(s).
The PR adheres to the writing style guide and contribution guide.

coderabbitai · 2025-07-11T10:50:43Z

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.

✨ Finishing Touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch chat/how-to-replies

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

splindsay-92 · 2025-07-11T17:09:32Z

@jamiehenson tagged you in relation to my temporary fix to add typescript support to the docs.

jamiehenson · 2025-07-15T10:36:52Z

src/data/nav/chat.ts

+        {
+          name: 'Replies',
+          link: '/docs/guides/chat/replies',
+          languages: [],


An unintended use for this, but this'll do the job for suppressing the language selector. Two thoughts from here:

(more for @m-hulbert) we already have a condition where if there is no language content detected on the page (i.e. here), then it won't show the language selector. Is there something in changing that so we only show it if there are two or more languages? Even with one language, there's nothing to switch. It would mean we hide it on this new page as normal without an override as it only has TS.

either way, if we would like to support TS as a language, then we need to add it with a version number to the language version data and language info (for the label), guessing it would be the same version as the JS lib but not for me to say.

TLDR, this override works but a better path forward would be to either not show the language selector for single language pages, or add TS to the language data so we get the selector working with TS

I'm not sure about removing it if there's only 1 language. I think we should remove the ability to click the dropdown, but I personally think it makes sense to keep it for consistency (though I'll check to get a UX perspective).

vladvelici

Reads well. Left a few comments.

src/pages/docs/guides/chat/replies.mdx

m-hulbert

I've just dropped some high-level comments for now on how I think we should position these types of features.

src/data/nav/chat.ts

m-hulbert · 2025-07-18T09:06:12Z

src/data/nav/chat.ts

@@ -129,6 +129,11 @@ export default {
          name: 'Livestream chat',
          link: '/docs/guides/chat/build-livestream',
        },
+        {
+          name: 'Replies',


I'd suggest referencing quotes here as well for completeness and scanning purposes.

m-hulbert · 2025-07-18T09:07:45Z

src/pages/docs/guides/chat/replies.mdx

+meta_keywords: "ably chat, message replies, message quotes, chat replies, chat quotes, javascript chat replies, typescript chat replies, chat metadata, ably chat metadata, realtime chat replies"
+---
+
+This guide will show you how you could implement a simple solution for things like replies and quotes in your Ably Chat application.


I'm going to make the same comment as I did for file uploads in that I think it's immaterial to an end-user that there isn't a dedicated API for handling this. I think this should just sit in the existing 'feature' docs and it isn't necessary to call it out as a guide.

Moved to rooms and no longer call out here that it's a guide.

m-hulbert · 2025-07-18T09:08:20Z

src/pages/docs/guides/chat/replies.mdx

+
+This guide will show you how you could implement a simple solution for things like replies and quotes in your Ably Chat application.
+While the two features have different applications, they share the same fundamental principle of referencing other messages in the chat.
+As such, we will cover only replies in this guide, but the same principles can be applied to quotes.


Avoid first person "we" please 🙂

m-hulbert · 2025-07-18T09:09:35Z

src/pages/docs/guides/chat/replies.mdx

+
+While cross-room replies are possible, this guide will focus on providing replies within the same room for simplicity.
+
+## Understanding the current limitations <a id="limitations"/>


This is starting out on a negative upfront. I don't think we need to be apologetic or mention there isn't a dedicated API. It's possible to do them and people just want to get to the how.

I've reworded things a bit now as you recommended :)

m-hulbert · 2025-07-18T09:12:28Z

src/pages/docs/guides/chat/replies.mdx

+
+By storing the serial and creation time of a message you want to quote in the metadata of a new message, you can create a reference between messages that your application can interpret and display accordingly.
+
+## Implementing replies using message metadata <a id="implementing-replies"/>


I'd keep this active voice, so 'Implement replies using message metadata'.

m-hulbert · 2025-07-18T09:13:54Z

src/pages/docs/guides/chat/replies.mdx

+
+When displaying a reply message, you might want to show a preview of the original message, the name of the original sender, or a visual indication that it's a reply.
+
+## Finding quoted messages that aren't in local state <a id="finding-quoted-messages"/>


We state at the top that we're only covering replies, but then we start referencing quotes here.

I could change this to Finding parent messages that have been replied to...?

m-hulbert · 2025-07-18T09:14:56Z

src/pages/docs/guides/chat/replies.mdx

+2. Include that information in the metadata when sending the reply.
+3. Process incoming messages to check for reply metadata.
+
+### Step 1: Store information about the message being replied to <a id="store-information"/>


I think we should move away from making this step-based and just discuss the process as we normally would for another feature.

I've reworked the headings and wordings a but, but are you suggesting it needs a wider refactor for the overall flow too?

m-hulbert · 2025-07-18T09:15:57Z

src/pages/docs/guides/chat/replies.mdx

+
+Ably Chat doesn't provide built-in UI components or reply functionality **yet**, so you'll need to implement these aspects yourself using the metadata approach described in this guide. The steps outlined in the previous sections provide the foundation for building a complete reply system in your application.
+
+## Limitations and considerations <a id="limitations-and-considerations"/>


This is the second section covering limitations 🙂

Corrected that, thanks! :D

- Seems you cannot display react and javascript at the same time, so I've had to wrap the react code in a javascript tag.

… on the replies.mdx doc.

splindsay-92 requested review from vladvelici and jamiehenson July 11, 2025 17:06

splindsay-92 force-pushed the chat/how-to-replies branch from 11415a5 to fb3b799 Compare July 11, 2025 17:11

jamiehenson reviewed Jul 15, 2025

View reviewed changes

vladvelici reviewed Jul 16, 2025

View reviewed changes

splindsay-92 requested a review from vladvelici July 17, 2025 16:40

splindsay-92 added the review-app Create a Heroku review app label Jul 18, 2025

ably-ci temporarily deployed to ably-docs-chat-how-to-r-wfmhik July 18, 2025 08:31 Inactive

m-hulbert reviewed Jul 18, 2025

View reviewed changes

ably-ci temporarily deployed to ably-docs-chat-how-to-r-wfmhik July 18, 2025 12:35 Inactive

splindsay-92 requested a review from m-hulbert July 18, 2025 12:41

splindsay-92 force-pushed the chat/how-to-replies branch from f7110e3 to 0570485 Compare July 22, 2025 11:49

ably-ci temporarily deployed to ably-docs-chat-how-to-r-wfmhik July 22, 2025 11:49 Inactive

splindsay-92 force-pushed the chat/how-to-replies branch from 0570485 to a6161fe Compare August 1, 2025 14:47

splindsay-92 added 7 commits August 8, 2025 14:26

Chat: Add guide for implementing replies and quotes in TypeScript

8069ea9

Chat: Add anchor links for sections and code tags

371ed70

Chat: wrap react code examples in javascript tag so they display.

91ddf91

- Seems you cannot display react and javascript at the same time, so I've had to wrap the react code in a javascript tag.

Add typescript lang support and hide the react tag and languages list…

22f1a82

… on the replies.mdx doc.

Refactor based on PR comments

9bd4e0d

Moved replies to chat rooms section.

e4af017

Refactor replies documentation based on comments

81a41c3

splindsay-92 force-pushed the chat/how-to-replies branch from a6161fe to 81a41c3 Compare August 8, 2025 13:26


		While cross-room replies are possible, this guide will focus on providing replies within the same room for simplicity.

		## Understanding the current limitations <a id="limitations"/>


		By storing the serial and creation time of a message you want to quote in the metadata of a new message, you can create a reference between messages that your application can interpret and display accordingly.

		## Implementing replies using message metadata <a id="implementing-replies"/>


		When displaying a reply message, you might want to show a preview of the original message, the name of the original sender, or a visual indication that it's a reply.

		## Finding quoted messages that aren't in local state <a id="finding-quoted-messages"/>


		Ably Chat doesn't provide built-in UI components or reply functionality yet, so you'll need to implement these aspects yourself using the metadata approach described in this guide. The steps outlined in the previous sections provide the foundation for building a complete reply system in your application.

		## Limitations and considerations <a id="limitations-and-considerations"/>

Chat: A how to guide for replies #2712

Are you sure you want to change the base?

Chat: A how to guide for replies #2712

Uh oh!

Conversation

splindsay-92 commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Context

Description

Uh oh!

coderabbitai bot commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

splindsay-92 commented Jul 11, 2025

Uh oh!

jamiehenson Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vladvelici left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

m-hulbert left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

splindsay-92 commented Jul 11, 2025 •

edited

Loading

coderabbitai bot commented Jul 11, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

jamiehenson Jul 15, 2025 •

edited

Loading