From 4364a7ebe4173224b277665ff534177be9963d19 Mon Sep 17 00:00:00 2001 From: Steven Lindsay Date: Tue, 21 Oct 2025 18:33:13 +0100 Subject: [PATCH] chore: update imports and dependencies and related docs for chat-js and chat-react-ui-kit version bumps --- examples/chat-ui-app/react/README.md | 6 +++--- examples/chat-ui-app/react/src/App.tsx | 4 ++-- examples/chat-ui-chat-window/react/README.md | 6 +++--- .../chat-ui-chat-window/react/src/App.tsx | 4 ++-- examples/chat-ui-sidebar/react/README.md | 6 +++--- examples/chat-ui-sidebar/react/src/App.tsx | 4 ++-- examples/package.json | 6 +++--- examples/yarn.lock | 19 ++++++++++--------- src/components/Examples/ExamplesRenderer.tsx | 4 ++-- src/data/examples/index.ts | 18 +++++++++--------- src/data/languages/languageData.ts | 4 ++-- .../chat/getting-started/react-ui-kit.mdx | 4 ++-- src/pages/docs/chat/index.mdx | 12 ++++++------ .../chat/react-ui-kit/component-styling.mdx | 2 +- 14 files changed, 50 insertions(+), 49 deletions(-) diff --git a/examples/chat-ui-app/react/README.md b/examples/chat-ui-app/react/README.md index b92b23d687..a698d208b2 100644 --- a/examples/chat-ui-app/react/README.md +++ b/examples/chat-ui-app/react/README.md @@ -1,12 +1,12 @@ -# Ably Chat UI React Components Example +# Ably Chat UI React Kit Example -This example demonstrates how to use the Ably Chat UI React Components to quickly build a full-featured chat application with minimal code. +This example demonstrates how to use the Ably Chat UI React Kit to quickly build a full-featured chat application with minimal code. It showcases the use of the `App` component, which provides a complete chat interface with room management, message handling, and user interactions. ## Resources -This example uses the `App` component from the Ably Chat UI React Components library, and is wrapped with the necessary providers: +This example uses the `App` component from the Ably Chat UI React Kit, and is wrapped with the necessary providers: - `ThemeProvider`: Manages light/dark mode theming - `AvatarProvider`: Handles avatar generation and display diff --git a/examples/chat-ui-app/react/src/App.tsx b/examples/chat-ui-app/react/src/App.tsx index d6f942c561..d758c5daf4 100644 --- a/examples/chat-ui-app/react/src/App.tsx +++ b/examples/chat-ui-app/react/src/App.tsx @@ -6,8 +6,8 @@ import { ThemeProvider, AvatarProvider, ChatSettingsProvider, -} from '@ably/chat-react-ui-components'; -import '@ably/chat-react-ui-components/dist/style.css'; +} from '@ably/chat-react-ui-kit'; +import '@ably/chat-react-ui-kit/dist/style.css'; import 'minifaker/locales/en'; import minifaker from 'minifaker'; diff --git a/examples/chat-ui-chat-window/react/README.md b/examples/chat-ui-chat-window/react/README.md index 9ece190634..25f054d22c 100644 --- a/examples/chat-ui-chat-window/react/README.md +++ b/examples/chat-ui-chat-window/react/README.md @@ -1,12 +1,12 @@ -# Ably Chat UI React Components - ChatWindow Example +# Ably Chat UI React Kit - ChatWindow Example -This example demonstrates how to use the `ChatWindow` component from the Ably Chat UI React Components library to build a focused chat interface for a single room. +This example demonstrates how to use the `ChatWindow` component from the Ably Chat UI React Kit to build a focused chat interface for a single room. The `ChatWindow` component provides the main chat interface for a room, including message display, input, and custom header/footer content. ## Resources -This example uses the `ChatWindow` component from the Ably Chat UI React Components library, and is wrapped with the necessary providers: +This example uses the `ChatWindow` component from the Ably Chat UI React Kit, and is wrapped with the necessary providers: - `ThemeProvider`: Manages light/dark mode theming - `AvatarProvider`: Handles avatar generation and display diff --git a/examples/chat-ui-chat-window/react/src/App.tsx b/examples/chat-ui-chat-window/react/src/App.tsx index dd079837e1..12866326b3 100644 --- a/examples/chat-ui-chat-window/react/src/App.tsx +++ b/examples/chat-ui-chat-window/react/src/App.tsx @@ -7,8 +7,8 @@ import { ThemeProvider, AvatarProvider, ChatSettingsProvider, -} from '@ably/chat-react-ui-components'; -import '@ably/chat-react-ui-components/dist/style.css'; +} from '@ably/chat-react-ui-kit'; +import '@ably/chat-react-ui-kit/dist/style.css'; import 'minifaker/locales/en'; import minifaker from 'minifaker'; diff --git a/examples/chat-ui-sidebar/react/README.md b/examples/chat-ui-sidebar/react/README.md index 08c81cb431..6196faab01 100644 --- a/examples/chat-ui-sidebar/react/README.md +++ b/examples/chat-ui-sidebar/react/README.md @@ -1,12 +1,12 @@ -# Ably Chat UI React Components - Sidebar Example +# Ably Chat UI React Kit - Sidebar Example -This example demonstrates how to use the `Sidebar` component from the Ably Chat UI React Components library to build a chat application with room navigation and management. +This example demonstrates how to use the `Sidebar` component from the Ably Chat UI React Kit to build a chat application with room navigation and management. The `Sidebar` component provides room navigation and management functionality, allowing users to create, join, and leave rooms, as well as toggle between them. ## Resources -This example uses the `Sidebar` component from the Ably Chat UI React Components library, and is wrapped with the necessary providers: +This example uses the `Sidebar` component from the Ably Chat UI React Kit, and is wrapped with the necessary providers: - `ThemeProvider`: Manages light/dark mode theming - `AvatarProvider`: Handles avatar generation and display diff --git a/examples/chat-ui-sidebar/react/src/App.tsx b/examples/chat-ui-sidebar/react/src/App.tsx index 2673feff51..b8e5803708 100644 --- a/examples/chat-ui-sidebar/react/src/App.tsx +++ b/examples/chat-ui-sidebar/react/src/App.tsx @@ -2,8 +2,8 @@ import { useState } from 'react'; import * as Ably from 'ably'; import { ChatClient, RoomOptions } from '@ably/chat'; import { ChatClientProvider } from '@ably/chat/react'; -import { AvatarProvider, ChatSettingsProvider, Sidebar, ThemeProvider } from '@ably/chat-react-ui-components'; -import '@ably/chat-react-ui-components/dist/style.css'; +import { AvatarProvider, ChatSettingsProvider, Sidebar, ThemeProvider } from '@ably/chat-react-ui-kit'; +import '@ably/chat-react-ui-kit/dist/style.css'; import 'minifaker/locales/en'; import minifaker from 'minifaker'; diff --git a/examples/package.json b/examples/package.json index 896fd79730..2a83f596f4 100644 --- a/examples/package.json +++ b/examples/package.json @@ -102,10 +102,10 @@ "spaces-member-location-react": "yarn workspace spaces-member-location-react dev" }, "dependencies": { - "@ably/chat": "^0.14.0", - "@ably/chat-react-ui-components": "^0.1.2", + "@ably/chat": "^0.15.0", + "@ably/chat-react-ui-kit": "^0.1.3", "@ably/spaces": "^0.4.0", - "ably": "^2.13.0", + "ably": "^2.14.0", "cors": "^2.8.5", "franken-ui": "^2.0.0", "minifaker": "^1.34.1", diff --git a/examples/yarn.lock b/examples/yarn.lock index 5d0ca53fc7..8fc3dcf1d6 100644 --- a/examples/yarn.lock +++ b/examples/yarn.lock @@ -2,17 +2,17 @@ # yarn lockfile v1 -"@ably/chat-react-ui-components@^0.1.2": - version "0.1.2" - resolved "https://registry.yarnpkg.com/@ably/chat-react-ui-components/-/chat-react-ui-components-0.1.2.tgz#692919b0d1e66a0b6267057918a4fd6f4354bd1d" - integrity sha512-WEEFburLyNieOb3Fvu/KXO1h/M93cUiAo8hsp3EoJOT1y0rFcVLdnDKDm+BPIHCT0PIVMr1sWZJQ9anuqT0y6A== +"@ably/chat-react-ui-kit@^0.1.3": + version "0.1.3" + resolved "https://registry.yarnpkg.com/@ably/chat-react-ui-kit/-/chat-react-ui-kit-0.1.3.tgz#332d4db49d08b68702d33e9afea71384b11769c4" + integrity sha512-GjwFS5j5/HKRm2LKqZedrBQKM8f+uzflIS3sy7Lkh0lzcWLm1u6FZSISg4ssRWIPVqFnY3lNAEc5Nl9EQzrJng== dependencies: clsx "^2.1.1" -"@ably/chat@^0.14.0": - version "0.14.1" - resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.14.1.tgz#a547e84d5ebb05b8a64765d264a3440cfc2d8ad7" - integrity sha512-hCKTpHMePvJ98vYB/PM/PEa49iP3SYsgJ8KhbVEI/LP+nuWN2BaZui0YPfnLkWXh5eQf1Fb0d5sPhY7/x2kOww== +"@ably/chat@^0.15.0": + version "0.15.0" + resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.15.0.tgz#ec240b8931482aa27a4c46a36382a39634792e7e" + integrity sha512-iimOwma57EBUImjsOunNfAF2btx11UU97N0e6k9SXH+ySpcgAvmI98n2/CU0aS2Yi3UjeJDiaYRfAEDtk11NIg== dependencies: async-mutex "^0.5.0" dequal "^2.0.3" @@ -780,7 +780,7 @@ magic-string "^0.27.0" react-refresh "^0.14.0" -ably@^2.13.0: +ably@^2.14.0: version "2.14.0" resolved "https://registry.yarnpkg.com/ably/-/ably-2.14.0.tgz#257b762d6c5af27e42ad885e1e2fc650568ac3a3" integrity sha512-GWNza+URnh/W5IuoJX7nXJpQCs2Dxby6t5A20vL3PBqGIJceA94/1xje4HOZbqFtMEPkRVsYHBIEuQRWL+CuvQ== @@ -2675,6 +2675,7 @@ statuses@2.0.1: integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ== "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: + name string-width-cjs version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== diff --git a/src/components/Examples/ExamplesRenderer.tsx b/src/components/Examples/ExamplesRenderer.tsx index 770af88e08..2d252b5fde 100644 --- a/src/components/Examples/ExamplesRenderer.tsx +++ b/src/components/Examples/ExamplesRenderer.tsx @@ -37,13 +37,13 @@ const UserIndicator = ({ user }: { user: string }) => { const getDependencies = (id: string, products: string[], activeLanguage: LanguageKey) => { return { - ably: '^2.13.0', + ably: '^2.14.0', nanoid: '^5.0.7', minifaker: '1.34.1', 'franken-ui': '^2.0.0', ...(products.includes('auth') ? { cors: '^2.8.5' } : {}), ...(products.includes('chat') - ? { '@ably/chat': '^0.14.0', '@ably/chat-react-ui-components': '^0.1.2', clsx: '^2.1.1' } + ? { '@ably/chat': '^0.15.0', '@ably/chat-react-ui-kit': '^0.1.3', clsx: '^2.1.1' } : {}), ...(products.includes('spaces') ? { '@ably/spaces': '^0.4.0' } : {}), ...(id === 'spaces-component-locking' ? { 'usehooks-ts': '^3.1.0' } : {}), diff --git a/src/data/examples/index.ts b/src/data/examples/index.ts index d9ac0cd09d..ce75f4d31a 100644 --- a/src/data/examples/index.ts +++ b/src/data/examples/index.ts @@ -56,35 +56,35 @@ export const examples: Example[] = [ { id: 'chat-ui-app', name: 'Chat App Component', - description: 'Use the Chat UI App component to quickly add a functionality app.', + description: `Use the Chat UI Kit's App component to quickly add a functionality app.`, products: ['chat'], languages: ['react'], layout: 'single-large', visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'], - metaTitle: `Build a chat app with Ably’s Chat UI App Component`, - metaDescription: `Quickly add chat functionality to your React app with Ably’s Chat UI App Component. Build realtime chat interfaces with minimal setup and maximum reliability.`, + metaTitle: `Build a chat app with Ably’s Chat UI Kit's App Component`, + metaDescription: `Quickly add chat functionality to your React app with Ably’s Chat UI Kit's App Component. Build realtime chat interfaces with minimal setup and maximum reliability.`, }, { id: 'chat-ui-chat-window', name: 'Chat Window Component', - description: 'Use the Chat UI Chat Window component to add a realtime chat window to your app.', + description: `Use the Chat UI Kit's Chat Window component to add a realtime chat window to your app.`, products: ['chat'], languages: ['react'], layout: 'single-large', visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'], - metaTitle: `Add a chat window with Ably’s Chat UI Chat Window Component`, - metaDescription: `Easily integrate a chat window into your React app with Ably’s Chat UI Chat Window Component. Enable realtime messaging with minimal code and high reliability.`, + metaTitle: `Add a chat window with Ably’s Chat UI Kit's Chat Window Component`, + metaDescription: `Easily integrate a chat window into your React app with Ably’s Chat UI Kit Chat Window Component. Enable realtime messaging with minimal code and high reliability.`, }, { id: 'chat-ui-sidebar', name: 'Chat Sidebar Component', - description: 'Use the Chat UI Sidebar component to add a sidebar for managing chat rooms.', + description: `Use the Chat UI Kit's Sidebar component to add a sidebar for managing chat rooms.`, products: ['chat'], languages: ['react'], layout: 'single-vertical', visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'], - metaTitle: `Add a chat sidebar with Ably’s Chat UI Sidebar Component`, - metaDescription: `Integrate a chat sidebar into your React app with Ably’s Chat UI Sidebar Component. Manage chat rooms and user presence with ease and reliability.`, + metaTitle: `Add a chat sidebar with Ably’s Chat UI Kit's Sidebar Component`, + metaDescription: `Integrate a chat sidebar into your React app with Ably’s Chat UI Kit's Sidebar Component. Manage chat rooms and user presence with ease and reliability.`, }, { id: 'liveobjects-live-counter', diff --git a/src/data/languages/languageData.ts b/src/data/languages/languageData.ts index 4194f49a89..1c42bfd91a 100644 --- a/src/data/languages/languageData.ts +++ b/src/data/languages/languageData.ts @@ -24,8 +24,8 @@ export default { laravel: '1.0', }, chat: { - javascript: '0.14', - react: '0.14', + javascript: '0.15', + react: '0.15', swift: '0.9', kotlin: '0.8', }, diff --git a/src/pages/docs/chat/getting-started/react-ui-kit.mdx b/src/pages/docs/chat/getting-started/react-ui-kit.mdx index fc1b4bf615..cea08e6ee1 100644 --- a/src/pages/docs/chat/getting-started/react-ui-kit.mdx +++ b/src/pages/docs/chat/getting-started/react-ui-kit.mdx @@ -27,7 +27,7 @@ You'll create Ably clients, install the UI component package, and build a comple ``` -2. (Optional) Add Tailwind CSS if you want utility classes elsewhere in your app. The UI kit itself ships pre-compiled CSS, so Tailwind isn't required: +2. (Optional) Add Tailwind CSS if you want utility classes elsewhere in your app. The UI Kit itself ships pre-compiled CSS, so Tailwind isn't required: ```shell @@ -38,7 +38,7 @@ You'll create Ably clients, install the UI component package, and build a comple Follow the Tailwind Vite guide to configure the generated files. -3. Install the Chat UI kit and its peers: +3. Install the Chat UI Kit and its peers: ```shell diff --git a/src/pages/docs/chat/index.mdx b/src/pages/docs/chat/index.mdx index 74559f847c..78ee175919 100644 --- a/src/pages/docs/chat/index.mdx +++ b/src/pages/docs/chat/index.mdx @@ -11,7 +11,7 @@ The Chat SDK contains a set of purpose-built APIs that abstract away the complex * [Getting started: Chat in JavaScript / TypeScript](/docs/chat/getting-started/javascript) * [Getting started: Chat in React](/docs/chat/getting-started/react) -* [Getting started: Chat UI Kits in React](/docs/chat/getting-started/react-ui-components) +* [Getting started: Chat UI Kit in React](/docs/chat/getting-started/react-ui-kit) * [Getting started: Chat in React Native](/docs/chat/getting-started/react-native) * [Getting started: Chat in Android](/docs/chat/getting-started/android) * [Getting started: Chat in Kotlin (JVM)](/docs/chat/getting-started/jvm) @@ -27,7 +27,7 @@ Ably Chat provides the following key features: * [Typing indicators](#typing) * [Room reactions](#reactions) * [AI Moderation](#moderation) -* [React UI Kits](#react-ui-kits) +* [React UI Kit](#react-ui-kit) * [React Hooks](#react-hooks) ### Rooms and messages @@ -60,11 +60,11 @@ Each room can represent a 1:1 chat between an agent and a customer, a private me You can integrate seamlessly in minutes with a number of third-party moderation providers to take advantage of powerful AI models, or bring your own infrastructure via integrations with the likes of AWS Lambda to customize your experience. -### React UI Kits +### React UI Kit -[React UI Kits](/docs/chat/getting-started/react-ui-components) provide pre-built, customizable React components that make it even faster to add chat functionality to your applications. These components handle the presentation layer and user interactions, allowing you to focus on your application logic rather than building chat UI from scratch. +[React UI Kit](/docs/chat/getting-started/react-ui-kit) provide pre-built, customizable React components that make it even faster to add chat functionality to your applications. These components handle the presentation layer and user interactions, allowing you to focus on your application logic rather than building chat UI from scratch. -The UI Kits include components for message lists, input fields, user avatars, typing indicators, and more. They're designed to be flexible and themeable to match your application's design system. They are fully [open-source](https://github.com/ably/ably-chat-react-ui-components), so you can easily take the code as a starting point to further customize your own components. +The UI Kit includes components for message lists, input fields, user avatars, typing indicators, and more. They're designed to be flexible and themeable to match your application's design system. They are fully [open-source](https://github.com/ably/ably-chat-react-ui-kit), so you can easily take the code as a starting point to further customize your own components. ### React Hooks @@ -77,7 +77,7 @@ Take a look at a [livestream basketball game](https://ably-livestream-chat-demo. ## Next steps -The Ably Chat React UI kit uses Tailwind CSS for styling components, this gives you a utility-first approach to styling, allowing you to apply styles directly in your JSX using Tailwind's utility classes. +The Ably Chat React UI Kit uses Tailwind CSS for styling components, this gives you a utility-first approach to styling, allowing you to apply styles directly in your JSX using Tailwind's utility classes. This approach is designed to be straightforward to use, but does limit the ability to override styles at a granular level. ### CSS Import