Chat v1 api review (JS) (#2626)

* chat: remove unsubscribeAll methods

Removes the `unsubscribeAll` methods from the Chat SDK documentation, as they're being removed.

Also fixes an "aside" block that is mistakenly being conditioned to only JS.

* chat: remove roomId from message type

* chat: event formats

* chat: update events enum names

* chat: rename getPreviousMessages and messages.get

* chat: renaming typing.get to typing.current

* chat: add occupancy.current docs

* chat: rename roomId to name

* chat: rename MessageEvent to ChatMessageEvent

* chat: revert mobile changes

* chat: remove presence action from member

* fixup/chat: fix markdown errors

* chat: fix missing roomID change

* chat: rename MessageEvents to ChatMessageEventType

* chat: update JS edit/delete serials

* chat: update message.reactions.add() to send()

* chat: update REST docs

* chat: update rest spec with room name

* chat: bump JS/React to 0.8.0

* chat: typographical updates

Author: AndyTWF

examples/chat-presence/javascript/src/script.ts

@@ -1,5 +1,5 @@
 import * as Ably from 'ably';
-import { ChatClient, PresenceEvent, PresenceMember } from '@ably/chat';
+import { ChatClient, PresenceEvent, PresenceEventType, PresenceMember } from '@ably/chat';
 import minifaker from 'minifaker';
 import 'minifaker/locales/en';
 
@@ -15,73 +15,77 @@ async function initializeChat() {
 
   // Get ROOM with typing capabilities
   const room = await chatClient.rooms.get(channelName);
-  const onlineStatuses = await room.presence.get();
-
-  for (const onlineStatus of onlineStatuses) {
-    await addCard(onlineStatus);
-  }
 
   /** 💡 Subscribe to the presence set of the room to see online statuses 💡 */
   room.presence.subscribe(async (event: PresenceEvent) => {
-    if (event.action === 'enter') {
-      await addCard(event);
+    const presenceMember = event.member;
+    if (event.type === PresenceEventType.Enter) {
+      await addCard(presenceMember);
 
-      if (event.clientId === realtimeClient.auth.clientId) {
+      if (presenceMember.clientId === realtimeClient.auth.clientId) {
         const button = document.createElement('button');
-        button.className = 'uk-btn uk-btn-md uk-btn-primary mb-4 rounded-[1998px] w-full min-w-[120px] border uk-border-primary';
+        button.className =
+          'uk-btn uk-btn-md uk-btn-primary mb-4 rounded-[1998px] w-full min-w-[120px] border uk-border-primary';
         button.id = 'status-button';
         button.onclick = async () => {
           await room.presence.update({
-            status: (event.data as { status?: string })?.status === 'Away' ? 'Online' : 'Away',
+            status: (presenceMember.data as { status?: string })?.status === 'Away' ? 'Online' : 'Away',
           });
         };
-        button.textContent = (event.data as { status?: string })?.status === 'Away' ? 'Show online' : 'Set away';
+        button.textContent =
+          (presenceMember.data as { status?: string })?.status === 'Away' ? 'Show online' : 'Set away';
 
         const parentDiv = document.getElementById('cards');
         if (parentDiv) {
           parentDiv.appendChild(button);
         }
       }
-    } else if (event.action === 'leave') {
-      const card = document.getElementById(event.clientId);
+    } else if (event.type === PresenceEventType.Leave) {
+      const card = document.getElementById(presenceMember.clientId);
       card?.remove();
-    } else if (event.action === 'update') {
-      if (event.clientId === realtimeClient.auth.clientId) {
+    } else if (event.type === PresenceEventType.Update) {
+      if (presenceMember.clientId === realtimeClient.auth.clientId) {
         const button = document.getElementById('status-button');
         if (button) {
-          button.textContent = (event.data as { status?: string })?.status === 'Away' ? 'Show online' : 'Set away';
+          button.textContent =
+            (presenceMember.data as { status?: string })?.status === 'Away' ? 'Show online' : 'Set away';
           button.onclick = async () => {
             await room.presence.update({
-              status: (event.data as { status?: string })?.status === 'Away' ? 'Online' : 'Away',
+              status: (presenceMember.data as { status?: string })?.status === 'Away' ? 'Online' : 'Away',
             });
           };
         }
       }
-      const card = document.getElementById(event.clientId);
+      const card = document.getElementById(presenceMember.clientId);
       const statusDiv = card?.querySelector('.text-sm');
       if (statusDiv) {
-        statusDiv.textContent = (event.data as { status?: string })?.status ?? 'Online';
+        statusDiv.textContent = (presenceMember.data as { status?: string })?.status ?? 'Online';
       }
 
-      const parentDiv = document.getElementById(event.clientId);
+      const parentDiv = document.getElementById(presenceMember.clientId);
       const onlineStatusDiv = parentDiv?.querySelector('#online-status');
       onlineStatusDiv.classList.add(
-        (event.data as { status?: string })?.status === 'Away' ? 'bg-amber-500' : 'bg-green-500',
+        (presenceMember.data as { status?: string })?.status === 'Away' ? 'bg-amber-500' : 'bg-green-500',
       );
       onlineStatusDiv.classList.remove(
-        (event.data as { status?: string })?.status === 'Away' ? 'bg-green-500' : 'bg-amber-500',
+        (presenceMember.data as { status?: string })?.status === 'Away' ? 'bg-green-500' : 'bg-amber-500',
       );
     }
   });
 
   /** 💡 Attach the client to a room to begin streaming messages and events to the client.💡 */
   await room.attach();
+  const onlineStatuses = await room.presence.get();
+
+  for (const onlineStatus of onlineStatuses) {
+    await addCard(onlineStatus);
+  }
 
   /** 💡 Enter presence to appear online 💡 */
   await room.presence.enter({ status: 'Online' });
 }
 
-async function addCard(onlineStatus: PresenceMember | PresenceEvent) {
+async function addCard(onlineStatus: PresenceMember) {
   // Create an element to store status items
   const card = document.createElement('div');
   card.className =

examples/chat-presence/react/src/App.tsx

@@ -98,7 +98,7 @@ export default function App() {
   return (
     <div className="min-h-screen">
       <ChatClientProvider client={chatClient}>
-        <ChatRoomProvider id={roomName}>
+        <ChatRoomProvider name={roomName}>
           <Home />
         </ChatRoomProvider>
       </ChatClientProvider>

examples/chat-room-history/javascript/src/script.ts

@@ -81,7 +81,7 @@ document.getElementById('enter-chat').addEventListener('click', async () => {
 
 const getPastMessages = async () => {
   /** 💡 Add past 10 messages published to the room 💡 */
-  const pastMessages = await room.messages.get({ limit: 10 });
+  const pastMessages = await room.messages.history({ limit: 10 });
 
   pastMessages.items.forEach((message) => {
     const messageExists = document.getElementById(message.serial);

examples/chat-room-history/react/src/Chat.tsx

@@ -7,14 +7,14 @@ export default function Chat() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [message, setMessage] = useState('');
   const { clientId } = useChatClient();
-  const { get, send } = useMessages({
+  const { history, send } = useMessages({
     listener: (event) => {
       setMessages((prevMessages: Message[]) => [...prevMessages, event.message]);
     },
   });
 
   const getPastMessages = () => {
-    get({ limit: 10 }).then((result) => {
+    history({ limit: 10 }).then((result) => {
       result.items.forEach((message) => {
         const messageExists = messages.some((prevMessage) => prevMessage.serial === message.serial);
 

examples/chat-room-messages/react/src/App.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import {
   Message,
   ChatClient,
+  ChatMessageEvent,
 } from '@ably/chat';
 import {
   useRoom,
@@ -24,8 +25,8 @@ const Chat = () => {
   const [message, setMessage] = useState('');
   const { clientId } = useChatClient();
   const { send } = useMessages({
-    listener: (message: Message) => {
-      setMessages((prevMessages: Message[]) => [...prevMessages, message.message]);
+    listener: (event: ChatMessageEvent) => {
+      setMessages((prevMessages: Message[]) => [...prevMessages, event.message]);
     },
   });
 
@@ -110,7 +111,7 @@ export default function App() {
   return (
     <div className="min-h-screen">
       <ChatClientProvider client={chatClient}>
-        <ChatRoomProvider id={roomName}>
+        <ChatRoomProvider name={roomName}>
           <ChatRoomMessagesDemo />
         </ChatRoomProvider>
       </ChatClientProvider>

examples/chat-room-reactions/javascript/src/script.ts

@@ -1,5 +1,5 @@
 import * as Ably from 'ably';
-import { ChatClient, Room } from '@ably/chat';
+import { ChatClient, Room, RoomReactionEvent } from '@ably/chat';
 import { nanoid } from 'nanoid';
 import './styles.css';
 
@@ -17,7 +17,8 @@ async function initializeChat() {
   room = await chatClient.rooms.get(roomName);
 
   /** 💡 Add every room reaction published to the room 💡 */
-  room.reactions.subscribe((reaction) => {
+  room.reactions.subscribe((reactionEvent: RoomReactionEvent) => {
+    const reaction = reactionEvent.reaction;
     const reactionsContainer = document.getElementById('reaction-area');
 
     const reactionElement = document.createElement('span');

examples/chat-room-reactions/react/src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ChatClient, Reaction as ReactionInterface } from '@ably/chat';
+import { ChatClient, Reaction as ReactionInterface, RoomReactionEvent } from '@ably/chat';
 import { ChatClientProvider, ChatRoomProvider, useRoom, useRoomReactions } from '@ably/chat/react';
 import { Realtime } from 'ably';
 import './styles/styles.css';
@@ -15,7 +15,8 @@ function Chat() {
   const emojis = ['❤️', '😲', '👍', '😊'];
 
   const { send } = useRoomReactions({
-    listener: (reaction) => {
+    listener: (reactionEvent: RoomReactionEvent) => {
+      const reaction = reactionEvent.reaction;
       setReactions((prevReactions: ReactionInterface[]) => [...prevReactions, { ...reaction }]);
 
       setTimeout(() => {
@@ -106,7 +107,7 @@ export default function App() {
 
   return (
     <ChatClientProvider client={chatClient}>
-      <ChatRoomProvider id={roomName}>
+      <ChatRoomProvider name={roomName}>
         <ChatRoomReactionsDemo />
       </ChatRoomProvider>
     </ChatClientProvider>

examples/chat-typing-indicator/javascript/README.md

@@ -14,7 +14,7 @@ Use the following methods to add typing indicators into a chat application:
 
 - [`rooms.get()`](/docs/chat/rooms?lang=javascript#create): creates a new or retrieves an existing `room`.
 - [`rooms.typing.subscribe()`](/docs/chat/rooms/typing#subscribe): subscribes to typing events by registering a listener. Typing events are emitted when a user starts typing, or when they stop typing.
-- [`room.typing.get()`](/docs/chat/rooms/typing?lang=javascript#get): retrieves the list of users currently typing by their clientId.
+- [`room.typing.current()`](/docs/chat/rooms/typing?lang=javascript#get): retrieves the list of users currently typing by their clientId.
 - [`room.typing.keystroke()`](/docs/chat/rooms/typing?lang=javascript#keystroke): emits a typing event that the user is currently typing, initialising the timeout which will call `room.typing.stop()` if no further events are emitted by the user.
 
 Find out more about [typing indicators](/docs/chat/rooms/typing).

examples/chat-typing-indicator/react/src/App.tsx

@@ -88,7 +88,7 @@ export default function App() {
     <div className="min-h-screen">
       <ChatClientProvider client={chatClient}>
         <ChatRoomProvider
-          id={roomName}
+          name={roomName}
           options={{
             typing: typingOptions,
           }}

examples/package.json

@@ -94,7 +94,7 @@
     "spaces-member-location-react": "yarn workspace spaces-member-location-react dev"
   },
   "dependencies": {
-    "@ably/chat": "^0.7.0",
+    "@ably/chat": "^0.8.0",
     "@ably/spaces": "^0.4.0",
     "ably": "^2.9.0",
     "cors": "^2.8.5",

examples/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/chat@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.7.0.tgz#4e597a50c92ba14c2f79162e745ee224e0fb5ae0"
-  integrity sha512-m7gChuLoXcB2KWDAwyLBfh+V5YJf3v5aweml+zdIwt5/JNztChmolN4pqJhEv0B5dT21tQU/fWkFtcyXBFJOvQ==
+"@ably/chat@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.8.0.tgz#3a14729a537978014466810c00500cbac7e2206a"
+  integrity sha512-t85MfK+WepO3282QxolZ/BCwmO3QtIoOjOgmEYyDhUvW/SdexQsj//ZSWDrP0ZXsELV2q5fm14FO5cATwHd35Q==
   dependencies:
     async-mutex "^0.5.0"
     dequal "^2.0.3"

src/components/Examples/ExamplesRenderer.tsx

@@ -41,7 +41,7 @@ const getDependencies = (id: string, products: string[], activeLanguage: Languag
     nanoid: '^5.0.7',
     minifaker: '1.34.1',
     ...(products.includes('auth') ? { cors: '^2.8.5' } : {}),
-    ...(products.includes('chat') ? { '@ably/chat': '^0.7.0' } : {}),
+    ...(products.includes('chat') ? { '@ably/chat': '^0.8.0' } : {}),
     ...(products.includes('spaces') ? { '@ably/spaces': '^0.4.0' } : {}),
     ...(id === 'spaces-component-locking' ? { 'usehooks-ts': '^3.1.0' } : {}),
     ...(activeLanguage === 'react' || products.includes('chat') || products.includes('spaces')

src/data/languages/languageData.ts

@@ -22,8 +22,8 @@ export default {
     go: 1.2,
   },
   chat: {
-    javascript: 0.7,
-    react: 0.7,
+    javascript: 0.8,
+    react: 0.8,
     swift: 0.4,
     kotlin: 0.3,
   },

src/pages/docs/chat/connect.mdx

@@ -134,16 +134,6 @@ subscription.unsubscribe()
 </Code>
 </If>
 
-<If lang="javascript">
-Use the [`connection.offAllStatusChange()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-js.Connection.html#offAllStatusChange) method to remove all connection status listeners:
-
-<Code>
-```javascript
-chatClient.connection.offAllStatusChange();
-```
-</Code>
-</If>
-
 ## Handle connection discontinuity <a id="discontinuity"/>
 
 If a client briefly loses connection to Ably, for example when driving through a tunnel, the SDK will attempt to recover the connection. If the disruption lasts for less than 2 minutes, then on reconnection the SDK will automatically reattach to any rooms and replay any missed messages.

src/pages/docs/chat/getting-started/javascript.mdx

@@ -80,7 +80,7 @@ Create an `index.ts` file in your project and add the following function to inst
 <Code>
 ```javascript
 import * as Ably from 'ably';
-import { ChatClient, MessageEvent, Message } from '@ably/chat';
+import { ChatClient, ChatMessageEvent, Message } from '@ably/chat';
 
 async function getStarted() {
 
@@ -110,7 +110,7 @@ const room = await chatClient.rooms.get('my-first-room');
 
 await room.attach();
 
-room.messages.subscribe((messageEvent: MessageEvent) => {
+room.messages.subscribe((messageEvent: ChatMessageEvent) => {
   console.log(`Received message: ${ messageEvent.message.text }`);
 });
 
@@ -167,12 +167,12 @@ async function getStartedLate() {
 
   await room.attach();
 
-  const { getPreviousMessages } = room.messages.subscribe(() => {
+  const { historyBeforeSubscribe } = room.messages.subscribe(() => {
     console.log('New message received');
   });
 
 
-  const historicalMessages = await getPreviousMessages({ limit: 10 });
+  const historicalMessages = await historyBeforeSubscribe({ limit: 10 });
     console.log(historicalMessages.items.map((message) => `${message.clientId}: ${message.text}`));
 
 };