Features
Overview
Quickblox UI Kit for iOS provides an extensive range of features to enhance the chat experience within applications. By incorporating essential messaging functionalities such as typing indicators, delivered/read receipts, and other functionality, users can engage in more interactive and meaningful conversations.
The table below presents a comprehensive list of features supported by Quickblox UI Kit, categorized by dialogs type, along with indications of the specific dialogs types that support each feature.
| Feature | Group dialog | Private dialog |
|---|---|---|
| File sharing | ✓ | ✓ |
| Voice message | ✓ | ✓ |
| Typing indicator | ✓ | ✓ |
| Delivery receipt | ✓ | ✓ |
| Read receipt | ✓ | ✓ |
| Unread message count | ✓ | ✓ |
| Highlight URLs | ✓ | ✓ |
| Forward message | ||
| Reply message |
Dialog types
QuickBlox UI Kit provides support for the following types:
Group dialog
A group dialog is a chat between closed group of people. New participant can be added either by dialog owner or any other participant of the group dialog.
Private dialog
A private dialog is a direct chat between two people, it can't be extended to host more people.
File sharing
File sharing is a fundamental chat feature that allows users to share different types of files such as images, audio files, videos, and other file types during a conversation. The ability to share files is conveniently available through the messageInput component.
When using the file sharing feature, users can send four different types of file messages: image files, video files, audio files, and document files. These files can be easily shared with other participants in the conversation. Users can take a photo with the mobile device's camera directly, or upload an existing image, video, audio, or document file from their mobile device to share it with others in a chat.
Note: Prior to utilizing the file sharing feature, it is essential to create a dialog. To gain insights into enabling users to engage in conversations, please refer to the "Messaging in a Dialog" section for detailed instructions. This section will provide you with comprehensive guidance on facilitating chat functionality in your application's.
Customizing the UI for File Sharing
To provide a personalized user experience for file sharing, you can customize the UI elements using various components available in the Quickblox UI Kit. The following sections outline the customization options and properties that can be adjusted:
You can customize the UI for file sharing using string resource and icon resource.
String resource
The string resource is a set of strings used to compose the screens described in ThemeString containing Quickblox UI Kit-defined string values.
public class ThemeString: ThemeStringProtocol {
...
public var photo: String = String(localized: "alert.actions.photo", bundle: .module)
public var removePhoto: String = String(localized: "alert.actions.removePhoto", bundle: .module)
public var camera: String = String(localized: "alert.actions.camera", bundle: .module)
public var gallery: String = String(localized: "alert.actions.gallery", bundle: .module)
public var file: String = String(localized: "alert.actions.file", bundle: .module)
...
public var maxSize: String = String(localized: "attachment.maxSize.title", bundle: .module)
public var maxSizeHint: String = String(localized: "attachment.maxSize.hint", bundle: .module)
public var fileTitle: String = String(localized: "attachment.title.file", bundle: .module)
public var gif: String = String(localized: "attachment.title.gif", bundle: .module)
public init() {}
}
You can use your string values to uniquely design your application:
QuickBloxUIKit.settings.theme.string.gallery = "Photo and video" // "Gallery" by default
QuickBloxUIKit.settings.theme.string.camera = "Take photo from camera" // "Camera" by default
Use Localization to expand the capabilities of your application. This feature is described in the Customization section.
A set of icons for file sharing
The file sharing icon set is part of the Quickblox UI Kit icons described in ThemeImage. It allows you to customize the icons used throughout the user interface, including those related to file sharing.
| Icon name | Image | Description |
|---|---|---|
| paperclip |  | Add a file. The system symbol image. |
| play |  | Play a video/audio file.The system symbol image. |
| pause |  | Pause/stop a video/audio file. The system symbol image. |
| gif |  | GIF, Graphics Interchange Format, file. Text used. |
| photo |  | Image file. The system symbol image. |
| doctext |  | Document file message. The system symbol image. |
Using these customization options, you can tailor the file sharing user interface to match your app's branding and design guidelines, improving the overall user experience.
QuickBloxUIKit.settings.theme.image.paperclip = Image("Your_paperclip_image")
QuickBloxUIKit.settings.theme.image.doctext = Image("Your_doctext_image")
For full details on how to use your images to customize your app, see Customization.
Voice message
Voice messaging is a valuable feature that provides users with an alternative means of communication, enabling them to exchange messages without relying on text or file-based content. With voice messages, users can convey their thoughts, emotions, and intentions more effectively by utilizing the power of their own voice.
By utilizing voice messages, users can benefit from increased efficiency and convenience. It takes significantly less time to record a voice message compared to composing a lengthy text message, allowing the sender to save time and effort. Furthermore, the receiver can listen to the voice message at their convenience, even while multitasking or engaged in other activities.
To send a voice message, users can utilize the input component provided by Quickblox UI Kit. By recording and sending the voice message using this component, it will be displayed in the message list component of the dialog. The receiver can then easily access the voice message and play it to listen to its contents.
Sending a voice message:
To send a voice message, users need to record their message using the inputView available in the DialogView. By default, a voice message icon is displayed on the right side of the input field, indicating that the voice recording feature is available.
Clicking this icon will initiate the burning process and the icon will turn red. The user can stop recording by clicking on the same button. To cancel sending a voice message and return to the text input field, the user can click on the cancel button on the left. To send a recorded voice message, users can click the send button on the right.
When the recording process completes, the recorder will deactivate the audio session configured by Quickblox UI Kit and attempt to reactivate the client application's audio session. For instructions on setting up an audio session in Quickblox UI Kit and playing audio and video files, see the corresponding guide in the documentation.
Receiving voice messages:
Voice messages can be received in all types of dialogues, just like any other messages exchanged between participants in a dialogue. Received and sent voice messages are displayed as two components: InboundAudioMessageRow and OutboundAudioMessageRow.
When a voice message is sent and received it will allow users to access and view received voice messages.
It is important to note that in dialog, users can listen to only one voice message at a time. If an attempt is made to play another voice message while listening to the previous one, the previous message being played will be paused to accommodate the new playback.
To end voice message playback:
Upon completion of listening to a voice message, the player responsible for processing playback deactivates the audio session configured using Quickblox UI Kit. Subsequently, it will attempt to reactivate the audio session associated with the client application.
For detailed information about setting up and activating an audio session, see the Apple Developer Guide, which provides a comprehensive guide to working with audio sessions.
Customizing the UI for Voice message
To provide a personalized user experience for voice messages, you can customize the UI elements using various components available in the Quickblox UI Kit. The following sections outline the customization options and properties that can be adjusted:
A set of icons for Voice message
The voice message icon set is part of the Quickblox UI Kit icons described in ThemeImage. It allows you to customize the icons used throughout the user interface, including those related to voice messages.
| Icon name | Image | Description |
|---|---|---|
| mic |  | Start/stop voice message recording. The system symbol image. |
| record |  | Record a voice message. The system symbol image. |
| close |  | Cancel sending a voice message. The system symbol image. |
| play | | Play a voice message. The system symbol image. |
| pause | | Pause/stop a voice message. The system symbol image |
Using these customization options, you can tailor the voice message user interface to match your app's branding and design guidelines, improving the overall user experience.
QuickBloxUIKit.settings.theme.image.mic = Image("Your_mic_image")
QuickBloxUIKit.settings.theme.image.record = Image("Your_record_image")
For full details on how to use your images to customize your app, see Customization.
Typing indicator
The typing indicator is a valuable feature that provides users with visual cues that indicate when another user is actively composing a message in a chat. This feature enhances real-time communication by providing visibility into ongoing typing activities.
The input indicator UI is displayed in the DialogView component between MessagesScrollView and InputView. This ensures that users can easily observe and determine when other participants are typing.
The input indicator remains visible until the user submits a message or deletes all text. Also, if the user pauses while typing for more than 5 seconds, the typing indicator will automatically disappear, providing an accurate view of the current typing state of the dialog.
Customizing the UI for Typing indicator:
To provide a personalized user experience for typing indicators, you can customize the UI elements using various components available in the Quickblox UI Kit. The following sections outline the customization options and properties that can be adjusted:
You can use your values to uniquely design your application:
QuickBloxUIKit.settings.theme.string.typingOne = " is typing..."
QuickBloxUIKit.settings.theme.string.typingTwo = " are typing..."
QuickBloxUIKit.settings.theme.string.typingFour = " and others are typing..."
QuickBloxUIKit.settings.dialogScreen.typing.color = .black
QuickBloxUIKit.settings.dialogScreen.typing.font = .caption2
For full details on how to customize your app, see Customization.
Delivery receipt
The delivery receipt is a feature that informs a user if their messages have been successfully delivered to other users in the dialog. When message reaches server, it is marked as sent, a single-tick icon appears next to the message’s timestamp.
Once message reaches receiver device, it is marked as delivered. If the sender's message has been delivered to any recipient in the dialog, a double-tick icon appears next to the message's timestamp. The delivery receipt can only be seen by the sender of the message.
Customizing the UI for Delivered receipt
To provide a personalized user experience for delivered receipt, you can customize the UI elements using various components available in the Quickblox UI Kit. The following sections outline the customization options and properties that can be adjusted:
A set of icons for Delivered receipt
The delivered receipt icon set is part of the Quickblox UI Kit icons described in ThemeImage. It allows you to customize the icons used throughout the user interface, including those related to delivered receipt.
| Icon name | Image | Description |
|---|---|---|
| send |  | Used to indicate that the message was successfully sent. |
| delivered |  | Used to indicate that a message was successfully delivered. |
Using these customization options, you can tailor the delivered receipt user interface to match your app's branding and design guidelines, improving the overall user experience.
QuickBloxUIKit.settings.theme.image.send = Image("Your_send_image")
QuickBloxUIKit.settings.theme.image.delivered = Image("Your_delivered_image")
For full details on how to use your images to customize your app, see Customization.
Customize the icon color according to your app design:
QuickBloxUIKit.settings.dialogScreen.messageRow.sendForeground = .gray
QuickBloxUIKit.settings.dialogScreen.messageRow.deliveredForeground = .gray
For full details on how to use your Color Theme to customize your app, see Customization.
Read receipt
The read receipt feature allows users to determine whether their messages have been read by others in the dialog. When any recipient in the dialog have read the sender's message, a colored double-tick icon is displayed next to the message's timestamp. The read receipts are only visible to the sender of the message.
Customizing the UI for Read receipt
To provide a personalized user experience for read receipt, you can customize the UI elements using various components available in the Quickblox UI Kit. The following sections outline the customization options and properties that can be adjusted:
A set of icons for Read receipt
The read receipt icon set is part of the Quickblox UI Kit icons described in ThemeImage. It allows you to customize the icons used throughout the user interface, including those related to read receipt.
| Icon name | Image | Description |
|---|---|---|
| read | | Used to indicate that the message was successfully read. Color modified |
Using these customization options, you can tailor the read receipt user interface to match your app's branding and design guidelines, improving the overall user experience.
QuickBloxUIKit.settings.theme.image.read = Image("Your_read_image")
For full details on how to use your images to customize your app, see Customization.
Customize the icon color according to your app design:
QuickBloxUIKit.settings.dialogScreen.messageRow.readForeground = .green
For full details on how to use your Color Theme to customize your app, see Customization.
Unread message count
The unread message count feature is designed to provide users with important information about the number of unread messages in each conversation they are in. This feature allows users to be informed about the volume of messages they have yet to read, ensuring they never miss important conversations.
The unread message count is displayed in the DialogRowView which is the DialogsListView list component of the DialogsView structure, making it easily accessible and visible to users. A counter is specifically shown below the timestamp of the last message received for each conversation in the list.
To ensure a concise and convenient display, if the number of unread messages exceeds 100, it will be presented as "99+", indicating a large number of unread messages.
This feature allows users to quickly identify dialogs with a high number of unread messages, allowing them to prioritize their interaction and stay up to date with the latest conversations.
Customizing the UI for Unread message count
To provide a personalized user experience for counting unread messages, you can customize the user interface elements using the various components available in Quickblox UI Kit. The following example describes the configuration options and properties that you can configure:
QuickBloxUIKit.settings.dialogsScreen.dialogRow.unreadCount.maxCount = 1000
QuickBloxUIKit.settings.dialogsScreen.dialogRow.unreadCount.backgroundColor = .green
QuickBloxUIKit.settings.dialogsScreen.dialogRow.unreadCount.foregroundColor = .white
QuickBloxUIKit.settings.dialogsScreen.dialogRow.unreadCount.font = .caption2
For full details on how to customize your app, see Customization.
Highlight URLs
When communicating via instant messengers, it is often useful to Highlight URLs to make them more visible and distinguish them from plain text.
Quickblox UI Kit recognizes URLs and automatically converts them into clickable links. This allows recipients to easily access the associated web page. For example, if you simply include Highlight URLs like www.example.com in your message, the messenger will automatically convert it into a clickable link.
Customizing the UI for Highlight URLs
Quickblox UI Kit supports text formatting options such as bold, italic, or underline. You can apply these formatting styles to Highlight URLs to make them stand out. For example:
QuickBloxUIKit.settings.dialogScreen.messageRow.linkFont = .callout.italic()
QuickBloxUIKit.settings.dialogScreen.messageRow.linkUnderline = true // default
QuickBloxUIKit.settings.dialogScreen.messageRow.inboundLinkForeground = .blue
QuickBloxUIKit.settings.dialogScreen.messageRow.outboundLinkForeground = .blue
This visually distinguishes them from the surrounding text and indicates that they are URLs.
By using this, you can effectively Highlight URLs, making them more visible and easily recognizable to recipients. This ensures that your shared links get noticed and can be easily accessed.
Forward message
The Forward message feature in Quickblox iOS UIKit enhances communication flexibility by allowing users to easily share messages with others in a chat. This feature is invaluable for circulating information, fostering collaboration, and maintaining a coherent conversation flow. Below is an overview of the forward message feature along with associated functionalities.
Forwarding Messages:
- Initiating Forward:
Users can select a message within the chat that they wish to forward to another chat.
Both the sender's messages and those from other participants are eligible for forwarding.
Users can select and forward various multimedia content, including images, voice messages, and supported file types.
- Selecting Target Chat and Adding Comments or Annotations:
Users are presented with a list of their existing chats to choose the destination for forwarding.
Upon selecting the target chat, a confirmation step is required.
Users have the option to add comments or annotations when forwarding any message type (text, image, file, etc.).
Comment/Input Field:
The comment/input field allows text entry.
Added comments are included with the forwarded message, visible as a distinct message in the destination chat.
Recipients can distinguish between the forwarded message content and added comments.
The forwarded message promptly appears in the selected chat.
- Interaction and Notification:
Recipients can interact with the forwarded message just like any other originally sent message.
Users receive a confirmation notification upon successful forwarding.
In case of failure, users are accurately notified with an appropriate error message.
- AI Features:
Recipients can apply AI Translation and AI Answer Assist features to forwarded text messages.
Cancellation:
If the user cancels the forwarding action, the message with added comments is not sent.
Customizing the UI for Forward message
To provide a personalized user experience for Forward messages, you can customize the UI elements using various components available in the Quickblox UI Kit. The following sections outline the customization options and properties that can be adjusted:
A set of icons for Forward message
The Forward message icon set is part of the Quickblox UI Kit icons described in ThemeImage. It allows you to customize the icons used throughout the user interface, including those related to Forward messages.
| Icon name | Image | Description |
|---|---|---|
| forward |  | Forward icon. |
| forward filled |  | Forward Filled icon. |
Using these customization options, you can tailor the Forward message user interface to match your app's branding and design guidelines, improving the overall user experience.
QuickBloxUIKit.settings.theme.image.forwardIcon = Image("Your_forwardIcon_image")
QuickBloxUIKit.settings.theme.image.forwardFilled = Image("Your_forwardFilled_image")
For full details on how to use your images to customize your app, see Customization.
Enable Forward message Feature
Message forwarding is enabled by default. You can also turn it on and off:
QuickBloxUIKit.feature.forward.enable = true
Reply message
The Reply message feature in Quickblox iOS UIKit enhances communication flexibility by allowing users to easily Interaction with messages in a chat. This feature is invaluable for circulating information, fostering collaboration, and maintaining a coherent conversation flow. Below is an overview of the reply message feature along with associated functionalities.
Reply Messages:
- Initiating Reply:
Users can select a message within the chat that they wish to reply in the chat.
Both the sender's messages and those from other participants are eligible for reply.
Users can select and reply various multimedia content, including images, voice messages, and supported file types.
- Adding Comments or Annotations:
Users have the option to add comments or annotations when reply any message type (text, image, file, etc.).
Comment/Input Field:
The comment/input field allows text entry.
Added comments are included with the replied message, visible as a distinct message in the chat.
Recipients can distinguish between the replied message content and added comments.
The replied message promptly appears in the chat.
- Interaction and Notification:
Recipients can interact with the replied message just like any other originally sent message.
Users receive a confirmation notification upon successful forwarding.
In case of failure, users are accurately notified with an appropriate error message.
- AI Features:
Recipients can apply AI Translation and AI Answer Assist features to replied text messages.
Cancellation:
If the user cancels the replied action, the message with added comments is not sent.
Customizing the UI for Reply message
To provide a personalized user experience for Reply messages, you can customize the UI elements using various components available in the Quickblox UI Kit. The following sections outline the customization options and properties that can be adjusted:
A set of icons for Reply message
The Reply message icon set is part of the Quickblox UI Kit icons described in ThemeImage. It allows you to customize the icons used throughout the user interface, including those related to Reply messages.
| Icon name | Image | Description |
|---|---|---|
| reply |  | Reply icon. |
| reply filled |  | Reply Filled icon. |
Using these customization options, you can tailor the Reply message user interface to match your app's branding and design guidelines, improving the overall user experience.
QuickBloxUIKit.settings.theme.image.reply = Image("Your_reply_image")
QuickBloxUIKit.settings.theme.image.replyFilled = Image("Your_replyFilled_image")
For full details on how to use your images to customize your app, see Customization.
Enable Reply message Feature
Message Reply is enabled by default. You can also turn it on and off:
QuickBloxUIKit.feature.reply.enable = true
Updated about 1 year ago