# Chatroom Page
## Message List Page Header
| Feature | Description |
| ----------------- | ------------------------------------------------------------------------------- |
| User avartar | If the user has no avatar, the system will show the default avatar. |
| User Display name | If the user has no display name, the default display name will be 'anonymous'. |
| Back button | Redirects user back to the previous page. |
## Message List
| Feature | Description |
| -------------------- | -------------------------------------------------------------------------------------------------------------- |
| Show list of message | The latest message bubble will be on the bottom of the screen, and the user can scroll up to see all messages. |
| Date label | Grouping messages by the sent date. |
### Message bubble - Text message bubble
| Feature | Description |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Read more mode. | When the text is more than 13 lines, the system show read more mode. Once it is clicked on the read more button, it expands text to the full size. |
| Long press to delete | If the long click event occurs, the system will show the delete option. |
| Long press to edit | If the long click event occurs, the system will show the edit option. When click the edit option, the system will redirect the user to the edit message page. |
| Error to send message indicator | If the message can not be sent, the system will show the error indicator in front of the message bubble. |
| Sent time stamp | Show as time stamp HH :MM. |
| Edited label | If the message is edited , the edited label will be shown. |
| Deleted message | If the message is deleted , the deleted view will be shown. |
### Message bubble - Image message bubble
| Feature | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| Image thumbnails | The system shows the image base on the image ratio. Once it is clicked, it will redirect the user to the edit message page. |
| Image upload state | The system will show the image uploading indicator while the image is being uploaded. |
### Image Preview Page
| Feature | Description |
| ------------------ | ---------------------------------------------------------- |
| Pinch zoom gesture | The user can pinch the screen to zoom in or out the image. |
| back | Redirect user back to the previous page. |
### Message Bubble - Audio Message Bubble
| Feature | Description |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| Click to play | If the user clicks on the voice message , the system will play the audio. |
| Click to stop | If the user clicks on the playing voice message or play another voice message, the system will stop playing the playing audio. |
### Audio message recorder
| Feature | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
| Hold to record | The user can hold to record an audio message for up to 60 seconds. Once the user releases the finger, the system will send the audio message. |
| Discard the record | The user can drag the finger to the bin button to discard the current recording session. |
### Edit Text Message Page
| Feature | Description |
| -------------- | -------------------------------------------------------------------------- |
| Add text | The user can update the text from the original input. |
| Save | The user can click save button to save the changes he made. |
| Discard change | The user can click 'x' to discard all changes before the user clicks save. |
## Usage
### **Start an Activity**
If you don’t need to do any customisation other than global theme customisation, you can use our AmityMessageListActivity**.** Use the intent to move from one activity to the **AmityChatHomePageActivity** as follows:
```
//replace "channelId" with actual channelID
val messageIntent = AmityMessageListActivity.newIntent(this, "channelId")
startActivity(messageIntent)
```
### **Create a Fragment**
If you need to customize the user interface, you can use our `AmityChatRoomFragment`**.**
```
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val chatRoomFragment = AmityChatRoomFragment
.newInstance("channelId")
.composeBar(AmityChatRoomComposeBar.TEXT)
.enableChatToolbar(boolean)
.enableConnectionBar(boolean)
.build(activity)
val transaction = supportFragmentManager.beginTransaction()
transaction.replace(R.id.fragmentContainer, chatRoomFragment)
transaction.addToBackStack(null)
transaction.commit()
}
}
```
**Toolbar Option**
We provide an ability to enable or disable Chatroom's toolbar by using `enableChatToolbar(boolean)` when initializing a fragment instance.
By default the UIKit comes with toolbar enabled.
```
AmityChatRoomFragment.newInstance(channelId)
.enableChatToolbar(boolean)
.build(this)
```
**Connection Bar Option**
We provide an ability to enable or disable Chatroom's connection bar by using `enableConnectionBar(boolean)` when initializing a fragment instance.
By default the UIKit comes with connection bar enabled.
```
AmityChatRoomFragment.newInstance(channelId)
.enableConnectionBar(boolean)
.build(this)
```
**Compose bar Option**
There are two compose bar options avaialble in the UIKit.
1. `AmityChatRoomComposeBar.DEFAULT` - has full functionalities including text, audio, and image message sending
2. `AmityChatRoomComposeBar.TEXT` - has simple functionalities which are only limited to text message sending
By default the UIKit comes with `AmityChatRoomComposeBar.DEFAULT`.
```
AmityChatRoomFragment.newInstance(channelId)
.composeBar(AmityChatRoomComposeBar.TEXT)
.build(this)
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.social.plus/social-plus-uikit/uikit-3/android/chat-uikit/using-only-some-components/chatroom-page.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.