Skip to content

Commit 3d7feab

Browse files
committed
chat: add Jetpack Compose support to documentation
- Added examples showcasing the use of Jetpack Compose APIs in the chat SDK. - Updated documentation to include Jetpack Compose methods such as `collectAsPagingMessagesState()`, `collectAsCurrentlyTyping()`, `collectAsStatus()`, and others. - Extended sections with Jetpack Compose-specific code snippets for message reactions, typing events, room management, and more.
1 parent 5fc4795 commit 3d7feab

File tree

11 files changed

+883
-78
lines changed

11 files changed

+883
-78
lines changed

src/data/languages/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const languageKeys = [
2626
'css',
2727
'laravel',
2828
'typescript',
29+
'jetpack',
2930
] as const;
3031

3132
export type LanguageKey = (typeof languageKeys)[number];

src/pages/docs/chat/connect.mdx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ Use the <If lang="javascript">[`status`](https://sdk.ably.com/builds/ably/ably-c
2828
Use the [`currentStatus`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-react.UseChatConnectionResponse.html#currentStatus) property returned in the response of the [`useChatConnection`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.useChatConnection.html) hook to check which status a connection is currently in:
2929
</If>
3030

31+
<If lang="jetpack">
32+
Use the [`collectAsStatus()`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/jetpack/chat-extensions-compose/com.ably.chat.extensions.compose/collect-as-status.html) composable function to observe the connection status as a State:
33+
</If>
34+
3135
<Code>
3236
```javascript
3337
const connectionStatus = chatClient.connection.status;
@@ -56,6 +60,17 @@ let status = chatClient.connection.status
5660
```kotlin
5761
val connectionStatus = chatClient.connection.status
5862
```
63+
64+
```jetpack
65+
import com.ably.chat.extensions.compose.collectAsStatus
66+
67+
@Composable
68+
fun MyComponent(chatClient: ChatClient) {
69+
val connectionStatus by chatClient.connection.collectAsStatus()
70+
71+
Text("Connection status: $connectionStatus")
72+
}
73+
```
5974
</Code>
6075

6176
<If lang="react">
@@ -84,6 +99,10 @@ Listeners can also be registered to monitor the changes in connection status. An
8499
Use the <If lang="javascript">[`connection.onStatusChange()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-js.Connection.html#onStatusChange)</If><If lang="swift">[`connection.onStatusChange()`](https://sdk.ably.com/builds/ably/ably-chat-swift/main/AblyChat/documentation/ablychat/connection/onstatuschange%28%29-76t7)</If><If lang="kotlin">[`connection.status.onStatusChange()`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/dokka/chat/com.ably.chat/-connection/on-status-change.html)</If> method to register a listener for status change updates:
85100
</If>
86101

102+
<If lang="jetpack">
103+
In Jetpack Compose, you can use [`collectAsStatus()`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/jetpack/chat-extensions-compose/com.ably.chat.extensions.compose/collect-as-status.html) to observe status changes reactively:
104+
</If>
105+
87106
<Code>
88107
```javascript
89108
const { off } = chatClient.connection.onStatusChange((change) => console.log(change));
@@ -114,6 +133,21 @@ val (off) = chatClient.connection.onStatusChange { statusChange: ConnectionStatu
114133
println(statusChange.toString())
115134
}
116135
```
136+
137+
```jetpack
138+
import com.ably.chat.extensions.compose.collectAsStatus
139+
140+
@Composable
141+
fun MyComponent(chatClient: ChatClient) {
142+
val connectionStatus by chatClient.connection.collectAsStatus()
143+
144+
LaunchedEffect(connectionStatus) {
145+
println("Connection status changed to: $connectionStatus")
146+
}
147+
148+
Text("Connection status: $connectionStatus")
149+
}
150+
```
117151
</Code>
118152

119153
<If lang="javascript,kotlin">

src/pages/docs/chat/rooms/history.mdx

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ The history feature enables users to retrieve messages that have been previously
88
## Retrieve previously sent messages <a id="history"/>
99

1010
<If lang="javascript,swift,kotlin">
11-
Use the <If lang="javascript">[`messages.history()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-js.Messages.html#history)</If><If lang="swift">[`messages.history()`](https://sdk.ably.com/builds/ably/ably-chat-swift/main/AblyChat/documentation/ablychat/messages/history(withparams:))</If><If lang="kotlin">[`messages.history()`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/dokka/chat/com.ably.chat/-messages/history.html)</If> method to retrieve messages that have been previously sent to a room. This returns a paginated response, which can be queried further to retrieve the next set of messages.
11+
Use the <If lang="javascript">[`messages.history()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-js.Messages.html#history)</If><If lang="swift">[`messages.history()`](https://sdk.ably.com/builds/ably/ably-chat-swift/main/AblyChat/documentation/ablychat/messages/history(withparams:))</If><If lang="kotlin">[`messages.history()`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/dokka/chat/com.ably.chat/-messages/history.html)</If><If lang="jetpack">[`collectAsPagingMessagesState()`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/jetpack/chat-extensions-compose/com.ably.chat.extensions.compose/collect-as-paging-messages-state.html)</If> method to retrieve messages that have been previously sent to a room. This returns a paginated response, which can be queried further to retrieve the next set of messages.
12+
</If>
13+
14+
<If lang="jetpack">
15+
Use the [`collectAsPagingMessagesState()`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/jetpack/chat-extensions-compose/com.ably.chat.extensions.compose/collect-as-paging-messages-state.html) method to retrieve messages that have been previously sent to a room. This returns a paginated response, which can be queried further to retrieve the next set of messages.
1216
</If>
1317

1418
<If lang="react">
@@ -71,6 +75,28 @@ while (historicalMessages.hasNext()) {
7175

7276
println("End of messages")
7377
```
78+
79+
```jetpack
80+
import androidx.compose.foundation.lazy.LazyColumn
81+
import androidx.compose.material.Text
82+
import androidx.compose.runtime.Composable
83+
import androidx.compose.runtime.getValue
84+
import com.ably.chat.extensions.compose.collectAsPagingMessagesState
85+
86+
@Composable
87+
fun HistoryComponent(room: Room) {
88+
val pagingMessagesState by room.messages.collectAsPagingMessagesState(
89+
orderBy = OrderBy.NewestFirst
90+
)
91+
92+
LazyColumn {
93+
items(pagingMessagesState.messages.size) { index ->
94+
val message = pagingMessagesState.messages[index]
95+
Text("Message: ${message.text}")
96+
}
97+
}
98+
}
99+
```
74100
</Code>
75101

76102
The following optional parameters can be passed when retrieving previously sent messages:
@@ -90,6 +116,10 @@ Users can also retrieve historical messages that were sent to a room before the
90116
Use the <If lang="javascript">[`historyBeforeSubscribe()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-js.MessageSubscriptionResponse.html#historyBeforeSubscribe)</If><If lang="swift">[`historyBeforeSubscribe(withParams:)`](https://sdk.ably.com/builds/ably/ably-chat-swift/main/AblyChat/documentation/ablychat/messagesubscriptionresponse/historybeforesubscribe%28withparams%3A%29))</If><If lang="kotlin">[`getPreviousMessages()`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/dokka/chat/com.ably.chat/-messages-subscription/get-previous-messages.html)</If> function returned as part of a [message subscription](/docs/chat/rooms/messages#subscribe) response to only retrieve messages that were received before the listener was subscribed to the room. This returns a paginated response, which can be queried further to retrieve the next set of messages.
91117
</If>
92118

119+
<If lang="jetpack">
120+
Use the [`getPreviousMessages()`](https://sdk.ably.com/builds/ably/ably-chat-kotlin/main/dokka/chat/com.ably.chat/-messages-subscription/get-previous-messages.html) function returned as part of a [message subscription](/docs/chat/rooms/messages#subscribe) response to only retrieve messages that were received before the listener was subscribed to the room. This returns a paginated response, which can be queried further to retrieve the next set of messages.
121+
</If>
122+
93123
<If lang="react">
94124
Use the [`historyBeforeSubscribe()`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/interfaces/chat-react.UseMessagesResponse.html#historyBeforeSubscribe) method available from the response of the `useMessages` hook to only retrieve messages that were received before the listener subscribed to the room. As long as a defined value is provided for the listener, and there are no message discontinuities, `historyBeforeSubscribe()` will return messages from the same point across component renders. If the listener becomes undefined, the subscription to messages will be removed. If you subsequently redefine the listener then `historyBeforeSubscribe()` will return messages from the new point of subscription. This returns a paginated response, which can be queried further to retrieve the next set of messages.
95125
</If>
@@ -157,7 +187,7 @@ val subscription = room.messages.subscribe {
157187
println("New message received")
158188
}
159189

160-
var historicalMessages = subscription.historyBeforeSubscribe(limit = 50)
190+
var historicalMessages = subscription.getPreviousMessages(limit = 50)
161191
println(historicalMessages.items.toString())
162192

163193
while (historicalMessages.hasNext()) {
@@ -167,6 +197,34 @@ while (historicalMessages.hasNext()) {
167197

168198
println("End of messages")
169199
```
200+
201+
```jetpack
202+
import androidx.compose.runtime.*
203+
import com.ably.chat.extensions.compose.collectAsPagingMessagesState
204+
205+
@Composable
206+
fun HistoryBeforeSubscribeComponent(room: Room) {
207+
DisposableEffect(room) {
208+
val subscription = room.messages.subscribe {
209+
println("New message received")
210+
}
211+
212+
var historicalMessages = subscription.getPreviousMessages(limit = 50)
213+
println(historicalMessages.items.toString())
214+
215+
while (historicalMessages.hasNext()) {
216+
historicalMessages = historicalMessages.next()
217+
println(historicalMessages.items.toString())
218+
}
219+
220+
println("End of messages")
221+
222+
onDispose {
223+
subscription.unsubscribe()
224+
}
225+
}
226+
}
227+
```
170228
</Code>
171229

172230
The following parameters can be passed when retrieving previously sent messages:

0 commit comments

Comments
 (0)