From 373a789e49a2764eec8b8392437f9f0c3d41a425 Mon Sep 17 00:00:00 2001
From: sacOO7 <sachinshinde7676@gmail.com>
Date: Thu, 15 Jan 2026 12:07:18 +0530
Subject: [PATCH 1/2] Fixed chat-js snippets for react and react-native

---
 src/pages/docs/chat/getting-started/react-native.mdx | 2 +-
 src/pages/docs/chat/getting-started/react.mdx        | 2 +-
 src/pages/docs/chat/rooms/reactions.mdx              | 2 ++
 src/pages/docs/chat/setup.mdx                        | 2 +-
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/docs/chat/getting-started/react-native.mdx b/src/pages/docs/chat/getting-started/react-native.mdx
index f51daa7034..e06c4c6a38 100644
--- a/src/pages/docs/chat/getting-started/react-native.mdx
+++ b/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:
 
diff --git a/src/pages/docs/chat/getting-started/react.mdx b/src/pages/docs/chat/getting-started/react.mdx
index 1be877d3b6..041442bd72 100644
--- a/src/pages/docs/chat/getting-started/react.mdx
+++ b/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:
 
diff --git a/src/pages/docs/chat/rooms/reactions.mdx b/src/pages/docs/chat/rooms/reactions.mdx
index 4988e267dc..1fbef0fae5 100644
--- a/src/pages/docs/chat/rooms/reactions.mdx
+++ b/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>;
 };
 ```
 
diff --git a/src/pages/docs/chat/setup.mdx b/src/pages/docs/chat/setup.mdx
index f5191b4706..fd584e129f 100644
--- a/src/pages/docs/chat/setup.mdx
+++ b/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 />

From aa974ef2cc0ae32374c94c2608b7efdd937b656c Mon Sep 17 00:00:00 2001
From: sacOO7 <sachinshinde7676@gmail.com>
Date: Thu, 15 Jan 2026 20:02:51 +0530
Subject: [PATCH 2/2] Fixed react specific chat-js code snippets

---
 src/pages/docs/chat/react-ui-kit/components.mdx | 12 ++++++------
 src/pages/docs/chat/rooms/media.mdx             | 12 ++++++------
 src/pages/docs/chat/rooms/presence.mdx          | 16 ++++++++--------
 src/pages/docs/chat/rooms/replies.mdx           |  8 ++++----
 src/pages/docs/chat/rooms/typing.mdx            | 14 +++++++-------
 5 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/pages/docs/chat/react-ui-kit/components.mdx b/src/pages/docs/chat/react-ui-kit/components.mdx
index b4fdce3818..6542cec8fb 100644
--- a/src/pages/docs/chat/react-ui-kit/components.mdx
+++ b/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,13 +532,13 @@ 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}`);
@@ -546,11 +546,11 @@ const { update, deleteMessage, addReaction, removeReaction } = useMessages();
   }}
   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 });
   }}
 />
 ```
diff --git a/src/pages/docs/chat/rooms/media.mdx b/src/pages/docs/chat/rooms/media.mdx
index ca117e232e..364b35dbd3 100644
--- a/src/pages/docs/chat/rooms/media.mdx
+++ b/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 (
diff --git a/src/pages/docs/chat/rooms/presence.mdx b/src/pages/docs/chat/rooms/presence.mdx
index 57958868cb..bcae26a631 100644
--- a/src/pages/docs/chat/rooms/presence.mdx
+++ b/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,7 +251,7 @@ const MyComponent = () => {
     initialData: { status: 'Online' },
   };
 
-  const { update, isPresent } = usePresence(presenceParams);
+  const { update, myPresenceState } = usePresence(presenceParams);
 
   const updatePresence = () => {
     update({ status: 'Away' });
@@ -259,7 +259,7 @@ const MyComponent = () => {
 
   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>
     );
diff --git a/src/pages/docs/chat/rooms/replies.mdx b/src/pages/docs/chat/rooms/replies.mdx
index 2224e8d72a..0565f13588 100644
--- a/src/pages/docs/chat/rooms/replies.mdx
+++ b/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)
   };
diff --git a/src/pages/docs/chat/rooms/typing.mdx b/src/pages/docs/chat/rooms/typing.mdx
index 5d3a0cb67f..a2479fc9aa 100644
--- a/src/pages/docs/chat/rooms/typing.mdx
+++ b/src/pages/docs/chat/rooms/typing.mdx
@@ -27,7 +27,7 @@ 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);
     },
@@ -35,8 +35,8 @@ const MyComponent = () => {
 
   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>
   );