From fdb6f29a7c35fde887f4913c86302674d8d84b12 Mon Sep 17 00:00:00 2001 From: Steven Lindsay Date: Fri, 23 May 2025 10:14:42 +0100 Subject: [PATCH] Add initial documentation for Ably Chat React UI Components Introduce a "Coming Soon" page for the Ably Chat React UI Components library. --- src/data/nav/chat.ts | 9 ++++ src/pages/docs/chat/ui-kit/coming-soon.mdx | 61 ++++++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 src/pages/docs/chat/ui-kit/coming-soon.mdx diff --git a/src/data/nav/chat.ts b/src/data/nav/chat.ts index 67d487f3cc..0067594fd7 100644 --- a/src/data/nav/chat.ts +++ b/src/data/nav/chat.ts @@ -82,6 +82,15 @@ export default { }, ], }, + { + name: "React ui components", + pages: [ + { + name: 'Coming soon', + link: '/docs/chat/ui-kit/coming-soon', + }, + ], + }, { name: 'Moderation', pages: [ diff --git a/src/pages/docs/chat/ui-kit/coming-soon.mdx b/src/pages/docs/chat/ui-kit/coming-soon.mdx new file mode 100644 index 0000000000..8b6c028f6a --- /dev/null +++ b/src/pages/docs/chat/ui-kit/coming-soon.mdx @@ -0,0 +1,61 @@ +--- +title: Chat React UI components +meta_description: "Ably Chat React UI Components - Coming Soon" +--- + +## Coming soon + +The Ably Chat React UI Components library! A component library built specifically for the [`@ably/chat`](https://github.com/ably/ably-chat-js) SDK. +We’re actively developing new features and improvements to make building chat applications with Ably even easier. + +## Roadmap + +### Quick Start – Plug-and-Play App + +The package ships with a high-level `App` component that wraps the core chat window, theming, and providers. +All you need is a configured `ChatClient` and an Ably `Realtime` instance: + +```tsx +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { App } from 'ably-chat-react-ui-components'; +import { ChatClient } from '@ably/chat'; +import { AblyProvider } from 'ably/react'; +import * as Ably from 'ably'; + +const realtimeClient = new Ably.Realtime('ably-token'); +const chatClient = new ChatClient(realtimeClient); +ReactDOM.createRoot(document.getElementById('root')).render( + + + + + ); +``` + +### Enhanced Customization +We’re adding some pre-defined layout options and style variants, but these will eventually be +customizable via CSS variables and props to allow for easy theming and styling. + +### Additional Components +Expect emoji pickers, room management, presence, typing indicators, and more. + +### Accessibility +Accessibility for things like keyboard navigation, screen-reader support, and more will be supported. + + +## Expected Features (More to Come) + +| Feature | Description | +| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | +| **Chat Window** | Fully-functional chat window that handles message events and displays chat messages. | +| **Message Bubbles** | Styling for sent vs received messages with edit/delete support.| +| **Typing Indicators** | Real-time indicators showing who is currently typing in the room. | +| **Message Reactions** | Emoji reactions with per-emoji counters so users can react to messages. | +| **Room Reactions** | Emoji reactions on the room level, allowing users to react to the room as a whole. | +| **User Presence** | Real-time online/offline status and “last seen” timestamps; list of members currently in the room. | +| **Room Management** | Create, join, leave, and list rooms. | +| **Message Pagination / Infinite Scroll** | Paginated message history with infinite-scroll UX. | +| **Theming** | Dark/light modes, CSS variables and styling via props. | +| **Accessibility (a11y)** | Keyboard navigation, screen-reader support, focus management, and more. | +| **Dev-Tooling** | Storybook component library, React hooks package, TypeScript types, and mock server for unit tests. |