From 7f12e09e262995c50eca1f68ad0ffe89c6e50f3d Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Tue, 14 May 2024 11:03:59 +0100
Subject: [PATCH 01/20] update field names for send message

---
 src/ChatApi.ts  | 9 +++++++--
 src/Messages.ts | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/ChatApi.ts b/src/ChatApi.ts
index dc95ecf2..154e40ed 100644
--- a/src/ChatApi.ts
+++ b/src/ChatApi.ts
@@ -9,7 +9,12 @@ export interface GetMessagesQueryParams {
 }
 
 export interface CreateMessageResponse {
-  id: string;
+  timeserial: string;
+  createdAt: number;
+}
+
+interface CreateMessageRequest {
+  content: string;
 }
 
 /**
@@ -27,7 +32,7 @@ export class ChatApi {
   }
 
   async sendMessage(roomId: string, text: string): Promise<CreateMessageResponse> {
-    return this.makeAuthorisedRequest(`/chat/v1/rooms/${roomId}/messages`, 'POST', {
+    return this.makeAuthorisedRequest<CreateMessageResponse, CreateMessageRequest>(`/chat/v1/rooms/${roomId}/messages`, 'POST', {
       content: text,
     });
   }
diff --git a/src/Messages.ts b/src/Messages.ts
index e02970fd..8eeccdf6 100644
--- a/src/Messages.ts
+++ b/src/Messages.ts
@@ -66,10 +66,10 @@ export class Messages extends EventEmitter<MessageEventsMap> {
 
     // note: this implementation will change when posting a message starts returning the full message
     return {
-      id: response.id,
+      id: response.timeserial,
       content: text,
       created_by: this.clientId,
-      created_at: new Date().getTime(), // note: this is not a real created_at timestamp, that can right now be parsed from the ULID
+      created_at: response.createdAt, // note: this is not a real created_at timestamp, that can right now be parsed from the ULID
       room_id: this.roomId,
     };
   }

From a1640f813c4edffa787bcff0b8c04ebae61d94fe Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 11:52:56 +0100
Subject: [PATCH 02/20] formatting

---
 src/ChatApi.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/ChatApi.ts b/src/ChatApi.ts
index 154e40ed..4978e873 100644
--- a/src/ChatApi.ts
+++ b/src/ChatApi.ts
@@ -32,9 +32,13 @@ export class ChatApi {
   }
 
   async sendMessage(roomId: string, text: string): Promise<CreateMessageResponse> {
-    return this.makeAuthorisedRequest<CreateMessageResponse, CreateMessageRequest>(`/chat/v1/rooms/${roomId}/messages`, 'POST', {
-      content: text,
-    });
+    return this.makeAuthorisedRequest<CreateMessageResponse, CreateMessageRequest>(
+      `/chat/v1/rooms/${roomId}/messages`,
+      'POST',
+      {
+        content: text,
+      },
+    );
   }
 
   private async makeAuthorisedRequest<RES, REQ = undefined>(

From 45e75a2e874a20051764c963c9112c0cf84f1493 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 11:53:40 +0100
Subject: [PATCH 03/20] create Message object for forwarding the
 message.created event

---
 src/Messages.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/Messages.ts b/src/Messages.ts
index 8eeccdf6..699588d0 100644
--- a/src/Messages.ts
+++ b/src/Messages.ts
@@ -149,11 +149,11 @@ export class Messages extends EventEmitter<MessageEventsMap> {
     this.unsubscribeFromChannel = null;
   }
 
-  private async processQueue(): Promise<void> {
+  private processQueue(): void {
     if (this.eventsQueue.length === 0 || this.state !== MessagesInternalState.idle) return;
     const event = this.eventsQueue[0];
     try {
-      const processed = await this.processEvent(event);
+      const processed = this.processEvent(event);
       if (processed) {
         this.eventsQueue.shift();
         return this.processQueue();
@@ -163,11 +163,19 @@ export class Messages extends EventEmitter<MessageEventsMap> {
     }
   }
 
-  private async processEvent(channelEventMessage: Ably.Message) {
+  private processEvent(channelEventMessage: Ably.Message) {
     const { name, data } = channelEventMessage;
+
     switch (name) {
       case MessageEvents.created:
-        this.emit(MessageEvents.created, { type: name, message: data });
+        const message: Message = {
+          id: channelEventMessage.extras.timeserial,
+          created_by: channelEventMessage.clientId!,
+          created_at: channelEventMessage.timestamp!,
+          room_id: this.roomId,
+          content: data,
+        };
+        this.emit(MessageEvents.created, { type: name, message: message });
         return true;
       default:
         throw new Ably.ErrorInfo(`Received illegal event="${name}"`, 400, 4000);

From ce293680ace4469f3fc48047aa750d05d6927cac Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:15:12 +0100
Subject: [PATCH 04/20] temporary: full permissions token

---
 demo/api/ably-token-request/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/demo/api/ably-token-request/index.ts b/demo/api/ably-token-request/index.ts
index d4d62f51..745df2d0 100644
--- a/demo/api/ably-token-request/index.ts
+++ b/demo/api/ably-token-request/index.ts
@@ -30,6 +30,7 @@ Please see README.md for more details on configuring your Ably API Key.`);
     capability: {
       'room:*': ['publish', 'subscribe', 'presence'],
       '[chat]*': ['*'],
+      '*': ['*'],
     },
     clientId: clientId,
   });

From d10189a3fd188fdb0e2dfa99b38b7f42343e180c Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:15:54 +0100
Subject: [PATCH 05/20] fix path to netlify functions

---
 demo/netlify.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/netlify.toml b/demo/netlify.toml
index 2b67e431..b3219e60 100644
--- a/demo/netlify.toml
+++ b/demo/netlify.toml
@@ -3,7 +3,7 @@
   command = "npm run build"
 
 [functions]
-  directory = "api"
+  directory = "demo/api"
   external_node_modules = ["express"]
   node_bundler = "esbuild"
 

From 304a57cdb82ab66c66c9aa401dbaa4f47efd2735 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:16:24 +0100
Subject: [PATCH 06/20] add example for using publish locally

---
 demo/src/main.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/demo/src/main.tsx b/demo/src/main.tsx
index a113b15a..74af9fc6 100644
--- a/demo/src/main.tsx
+++ b/demo/src/main.tsx
@@ -8,12 +8,22 @@ import './index.css';
 
 const clientId = nanoid();
 
+// use this for local development with local realtime
+//
+// const ablyClient = new Ably.Realtime({
+//   authUrl: `/api/ably-token-request?clientId=${clientId}`,
+//   port: 8081,
+//   environment: 'local',
+//   tls: false,
+//   clientId,
+// });
+
 const ablyClient = new Ably.Realtime({
   authUrl: `/api/ably-token-request?clientId=${clientId}`,
   restHost: import.meta.env.VITE_ABLY_HOST,
   realtimeHost: import.meta.env.VITE_ABLY_HOST,
   clientId,
-});
+})
 
 const chatClient = new Chat(ablyClient);
 

From 56c62fab8b8990fb3a9ac451558c3368825193e5 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:17:12 +0100
Subject: [PATCH 07/20] on init messages: temporary remove history call, until
 we add history api

---
 demo/src/hooks/useMessages.ts | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/demo/src/hooks/useMessages.ts b/demo/src/hooks/useMessages.ts
index eb9d434f..3a619620 100644
--- a/demo/src/hooks/useMessages.ts
+++ b/demo/src/hooks/useMessages.ts
@@ -2,9 +2,10 @@ import { Message, MessageEvents, type MessageListener } from '@ably-labs/chat';
 import { useCallback, useEffect, useState } from 'react';
 import { useRoom } from './useRoom';
 
-const combineMessages = (previousMessages: Message[], lastMessages: Message[]) => {
-  return [...previousMessages.filter((msg) => lastMessages.every(({ id }) => id !== msg.id)), ...lastMessages];
-};
+// todo: uncomment. used for history query when we add it back
+// const combineMessages = (previousMessages: Message[], lastMessages: Message[]) => {
+//   return [...previousMessages.filter((msg) => lastMessages.every(({ id }) => id !== msg.id)), ...lastMessages];
+// };
 
 export const useMessages = () => {
   const [messages, setMessages] = useState<Message[]>([]);
@@ -19,23 +20,24 @@ export const useMessages = () => {
   );
 
   useEffect(() => {
-    setLoading(true);
+    setLoading(false); // todo: set to true here when we add back history query (see commented initMessages below)
+
     const handleAdd: MessageListener = ({ message }) => {
       setMessages((prevMessage) => [...prevMessage, message]);
     };
-
     room.messages.subscribe(MessageEvents.created, handleAdd);
 
     let mounted = true;
-    const initMessages = async () => {
-      const lastMessages = await room.messages.query({ limit: 100 });
-      if (mounted) {
-        setLoading(false);
-        setMessages((prevMessages) => combineMessages(prevMessages, lastMessages).reverse());
-      }
-    };
     setMessages([]);
-    initMessages();
+    // const initMessages = async () => {
+    //   const lastMessages = await room.messages.query({ limit: 100 });
+    //   if (mounted) {
+    //     // setLoading(false);
+    //     setMessages((prevMessages) => combineMessages(prevMessages, lastMessages).reverse());
+    //   }
+    // };
+    // initMessages();
+
 
     return () => {
       mounted = false;

From 6c36a675dbf479c25870500878eaa41c160e2e4d Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:17:44 +0100
Subject: [PATCH 08/20] add start-silent to have a way to not open browser
 window every time you start the dev server

---
 demo/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/demo/package.json b/demo/package.json
index 3369863c..91a15ecd 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -7,6 +7,7 @@
     "prepare": "cd api/ably-token-request && npm install",
     "dev": "vite",
     "start": "npx netlify dev",
+    "start-silent": "npx netlify dev --no-open",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

From 316cef4a14979901f823662205e6fd90b783b352 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:18:01 +0100
Subject: [PATCH 09/20] update dependencies

---
 demo/package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/package-lock.json b/demo/package-lock.json
index 5570e3aa..580b5aa6 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -41,7 +41,7 @@
         "nanoid": "^5.0.6"
       },
       "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.21.0",
+        "@typescript-eslint/eslint-plugin": "^7.0.0",
         "@typescript-eslint/parser": "^6.14.0",
         "eslint": "^8.54.0",
         "eslint-plugin-import": "^2.29.1",

From 29581c32eba68ccf38d83bc8e43bc14429739bb1 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:18:05 +0100
Subject: [PATCH 10/20] update readme

---
 demo/README.md | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/demo/README.md b/demo/README.md
index e1f3c02e..1b2b6395 100644
--- a/demo/README.md
+++ b/demo/README.md
@@ -1,17 +1,31 @@
 # Chat SDK Demo
 
-An app showcasing the usage of Chat SDK to build chat
+An app showcasing the usage of Chat SDK to build chat.
+
+Quickstart install-to-browser, from this folder run:
+
+```
+(cd .. && npm run build)
+npm install
+npm run start
+```
 
 ## Installation
 
-1. First of all, you need to build the main Chat SDK from the root directory.
-2. Run `npm install`.
+1. First of all, you need to build the main Chat SDK from the root directory (`(cd .. && npm run build)`).
+2. Run `npm install` here.
 
 ## Credential Setup
 
 1. Copy `.env.example` to `.env.` and set the `VITE_ABLY_CHAT_API_KEY` to your Ably API key.
 2. If you're using a custom Ably domain, also set the `VITE_ABLY_HOST` to your custom domain.
 
+For Ably: if running local realtime, see `src/main.tsx`.
+
 ## Running
 
-Run `npm run dev`
+Run `npm run start`, and it will automatically open your browser on port 8888.
+
+Use `npm run start-silent` if you'd rather not have your browser open automatically.
+
+`npm run start` (and the `start-silent` version) will run both the API component for generating tokens and the front-end side. If you'd like to only run the front-end site use `npm run dev`.
\ No newline at end of file

From 3b877c7305a6b3bdf9b591b804272c06482f9ba8 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:22:06 +0100
Subject: [PATCH 11/20] fix linting errors

---
 demo/src/hooks/useMessages.ts | 5 +++--
 src/Messages.ts               | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/demo/src/hooks/useMessages.ts b/demo/src/hooks/useMessages.ts
index 3a619620..a534521a 100644
--- a/demo/src/hooks/useMessages.ts
+++ b/demo/src/hooks/useMessages.ts
@@ -27,8 +27,9 @@ export const useMessages = () => {
     };
     room.messages.subscribe(MessageEvents.created, handleAdd);
 
-    let mounted = true;
     setMessages([]);
+
+    // let mounted = true;
     // const initMessages = async () => {
     //   const lastMessages = await room.messages.query({ limit: 100 });
     //   if (mounted) {
@@ -40,7 +41,7 @@ export const useMessages = () => {
 
 
     return () => {
-      mounted = false;
+      // mounted = false;
       room.messages.unsubscribe(MessageEvents.created, handleAdd);
     };
   }, [clientId, room]);
diff --git a/src/Messages.ts b/src/Messages.ts
index 699588d0..2319bf1e 100644
--- a/src/Messages.ts
+++ b/src/Messages.ts
@@ -167,7 +167,7 @@ export class Messages extends EventEmitter<MessageEventsMap> {
     const { name, data } = channelEventMessage;
 
     switch (name) {
-      case MessageEvents.created:
+      case MessageEvents.created: {
         const message: Message = {
           id: channelEventMessage.extras.timeserial,
           created_by: channelEventMessage.clientId!,
@@ -177,6 +177,7 @@ export class Messages extends EventEmitter<MessageEventsMap> {
         };
         this.emit(MessageEvents.created, { type: name, message: message });
         return true;
+      }
       default:
         throw new Ably.ErrorInfo(`Received illegal event="${name}"`, 400, 4000);
     }

From 228bb97541400095bc9d057a6955b7854f525b89 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:32:26 +0100
Subject: [PATCH 12/20] remove outdated comments

---
 src/Messages.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Messages.ts b/src/Messages.ts
index 2319bf1e..55415cde 100644
--- a/src/Messages.ts
+++ b/src/Messages.ts
@@ -64,12 +64,11 @@ export class Messages extends EventEmitter<MessageEventsMap> {
   async send(text: string): Promise<Message> {
     const response = await this.chatApi.sendMessage(this.roomId, text);
 
-    // note: this implementation will change when posting a message starts returning the full message
     return {
       id: response.timeserial,
       content: text,
       created_by: this.clientId,
-      created_at: response.createdAt, // note: this is not a real created_at timestamp, that can right now be parsed from the ULID
+      created_at: response.createdAt,
       room_id: this.roomId,
     };
   }

From 87b94ee99aa293cd7b6f5e9d964e9fe09fb02e34 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 12:32:34 +0100
Subject: [PATCH 13/20] fix tests

---
 src/Messages.test.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/Messages.test.ts b/src/Messages.test.ts
index b34b7774..61e9f760 100644
--- a/src/Messages.test.ts
+++ b/src/Messages.test.ts
@@ -39,18 +39,24 @@ describe('Messages', () => {
   describe('sending message', () => {
     it<TestContext>('should be able to send message and get it back from response', async (context) => {
       const { chatApi, realtime } = context;
-      vi.spyOn(chatApi, 'sendMessage').mockResolvedValue({ id: 'messageId' });
+      const timestamp = new Date().getTime();
+      vi.spyOn(chatApi, 'sendMessage').mockResolvedValue({
+        timeserial: 'abcdefghij@1672531200000-123',
+        createdAt: timestamp,
+      });
 
-      const room = new Room('roomId', realtime, chatApi);
-      const messagePromise = room.messages.send('text');
+      const room = new Room('coffee-room-chat', realtime, chatApi);
+      const messagePromise = room.messages.send('hello there');
 
       const message = await messagePromise;
 
       expect(message).toEqual(
         expect.objectContaining({
-          id: 'messageId',
-          content: 'text',
+          id: 'abcdefghij@1672531200000-123',
+          content: 'hello there',
           created_by: 'clientId',
+          created_at: timestamp,
+          room_id: 'coffee-room-chat',
         }),
       );
     });

From 8922830855ba84eef75530d990884e33ee219a73 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 15:55:29 +0100
Subject: [PATCH 14/20] auto-focus on the msg input field

---
 demo/src/components/MessageInput/MessageInput.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/demo/src/components/MessageInput/MessageInput.tsx b/demo/src/components/MessageInput/MessageInput.tsx
index c2d2d41f..68ea1b02 100644
--- a/demo/src/components/MessageInput/MessageInput.tsx
+++ b/demo/src/components/MessageInput/MessageInput.tsx
@@ -31,6 +31,7 @@ export const MessageInput: FC<MessageInputProps> = ({ value, disabled, onValueCh
         disabled={disabled}
         placeholder="Type.."
         className="w-full focus:outline-none focus:placeholder-gray-400 text-gray-600 placeholder-gray-600 pl-2 bg-gray-200 rounded-md py-1"
+        autoFocus
       />
       <div className="absolute right-0 items-center inset-y-0 hidden sm:flex">
         <button

From 83a45d3b3f6ed081f49346998f1e62f5a81e6e69 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Thu, 16 May 2024 15:57:02 +0100
Subject: [PATCH 15/20] fix tests and remove unused dependencies

---
 demo/package-lock.json |  4 ---
 package-lock.json      | 29 -----------------
 package.json           |  2 --
 src/Messages.test.ts   | 70 +++++++++++++++++++++++-------------------
 src/Messages.ts        |  6 ++--
 5 files changed, 42 insertions(+), 69 deletions(-)

diff --git a/demo/package-lock.json b/demo/package-lock.json
index 580b5aa6..30782994 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -36,10 +36,6 @@
       "name": "@ably-labs/chat",
       "version": "0.0.1",
       "license": "Apache-2.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "nanoid": "^5.0.6"
-      },
       "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^7.0.0",
         "@typescript-eslint/parser": "^6.14.0",
diff --git a/package-lock.json b/package-lock.json
index dd18bc43..6c865c5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,6 @@
       "name": "@ably-labs/chat",
       "version": "0.0.1",
       "license": "Apache-2.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "nanoid": "^5.0.6"
-      },
       "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^7.0.0",
         "@typescript-eslint/parser": "^6.14.0",
@@ -3653,14 +3649,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.1.tgz",
-      "integrity": "sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
-    },
     "node_modules/lunr": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
@@ -3782,23 +3770,6 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "node_modules/nanoid": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
-      "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^18 || >=20"
-      }
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
diff --git a/package.json b/package.json
index daffbeee..a0685d3d 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,5 @@
     "vitest": "^1.4.0"
   },
   "dependencies": {
-    "lru-cache": "^10.2.0",
-    "nanoid": "^5.0.6"
   }
 }
diff --git a/src/Messages.test.ts b/src/Messages.test.ts
index 61e9f760..fc128389 100644
--- a/src/Messages.test.ts
+++ b/src/Messages.test.ts
@@ -31,7 +31,9 @@ describe('Messages', () => {
           listeners.push(nameOrListener);
         }
         // @ts-ignore
-        context.emulateBackendPublish = (msg) => listeners.forEach((listener) => listener(msg));
+        context.emulateBackendPublish = (msg) => {
+          listeners.forEach((listener) => listener(msg));
+        };
       },
     );
   });
@@ -63,37 +65,43 @@ describe('Messages', () => {
   });
 
   describe('subscribing to updates', () => {
-    it<TestContext>('should not miss events that came before last messages has been fetched and emit them after', (context) =>
-      new Promise<void>((done) => {
+    it<TestContext>('subscribing to messages should work live', (context) =>
+      new Promise<void>((done, reject) => {
+        const publishTimestamp = new Date().getTime();
         const { chatApi, realtime } = context;
-        vi.spyOn(chatApi, 'getMessages').mockResolvedValue([
-          {
-            id: '01HNBQ3QF6RPYNMYE6P226BMD1',
-            room_id: 'roomId',
-            content: 'foo',
-          } as any,
-        ]);
-
-        const room = new Room('roomId', realtime, chatApi);
-        room.messages.subscribe(MessageEvents.created, ({ message }) => {
-          expect(message).toEqual(
-            expect.objectContaining({
-              id: 'messageId',
-              content: 'text',
-              created_by: 'clientId',
-            }),
-          );
-          done();
-        });
-        context.emulateBackendPublish({
-          clientId: 'clientId',
-          name: 'message.created',
-          data: {
-            id: 'messageId',
-            content: 'text',
-            created_by: 'clientId',
-          },
-        });
+        const room = new Room('sw', realtime, chatApi);
+        room.messages
+          .subscribe(MessageEvents.created, (rawMsg) => {
+            const message = rawMsg.message;
+            try {
+              expect(message).toEqual(
+                expect.objectContaining({
+                  id: 'abcdefg',
+                  content: 'may the fourth be with you',
+                  created_by: 'yoda',
+                  created_at: publishTimestamp,
+                  room_id: 'sw',
+                }),
+              );
+            } catch (err) {
+              reject(err);
+            }
+            done();
+          })
+          .then(() => {
+            context.emulateBackendPublish({
+              clientId: 'yoda',
+              name: 'message.created',
+              data: 'may the fourth be with you',
+              extras: {
+                timeserial: 'abcdefg',
+              },
+              timestamp: publishTimestamp,
+            });
+          })
+          .catch((err) => {
+            reject(err);
+          });
       }));
   });
 });
diff --git a/src/Messages.ts b/src/Messages.ts
index 55415cde..7ab55578 100644
--- a/src/Messages.ts
+++ b/src/Messages.ts
@@ -76,12 +76,12 @@ export class Messages extends EventEmitter<MessageEventsMap> {
   subscribe<K extends keyof MessageEventsMap>(
     eventOrEvents: K | K[],
     listener?: EventListener<MessageEventsMap, K>,
-  ): void;
-  subscribe(listener?: EventListener<MessageEventsMap, keyof MessageEventsMap>): void;
+  ): Promise<void>;
+  subscribe(listener?: EventListener<MessageEventsMap, keyof MessageEventsMap>): Promise<void>;
   subscribe<K extends keyof MessageEventsMap>(
     listenerOrEvents?: K | K[] | EventListener<MessageEventsMap, K>,
     listener?: EventListener<MessageEventsMap, K>,
-  ) {
+  ): Promise<void> {
     try {
       super.on(listenerOrEvents, listener);
       return this.attach();

From efb6266bdd4ebf7a46a26f2f8e8767e4de7f9b6e Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Fri, 17 May 2024 14:48:27 +0100
Subject: [PATCH 16/20] remove room: capability since it's not used

---
 demo/api/ably-token-request/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/demo/api/ably-token-request/index.ts b/demo/api/ably-token-request/index.ts
index 745df2d0..0191abf7 100644
--- a/demo/api/ably-token-request/index.ts
+++ b/demo/api/ably-token-request/index.ts
@@ -28,7 +28,6 @@ Please see README.md for more details on configuring your Ably API Key.`);
   });
   const tokenRequestData = await client.auth.createTokenRequest({
     capability: {
-      'room:*': ['publish', 'subscribe', 'presence'],
       '[chat]*': ['*'],
       '*': ['*'],
     },

From 837440f3735fa5cb985b7d6fa89c8986a178a438 Mon Sep 17 00:00:00 2001
From: Vlad Velici <vlad.velici@ably.com>
Date: Fri, 17 May 2024 15:02:26 +0100
Subject: [PATCH 17/20] add typedoc

---
 src/Messages.ts | 44 ++++++++++++++++++++++++++++++++++++++++++++
 src/events.ts   |  4 ++++
 2 files changed, 48 insertions(+)

diff --git a/src/Messages.ts b/src/Messages.ts
index 7ab55578..e05a4ae9 100644
--- a/src/Messages.ts
+++ b/src/Messages.ts
@@ -34,6 +34,12 @@ enum MessagesInternalState {
 
 export type MessageListener = EventListener<MessageEventsMap, keyof MessageEventsMap>;
 
+/**
+ * This class is used to interact with messages in a chat room including subscribing
+ * to them, fetching history, or sending messages.
+ *
+ * Get an instance via room.messages.
+ */
 export class Messages extends EventEmitter<MessageEventsMap> {
   private readonly roomId: string;
   private readonly channel: Ably.RealtimeChannel;
@@ -52,6 +58,10 @@ export class Messages extends EventEmitter<MessageEventsMap> {
     this.clientId = clientId;
   }
 
+  /**
+   * Get the full name of the Ably realtime channel used for the messages in this
+   * chat room.
+   */
   get realtimeChannelName(): string {
     return `${this.roomId}::$chat::$chatMessages`;
   }
@@ -61,6 +71,18 @@ export class Messages extends EventEmitter<MessageEventsMap> {
     return this.chatApi.getMessages(this.roomId, options);
   }
 
+  /**
+   * Send a message in the chat room.
+   *
+   * This method uses the Ably Chat API endpoint for sending messages.
+   *
+   * Note that the Promise may resolve before OR after the message is received
+   * from the realtime channel. This means you may see the message that was just
+   * sent in a callback to `subscribe` before the returned promise resolves.
+   *
+   * @param text content of the message
+   * @returns A promise that resolves when the message was published.
+   */
   async send(text: string): Promise<Message> {
     const response = await this.chatApi.sendMessage(this.roomId, text);
 
@@ -73,11 +95,23 @@ export class Messages extends EventEmitter<MessageEventsMap> {
     };
   }
 
+  /**
+   * Subscribe to a subset of message events in this chat room.
+   *
+   * @param eventOrEvents single event name or array of events to listen to
+   * @param listener callback that will be called when these events are received
+   */
   subscribe<K extends keyof MessageEventsMap>(
     eventOrEvents: K | K[],
     listener?: EventListener<MessageEventsMap, K>,
   ): Promise<void>;
+
+  /**
+   * Subscribe to all message events in this chat room.
+   * @param listener callback that will be called
+   */
   subscribe(listener?: EventListener<MessageEventsMap, keyof MessageEventsMap>): Promise<void>;
+
   subscribe<K extends keyof MessageEventsMap>(
     listenerOrEvents?: K | K[] | EventListener<MessageEventsMap, K>,
     listener?: EventListener<MessageEventsMap, K>,
@@ -96,10 +130,20 @@ export class Messages extends EventEmitter<MessageEventsMap> {
     }
   }
 
+  /**
+   * Unsubscribe the given listener from the given list of events.
+   * @param eventOrEvents single event name or array of events to unsubscribe from
+   * @param listener listener to unsubscribe
+   */
   unsubscribe<K extends keyof MessageEventsMap>(
     eventOrEvents: K | K[],
     listener?: EventListener<MessageEventsMap, K>,
   ): void;
+
+  /**
+   * Unsubscribe the given listener from all events.
+   * @param listener listener to unsubscribe
+   */
   unsubscribe(listener?: EventListener<MessageEventsMap, keyof MessageEventsMap>): void;
   unsubscribe<K extends keyof MessageEventsMap>(
     listenerOrEvents?: K | K[] | EventListener<MessageEventsMap, K>,
diff --git a/src/events.ts b/src/events.ts
index 62623243..bc970e29 100644
--- a/src/events.ts
+++ b/src/events.ts
@@ -1,3 +1,7 @@
+/**
+ * All chat message events.
+ */
 export enum MessageEvents {
+  /** Fires when a new chat message is received. */
   created = 'message.created',
 }

From 0f64ea9f6771d02b3751284064d760a0ba944484 Mon Sep 17 00:00:00 2001
From: Andy Ford <andy.ford@ably.com>
Date: Wed, 22 May 2024 11:15:08 +0100
Subject: [PATCH 18/20] test: add integration test for chat  message round-trip

---
 package-lock.json                | 135 ++++++++++++++++++++++++++++++-
 package.json                     |   4 +-
 src/Messages.integration.test.ts |  64 +++++++++++++++
 src/helper/realtimeClient.ts     |  45 +++++++++--
 src/helper/testSetup.ts          |   5 +-
 src/integrationExample.test.ts   |  30 -------
 6 files changed, 241 insertions(+), 42 deletions(-)
 create mode 100644 src/Messages.integration.test.ts
 delete mode 100644 src/integrationExample.test.ts

diff --git a/package-lock.json b/package-lock.json
index 6c865c5d..82558903 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "license": "Apache-2.0",
       "devDependencies": {
+        "@types/jsonwebtoken": "^9.0.6",
         "@typescript-eslint/eslint-plugin": "^7.0.0",
         "@typescript-eslint/parser": "^6.14.0",
         "eslint": "^8.54.0",
@@ -17,6 +18,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
         "eslint-plugin-security": "^1.7.1",
+        "jsonwebtoken": "^9.0.2",
         "prettier": "^3.2.5",
         "typedoc": "^0.25.13",
         "typescript": "^5.4.5",
@@ -886,6 +888,15 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/jsonwebtoken": {
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.6.tgz",
+      "integrity": "sha512-/5hndP5dCjloafCXns6SZyESp3Ldq7YjH3zwzwczYnjxIT0Fqzk5ROSYVGfFyczIue7IUEj8hkvLbPoLQ18vQw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/keyv": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
@@ -899,7 +910,6 @@
       "version": "20.12.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
       "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
-      "peer": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -1702,6 +1712,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "dev": true
+    },
     "node_modules/builtin-modules": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
@@ -2072,6 +2088,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -3573,6 +3598,49 @@
       "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==",
       "dev": true
     },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "dev": true,
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "dev": true,
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "dev": true,
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3625,12 +3693,54 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "dev": true
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "dev": true
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "dev": true
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "dev": true
+    },
     "node_modules/loupe": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
@@ -4411,6 +4521,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/safe-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-2.1.1.tgz",
@@ -4983,8 +5113,7 @@
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "peer": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
diff --git a/package.json b/package.json
index a0685d3d..ac8d8f55 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "ably": "^2.0.2"
   },
   "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.6",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^6.14.0",
     "eslint": "^8.54.0",
@@ -46,11 +47,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-security": "^1.7.1",
+    "jsonwebtoken": "^9.0.2",
     "prettier": "^3.2.5",
     "typedoc": "^0.25.13",
     "typescript": "^5.4.5",
     "vitest": "^1.4.0"
-  },
-  "dependencies": {
   }
 }
diff --git a/src/Messages.integration.test.ts b/src/Messages.integration.test.ts
new file mode 100644
index 00000000..fd8fd242
--- /dev/null
+++ b/src/Messages.integration.test.ts
@@ -0,0 +1,64 @@
+import { beforeEach, describe, it, expect } from 'vitest';
+import { ablyRealtimeClientWithToken, defaultTestClientId } from './helper/realtimeClient.ts';
+import { Chat } from './Chat.ts';
+import { Message } from './entities.ts';
+
+interface TestContext {
+  chat: Chat;
+}
+
+const waitForMessages = (messages: Message[], expectedCount: number) => {
+  return new Promise<void>((resolve, reject) => {
+    const interval = setInterval(() => {
+      if (messages.length === expectedCount) {
+        clearInterval(interval);
+        resolve();
+      }
+    }, 100);
+    setTimeout(() => {
+      clearInterval(interval);
+      reject(new Error('Timed out waiting for messages'));
+    }, 3000);
+  });
+};
+
+describe('integration', () => {
+  beforeEach<TestContext>((context) => {
+    context.chat = new Chat(ablyRealtimeClientWithToken());
+  });
+
+  describe('publish message', () => {
+    it<TestContext>('should be able to send and receive chat messages', async (context) => {
+      const { chat } = context;
+
+      const roomName = Math.random().toString(36).substring(7);
+      const room = chat.rooms.get(roomName);
+
+      // Subscribe to messages and add them to a list when they arive
+      const messages: Message[] = [];
+      await room.messages.subscribe((messageEvent) => {
+        messages.push(messageEvent.message);
+      });
+
+      const message1 = await room.messages.send('Hello there!');
+      const message2 = await room.messages.send('I have the high ground!');
+
+      // Wait up to 5 seconds for the messagesPromise to resolve
+      await waitForMessages(messages, 2);
+
+      // Check that the messages were received
+      expect(messages).toEqual([
+        expect.objectContaining({
+          content: 'Hello there!',
+          created_by: defaultTestClientId,
+          id: message1.id,
+        }),
+        expect.objectContaining({
+          content: 'I have the high ground!',
+          created_by: defaultTestClientId,
+          id: message2.id,
+        }),
+      ]);
+    });
+  });
+});
diff --git a/src/helper/realtimeClient.ts b/src/helper/realtimeClient.ts
index 877b6e0f..68ff373e 100644
--- a/src/helper/realtimeClient.ts
+++ b/src/helper/realtimeClient.ts
@@ -1,17 +1,50 @@
 import * as Ably from 'ably';
+import * as jwt from 'jsonwebtoken';
 
 const defaultTestClientId = 'ably-chat-js-client-id';
 
-// Create a realtime client with the given options, or Sandbox defaults if not specified,
-// and return it.
-const ablyRealtimeClient = (options?: Ably.ClientOptions): Ably.Realtime => {
+const baseOptions = (options?: Ably.ClientOptions): Ably.ClientOptions => {
   options = options || {};
-
   options.clientId = options.clientId || defaultTestClientId;
   options.environment = options.environment || 'sandbox';
   options.key = options.key || process.env.testAblyApiKey;
+  // TODO: Support non-JSON protocol
+  options.useBinaryProtocol = false;
+  options.logHandler = options.logHandler || ((msg) => console.log(msg));
+  return options;
+};
+
+// Create a realtime client with the given options, or Sandbox defaults if not specified,
+// and return it.
+const ablyRealtimeClient = (options?: Ably.ClientOptions): Ably.Realtime => {
+  return new Ably.Realtime(baseOptions(options));
+};
+
+// At the moment, chat doesn't support keys for authentication, so create a client that uses tokens
+const ablyRealtimeClientWithToken = (options?: Ably.ClientOptions): Ably.Realtime => {
+  options = baseOptions(options);
+  const [keyId, keySecret] = options!.key!.split(':');
+  options.useTokenAuth = true;
+
+  // Generate the token
+  // It's valid for 1 hour and has access to all channels and chat rooms
+  var header = {
+    typ: 'JWT',
+    alg: 'HS256',
+    kid: keyId,
+  };
+  var currentTime = Math.round(Date.now() / 1000);
+  var claims = {
+    iat: currentTime,
+    exp: currentTime + 3600,
+    'x-ably-capability': '{"*":["*"], "[chat]*":["*"]}',
+    'x-ably-clientId': options.clientId,
+  };
+
+  const token = jwt.sign(claims, keySecret, { header: header });
+  options.token = token;
 
-  return new Ably.Realtime(options);
+  return ablyRealtimeClient(options);
 };
 
-export { ablyRealtimeClient, defaultTestClientId };
+export { ablyRealtimeClient, ablyRealtimeClientWithToken, defaultTestClientId };
diff --git a/src/helper/testSetup.ts b/src/helper/testSetup.ts
index 69165b6b..63456410 100644
--- a/src/helper/testSetup.ts
+++ b/src/helper/testSetup.ts
@@ -14,7 +14,10 @@ const setup = async () => {
   }
 
   const testApp = await response.json();
-  process.env.testAblyApiKey = testApp.keys[0].keyStr;
+
+  // The key we need to use is the one at index 5, which gives enough permissions
+  // to interact with Chat and Channels
+  process.env.testAblyApiKey = testApp.keys[5].keyStr;
 };
 
 export { setup };
diff --git a/src/integrationExample.test.ts b/src/integrationExample.test.ts
deleted file mode 100644
index 2c526249..00000000
--- a/src/integrationExample.test.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { beforeEach, describe, it, expect } from 'vitest';
-import * as Ably from 'ably';
-import { ablyRealtimeClient } from './helper/realtimeClient.ts';
-
-interface TestContext {
-  realtime: Ably.Realtime;
-}
-
-describe('example', () => {
-  beforeEach<TestContext>((context) => {
-    context.realtime = ablyRealtimeClient();
-  });
-
-  describe('integration example', () => {
-    it<TestContext>('should be able to send a realtime message and receive it', async (context) => {
-      const { realtime } = context;
-      const channel = realtime.channels.get('test-channel');
-      const messagePromise = new Promise<Ably.Message>((resolve) => {
-        channel.subscribe((message) => {
-          resolve(message);
-        });
-      });
-      const message = { name: 'test', data: 'message' };
-      channel.publish('test', message);
-      const receivedMessage = await messagePromise;
-      expect(receivedMessage.data).toEqual(message);
-      expect(receivedMessage.clientId).toEqual(realtime.auth.clientId);
-    });
-  });
-});

From d780462149c482fcef30a9c5f2547fa461b1bb5e Mon Sep 17 00:00:00 2001
From: Andy Ford <andy.ford@ably.com>
Date: Thu, 23 May 2024 08:53:51 +0100
Subject: [PATCH 19/20] docs/readme: include useBinaryProtocol: false in readme
 example

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 0bc60493..fde5987f 100644
--- a/README.md
+++ b/README.md
@@ -27,9 +27,9 @@ To instantiate the Chat SDK, create an [Ably client](https://ably.com/docs/getti
 
 ```ts
 import Chat from '@ably/chat';
-import { Realtime } from 'ably';
+import * as Ably from 'ably';
 
-const ably = new Realtime.Promise({ key: "<API-key>", clientId: "<client-ID>" });
+const ably = new Ably.Realtime({ key: "<API-key>", clientId: "<client-ID>", useBinaryProtocol: false });
 const chat = new Chat(ably);
 ```
 You can use [basic authentication](https://ably.com/docs/auth/basic) i.e. the API Key directly for testing purposes, however it is strongly recommended that you use [token authentication](https://ably.com/docs/auth/token) in production environments.
@@ -146,4 +146,4 @@ room.channel.on('attached', (stateChange) => {
 You can also get the realtime channel name of the chat room with
 ```ts
 room.channelName
-```
\ No newline at end of file
+```

From 7955be4479a5561ecf4acabf29718b291bb01837 Mon Sep 17 00:00:00 2001
From: Andy Ford <andy.ford@ably.com>
Date: Thu, 23 May 2024 09:05:01 +0100
Subject: [PATCH 20/20] chat/messages: use correct error code for unknown event
 received

It was using 4000 instead of 40000
---
 src/Messages.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Messages.ts b/src/Messages.ts
index e05a4ae9..cb923871 100644
--- a/src/Messages.ts
+++ b/src/Messages.ts
@@ -222,7 +222,7 @@ export class Messages extends EventEmitter<MessageEventsMap> {
         return true;
       }
       default:
-        throw new Ably.ErrorInfo(`Received illegal event="${name}"`, 400, 4000);
+        throw new Ably.ErrorInfo(`Received illegal event="${name}"`, 40000, 400);
     }
   }
 }