chat docs: fix react-ui-kit snippets

[sacOO7]

• Fixes deprecated snippets with latest implementation.
• Related to https://ably.atlassian.net/browse/DX-485

Summary by CodeRabbit

• Documentation
  • Updated MessageInput component API: replaced onSend prop with onSent that receives Message objects; removed className prop
  • Enhanced message editing, deletion, and reaction handling with improved Message object integration
  • Expanded Avatar API with new methods for creating, clearing, importing/exporting, and managing avatars
  • Refined message permissions to support granular own/any controls for updates and deletions

[coderabbitai]

Walkthrough

Documentation updates to chat SDK components and providers, reflecting API changes to MessageInput callbacks, message operation patterns with Message objects, granular permission structures, and expanded avatar management methods including creation, retrieval, clearing, and synchronization capabilities.

Changes

Cohort / File(s)	Summary
MessageInput & ChatMessage Components src/pages/docs/chat/react-ui-kit/components.mdx	Updated MessageInput prop from onSend(text) to onSent(message: Message), removed className prop. Revised message operations (edit, delete, reactions) to use Message objects with appropriate type parameters; updated imports to include Message and MessageReactionType from @ably/chat.
Chat Settings & Avatar API src/pages/docs/chat/react-ui-kit/providers.mdx	Refined chat settings with granular message permission flags (allowMessageUpdatesOwn, allowMessageUpdatesAny, etc.). Expanded useAvatar hook documentation with new methods: createAvatarForUser/Room, getUserAvatars/getRoomAvatars, clearUserAvatars/clearRoomAvatars/clearAllAvatars, exportAvatars, importAvatars, and onAvatarChange subscription.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 The docs hop forth with clarity,
New Message flows and avatars fair,
Permissions split with care and flair,
API dances, fresh and bright,
The SDK docs now shining right! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'chat docs: fix react-ui-kit snippets' is concise and directly describes the main change—updating React UI kit documentation snippets to reflect current API usage patterns.
Linked Issues check	✅ Passed	The PR addresses DX-485 by updating documentation snippets to reflect public API changes in the SDK (Message objects, MessageReactionType, updated method signatures for reactions, deletions, and edits). The changes demonstrate API compliance review required by the issue.
Out of Scope Changes check	✅ Passed	All changes are focused on documentation updates for the React UI kit components (MessageInput, ChatMessage) and providers (useAvatar hook). No unrelated code changes detected; updates align with SDK API evolution.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/react-ui-kit-doc

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sacOO7]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/pages/docs/chat/react-ui-kit/providers.mdx (1)

387-391: ⚠️ Potential issue | 🟡 Minor

Inconsistent API usage: getAvatarForUser called with two arguments.

Line 391 uses getAvatarForUser(userId, displayName) with two arguments, but the updated API documentation (lines 333-334) and the UserAvatar example (lines 363-368) show getAvatarForUser takes a single clientId argument and returns undefined if the avatar doesn't exist. Creation requires createAvatarForUser(clientId, displayName).

Proposed fix to align with the new API pattern

 function UserAvatarManager() {
-  const { getAvatarForUser, setUserAvatar } = useAvatar();
+  const { getAvatarForUser, createAvatarForUser, setUserAvatar } = useAvatar();
   const [userId] = useState('user-123');
   const [displayName] = useState('John Doe');

-  const avatar = getAvatarForUser(userId, displayName);
+  // Get avatar from cache, or create if it doesn't exist
+  let avatar = getAvatarForUser(userId);
+  if (!avatar) {
+    avatar = createAvatarForUser(userId, displayName);
+  }

[splindsay-92]

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

[sacOO7]

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

[sacOO7]

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