Adds USPs to chat docs

src/components/Layout/mdx/Admonition.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from '@ably/ui/core/utils/cn';
 import Aside from '../../blocks/dividers/Aside';
 
-const LEGACY_ADMONITION_TYPES = ['new', 'updated', 'experimental', 'public-preview'];
+const LEGACY_ADMONITION_TYPES = ['new', 'updated', 'experimental', 'see-evidence'];
 
 type AdmonitionVariant = 'neutral' | 'note' | 'further-reading' | 'important' | 'warning';
 
@@ -52,7 +52,7 @@ const Admonition: React.FC<AdmonitionProps> = ({ 'data-type': dataType = 'note',
     return <Aside attribs={{ 'data-type': dataType }}>{children}</Aside>;
   }
 
-  const { borderColor, backgroundColor, title } = admonitionConfig[dataType];
+  const { borderColor, backgroundColor, title } = admonitionConfig[dataType] || admonitionConfig.note;
 
   return (
     <aside

src/components/blocks/dividers/Aside.tsx

@@ -1,4 +1,5 @@
 import Icon from '@ably/ui/core/Icon';
+import * as styles from './dividers.module.css';
 import {
   inlineGridParagraph,
   inlineContentContainer,
@@ -44,6 +45,14 @@ const Aside = ({ children, attribs }: AsideProps) => {
             <span className="ui-text-p2 font-bold text-neutral-1300 mb-12">Further Reading</span>
           </strong>
         </>
+      ) : attribs && attribs[`data-type`] === `see-evidence` ? (
+        <>
+          <span className={`${leftSideElement} ${styles['see-evidence-element']}`}>&nbsp;</span>
+          <strong className={tipTitleElement}>
+            <span className="mr-3 text-3xl">🔎</span>
+            <span className="ui-text-p2 font-bold text-neutral-1300 mb-12">See evidence</span>
+          </strong>
+        </>
       ) : attribs && isVersioningInfo ? (
         <>
           <span

src/components/blocks/dividers/dividers.module.css

@@ -21,6 +21,9 @@ span.left-side-element {
 .further-reading-element {
   background-color: #08fe13;
 }
+.see-evidence-element {
+  background-color: #14b8a6;
+}
 
 strong.tip-title-element {
   margin-left: var(--spacing-16);

src/pages/docs/chat/connect.mdx

@@ -20,6 +20,10 @@ A connection can have any of the following statuses:
 | closed | The connection has been explicitly closed by the client. In the closed state, no reconnection attempts are made automatically. No connection state is preserved by the service or the library. |
 | failed | This status is entered if the SDK encounters a failure condition that it cannot recover from. This may be a fatal connection error received from the Ably service, such as an attempt to connect with an incorrect API key, or some local terminal error, such as that the token in use has expired and the SDK does not have any way to renew it. |
 
+<Aside data-type='see-evidence'>
+Ably's SDKs automatically resolve edge network failures within 30 seconds, keeping your users connected even during infrastructure issues. [See evidence here 🕵️](/docs/platform/architecture/edge-network)
+</Aside>
+
 <If lang="javascript,swift,kotlin,jetpack">
 Use the <If lang="javascript">[`status`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-js.Connection.html#status)</If><If lang="swift">[`status`](https://sdk.ably.com/builds/ably/ably-chat-swift/main/AblyChat/documentation/ablychat/connectionstatus)</If><If lang="kotlin,jetpack">[`status`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/dokka/chat/com.ably.chat/-connection/status.html)</If> property to check which status a connection is currently in:
 </If>

src/pages/docs/chat/integrations.mdx

@@ -36,6 +36,7 @@ Be aware that message actions are numeric values over the realtime channels, Pub
 
 If possible, use an Ably Pub/Sub SDK with `fromEncoded()` or `fromEncodedArray()` to decode the message. This will ensure that the message is decoded correctly and all the fields are present, as well as convert things like numerical action values to their string representations. Details on how to do this are available in the [platform integrations documentation](/docs/platform/integrations/webhooks). Then you can apply the mapping from the table above to get a Chat message form the Pub/Sub message.
 
+
 ### Is this message new, updated, or deleted?
 
 To determine if a message is new, updated, or deleted, you can use the `action` field.

src/pages/docs/chat/react-ui-kit/index.mdx

@@ -16,7 +16,6 @@ Some of the benefits include:
 * **Tried and tested** – rely on components that are already fully covered by a suite of tests.
 * **Chat-centric design** – layouts, interactions, and accessibility are built with chat workflows in mind.
 
-
 ![Ably Chat React App](../../../../images/examples/chat-ui-app.png)
 
 ## Components and Providers

src/pages/docs/chat/rooms/message-reactions.mdx

@@ -361,6 +361,10 @@ fun RemoveMessageReactionComponent(room: Room, message: Message) {
 ```
 </Code>
 
+<Aside data-type='see-evidence'>
+Applications maintain their state during disruptions. All messages are received in correct order with no message loss. [See evidence here 🕵️](/docs/platform/architecture/connection-recovery#message-identification-with-timeserial)
+</Aside>
+
 ## Messages and reactions <a id="messages-and-reactions"/>
 
 The `Message` object contains a `reactions` property which is an object that looks like this:

src/pages/docs/chat/rooms/messages.mdx

@@ -120,6 +120,12 @@ The following are the properties of a message:
 
 See [below](#global-ordering) for more information on how to apply deterministic global ordering to the chat messages in your application.
 
+<Aside data-type='see-evidence'>
+Messages are delivered to all subscribers in the same order, with each message assigned a unique serial number that enables consistent ordering. [See evidence here 🕵️](/docs/platform/architecture/message-ordering#message-ordering-guarantees).
+</Aside>
+
+
+
 ### Unsubscribe from messages <a id="unsubscribe"/>
 
 <If lang="javascript,kotlin">

src/pages/docs/chat/rooms/presence.mdx

@@ -529,6 +529,10 @@ val isPresent = room.presence.isUserPresent("client-id")
 Use the [`presenceData`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-react.UsePresenceListener.html#presenceData) property available from the response of the `usePresence` hook to view a list of all member's presence status in the room.
 </If>
 
+<Aside data-type='see-evidence'>
+Ably automatically recovers connections and prevents message loss or duplication when clients reconnect within two minutes. [See evidence here 🕵️](/docs/platform/architecture/idempotency#connection-recovery-and-exactly-once-delivery)
+</Aside>
+
 ### Presence member structure <a id="member-structure"/>
 
 The following are the properties of an individual presence member:

src/pages/docs/chat/rooms/reactions.mdx

@@ -212,3 +212,7 @@ fun SendReactionComponent(room: Room) {
 }
 ```
 </Code>
+
+<Aside data-type='see-evidence'>
+Ably achieves a global median message delivery latency of 37ms, continuously monitored through over 6 million measurements daily across all regions. [See evidence here 🕵️](/docs/platform/architecture/latency#how-latency-is-measured)
+</Aside>

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

@@ -64,6 +64,10 @@ const ReplyComponent = ({ messageToReplyTo }) => {
 ```
 </Code>
 
+<Aside data-type='see-evidence'>
+Applications maintain their state during disruptions. All messages are received in correct order with no message loss. [See evidence here 🕵️](/docs/platform/architecture/connection-recovery#message-identification-with-timeserial)
+</Aside>
+
 ## Subscribe to message replies <a id="subscribe"/>
 
 Message replies will be received as normal messages in the room using the [`subscribe()`](/docs/chat/rooms/messages#subscribe) method.

src/pages/docs/chat/rooms/typing.mdx

@@ -107,6 +107,10 @@ The following are the properties of a typing event:
 
 You can use the size of the `currentlyTyping` set to decide whether to display individual user names, or that multiple people are typing in your user interface.
 
+<Aside data-type='see-evidence'>
+Ably achieves a global median message delivery latency of 37ms, continuously monitored through over 6 million measurements daily across all regions. [See evidence here 🕵️](/docs/platform/architecture/latency#how-latency-is-measured)
+</Aside>
+
 ### Unsubscribe from typing events <a id="unsubscribe"/>
 
 <If lang="javascript,kotlin">

src/pages/docs/chat/setup.mdx

@@ -329,3 +329,4 @@ The `logLevel` sets the verbosity of logs that will be output by the SDK. The fo
 | warn | Anything that is not immediately an error, but could cause unexpected behavior in the future. For example, passing an invalid value to an option. Indicates that some action should be taken to prevent future errors. |
 | error | A given operation has failed and cannot be automatically recovered. The error may threaten the continuity of operation. |
 | silent | No logging will be performed. |
+

src/pages/docs/guides/chat/build-livestream.mdx

@@ -25,6 +25,8 @@ Delivering chat messages in realtime is key to an engaging experience. Ably's [s
 
 Despite the challenges of delivering these guarantees, Ably is designed to keep costs predictable. Using features such as server-side batching and efficient connection management, along with Ably's consumption-based pricing model ensures costs are kept as low as possible, no matter the scale.
 
+<Aside data-type='see-evidence'>Ably delivers over 500 billion messages monthly, demonstrating massive throughput capability. [See evidence here 🕵️](/docs/platform/architecture/scalability)</Aside>
+
 ## Architecting your chat rooms: UX first, scale always
 
 The most important decision you can make when developing a livestream chat application is the experience you want users to have. This will determine the look and feel of the livestream and ultimately the impression your users leave with.
@@ -69,6 +71,8 @@ Decisions that you need to make around throughput and rates:
   * For a large room chat scenario, we recommend a batching interval of **no more than 1 second**, which keeps the chat responsive but can still [significantly reduce costs](#server-side-batching).
   * For smaller groups and 1:1 chats, you may find that batching does not make a material difference to costs, but does affect the latency of the chat. In the rooms handling those chats, you may choose to not use batching.
 
+<Aside data-type='see-evidence'>With 50% capacity headroom built in, Ably instantly absorbs traffic spikes without degradation or pre-provisioning. [See evidence here 🕵️](/docs/platform/architecture/infrastructure-operations#resource-implications)</Aside>
+
 ## Authentication
 
 Authentication in livestream chat is a design decision. In some cases, you'll want to tie participants to their identity in your application. In others, anyone can join and participate. Ably Chat supports both of these scenarios - you don't need to go through the hassle of setting up users in Ably and trying to keep them in sync with your application. Every client has a `clientId`. If you want to allow random users, just use a random string. If you want to tie it to your application, then use the UUID of the user or some other well-known identifier.