# Message Bubble

### Text Message Bubble

![](https://2352509137-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MX0mOAVWkotGme0iRzu%2F-MX6nUcMp1CYx5cZoNcU%2F-MX6njgt_3_LQBW9oswF%2Fimage%20\(51\).png?alt=media\&token=bc20827d-fc43-48cc-a5ae-50c0fadb203b)

### Image Massage Bubble

<figure><img src="https://2352509137-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MX0mOAVWkotGme0iRzu%2Fuploads%2FU2rpw813dGC0AI71hV8d%2FScreenshot%202566-02-22%20at%2006.51.49.png?alt=media&#x26;token=83ad7333-4c58-493e-83d1-78e493e5ed75" alt=""><figcaption></figcaption></figure>

### Audio Message Bubble

<figure><img src="https://2352509137-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MX0mOAVWkotGme0iRzu%2Fuploads%2FnVISCi2Ramp0k0ANl4si%2FScreenshot%202566-02-22%20at%2006.54.24.png?alt=media&#x26;token=75617547-fd75-4773-96b3-2a96219654da" alt=""><figcaption></figcaption></figure>

### Usage

To customize message UI, create a new `UITableViewCell` and conform to  **AmityMessageCellProtocol**.

```swift
import UIKit
import AmityUIKit

class CustomTableViewCell: UITableViewCell, AmityMessageCellProtocol {
    func display(message: AmityMessageModel) {
        // Do stuff
    }
}
```

```swift
import UIKit
import AmityUIKit

class ClientViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func showChatPage(_ sender: UIButton) {
        let chatVC = AmityChatHomePageViewController.make()
        chatVC.messageDataSource = self
        present(recentChatVC, animated: true)
    }
}

extension ClientViewController: AmityMessageListDataSource {
    func cellForMessageTypes() -> [AmityMessageTypes: AmityMessageCellProtocol.Type] {
        return [.textIncoming: CustomTableViewCell.self]
    }
}
```