diff --git a/src/pages/docs/test-stepped-sidebar.mdx b/src/pages/docs/test-stepped-sidebar.mdx deleted file mode 100644 index 367e5e813f..0000000000 --- a/src/pages/docs/test-stepped-sidebar.mdx +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Getting Started with Chat (Stepped Tutorial) -meta_description: "A step-by-step guide to setting up and using Ably Chat." ---- - -This is a test page to demonstrate the stepped sidebar functionality. Follow these numbered steps to get started with Ably Chat. - -## Introduction - -Before diving into the setup process, let's understand what Ably Chat provides and why you might want to use it. - -## Create a client - - -First, you need to create an Ably Chat client instance. This client will be used to interact with the Ably Chat API. - -```javascript -import * as Ably from 'ably'; -import { ChatClient } from '@ably/chat'; - -const realtimeClient = new Ably.Realtime({ - key: 'your-api-key', - clientId: 'unique-client-id' -}); - -const chatClient = new ChatClient(realtimeClient); -``` - -The client ID should be a unique identifier for the user. This is used to track which messages belong to which users. - -## Connect to a room - -Once you have a client, you can connect to a chat room. Rooms are the main way to organize conversations in Ably Chat. - -```javascript -const room = await chatClient.rooms.get('my-chat-room', { - presence: { enableEvents: true }, - typing: { heartbeatThrottleMs: 5000 } -}); - -await room.attach(); -``` - -The room ID can be any string that uniquely identifies your room. If the room doesn't exist, it will be created automatically. - -### Room configuration options Room configuration options Room configuration options Room configuration options - -You can configure various features when creating a room: - -- **Presence**: Track who is currently in the room -- **Typing indicators**: Show when users are typing -- **Occupancy**: Track the number of users in the room -- **Reactions**: Enable emoji reactions to messages - -## Send messages - -Now that you're connected to a room, you can start sending messages: - -```javascript -await room.messages.send({ text: 'Hello, world!' }); -``` - -You can also send messages with additional metadata: - -```javascript -await room.messages.send({ - text: 'Hello!', - metadata: { - type: 'greeting', - timestamp: Date.now() - } -}); -``` - -## Subscribe to messages - -To receive messages from other users, you need to subscribe to the room's message events: - -```javascript -const { unsubscribe } = room.messages.subscribe((message) => { - console.log('Received message:', message.text); - console.log('From:', message.clientId); - console.log('At:', message.timestamp); -}); - -// Later, when you want to stop receiving messages -unsubscribe(); -``` - -The subscription will continue to receive messages until you call the `unsubscribe` function. - -## Add presence tracking - -Presence tracking allows you to see who is currently in the room and track their status: - -```javascript -// Enter the room's presence set -await room.presence.enter({ status: 'online' }); - -// Subscribe to presence updates -room.presence.subscribe((presenceEvent) => { - console.log('Presence update:', presenceEvent.action); - console.log('User:', presenceEvent.clientId); - console.log('Data:', presenceEvent.data); -}); - -// Update your presence data -await room.presence.update({ status: 'away' }); - -// Leave the room's presence set -await room.presence.leave(); -``` - -## Additional features - -Beyond the core functionality, Ably Chat provides several additional features to enhance your chat experience. - -### Typing indicators - -Show when users are currently typing in the room: - -```javascript -// Start typing -await room.typing.start(); - -// Subscribe to typing events -room.typing.subscribe((event) => { - console.log(`${event.clientId} is typing`); -}); - -// Stop typing -await room.typing.stop(); -``` - -### Room reactions - -Allow users to send quick emoji reactions: - -```javascript -// Send a reaction -await room.reactions.send({ type: 'like' }); - -// Subscribe to reactions -room.reactions.subscribe((reaction) => { - console.log(`${reaction.clientId} sent: ${reaction.type}`); -}); -``` - -## Next steps - -Now that you've completed the basic setup, you can explore more advanced features: - -- Learn about [message history and pagination](/docs/chat/rooms/messages) -- Implement [occupancy tracking](/docs/chat/rooms/occupancy) -- Set up [webhooks for chat events](/docs/chat/webhooks) -- Configure [push notifications](/docs/chat/push-notifications)