Feature/pub 1765 annotations examples #2636

mschristensen · 2025-05-28T16:57:23Z

Description

Adds an example app for the new message annotations feature. Showcases:

Publishing annotations to a message for each of the different annotation types
Subscribing to annotation summaries for each message
Subscribing to raw message annotations
Deleting message annotations

I recorded a quick Loom to walk through this example: https://www.loom.com/share/e8e37e37d7c04999b82493142b445336?sid=25392ef5-5d8e-4225-8bea-1e2f08fb31f4

I intend to update the docs before landing this PR, but opening now for draft review.

This examples requires us to configure a namespace (channel rule) with the mutableMessages flag enabled. We need to identify how we can do this when used from the examples.

This also needs an image to include on the examples index.

Checklist

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-05-28T16:57:29Z

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 (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feature/PUB-1765-annotations-examples

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.}

examples/pub-sub-message-annotations/javascript/README.md

SimonWoolf · 2025-10-07T15:29:40Z

examples/pub-sub-message-annotations/javascript/src/config.ts

-export const channelName = urlParams.get('name') || 'mutable:pub-sub-message-annotations';
-export const annotationNamespace = 'my-annotations';
+export const annotationNamespace = 'annotation';
+export const channelName = urlParams.get('name') || `${annotationNamespace}:pub-sub-message-annotations`;


@GregHolmes your commit message doesn't explain why you made this change, but I strongly disagree with it: I think using the same "annotationNamespace" config variable for two unrelated purposes (the first part of the channel name, and the user-settable part of the annotation type) is very confusing for the user, who might be misled into thinking those have to match.

SimonWoolf · 2025-10-07T15:50:51Z

Added two commits:

cb7e97e -- stop using type assertions for custom MessageSummary and CreateMessage types, and switch to more natural way of verifying that there's a serial
d81077d -- stop using annotationNamespace to control both the channel namespace and the user-settable part of the annotation type, add a section to the readme about setting up a channel rule, and refactor to make the annotation namespace not an app-wide config var, which I think will help avoid confusion between the two

examples/pub-sub-message-annotations/javascript/README.md

m-hulbert

Made some minor fixes to the copy and list numbering.

Tested and all LGTM.

Uses a double-pane view to show the example side by side for two different clients.

Shown in an expandable pane when the message is clicked.

Publish an annotation, specifying the annotation type. Summaries are received as a message in the subscribe listener.

Listens for annotation summaries received in realtime and renders their information for each summary type in a set of expandable summary components in the message details.

Separates the annotations summary from the raw annotations messages displayed in separate tabs.

Adds a delete button to raw annotations to publish a delete annotation which removes the annotation from the summary. Refactors the raw annotation view to display in a more compact format.

Various improvements to the components and styling to create a more compact visual style.

Adds the franken-ui dependency to the examples renderer. Updates the set of visible files configured for sandpack.

- stop using type assertions for custom MessageSummary and CreateMessage types - switch to more natural way of checking that there's a serial

Add a section to the readme about setting up a channel rule Refactor to make the annotation namespace not an app-wide config var (which is somewhat misleading -- there's no reason it should be the same throughout an app, and indeed making it so defeats the point of having it)

SimonWoolf self-requested a review July 1, 2025 13:33

GregHolmes force-pushed the feature/PUB-1765-annotations-examples branch 2 times, most recently from 7f3370d to f7a321a Compare October 1, 2025 16:56

rainbowFi reviewed Oct 2, 2025

View reviewed changes