1 of 8

Chat UIKit

With our chat functionality in AmityUIKit, you can explore how best to integrate and design messaging features and how they will look in your app.

Using as a Whole Feature with the Default Settings

This is the fastest way to use the chat function. All standard logics and navigations are already defined.

Usage

import UIKit
import AmityUIKit

class ClientViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func showChatListPage(_ sender: UIButton) {
        let chatHomeVC = AmityChatHomePageViewController.make()
        present(chatHomeVC, animated: true)
    }
}

Using Only Some Components

There are many components that you can use and integrate into your existing application.

Limitation

UIKit provides already built UI elements in one page. You can change the appearances, such as color and typography in the global settings. However, UIKit does not allow you to replace these small components with other views. And you cannot modify the view hierarchy inside the page.

Chat Home Page

This page consists of one component in a single tab.

Components

Recent chat

Usage

Recent chat

This page shows a list of the most recent chats.

Features

Usage

import UIKit
import AmityUIKit

class ClientViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func showChatListPage(_ sender: UIButton) {
        let recentChatVC = AmityRecentChatViewController.make()
        present(recentChatVC, animated: true)
    }
}

Chat Room Page

This page shows all the messages in a direct chat.

Message List Page Header

Message List

Message Bubble - Text Message Bubble

Message bubble - Image message bubble

Image Preview Page

Message Bubble - Audio Message Bubble

Audio Message Recorder

Edit Text Message Page

Usage

import UIKit
import AmityUIKit

class ClientViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func showMessageListPage(_ sender: UIButton) {
        let messageVC = AmityMessageListViewController.make(channelId: "CHANNEL_ID")
        present(messageVC, animated: true)
    }
}

Parameters

Specify Custom Settings

You can create and specify Settings object when creating AmityMessageListViewController.

// 1. Create the settings object.
var settings = AmityMessageListViewController.Settings()
settings.composeBarStyle = .textOnly

// 2. Specify the settings as parameter.
let messageVC = AmityMessageListViewController.make(channelId: "CHANNEL_ID", settings: settings)

The available settings are shown below.

Compose Bar Style

There are two compose bar styles available in the UIKit.

ComposeBarStyle.default - has full functionalities including text, audio and, image message sending
ComposeBarStyle.textOnly - has simple functionalities which are only limited to text message sending

The default settings for compose bar style is ComposeBarStyle.default.

Using your own component

AmityUIKit allows you to personalise some parts of the component.

Message Bubble

UIKit allows all types of message bubble to be replaced.

Text Message Bubble

Image Massage Bubble

Audio Message Bubble

Usage

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

import UIKit
import AmityUIKit

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

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]
    }
}

Message Bubble

UIKit allows all types of message bubble to be replaced.

Text Message Bubble

Image Massage Bubble

Audio Message Bubble

Usage

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

import UIKit
import AmityUIKit

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

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]
    }
}

Chat Room Page

This page shows all the messages in a direct chat.

Message List Page Header

Message List

Message Bubble - Text Message Bubble

Message bubble - Image message bubble

Image Preview Page

Message Bubble - Audio Message Bubble

Audio Message Recorder

Edit Text Message Page

Usage

import UIKit
import AmityUIKit

class ClientViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func showMessageListPage(_ sender: UIButton) {
        let messageVC = AmityMessageListViewController.make(channelId: "CHANNEL_ID")
        present(messageVC, animated: true)
    }
}

Parameters

Specify Custom Settings

You can create and specify Settings object when creating AmityMessageListViewController.

// 1. Create the settings object.
var settings = AmityMessageListViewController.Settings()
settings.composeBarStyle = .textOnly

// 2. Specify the settings as parameter.
let messageVC = AmityMessageListViewController.make(channelId: "CHANNEL_ID", settings: settings)

The available settings are shown below.

Compose Bar Style

There are two compose bar styles available in the UIKit.

ComposeBarStyle.default - has full functionalities including text, audio and, image message sending
ComposeBarStyle.textOnly - has simple functionalities which are only limited to text message sending

The default settings for compose bar style is ComposeBarStyle.default.