Fix chat-js snippets

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

@@ -824,7 +824,7 @@ You can also use the Ably CLI to enter the room from another client by running t
 ## Step 9: Send a reaction <a id="step-9"/>
 
 Clients can send a reaction to a room to show their sentiment for what is happening, such as a point being scored in a sports game.
-Ably Chat provides a [`useReactions()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.useReactions.html) hook to send and receive reactions in a room. These are short-lived (ephemeral) and are not stored in the room history.
+Ably Chat provides a [`useRoomReactions()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.useRoomReactions.html) hook to send and receive reactions in a room. These are short-lived (ephemeral) and are not stored in the room history.
 
 In your `ChatApp.tsx` file, add a new component called `ReactionComponent`, like so:
 

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

@@ -783,7 +783,7 @@ You can also use the Ably CLI to enter the room from another client by running t
 ## Step 9: Send a room reaction <a id="step-9"/>
 
 Clients can send a reaction to a room to show their sentiment for what is happening, such as a point being scored in a sports game.
-Ably Chat provides a [`useReactions()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.useReactions.html) hook to send and receive reactions in a room. These are short-lived (ephemeral) and are not stored in the room history.
+Ably Chat provides a [`useRoomReactions()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.useRoomReactions.html) hook to send and receive reactions in a room. These are short-lived (ephemeral) and are not stored in the room history.
 
 In your `src/App.tsx` file, add a new component called `ReactionComponent`, like so:
 

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

@@ -303,11 +303,11 @@ import { MessageInput } from '@ably/chat-react-ui-kit';
 import { useMessages } from '@ably/chat/react';
 
 // Basic usage
-const { send } = useMessages();
+const { sendMessage } = useMessages();
 
 const handleSendMessage = (text: string) => {
   console.log(`Sending message: ${text}`);
-  send({ text });
+  sendMessage({ text });
 };
 
 <MessageInput
@@ -532,25 +532,25 @@ import { ChatMessage } from '@ably/chat-react-ui-kit';
 import { Message } from '@ably/chat';
 import { useMessages } from '@ably/chat/react';
 
-const { update, deleteMessage, addReaction, removeReaction } = useMessages();
+const { updateMessage, deleteMessage, sendReaction, deleteReaction } = useMessages();
 
 <ChatMessage
   message={message}
   onEdit={(message: Message, newText: string) => {
     console.log(`Editing message with serial: ${message.serial}, setting text to: ${newText}`);
-    update(message.serial, { text: newText });
+    updateMessage(message.serial, { text: newText });
   }}
   onDelete={(message: Message) => {
     console.log(`Deleting message with serial: ${message.serial}`);
     deleteMessage(message.serial);
   }}
   onReactionAdd={(message: Message, emoji: string) => {
     console.log(`Adding reaction ${emoji} to message with serial: ${message.serial}`);
-    addReaction(message.serial, emoji);
+    sendReaction(message.serial, { name: emoji });
   }}
   onReactionRemove={(message: Message, emoji: string) => {
     console.log(`Removing reaction ${emoji} from message with serial: ${message.serial}`);
-    removeReaction(message.serial, emoji);
+    deleteReaction(message.serial, { name: emoji });
   }}
 />
 ```

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

@@ -237,14 +237,14 @@ import { useMessages } from '@ably/chat/react';
 const MessageSender = () => {
   const [mediaToAttach, setMediaToAttach] = useState([]);
   const [messageText, setMessageText] = useState('');
-  const { send } = useMessages();
+  const { sendMessage } = useMessages();
 
   const handleSend = async () => {
     let metadata = {};
     if (mediaToAttach.length > 0) {
       metadata["media"] = mediaToAttach;
     }
-    await send({
+    await sendMessage({
       text: messageText,
       metadata: metadata
     });
@@ -708,7 +708,7 @@ room.messages.update(message.serial, message.copy({metadata: newMetadata}))
 import { useMessages } from '@ably/chat/react';
 
 const AddMediaToMessage = ({ message }) => {
-  const { update } = useMessages();
+  const { updateMessage } = useMessages();
 
   const addMediaToMessage = async () => {
     const mediaId = 'abcd123abcd'; // assume this is the media we want to add
@@ -719,7 +719,7 @@ const AddMediaToMessage = ({ message }) => {
     }
     newMetadata.media.push(mediaId);
 
-    await update(message.serial, message.copy({metadata: newMetadata}));
+    await updateMessage(message.serial, message.copy({metadata: newMetadata}));
   };
 
   return (
@@ -867,7 +867,7 @@ room.messages.update(message.serial, message.copy({metadata: newMetadata}))
 import { useMessages } from '@ably/chat/react';
 
 const RemoveMediaFromMessage = ({ message }) => {
-  const { update } = useMessages();
+  const { updateMessage } = useMessages();
 
   const removeMediaFromMessage = async () => {
     const mediaId = 'abcd123abcd'; // assume this is the media we want to remove
@@ -880,7 +880,7 @@ const RemoveMediaFromMessage = ({ message }) => {
     const newMetadata = structuredClone(message.metadata);
     newMetadata.media = newMetadata.media.filter(id => mediaId !== id);
 
-    await update(message.serial, message.copy({metadata: newMetadata}));
+    await updateMessage(message.serial, message.copy({metadata: newMetadata}));
   };
 
   return (

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

@@ -186,11 +186,11 @@ const MyComponent = () => {
 
   // By default, presence will be entered when the hook mounts and left
   // when it subsequently unmounts.
-  const { isPresent } = usePresence(presenceParams);
+  const { myPresenceState } = usePresence(presenceParams);
 
   return (
     <div>
-      <div>Presence status: {isPresent ? 'Online' : 'Offline'}</div>
+      <div>Presence status: {myPresenceState.present ? 'Online' : 'Offline'}</div>
     </div>
   );
 };
@@ -251,15 +251,15 @@ const MyComponent = () => {
     initialData: { status: 'Online' },
   };
 
-  const { update, isPresent } = usePresence(presenceParams);
+  const { update, myPresenceState } = usePresence(presenceParams);
 
   const updatePresence = () => {
     update({ status: 'Away' });
   };
 
   return (
     <div>
-      <div>Presence status: {isPresent ? 'Online' : 'Offline'}</div>
+      <div>Presence status: {myPresenceState.present ? 'Online' : 'Offline'}</div>
       <button onClick={updatePresence}>Set Away</button>
     </div>
   );
@@ -332,11 +332,11 @@ const MyComponent = () => {
   };
 
   // Call leave explicitly to disable auto-entry and leave presence
-  const { isPresent, leave } = usePresence(presenceParams);
+  const { myPresenceState, leave } = usePresence(presenceParams);
 
   return (
     <div>
-      <div>Presence status: {isPresent ? 'Online' : 'Offline'}</div>
+      <div>Presence status: {myPresenceState.present ? 'Online' : 'Offline'}</div>
     </div>
   );
 };
@@ -405,7 +405,7 @@ For various reasons, you may wish to take manual control of presence (as you do
       autoEnterLeave: false,
     };
 
-    const { isPresent, leave, enter, update } = usePresence(presenceParams);
+    const { myPresenceState, leave, enter, update } = usePresence(presenceParams);
 
     // Manual mount behavior - enter presence when component mounts
     useEffect(() => {
@@ -425,7 +425,7 @@ For various reasons, you may wish to take manual control of presence (as you do
 
     return (
       <div>
-        <div>Presence status: {isPresent ? 'Online' : 'Offline'}</div>
+        <div>Presence status: {myPresenceState.present ? 'Online' : 'Offline'}</div>
         <button onClick={onSomeEvent}>Update</button>
       </div>
     );

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

@@ -35,6 +35,8 @@ const MyComponent = () => {
       console.log('Received reaction: ', reactionEvent.reaction);
     },
   });
+
+  return <div>Room Reactions Component</div>;
 };
 ```
 

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

@@ -20,7 +20,7 @@ async function sendReply(replyToMessage, replyText) {
   const metadata = {
     reply: {
       serial: replyToMessage.serial,
-      timestamp: replyToMessage.createdAt.getTime(),
+      timestamp: replyToMessage.timestamp.getTime(),
       clientId: replyToMessage.clientId,
       previewText: replyToMessage.text.substring(0, 140)
     }
@@ -43,7 +43,7 @@ const ReplyComponent = ({ messageToReplyTo }) => {
     const metadata = {
       reply: {
         serial: messageToReplyTo.serial,
-        createdAt: messageToReplyTo.createdAt.getTime(),
+        timestamp: messageToReplyTo.timestamp.getTime(),
         clientId: messageToReplyTo.clientId,
         previewText: messageToReplyTo.text.substring(0, 140)
       }
@@ -150,7 +150,7 @@ When a user replies to a message, extract and store the parent message details:
 function prepareReply(parentMessage) {
   return {
     serial: parentMessage.serial,
-    createdAt: parentMessage.createdAt.getTime(),
+    timestamp: parentMessage.timestamp.getTime(),
     clientId: parentMessage.clientId,
     previewText: parentMessage.text.substring(0, 140)
   };
@@ -161,7 +161,7 @@ function prepareReply(parentMessage) {
 const prepareReply = (parentMessage) => {
   return {
     serial: parentMessage.serial,
-    createdAt: parentMessage.createdAt.getTime(),
+    timestamp: parentMessage.timestamp.getTime(),
     clientId: parentMessage.clientId,
     previewText: parentMessage.text.substring(0, 140)
   };

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

@@ -27,16 +27,16 @@ import { useTyping } from '@ably/chat/react';
 import { TypingSetEvent } from '@ably/chat';
 
 const MyComponent = () => {
-  const {currentlyTyping, error } = useTyping({
+  const { currentlyTyping, roomError } = useTyping({
     listener: (typingEvent: TypingSetEvent) => {
       console.log('Typing event received: ', typingEvent);
     },
   });
 
   return (
     <div>
-      {error && <p>Typing Error: {error.message}</p>}
-        <p>Currently typing: {Array.from(currentlyTyping).join(', ')}</p>
+      {roomError && <p>Typing Error: {roomError.message}</p>}
+      <p>Currently typing: {Array.from(currentlyTyping).join(', ')}</p>
     </div>
   );
 };
@@ -172,14 +172,14 @@ await room.typing.keystroke();
 import { useTyping } from '@ably/chat/react';
 
 const MyComponent = () => {
-  const { keystroke, currentlyTyping, error } = useTyping();
+  const { keystroke, currentlyTyping, roomError } = useTyping();
   const handleKeystrokeClick = () => {
     keystroke();
   };
 
   return (
     <div>
-      {error && <p>Typing Error: {error.message}</p>}
+      {roomError && <p>Typing Error: {roomError.message}</p>}
       <button onClick={handleKeystrokeClick}>Start Typing</button>
       <p>Currently typing: {Array.from(currentlyTyping).join(', ')}</p>
     </div>
@@ -237,14 +237,14 @@ await room.typing.stop();
 import { useTyping } from '@ably/chat/react';
 
 const MyComponent = () => {
-  const { stop, error } = useTyping();
+  const { stop, roomError } = useTyping();
   const handleStopClick = () => {
     stop();
   };
 
   return (
     <div>
-      {error && <p>Typing Error: {error.message}</p>}
+      {roomError && <p>Typing Error: {roomError.message}</p>}
       <button onClick={handleStopClick}>Stop Typing</button>
     </div>
   );

src/pages/docs/chat/setup.mdx

@@ -266,7 +266,7 @@ import { ChatClientProvider } from '@ably/chat/react';
 const ably = new Ably.Realtime({ key: '{{API_KEY}}', clientId: '<clientId>'});
 const chatClient = new ChatClient(ably, {logHandler: logWriteFunc, logLevel: 'debug' });
 
-const App = => {
+const App = () => {
   return (
     <ChatClientProvider client={chatClient}>
       <RestOfYourApp />