chat: v0.11

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

@@ -26,7 +26,7 @@ export default function App() {
 
   return (
     <ChatClientProvider client={chatClient}>
-      <ChatRoomProvider id={roomName}>
+      <ChatRoomProvider name={roomName}>
         <BrowserRouter>
           <Routes>
             <Route path="/" element={<Home />} />

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

@@ -7,7 +7,7 @@ export default function Chat() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [message, setMessage] = useState('');
   const { clientId } = useChatClient();
-  const { history, send } = useMessages({
+  const { history, sendMessage } = useMessages({
     listener: (event) => {
       setMessages((prevMessages: Message[]) => [...prevMessages, event.message]);
     },
@@ -37,7 +37,7 @@ export default function Chat() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    send({ text: message });
+    sendMessage({ text: message });
     setMessage('');
   };
 

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

@@ -24,15 +24,15 @@ const Chat = () => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [message, setMessage] = useState('');
   const { clientId } = useChatClient();
-  const { send } = useMessages({
+  const { sendMessage } = useMessages({
     listener: (event: ChatMessageEvent) => {
       setMessages((prevMessages: Message[]) => [...prevMessages, event.message]);
     },
   });
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    send({ text: message });
+    sendMessage({ text: message });
     setMessage('');
   };
 

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { ChatClient, Reaction as ReactionInterface, RoomReactionEvent } from '@ably/chat';
+import { ChatClient, RoomReaction as ReactionInterface, RoomReactionEvent } from '@ably/chat';
 import { ChatClientProvider, ChatRoomProvider, useRoom, useRoomReactions } from '@ably/chat/react';
 import { Realtime } from 'ably';
 import './styles/styles.css';
@@ -14,7 +14,7 @@ function Chat() {
   const [reactions, setReactions] = useState<ReactionInterface[]>([]);
   const emojis = ['❤️', '😲', '👍', '😊'];
 
-  const { send } = useRoomReactions({
+  const { sendRoomReaction } = useRoomReactions({
     listener: (reactionEvent: RoomReactionEvent) => {
       const reaction = reactionEvent.reaction;
       setReactions((prevReactions: ReactionInterface[]) => [...prevReactions, { ...reaction }]);
@@ -35,7 +35,7 @@ function Chat() {
         <div className="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
           <div className="emoji-selector">
             {emojis.map((emoji, index) => (
-              <span key={index} className="emoji-btn" onClick={() => send({ name: emoji })}>
+              <span key={index} className="emoji-btn" onClick={() => sendRoomReaction({ name: emoji })}>
                 {emoji}
               </span>
             ))}

examples/package.json

@@ -94,7 +94,7 @@
     "spaces-member-location-react": "yarn workspace spaces-member-location-react dev"
   },
   "dependencies": {
-    "@ably/chat": "^0.10.0",
+    "@ably/chat": "^0.11.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.10.0":
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.10.0.tgz#10a90c76726ea535a0a7847a786d3d06f44bafbc"
-  integrity sha512-74T/XAiYQkrNkRVcV18jnUjEiH23K3lOgt4yrZ0MXta0QJ9iWhqnemlmL+IDT9i/bN57AuhNXOVn8RdSSHjHnw==
+"@ably/chat@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.11.0.tgz#8b4db3756ab6574aceb923a965f67b750e39756a"
+  integrity sha512-6oA9OAhZHtxQwylVLzv9cXirCN2WzhT22xZnvkb78gU/PUqNe2/7APsvZyXJnJVN6XVrTg3XHMl4vkOrdLLW7g==
   dependencies:
     async-mutex "^0.5.0"
     dequal "^2.0.3"

src/data/languages/languageData.ts

@@ -22,8 +22,8 @@ export default {
     go: '1.2',
   },
   chat: {
-    javascript: '0.10',
-    react: '0.10',
+    javascript: '0.11',
+    react: '0.11',
     swift: '0.6',
     kotlin: '0.5',
   },

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

@@ -278,7 +278,7 @@ function ChatBox() {
   const [messages, setMessages] = useState<Message[]>([]);
 
   // The useMessages hook subscribes to messages in the room and provides a send method
-  const { send } = useMessages({
+  const { sendMessage } = useMessages({
     listener: (event: ChatMessageEvent) => {
       const message = event.message;
       switch (event.type) {
@@ -297,7 +297,7 @@ function ChatBox() {
   // Function to handle sending messages
   const handleSend = () => {
     if (!inputValue.trim()) return;
-    send({ text: inputValue.trim() }).catch((err) =>
+    sendMessage({ text: inputValue.trim() }).catch((err) =>
       console.error('Error sending message', err))
     setInputValue('');
   };
@@ -390,9 +390,9 @@ You'll see the message in your app's chat box UI. If you have sent a message via
 
 ## Step 5: Edit a message <a id="step-5"/>
 
-If your client makes a typo, or needs to update their original message then they can edit it. To do this, you can extend the functionality of the `ChatBox` component to allow updating of messages. The `useMessages()` hook exposes the [`update()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-js.Messages.html#update) method of the Chat SDK [messages](/docs/chat/rooms/messages?lang=react) feature.
+If your client makes a typo, or needs to update their original message then they can edit it. To do this, you can extend the functionality of the `ChatBox` component to allow updating of messages. The `useMessages()` hook exposes the [`updateMessage()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-js.Messages.html#updatemessage) method of the Chat SDK [messages](/docs/chat/rooms/messages?lang=react) feature.
 
-Expose the `update()` method from the `useMessages()` hook and then add a method to the `ChatBox` component to handle the edit action like so:
+Expose the `updateMessage()` method from the `useMessages()` hook and then add a method to the `ChatBox` component to handle the edit action like so:
 
 <Code>
 ```react
@@ -403,7 +403,7 @@ const onUpdateMessage = useCallback(
     if (!newText) {
       return;
     }
-    update(
+    updateMessage(
       message.serial,
       {
         text: newText,
@@ -414,7 +414,7 @@ const onUpdateMessage = useCallback(
       console.warn('Failed to update message', error);
     });
   },
-  [update],
+  [updateMessage],
 );
 ```
 </Code>
@@ -479,7 +479,7 @@ Update the listener provided to the `useMessages()` hook to handle the `ChatMess
 <Code>
 ```react
 // App.tsx - Replace the useMessages hook with the following:
-const {send, update} = useMessages({
+const {sendMessage, updateMessage} = useMessages({
   listener: (event: ChatMessageEvent) => {
     const message = event.message;
     switch (event.type) {
@@ -531,7 +531,7 @@ In your `src/App.tsx` file, add the following `useEffect` to your `ChatBox` comp
 // App.tsx
 function ChatBox() {
   /* Expose historyBeforeSubscribe() */
-  /* const {send, update, historyBeforeSubscribe} = useMessages({...*/
+  /* const {sendMessage, updateMessage, historyBeforeSubscribe} = useMessages({...*/
   /* existing code */
   useEffect(() => {
     async function loadHistory() {
@@ -583,7 +583,7 @@ function ChatBox() {
   /* replace the existing handleSend method with the following */
   const handleSend = () => {
     if (!inputValue.trim()) return;
-    send({text: inputValue.trim()}).catch((err) =>
+    sendMessage({text: inputValue.trim()}).catch((err) =>
       console.error('Error sending message', err))
     setInputValue('');
 
@@ -785,7 +785,7 @@ In your `src/App.tsx` file, add a new component called `ReactionComponent`, like
 function ReactionComponent() {
   const reactions = ['👍', '❤️', '💥', '🚀', '👎', '💔'];
   const [roomReactions, setRoomReactions] = useState<RoomReaction[]>([]);
-  const { send } = useRoomReactions({
+  const { sendRoomReaction } = useRoomReactions({
     listener: (reactionEvent) => {
       setRoomReactions([...roomReactions, reactionEvent.reaction]);
     },
@@ -799,7 +799,7 @@ function ReactionComponent() {
           <button
             key={reaction}
             onClick={() =>
-              send({ name: reaction }).catch((err) =>
+              sendRoomReaction({ name: reaction }).catch((err) =>
                 console.error('Error sending reaction', err)
               )
             }

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

@@ -145,7 +145,7 @@ Use the <If lang="javascript">[`messages.send()`](https://sdk.ably.com/builds/ab
 </If>
 
 <If lang="react">
-Use the [`send()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-react.UseMessagesResponse.html#send) method available from the response of the `useMessages` hook to send a message to the room:
+Use the [`sendMessage()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-react.UseMessagesResponse.html#sendmessage) method available from the response of the `useMessages` hook to send a message to the room:
 </If>
 
 <Code>
@@ -157,10 +157,10 @@ await room.messages.send({text: 'hello'});
 import { useMessages } from '@ably/chat/react';
 
 const MyComponent = () => {
-  const { send } = useMessages();
+  const { sendMessage } = useMessages();
 
   const handleMessageSend = () => {
-    send({ text: 'Hello, World!' });
+    sendMessage({ text: 'Hello, World!' });
   };
 
   return (
@@ -191,7 +191,7 @@ Use the <If lang="javascript">[`messages.update()`](https://sdk.ably.com/builds/
 </If>
 
 <If lang="react">
-Use the [`update()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat_react.UseMessagesResponse.html#update) method available from the response of the `useMessages` hook to update a message in the room:
+Use the [`updateMessage()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-react.UseMessagesResponse.html#updatemessage) method available from the response of the `useMessages` hook to update a message in the room:
 </If>
 
 <Code>
@@ -207,11 +207,11 @@ import { Message } from '@ably/chat';
 import { useMessages } from '@ably/chat/react';
 
 const MyComponent = () => {
-  const { update } = useMessages();
+  const { updateMessage } = useMessages();
   const [message, setMessage] = useState<Message>();
 
   const handleMessageUpdate = (msg: Message) => {
-    update(msg.serial, msg.copy({ text: "my updated text" }), { description: "Message update by user" })
+    updateMessage(msg.serial, msg.copy({ text: "my updated text" }), { description: "Message update by user" })
     .then((updatedMsg: Message) => {
       console.log('Message updated:', updatedMsg);
     })
@@ -252,7 +252,7 @@ Use the <If lang="javascript">[`messages.subscribe()`](https://sdk.ably.com/buil
 </If>
 
 <If lang="react">
-Use the [`useMessages`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat_react.useMessages.html) hook to subscribe to messages in a room. To filter for updated messages, provide a listener that checks the `type` property of the message event:
+Use the [`useMessages`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.useMessages.html) hook to subscribe to messages in a room. To filter for updated messages, provide a listener that checks the `type` property of the message event:
 </If>
 
 <Code>
@@ -387,7 +387,7 @@ Use the <If lang="javascript">[`messages.delete()`](https://sdk.ably.com/builds/
 </If>
 
 <If lang="react">
-Use the [`deleteMessage()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat_react.UseMessagesResponse.html#deleteMessage) method available from the response of the `useMessages` hook to delete a message from the room:
+Use the [`deleteMessage()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-react.UseMessagesResponse.html#deletemessage) method available from the response of the `useMessages` hook to delete a message from the room:
 </If>
 
 <Code>
@@ -447,7 +447,7 @@ Use the <If lang="javascript">[`messages.subscribe()`](https://sdk.ably.com/buil
 </If>
 
 <If lang="react">
-Use the [`useMessages`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat_react.useMessages.html) hook to subscribe to messages in a room. To filter for deleted messages, provide a listener that checks the `type` property of the message event:
+Use the [`useMessages`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.useMessages.html) hook to subscribe to messages in a room. To filter for deleted messages, provide a listener that checks the `type` property of the message event:
 </If>
 
 <Code>

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

@@ -94,22 +94,6 @@ let presenceSubscription = room.presence.subscribe(events: [.leave, .update])
 
 ### Presence event structure <a id="event-structure"/>
 
-The following is the structure of a presence event:
-
-<Code>
-```json
-{
-  "type": "enter",
-  "member": {
-    "clientId": "clemons123",
-    "data": "Be right back!",
-    "updatedAt": 1677595689759,
-    "extras": {}
-  }
-}
-```
-</Code>
-
 The following are the properties of a presence event:
 
 <If lang="javascript,react">
@@ -119,8 +103,9 @@ The following are the properties of a presence event:
 | type | The type of the event | String |
 | member | The presence member that the event pertains to | PresenceMember |
 | | `clientId`: The ID of the client that triggered the event. | String |
+| | `connectionId`: The connection ID of the client that triggered the event. Use this in combination with `clientId` to identify a user across multiple devices. | String |
 | | `data`: Optional user data. | Object |
-| | `updatedAt`: The time that the event was emitted. | Number |
+| | `updatedAt`: The time that the event was emitted. | DateTime |
 | | `extras`: A JSON object of arbitrary key-value pairs that may contain metadata, and/or ancillary payloads related to the user's latest presence event. | object |
 
 </If>
@@ -131,7 +116,7 @@ The following are the properties of a presence event:
 | -------- | ----------- | ---- |
 | clientId | The ID of the client that triggered the event. | String |
 | data | Optional user data. | Object |
-| timestamp | The time that the event was emitted. | Number |
+| timestamp | The time that the event was emitted. | DateTime |
 
 </If>
 
@@ -383,24 +368,11 @@ Use the [`presenceData`](https://sdk.ably.com/builds/ably/ably-chat-js/main/type
 
 ### Presence member structure <a id="member-structure"/>
 
-The following is the structure of an individual presence member within the presence set:
-
-<Code>
-```json
-{
-  "clientId": "clemons123",
-  "data": "Good morning!",
-  "extras": "",
-  "updatedAt": 1677595689759
-}
-```
-</Code>
-
 The following are the properties of an individual presence member:
 
 | Property | Description | Type |
 | -------- | ----------- | ---- |
 | clientId | The ID of the client this event relates to. | String |
 | data | The latest optional user data associated with the user. | Object |
 | extras | A JSON object of arbitrary key-value pairs that may contain metadata, and/or ancillary payloads related to the user's latest presence event. | Any |
-| updatedAt | The time of the last presence event. | Number |
+| updatedAt | The time of the last presence event. | DateTime |

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

@@ -14,7 +14,7 @@ Subscribe to room reactions by registering a listener. Use the <If lang="javascr
 </If>
 
 <If lang="react">
-Subscribe to room reactions with the [`useRoomReactions`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat_react.useRoomReactions.html) hook. Supply an optional listener to receive the room reactions.
+Subscribe to room reactions with the [`useRoomReactions`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.useRoomReactions.html) hook. Supply an optional listener to receive the room reactions.
 </If>
 
 <Code>
@@ -110,7 +110,7 @@ Use the <If lang="javascript">[`reactions.send()`](https://sdk.ably.com/builds/a
 </If>
 
 <If lang="react">
-Use the [`send()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-react.UseRoomReactionsResponse.html#send) method available from the response of the `useRoomReactions` hook to emit an event when a user reacts, for example when they click an emoji button:
+Use the [`sendRoomReaction()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-react.UseRoomReactionsResponse.html#sendroomreaction) method available from the response of the `useRoomReactions` hook to emit an event when a user reacts, for example when they click an emoji button:
 </If>
 
 <Code>
@@ -124,10 +124,10 @@ await room.reactions.send({name: "heart", metadata: {"effect": "fireworks"}});
 import { useRoomReactions } from '@ably/chat/react';
 
 const MyComponent = () => {
-  const { send } = useRoomReactions();
+  const { sendRoomReaction } = useRoomReactions();
 
   const sendLike = () => {
-    send({ name: 'like' });
+    sendRoomReaction({ name: 'like' });
   };
 
   return (