Skip to content

Commit d33713d

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 d33713d

File tree

11 files changed

+883
-85
lines changed

11 files changed

+883
-85
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 & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
---
2-
title: Message storage and history
3-
meta_description: "Retrieve previously sent messages from history."
4-
---
5-
6-
The history feature enables users to retrieve messages that have been previously sent in a room. Ably stores chat messages for 30 days by default. You can extend this up to 365 days by [contacting us](https://ably.com/support).
7-
81
## Retrieve previously sent messages <a id="history"/>
92

103
<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.
4+
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.
5+
</If>
6+
7+
<If lang="jetpack">
8+
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.
129
</If>
1310

1411
<If lang="react">
@@ -71,6 +68,28 @@ while (historicalMessages.hasNext()) {
7168

7269
println("End of messages")
7370
```
71+
72+
```jetpack
73+
import androidx.compose.foundation.lazy.LazyColumn
74+
import androidx.compose.material.Text
75+
import androidx.compose.runtime.Composable
76+
import androidx.compose.runtime.getValue
77+
import com.ably.chat.extensions.compose.collectAsPagingMessagesState
78+
79+
@Composable
80+
fun HistoryComponent(room: Room) {
81+
val pagingMessagesState by room.messages.collectAsPagingMessagesState(
82+
orderBy = OrderBy.NewestFirst
83+
)
84+
85+
LazyColumn {
86+
items(pagingMessagesState.messages.size) { index ->
87+
val message = pagingMessagesState.messages[index]
88+
Text("Message: ${message.text}")
89+
}
90+
}
91+
}
92+
```
7493
</Code>
7594

7695
The following optional parameters can be passed when retrieving previously sent messages:
@@ -90,6 +109,10 @@ Users can also retrieve historical messages that were sent to a room before the
90109
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.
91110
</If>
92111

112+
<If lang="jetpack">
113+
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.
114+
</If>
115+
93116
<If lang="react">
94117
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.
95118
</If>
@@ -157,7 +180,7 @@ val subscription = room.messages.subscribe {
157180
println("New message received")
158181
}
159182

160-
var historicalMessages = subscription.historyBeforeSubscribe(limit = 50)
183+
var historicalMessages = subscription.getPreviousMessages(limit = 50)
161184
println(historicalMessages.items.toString())
162185

163186
while (historicalMessages.hasNext()) {
@@ -167,6 +190,34 @@ while (historicalMessages.hasNext()) {
167190

168191
println("End of messages")
169192
```
193+
194+
```jetpack
195+
import androidx.compose.runtime.*
196+
import com.ably.chat.extensions.compose.collectAsPagingMessagesState
197+
198+
@Composable
199+
fun HistoryBeforeSubscribeComponent(room: Room) {
200+
DisposableEffect(room) {
201+
val subscription = room.messages.subscribe {
202+
println("New message received")
203+
}
204+
205+
var historicalMessages = subscription.getPreviousMessages(limit = 50)
206+
println(historicalMessages.items.toString())
207+
208+
while (historicalMessages.hasNext()) {
209+
historicalMessages = historicalMessages.next()
210+
println(historicalMessages.items.toString())
211+
}
212+
213+
println("End of messages")
214+
215+
onDispose {
216+
subscription.unsubscribe()
217+
}
218+
}
219+
}
220+
```
170221
</Code>
171222

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

0 commit comments

Comments
 (0)