chat: add Jetpack Compose support to documentation

src/data/languages/languageData.ts

@@ -28,6 +28,7 @@ export default {
     react: '1.1',
     swift: '1.0',
     kotlin: '1.0',
+    jetpack: '1.0',
   },
   spaces: {
     javascript: '0.4',

src/data/languages/languageInfo.ts

@@ -86,6 +86,10 @@ export default {
     label: 'Kotlin',
     syntaxHighlighterKey: 'kotlin',
   },
+  jetpack: {
+    label: 'Jetpack Compose',
+    syntaxHighlighterKey: 'kotlin',
+  },
   realtime: {
     label: 'Realtime',
     syntaxHighlighterKey: 'javascript',

src/data/languages/types.ts

@@ -26,6 +26,7 @@ export const languageKeys = [
   'css',
   'laravel',
   'typescript',
+  'jetpack',
 ] as const;
 
 export type LanguageKey = (typeof languageKeys)[number];

src/pages/docs/chat/connect.mdx

@@ -28,6 +28,10 @@ Use the <If lang="javascript">[`status`](https://sdk.ably.com/builds/ably/ably-c
 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:
 </If>
 
+<If lang="jetpack">
+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:
+</If>
+
 <Code>
 ```javascript
 const connectionStatus = chatClient.connection.status;
@@ -56,6 +60,17 @@ let status = chatClient.connection.status
 ```kotlin
 val connectionStatus = chatClient.connection.status
 ```
+
+```jetpack
+import com.ably.chat.extensions.compose.collectAsStatus
+
+@Composable
+fun MyComponent(chatClient: ChatClient) {
+  val connectionStatus by chatClient.connection.collectAsStatus()
+
+  Text("Connection status: $connectionStatus")
+}
+```
 </Code>
 
 <If lang="react">
@@ -84,6 +99,10 @@ Listeners can also be registered to monitor the changes in connection status. An
 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:
 </If>
 
+<If lang="jetpack">
+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:
+</If>
+
 <Code>
 ```javascript
 const { off } = chatClient.connection.onStatusChange((change) => console.log(change));
@@ -114,6 +133,21 @@ val (off) = chatClient.connection.onStatusChange { statusChange: ConnectionStatu
     println(statusChange.toString())
 }
 ```
+
+```jetpack
+import com.ably.chat.extensions.compose.collectAsStatus
+
+@Composable
+fun MyComponent(chatClient: ChatClient) {
+  val connectionStatus by chatClient.connection.collectAsStatus()
+
+  LaunchedEffect(connectionStatus) {
+    println("Connection status changed to: $connectionStatus")
+  }
+
+  Text("Connection status: $connectionStatus")
+}
+```
 </Code>
 
 <If lang="javascript,kotlin">

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

@@ -8,7 +8,11 @@ The history feature enables users to retrieve messages that have been previously
 ## Retrieve previously sent messages <a id="history"/>
 
 <If lang="javascript,swift,kotlin">
-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.
+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.
+</If>
+
+<If lang="jetpack">
+  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.
 </If>
 
 <If lang="react">
@@ -71,6 +75,28 @@ while (historicalMessages.hasNext()) {
 
 println("End of messages")
 ```
+
+```jetpack
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import com.ably.chat.extensions.compose.collectAsPagingMessagesState
+
+@Composable
+fun HistoryComponent(room: Room) {
+  val pagingMessagesState by room.messages.collectAsPagingMessagesState(
+    orderBy = OrderBy.NewestFirst
+  )
+
+  LazyColumn {
+    items(pagingMessagesState.messages.size) { index ->
+      val message = pagingMessagesState.messages[index]
+      Text("Message: ${message.text}")
+    }
+  }
+}
+```
 </Code>
 
 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
 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.
 </If>
 
+<If lang="jetpack">
+  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.
+</If>
+
 <If lang="react">
 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.
 </If>
@@ -157,7 +187,7 @@ val subscription = room.messages.subscribe {
     println("New message received")
 }
 
-var historicalMessages = subscription.historyBeforeSubscribe(limit = 50)
+var historicalMessages = subscription.getPreviousMessages(limit = 50)
 println(historicalMessages.items.toString())
 
 while (historicalMessages.hasNext()) {
@@ -167,6 +197,34 @@ while (historicalMessages.hasNext()) {
 
 println("End of messages")
 ```
+
+```jetpack
+import androidx.compose.runtime.*
+import com.ably.chat.extensions.compose.collectAsPagingMessagesState
+
+@Composable
+fun HistoryBeforeSubscribeComponent(room: Room) {
+  DisposableEffect(room) {
+    val subscription = room.messages.subscribe {
+      println("New message received")
+    }
+
+    var historicalMessages = subscription.getPreviousMessages(limit = 50)
+    println(historicalMessages.items.toString())
+
+    while (historicalMessages.hasNext()) {
+      historicalMessages = historicalMessages.next()
+      println(historicalMessages.items.toString())
+    }
+
+    println("End of messages")
+
+    onDispose {
+      subscription.unsubscribe()
+    }
+  }
+}
+```
 </Code>
 
 The following parameters can be passed when retrieving previously sent messages: