publish message

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
-```
+```

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`.

demo/api/ably-token-request/index.ts

@@ -28,8 +28,8 @@ 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]*': ['*'],
+      '*': ['*'],
     },
     clientId: clientId,
   });

demo/netlify.toml

@@ -3,7 +3,7 @@
   command = "npm run build"
 
 [functions]
-  directory = "api"
+  directory = "demo/api"
   external_node_modules = ["express"]
   node_bundler = "esbuild"
 

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"

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

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,26 +20,28 @@ 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();
+
+    // let mounted = true;
+    // 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;
+      // mounted = false;
       room.messages.unsubscribe(MessageEvents.created, handleAdd);
     };
   }, [clientId, room]);

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);