Skip to content

Commit 3b2edb7

Browse files
splindsay-92splindsay-92
authored
Merge pull request #2907 from ably/chat/update-chat-examples
Version bump chat-js and chat-react-ui-kits
2 parents deaaa51 + 4364a7e commit 3b2edb7

File tree

14 files changed

+50
-49
lines changed

14 files changed

+50
-49
lines changed

‎examples/chat-ui-app/react/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
# Ably Chat UI React Components Example
1+
# Ably Chat UI React Kit Example
22

3-
This example demonstrates how to use the Ably Chat UI React Components to quickly build a full-featured chat application with minimal code.
3+
This example demonstrates how to use the Ably Chat UI React Kit to quickly build a full-featured chat application with minimal code.
44

55
It showcases the use of the `App` component, which provides a complete chat interface with room management, message handling, and user interactions.
66

77
## Resources
88

9-
This example uses the `App` component from the Ably Chat UI React Components library, and is wrapped with the necessary providers:
9+
This example uses the `App` component from the Ably Chat UI React Kit, and is wrapped with the necessary providers:
1010

1111
- `ThemeProvider`: Manages light/dark mode theming
1212
- `AvatarProvider`: Handles avatar generation and display

‎examples/chat-ui-app/react/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {
66
ThemeProvider,
77
AvatarProvider,
88
ChatSettingsProvider,
9-
} from '@ably/chat-react-ui-components';
10-
import '@ably/chat-react-ui-components/dist/style.css';
9+
} from '@ably/chat-react-ui-kit';
10+
import '@ably/chat-react-ui-kit/dist/style.css';
1111
import 'minifaker/locales/en';
1212
import minifaker from 'minifaker';
1313

‎examples/chat-ui-chat-window/react/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
# Ably Chat UI React Components - ChatWindow Example
1+
# Ably Chat UI React Kit - ChatWindow Example
22

3-
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.
3+
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.
44

55
The `ChatWindow` component provides the main chat interface for a room, including message display, input, and custom header/footer content.
66

77
## Resources
88

9-
This example uses the `ChatWindow` component from the Ably Chat UI React Components library, and is wrapped with the necessary providers:
9+
This example uses the `ChatWindow` component from the Ably Chat UI React Kit, and is wrapped with the necessary providers:
1010

1111
- `ThemeProvider`: Manages light/dark mode theming
1212
- `AvatarProvider`: Handles avatar generation and display

‎examples/chat-ui-chat-window/react/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
ThemeProvider,
88
AvatarProvider,
99
ChatSettingsProvider,
10-
} from '@ably/chat-react-ui-components';
11-
import '@ably/chat-react-ui-components/dist/style.css';
10+
} from '@ably/chat-react-ui-kit';
11+
import '@ably/chat-react-ui-kit/dist/style.css';
1212
import 'minifaker/locales/en';
1313
import minifaker from 'minifaker';
1414

‎examples/chat-ui-sidebar/react/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
# Ably Chat UI React Components - Sidebar Example
1+
# Ably Chat UI React Kit - Sidebar Example
22

3-
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.
3+
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.
44

55
The `Sidebar` component provides room navigation and management functionality, allowing users to create, join, and leave rooms, as well as toggle between them.
66

77
## Resources
88

9-
This example uses the `Sidebar` component from the Ably Chat UI React Components library, and is wrapped with the necessary providers:
9+
This example uses the `Sidebar` component from the Ably Chat UI React Kit, and is wrapped with the necessary providers:
1010

1111
- `ThemeProvider`: Manages light/dark mode theming
1212
- `AvatarProvider`: Handles avatar generation and display

‎examples/chat-ui-sidebar/react/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { useState } from 'react';
22
import * as Ably from 'ably';
33
import { ChatClient, RoomOptions } from '@ably/chat';
44
import { ChatClientProvider } from '@ably/chat/react';
5-
import { AvatarProvider, ChatSettingsProvider, Sidebar, ThemeProvider } from '@ably/chat-react-ui-components';
6-
import '@ably/chat-react-ui-components/dist/style.css';
5+
import { AvatarProvider, ChatSettingsProvider, Sidebar, ThemeProvider } from '@ably/chat-react-ui-kit';
6+
import '@ably/chat-react-ui-kit/dist/style.css';
77
import 'minifaker/locales/en';
88
import minifaker from 'minifaker';
99

‎examples/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,10 @@
102102
"spaces-member-location-react": "yarn workspace spaces-member-location-react dev"
103103
},
104104
"dependencies": {
105-
"@ably/chat": "^0.14.0",
106-
"@ably/chat-react-ui-components": "^0.1.2",
105+
"@ably/chat": "^0.15.0",
106+
"@ably/chat-react-ui-kit": "^0.1.3",
107107
"@ably/spaces": "^0.4.0",
108-
"ably": "^2.13.0",
108+
"ably": "^2.14.0",
109109
"cors": "^2.8.5",
110110
"franken-ui": "^2.0.0",
111111
"minifaker": "^1.34.1",

‎examples/yarn.lock‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
# yarn lockfile v1
33

44

5-
"@ably/chat-react-ui-components@^0.1.2":
6-
version "0.1.2"
7-
resolved "https://registry.yarnpkg.com/@ably/chat-react-ui-components/-/chat-react-ui-components-0.1.2.tgz#692919b0d1e66a0b6267057918a4fd6f4354bd1d"
8-
integrity sha512-WEEFburLyNieOb3Fvu/KXO1h/M93cUiAo8hsp3EoJOT1y0rFcVLdnDKDm+BPIHCT0PIVMr1sWZJQ9anuqT0y6A==
5+
"@ably/chat-react-ui-kit@^0.1.3":
6+
version "0.1.3"
7+
resolved "https://registry.yarnpkg.com/@ably/chat-react-ui-kit/-/chat-react-ui-kit-0.1.3.tgz#332d4db49d08b68702d33e9afea71384b11769c4"
8+
integrity sha512-GjwFS5j5/HKRm2LKqZedrBQKM8f+uzflIS3sy7Lkh0lzcWLm1u6FZSISg4ssRWIPVqFnY3lNAEc5Nl9EQzrJng==
99
dependencies:
1010
clsx "^2.1.1"
1111

12-
"@ably/chat@^0.14.0":
13-
version "0.14.1"
14-
resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.14.1.tgz#a547e84d5ebb05b8a64765d264a3440cfc2d8ad7"
15-
integrity sha512-hCKTpHMePvJ98vYB/PM/PEa49iP3SYsgJ8KhbVEI/LP+nuWN2BaZui0YPfnLkWXh5eQf1Fb0d5sPhY7/x2kOww==
12+
"@ably/chat@^0.15.0":
13+
version "0.15.0"
14+
resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.15.0.tgz#ec240b8931482aa27a4c46a36382a39634792e7e"
15+
integrity sha512-iimOwma57EBUImjsOunNfAF2btx11UU97N0e6k9SXH+ySpcgAvmI98n2/CU0aS2Yi3UjeJDiaYRfAEDtk11NIg==
1616
dependencies:
1717
async-mutex "^0.5.0"
1818
dequal "^2.0.3"
@@ -780,7 +780,7 @@
780780
magic-string "^0.27.0"
781781
react-refresh "^0.14.0"
782782

783-
ably@^2.13.0:
783+
ably@^2.14.0:
784784
version "2.14.0"
785785
resolved "https://registry.yarnpkg.com/ably/-/ably-2.14.0.tgz#257b762d6c5af27e42ad885e1e2fc650568ac3a3"
786786
integrity sha512-GWNza+URnh/W5IuoJX7nXJpQCs2Dxby6t5A20vL3PBqGIJceA94/1xje4HOZbqFtMEPkRVsYHBIEuQRWL+CuvQ==
@@ -2675,6 +2675,7 @@ [email protected]:
26752675
integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
26762676

26772677
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
2678+
name string-width-cjs
26782679
version "4.2.3"
26792680
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
26802681
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==

‎src/components/Examples/ExamplesRenderer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@ const UserIndicator = ({ user }: { user: string }) => {
3737

3838
const getDependencies = (id: string, products: string[], activeLanguage: LanguageKey) => {
3939
return {
40-
ably: '^2.13.0',
40+
ably: '^2.14.0',
4141
nanoid: '^5.0.7',
4242
minifaker: '1.34.1',
4343
'franken-ui': '^2.0.0',
4444
...(products.includes('auth') ? { cors: '^2.8.5' } : {}),
4545
...(products.includes('chat')
46-
? { '@ably/chat': '^0.14.0', '@ably/chat-react-ui-components': '^0.1.2', clsx: '^2.1.1' }
46+
? { '@ably/chat': '^0.15.0', '@ably/chat-react-ui-kit': '^0.1.3', clsx: '^2.1.1' }
4747
: {}),
4848
...(products.includes('spaces') ? { '@ably/spaces': '^0.4.0' } : {}),
4949
...(id === 'spaces-component-locking' ? { 'usehooks-ts': '^3.1.0' } : {}),

‎src/data/examples/index.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,35 +56,35 @@ export const examples: Example[] = [
5656
{
5757
id: 'chat-ui-app',
5858
name: 'Chat App Component',
59-
description: 'Use the Chat UI App component to quickly add a functionality app.',
59+
description: `Use the Chat UI Kit's App component to quickly add a functionality app.`,
6060
products: ['chat'],
6161
languages: ['react'],
6262
layout: 'single-large',
6363
visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'],
64-
metaTitle: `Build a chat app with Ably’s Chat UI App Component`,
65-
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.`,
64+
metaTitle: `Build a chat app with Ably’s Chat UI Kit's App Component`,
65+
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.`,
6666
},
6767
{
6868
id: 'chat-ui-chat-window',
6969
name: 'Chat Window Component',
70-
description: 'Use the Chat UI Chat Window component to add a realtime chat window to your app.',
70+
description: `Use the Chat UI Kit's Chat Window component to add a realtime chat window to your app.`,
7171
products: ['chat'],
7272
languages: ['react'],
7373
layout: 'single-large',
7474
visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'],
75-
metaTitle: `Add a chat window with Ably’s Chat UI Chat Window Component`,
76-
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.`,
75+
metaTitle: `Add a chat window with Ably’s Chat UI Kit's Chat Window Component`,
76+
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.`,
7777
},
7878
{
7979
id: 'chat-ui-sidebar',
8080
name: 'Chat Sidebar Component',
81-
description: 'Use the Chat UI Sidebar component to add a sidebar for managing chat rooms.',
81+
description: `Use the Chat UI Kit's Sidebar component to add a sidebar for managing chat rooms.`,
8282
products: ['chat'],
8383
languages: ['react'],
8484
layout: 'single-vertical',
8585
visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'],
86-
metaTitle: `Add a chat sidebar with Ably’s Chat UI Sidebar Component`,
87-
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.`,
86+
metaTitle: `Add a chat sidebar with Ably’s Chat UI Kit's Sidebar Component`,
87+
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.`,
8888
},
8989
{
9090
id: 'liveobjects-live-counter',

0 commit comments

Comments
 (0)