Skip to content

chat docs: fix react-ui-kit snippets #3179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sacOO7 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chat docs: fix react-ui-kit snippets #3179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions src/pages/docs/chat/react-ui-kit/components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,6 @@ The `MessageInput` component provides a comprehensive text input interface for c
|------|-------------|
| `onSent` | Callback function triggered when a message is sent |
| `placeholder` | Placeholder text displayed in the input field when empty |
| `className` | Additional CSS class names to apply to the input container |
| `enableTyping` | Whether to enable typing indicators on user input |
| `onSendError` | Callback triggered when an error occurs while sending a message |

Expand All @@ -300,18 +299,15 @@ The MessageInput component automatically triggers typing indicators when the use
<Code>
```react
import { MessageInput } from '@ably/chat-react-ui-kit';
import { useMessages } from '@ably/chat/react';

// Basic usage
const { sendMessage } = useMessages();
import { Message } from '@ably/chat';

const handleSendMessage = (text: string) => {
console.log(`Sending message: ${text}`);
sendMessage({ text });
// Basic usage - onSent receives the sent Message object
const handleMessageSent = (message: Message) => {
console.log(`Message sent with serial: ${message.serial}`);
};

<MessageInput
onSend={handleSendMessage}
onSent={handleMessageSent}
placeholder="Type your message here..."
/>
```
Expand Down Expand Up @@ -529,7 +525,7 @@ The `ChatMessage` component displays an individual chat message with interactive
<Code>
```react
import { ChatMessage } from '@ably/chat-react-ui-kit';
import { Message } from '@ably/chat';
import { Message, MessageReactionType } from '@ably/chat';
import { useMessages } from '@ably/chat/react';

const { updateMessage, deleteMessage, sendReaction, deleteReaction } = useMessages();
Expand All @@ -538,19 +534,24 @@ const { updateMessage, deleteMessage, sendReaction, deleteReaction } = useMessag
message={message}
onEdit={(message: Message, newText: string) => {
console.log(`Editing message with serial: ${message.serial}, setting text to: ${newText}`);
updateMessage(message.serial, { text: newText });
// Use message.copy() to create an updated message with the new text
const updated = message.copy({ text: newText, metadata: message.metadata, headers: message.headers });
updateMessage(message.serial, updated);
}}
onDelete={(message: Message) => {
console.log(`Deleting message with serial: ${message.serial}`);
deleteMessage(message.serial);
// Pass an optional description for the deletion
deleteMessage(message.serial, { description: 'deleted by user' });
}}
onReactionAdd={(message: Message, emoji: string) => {
console.log(`Adding reaction ${emoji} to message with serial: ${message.serial}`);
sendReaction(message.serial, { name: emoji });
// Include the reaction type (e.g., MessageReactionType.Distinct)
sendReaction(message.serial, { type: MessageReactionType.Distinct, name: emoji });
}}
onReactionRemove={(message: Message, emoji: string) => {
console.log(`Removing reaction ${emoji} from message with serial: ${message.serial}`);
deleteReaction(message.serial, { name: emoji });
// Include the reaction type when removing
deleteReaction(message.serial, { type: MessageReactionType.Distinct, name: emoji });
}}
/>
```
Expand Down
44 changes: 29 additions & 15 deletions src/pages/docs/chat/react-ui-kit/providers.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,10 @@ const globalSettings = {
const roomSettings = {
'general': { allowMessageUpdatesOwn: true },
'announcements': {
allowMessageUpdates: false,
allowMessageDeletes: false,
allowMessageUpdatesOwn: false,
allowMessageUpdatesAny: false,
allowMessageDeletesOwn: false,
allowMessageDeletesAny: false,
},
};

Expand Down Expand Up @@ -123,7 +125,7 @@ const { getEffectiveSettings } = useChatSettings();
const roomSettings = getEffectiveSettings('general');

// Check if message editing is allowed in this room
if (roomSettings.allowMessageUpdates) {
if (roomSettings.allowMessageUpdatesOwn || roomSettings.allowMessageUpdatesAny) {
// Show edit button
}
```
Expand Down Expand Up @@ -328,15 +330,20 @@ The `useAvatar` hook provides access to the avatar context with comprehensive av

| Property | Description |
|----------|-------------|
| `getAvatarForUser` | Get avatar for a user |
| `getAvatarForRoom` | Get avatar for a room |
| `setUserAvatar` | Set avatar for a user |
| `setRoomAvatar` | Set avatar for a room |
| `resetUserAvatar` | Reset avatar for a user |
| `resetRoomAvatar` | Reset avatar for a room |
| `exportAvatars` | Export all avatars as a JSON string |
| `importAvatars` | Import avatars from a JSON string |
| `onAvatarChange` | Register an avatar change callback |
| `getAvatarForUser` | Get avatar for a user if it exists in cache (returns `AvatarData \| undefined`) |
| `createAvatarForUser` | Create avatar for a user and add to cache (returns `AvatarData`) |
| `getAvatarForRoom` | Get avatar for a room if it exists in cache (returns `AvatarData \| undefined`) |
| `createAvatarForRoom` | Create avatar for a room and add to cache (returns `AvatarData`) |
| `setUserAvatar` | Update an existing user avatar or create a new one |
| `setRoomAvatar` | Update an existing room avatar or create a new one |
| `getUserAvatars` | Get all cached user avatars |
| `getRoomAvatars` | Get all cached room avatars |
| `clearUserAvatars` | Clear all user avatars from cache |
| `clearRoomAvatars` | Clear all room avatars from cache |
| `clearAllAvatars` | Clear all avatars from cache |
| `exportAvatars` | Export all avatar data for backup/migration |
| `importAvatars` | Import avatar data from backup/migration |
| `onAvatarChange` | Register a callback for avatar change events |

### Examples

Expand All @@ -348,10 +355,17 @@ You can use the `useAvatar` hook to manage user and room avatars in your chat ap
import { useState, useCallback } from 'react';
import { useAvatar } from '@ably/chat-react-ui-kit';

// Basic usage
// Basic usage - getAvatarForUser returns undefined if avatar doesn't exist
function UserAvatar({ clientId, displayName }) {
const { getAvatarForUser } = useAvatar();
const avatar = getAvatarForUser(clientId, displayName);
const { getAvatarForUser, createAvatarForUser } = useAvatar();

// getAvatarForUser returns undefined if avatar doesn't exist in cache
let avatar = getAvatarForUser(clientId);

// Create avatar if it doesn't exist
if (!avatar) {
avatar = createAvatarForUser(clientId, displayName);
Copy link
Contributor

@splindsay-92 splindsay-92 Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this works, where did you find the code snippet?

Copy link
Contributor Author

@sacOO7 sacOO7 Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can check -> https://github.com/ably/ably-chat-react-ui-kit/blob/b06cd98aa9cfd150141490048283ca20f0593275/src/hooks/use-user-avatar.tsx#L178

Copy link
Contributor Author

@sacOO7 sacOO7 Feb 6, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's implemented in https://github.com/ably/ably-chat-react-ui-kit/blob/main/src/providers/avatar-provider.tsx

}

return (
<div className={`w-10 h-10 rounded-full flex items-center justify-center text-white font-medium ${avatar.color}`}>
Expand Down