Version: 10

Omnichannel inbox component

Level: intermediate

Omnichannel inbox is a component to handle chats, calls, and queue items in the Agent Inbox panel of the Contact Center app. The component includes the item list that shows communication items as tiles and the item view that shows the selected item. Learn more: Agent workspace setup, Agent workflows (user documentation).

The component determines whether to show the item list and the item view side by side (combined mode) or one at a time (split mode) depending on the width of its parent container. Out of the box, the "Agent side bar" (AgentSideBar code) schema shows or hides the item list and the item view based on the mode. The component extends the Chat component (crt.Chat) without adding logic.

View an example of a configuration object that sets up the omnichannel inbox below.

Example of a configuration object that sets up the omnichannel inbox
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    {
        "operation": "insert",
        "name": "OmnichannelInboxContainer",
        "values": {
            "type": "crt.OmnichannelInbox",
            "isCombinedMode": "$IsCombinedMode",
            "combinedModeEnabled": "$CombinedModeEnabled",
            "combinedModeButtonVisible": "$CombinedModeButtonVisible",
            "changeCombinedMode": {
                "request": "crt.AgentInboxModeRequest",
                "params": {
                    "isCombined": "@event"
                }
            },
            "items": []
        },
        "parentName": "MainContainer",
        "propertyName": "items",
        "index": 0
    },
    {
        "operation": "insert",
        "name": "ChatFlexContainer",
        "values": {
            "type": "crt.FlexContainer",
            "direction": "row",
            "items": []
        },
        "parentName": "OmnichannelInboxContainer",
        "propertyName": "items",
        "index": 0
    },
    /* The "LeftPanelsContainer" and "LeftPanels_Chat_Container"
       layout containers are omitted. */
    {
        "operation": "insert",
        "name": "InProgressExpansionPanel",
        "values": {
            "type": "crt.ExpansionPanel",
            "title": "$InProgressItemsCounter | crt.InterpolateString : '{1} ({0})' : '#ResourceString(InProgress_expansion_caption)#'",
            "expanded": true,
            "items": []
        },
        "parentName": "LeftPanels_Chat_Container",
        "propertyName": "items",
        "index": 1
    },
    {
        "operation": "insert",
        "name": "InProgressItemsList",
        "values": {
            "type": "crt.MultiList",
            "itemsList": "$InProgressItemsList",
            "selectedItemId": "$SelectedItemId",
            "isCombinedMode": "$IsCombinedMode",
            "isSearchDisabled": "$IsSearchDisabled",
            "noDataPlaceholder": {
                "image": {
                    "icon": "no-communication-items",
                    "width": "100px",
                    "height": "100px"
                },
                "title": "#ResourceString(InProgressItemsList_placeholder_title)#"
            },
            "itemClicked": {
                "request": "crt.BaseAgentItemClickedRequest",
                "params": {
                    "id": "@event.id",
                    "collectionName": "@event.collectionName"
                }
            },
            "items": [
                /* Tile template of a chat. */
                {
                    "type": "crt.FlexContainer",
                    "name": "ChatsInProgressItemsDS",
                    "direction": "row",
                    "items": [
                        {
                            "type": "crt.ImageInput",
                            "name": "InProgressChatTileContactPhoto",
                            "value": "$ChatsInProgressItems.ContactPhoto",
                            "readonly": true,
                            "size": "small"
                        },
                        {
                            "type": "crt.Label",
                            "name": "InProgressChatTileContactNameLabel",
                            "caption": "$ChatsInProgressItems.ContactName | crt.ContactNameFallbackConverter",
                            "labelEllipsis": true
                        },
                        {
                            "type": "crt.Label",
                            "name": "InProgressChatTileTimestampLabel",
                            "caption": "$ChatsInProgressItems.ModifiedOn | crt.AdaptiveDateTimeFormat"
                        },
                        {
                            "type": "crt.Label",
                            "name": "InProgressChatTileUnreadCountLabel",
                            "caption": "$ChatsInProgressItems.UnprocessedMsgCount | crt.ToUnreadMsgCount"
                        },
                        {
                            "type": "crt.Timer",
                            "name": "InProgressChatTileOverdueLabel",
                            "timerType": "stopwatch",
                            "control": "$ChatsInProgressItems.OverdueStartDate",
                            "visible": "$ChatsInProgressItems.IsOverdue | crt.ToBoolean"
                        }
                    ]
                },
                /* Tile template of a call. */
                {
                    "type": "crt.FlexContainer",
                    "name": "CallsInProgressItemsDS",
                    "direction": "row",
                    "items": [
                        {
                            "type": "crt.ImageInput",
                            "name": "InProgressCallTileContactPhoto",
                            "value": "$CallsInProgressItems.ContactPhoto",
                            "readonly": true,
                            "size": "small"
                        },
                        {
                            "type": "crt.Label",
                            "name": "InProgressCallTileContactNameLabel",
                            "caption": "$CallsInProgressItems.ContactName",
                            "labelEllipsis": true
                        },
                        {
                            "type": "crt.Label",
                            "name": "InProgressCallTileDirection",
                            "caption": "$CallsInProgressItems.Direction | crt.ToCallDirectionString"
                        },
                        {
                            "type": "crt.Timer",
                            "name": "InProgressCallTileTimestampTimer",
                            "timerType": "stopwatch",
                            "control": "$CallsInProgressItems.StartDate"
                        }
                    ]
                }
            ]
        },
        "parentName": "InProgressExpansionPanel",
        "propertyName": "items",
        "index": 0
    },
    {
        "operation": "insert",
        "name": "OmniChatUploadWrapper",
        "values": {
            "type": "crt.FileDrop",
            "visible": "$IsChatConversationVisible",
            "fileDropped": {
                "request": "crt.SelectChatFilesRequest",
                "params": {
                    "files": "@event.files"
                }
            },
            "items": []
        },
        "parentName": "ChatFlexContainer",
        "propertyName": "items",
        "index": 1
    },
    {
        "operation": "insert",
        "name": "Conversation",
        "values": {
            "type": "crt.Conversation",
            "messages": "$ChatMessages",
            "conversationId": "$SelectedItemId",
            "conversationEvent": "$ConversationEvent",
            "unreadMessages": "$ActiveChatUnreadMessagesCount",
            "loading": "$ConversationLoading",
            "paginationChange": {
                "request": "crt.OmniChatPaginationRequest",
                "params": {
                    "chatId": "@event.id",
                    "offset": "@event.offset"
                }
            },
            "markAsReadMessages": {
                "request": "crt.MarkMessagesAsReadRequest",
                "params": {
                    "conversationId": "@event.conversationId",
                    "visibleCount": "@event.visibleCount",
                    "unreadCount": "@event.unreadCount"
                }
            },
            /* Header elements: "Back," "Translate," "Transfer,"
               "Quick actions," "Complete." */
            "actions": [],
            /* "crt.ContactProfilePanel" and translation controls. */
            "information": [],
            /* Flex container layout element that contains "crt.MessageEditor." */
            "tools": []
        },
        "parentName": "OmniChatUploadWrapper",
        "propertyName": "items",
        "index": 0
    },
    /* The "CombinedModeEmptyPlaceholder" element at index 2 is omitted. */
    {
        "operation": "insert",
        /* Despite its name, the element shows the selected call. */
        "name": "NewItems",
        "values": {
            "type": "crt.AgentInbox",
            "callsCollection": "$CallsInProgressItems",
            "selectedCallId": "$SelectedItemId",
            "currentCall": "$CurrentCall",
            "visible": "$IsCallConversationVisible",
            "visibilityStrategyMode": "hide",
            /* "Back" button. */
            "topActions": [],
            /* Call result, comment, and buttons to save, close, or
            complete the call. */
            "callControlsPanel": [],
            "centerPanel": [],
            "footerPanel": []
        },
        "parentName": "ChatFlexContainer",
        "propertyName": "items",
        "index": 3
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

string type

Component type. "crt.OmnichannelInbox" for the Omnichannel inbox component.

array items

Collection of elements nested in the component.

boolean isCombinedMode

Whether the combined mode is on. The component does not change the layout of the item list and the item view itself. Out of the box, the page shows the item list and the item view based on the attribute bound to this property. Set the value of the property in the request handler of the changeCombinedMode action.

Available values

Value	Description
true	The combined mode is on.
false	The split mode is on.

boolean combinedModeEnabled

Whether the component switches to combined mode automatically. The component checks the width of the parent container when it is first rendered and every time its size changes. If the parent container is wider than 794 px, the property is "true," and the component is not in combined mode, the component executes the changeCombinedMode action with "true." If the property is "false," the component stays in split mode. If the parent container is 794 px wide or less, the component resets the combinedModeEnabled property to "true," executes the combinedModeEnabledChange action, and executes the changeCombinedMode action with "false" if the component is in combined mode. This way, the component switches to split mode regardless of the property value.

Available values

Value	Description
true	The component switches to combined mode automatically if the parent container is wider than 794 px.
false	The component stays in split mode if the parent container is wider than 794 px.

boolean combinedModeButtonVisible

Whether to show the button. The component sets the value itself: "true" if the parent container is wider than 794 px. After the value changes, the component executes the combinedModeButtonVisibleChange action.

RequestBindingConfig openChatSession

Action executed when the component receives the OpenChatSessionEvent custom event.

Parameters

Name	Type	Description
@event	Guid	ID of the chat session.

RequestBindingConfig openChatSessionWithMessage

Action executed when the component receives the OpenChatSessionWithMessageEvent custom event.

Parameters

Name	Type	Description
@event.sessionId	Guid	ID of the chat session.
@event.message	string	Text to insert in the new chat session.

RequestBindingConfig changeCombinedMode

Action executed when the combined mode changes. Out of the box, the action executes the crt.AgentInboxModeRequest request and passes the event data to the params.isCombined property.

Parameters

Name	Type	Description
@event	boolean	Whether the combined mode is on.

RequestBindingConfig chatViewInit

Action executed once after the component is rendered. The action passes no event data.

RequestBindingConfig combinedModeEnabledChange

Action executed when the value of the combinedModeEnabled property changes.

Parameters

Name	Type	Description
@event	boolean	New value of the `combinedModeEnabled` property.

RequestBindingConfig combinedModeButtonVisibleChange

Action executed when the value of the combinedModeButtonVisible property changes.

Parameters

Name	Type	Description
@event	boolean	New value of the `combinedModeButtonVisible` property.

Item list component (crt.MultiList)

Item list is a component to show communication items as tiles. The component is not available in the Freedom UI Designer element library. Configure it using low-code tools. The item list area includes the Real-time and Queued tasks tabs. The Real-time tab includes the New items list that shows chats in the "Waiting for response" status and the In progress list that shows active chats and calls. Each list shows the number of its items next to the list name. For Creatio version 10X, the Queued tasks tab shows the queue items of the queues available to the agent, regardless of the assignee. For Creatio version 10.1, the tab shows the unassigned queue items of the queues available to the agent and the queue items assigned to the agent in any queue. In all versions, the tab shows only items that are not in a final status and whose postponement date has passed.

string type

Component type. "crt.MultiList" for the Item list component.

BaseViewModelCollection itemsList

Collection of items to show in the list. To show items from multiple data sources, merge their collections into a single collection using the crt.MergeCollectionsConverter converter. The converter parameters specify the column and the direction to sort the merged items. Out of the box, the list of queue items uses the crt.MergeQueueItemsConverter converter instead.

Example of a merged collection
"InProgressItemsList": {
    "from": ["ChatsInProgressItems", "CallsInProgressItems"],
    "converter": "crt.MergeCollectionsConverter:'ModifiedOn':'desc'"
}

string selectedItemId

ID of the selected item. In combined mode, the component highlights the tile of the selected item.

boolean isCombinedMode

Whether to apply the combined mode styles to the list. For example, in combined mode, the list highlights the selected tile. The property does not change the layout of the item list and the item view.

Available values

Value	Description
true	The list uses the combined mode styles.
false	The list does not use the combined mode styles.

boolean isSearchDisabled

Whether to hide the search bar.

Available values

Value	Description
true	The search bar is hidden.
false	The search bar is shown.

object noDataPlaceholder

Placeholder that the list shows when it has no items.

Example of a placeholder
"noDataPlaceholder": {
    "image": {
        "icon": "no-communication-items",
        "width": "100px",
        "height": "100px"
    },
    "title": "#ResourceString(...)#"
}

Parameters

Name	Type	Required	Description
image	PlaceholderIcon \| PlaceholderAnimation	No	Placeholder image.
title	string	No	Placeholder title.
subhead	string	No	Placeholder subheading.

number currentPage

Number of the current page. The component resets the value to "0" when a user starts a new search.

string searchFilter

Current search query.

boolean showNoDataBlankState

Whether to show the placeholder if the list has no items. By default, "true."

Available values

Value	Description
true	The placeholder is shown.
false	The placeholder is hidden.

RequestBindingConfig itemClicked

Action executed when a user clicks a tile. Out of the box, the action executes the crt.BaseAgentItemClickedRequest request for the Real-time tab and the crt.QueueAgentItemClickedRequest request for the Queued tasks tab. For the Queued tasks tab, the out-of-the-box configuration takes the item ID from @event.id but passes the "QueueItems" collection attribute name instead of the @event.collectionName value.

Parameters

Name	Type	Description
@event.id	string	Value of the primary attribute of the clicked item.
@event.collectionName	string	Name of the data source of the clicked item.

RequestBindingConfig loadData

Action executed when the list loads the next page of items. Out of the box, the list of queue items executes the crt.LoadDataRequest request for the QueueItemsDS data source with the loadNext load type. The out-of-the-box configuration does not use the event data.

Parameters

Name	Type	Description
@event.search	string	Search query. If a user does not search, an empty string.
@event.count	number	Number of rows to load.

RequestBindingConfig searchFilterChange

Action executed when a user changes the search query.

RequestBindingConfig currentPageChange

Action executed when the current page of the list changes.

Parameters

Name	Type	Description
@event	number	Page number.

RequestBindingConfig itemFocused

Action executed when an item receives focus.

Parameters

Name	Type	Description
@event	ViewModel	View model of the item.

array items

Collection of tile templates. Set the tile templates in the items property of the list or add them using separate insert operations whose parentName property is the name of the list. The merge operation does not change the items property. Each template is a Freedom UI layout, for example, a Flex container layout element. The name property of the template must match the name of the data source whose items the template shows. Bind template elements to item data using the $CollectionName.FieldName syntax, where CollectionName is the name of the collection attribute, not the name of the data source. Use pipes (|) to apply converters, for example, the crt.AdaptiveDateTimeFormat or crt.ToBoolean converter. Learn more: "converters" schema section.

Out of the box, the chat tile includes 2 lines. The first line shows the contact photo, contact name, timestamp, and channel icon. The second line shows the last message preview, unread message counter or overdue timer, and the accept button for new items.

Example of a tile template
{
    "name": "UsrTasksDS",
    "type": "crt.FlexContainer",
    "direction": "row",
    "items": [
        {
            "name": "UsrTaskPhoto",
            "type": "crt.ImageInput",
            "value": "$UsrTasks.Photo",
            "size": "small",
            "borderRadius": "large"
        },
        {
            "name": "UsrTaskTitle",
            "type": "crt.Label",
            "caption": "$UsrTasks.Title",
            "labelType": "body",
            "labelEllipsis": true
        },
        {
            "name": "UsrTaskTimestamp",
            "type": "crt.Label",
            "caption": "$UsrTasks.ModifiedOn | crt.AdaptiveDateTimeFormat",
            "labelType": "caption",
            "labelColor": "#757575"
        }
    ]
}

Out of the box, the tile shows the following states.

State	Description
Unread messages	Unread message counter. Shown if the `UnprocessedMsgCount` attribute of the item has a value. If the number of unread messages exceeds 9, the counter shows "9+."
Overdue	Overdue timer. Shown if the `IsOverdue` attribute of the item is set to "true." The Timer component in the "stopwatch" mode counts the time from the `OverdueStartDate` value.
Wrap-up active	Label and timer on the call tile. Shown based on the `WrapUpStopped` attribute of the item converted using the `crt.IsWrapupActive` converter.
Selected	Highlighted background. Shown in combined mode for the item set in the `selectedItemId` property.

Conversation component (crt.Conversation)

Conversation is a component to show the conversation of the selected chat in the item view, including messages, contact information, and the message editor. If a user selects a call tile, the item view shows the Agent inbox component instead. Out of the box, the File drop component (crt.FileDrop) wraps the Conversation component to let users upload files by dragging them to the conversation. If a user drops files, the fileDropped event executes the crt.SelectChatFilesRequest request. You can also add the Conversation component to any Freedom UI page that needs to show a chat conversation, for example, a chat page. Learn more: Show chat history on any Freedom UI page.

string type

Component type. "crt.Conversation" for the Conversation component.

UnifiedChatMessage[] messages

Collection of messages to show. Out of the box, Creatio loads the messages of the selected chat to the attribute bound to this property when an agent opens the chat in the Agent Inbox panel or scrolls the message feed. To load the messages of a chat on other Freedom UI pages, use the crt.LoadConversationRequest base request. Learn more: Load the messages of a chat.

Parameters

Name

Type

Required

Description

Guid

Yes

Message ID.

date

Date

Yes

Message date.

author

Contact

Yes

Message author.

Parameters

Name	Type	Required	Description
id	string	Yes	Contact ID.
name	string	Yes	Contact name.
photo	string	No	Contact photo.
photoId	string	No	ID of the contact photo.
email	string	No	Contact email.
account	LookupValue	No	Contact account.

chatId

string

Chat ID.

type

string

Yes

Message type. The component shows messages of a custom type using the component registered for this type.

Available values

Value	Description
text	Text message.
image	Image.
file	File.
system	System message.
textWithButtons	Text message with buttons.

deliveryStatus

string

Delivery status of the message.

Available values

Value	Description
sending	The message is being sent.
sent	The message is sent.
delivered	The message is delivered.
read	The message is read.
failed	The message is not delivered.

deliveryErrorMessage

string

Error message if the message is not delivered.

actions

ChatMessageAction[]

Collection of message actions.

Parameters

Name

Type

Required

Description

caption

string

Yes

Action caption.

icon

string

Action icon.

type

string

Yes

Action type.

Available values

Value	Description
replace	Replaces the selected text in the message editor with the message text.
insertAbove	Inserts the message text before the selected text.
insertBelow	Inserts the message text after the selected text.

isTechnical

boolean

Whether the message is technical, for example, the "Chat started" message or a date separator. Pagination does not count technical messages.

Available values

Value	Description
true	The message is technical.
false	The message is not technical.

rootIntentId

string

ID of the AI agent that sent the message. Used in Creatio.ai.

text

string

Message text. Available for text, file, image, and textWithButtons messages. For file and image messages, the text is shown as a caption. If the text is empty, the component does not show the message. A textWithButtons message with empty text is not shown, including its buttons.

attachments

ChatMessageAttachment[]

Message attachments. Available for file and image messages. Each attachment includes the required fileId, fileName, and fileType properties and the optional fileEntitySchemaName property.

buttons

ChatMessageButton[]

Message buttons. Available for textWithButtons messages. Each button includes the required caption and action properties and the optional payload property.

originalText

string

Original text of the translated message. Available for text messages.

isTranslated

boolean

Whether the message is translated. Available for text messages. If the message is translated, the text property contains the translated text, and the originalText property contains the original text. The component shows the translated text and lets users switch to the original text.

direction

number

Yes

Message direction.

Available values

Value	Description
1	Incoming message.
2	Outgoing message.

isBotMessage

boolean

Yes

Whether the message is sent by a bot.

Available values

Value	Description
true	The message is sent by a bot.
false	The message is not sent by a bot.

string conversationId

ID of the active conversation.

number unreadMessages

Number of unread messages.

boolean loading

Whether to show the loading placeholder instead of messages.

Available values

Value	Description
true	The loading placeholder is shown.
false	The messages are shown.

boolean hasPreviousMessages

Whether to show the Load previous messages button.

Available values

Value	Description
true	The Load previous messages button is shown.
false	The Load previous messages button is hidden.

boolean disableAutoScroll

Whether to turn off the automatic scrolling of the message feed. If the automatic scrolling is off, the component does not scroll to new messages and does not load the next page of messages when a user scrolls the message feed. Use the property if the component loads the messages of previous chats using the loadPreviousMessages action, for example, on a chat page. By default, "false."

Available values

Value	Description
true	The component does not scroll to new messages and does not load messages when a user scrolls the message feed.
false	The component scrolls to new messages and loads the next page of messages when a user scrolls the message feed.

boolean isEmbeddedMode

Whether to use the compact layout. In the compact layout, the component does not show the chat header, that is, the elements of the actions property. By default, "false."

Available values

Value	Description
true	The component uses the compact layout without the chat header.
false	The component uses the regular layout.

boolean isTyping

Whether to show the typing indicator set in the typing property. By default, "false."

Available values

Value	Description
true	The typing indicator is shown.
false	The typing indicator is hidden.

string previewMessageId

ID of the message to highlight. The component scrolls the message feed to the message and highlights it. After scrolling, the component clears the value and executes the previewMessageIdChange action.

boolean readonlyHistoryView

Whether to show the conversation in read-only mode, for example, on a chat page. In read-only mode, the translation toggle is shown for all translated messages, and incoming messages are shown in the original language. By default, "false." Available in version 10.1 and later.

Available values

Value	Description
true	The conversation is shown in read-only mode.
false	The conversation is shown in regular mode.

string searchFilter

Search query to search messages. If the value changes, the component resets the scroll position.

ConversationEvent[] conversationEvent

Queue of events for the component to process. After the component processes the queue, it executes the conversationEventChange action with an empty array.

Parameters

Name	Type	Required	Description
name	string	Yes	Event name.
params	Record	No	Additional parameters of the event.

number paginationPageSize

Number of messages per page. By default, "30."

RequestBindingConfig loadPreviousMessages

Action executed when a user clicks the Load previous messages button. Use the action if the component is placed on a chat page. In the omnichannel inbox, the component loads previous messages using the paginationChange action. The action passes no event data.

Parameters

Name

Type

Required

Description

request

string

Yes

Request to execute. For example, "crt.LoadConversationRequest."

params

object

Yes

Additional parameters for the action specified in the request property.

Parameters

Name

Type

Required

Description

chatId

string

Yes

ID of the chat whose messages to load.

chatMessagesAttributeName

string

Yes

Name of the view model attribute that stores the loaded messages.

previousChatIdAttributeName

string

Name of the view model attribute that stores the ID of the customer's previous chat.

loadMode

string

Mode to load messages. By default, "replace."

Available values

Value	Description
replace	Loads the messages of the chat set in the `chatId` parameter and saves the ID of the previous chat to the attribute set in the `previousChatIdAttributeName` parameter.
append	Adds the messages of the previous chat before the current messages and saves the ID of the chat before it to the same attribute. If there are no earlier chats, saves "null."

RequestBindingConfig paginationChange

Action executed when a user scrolls the message feed and the component requests the next page of messages. Out of the box, the action executes the crt.OmniChatPaginationRequest request and passes the event data to the params.chatId and params.offset properties.

Parameters

Name	Type	Description
@event.id	string	Conversation ID.
@event.offset	number	Offset from which to load the next page.

RequestBindingConfig markAsReadMessages

Action executed when messages become visible to the user. The component executes the action only if at least one value of the event data changes. Out of the box, the action executes the crt.MarkMessagesAsReadRequest request.

Parameters

Name	Type	Description
@event.conversationId	string	Conversation ID.
@event.visibleCount	number	Number of visible messages.
@event.unreadCount	number	Number of unread messages.

RequestBindingConfig messageEvent

Action executed when a user interacts with a message. The component passes the event of the message component as is.

RequestBindingConfig conversationEventChange

Action executed after the component processes the queue of events set in the conversationEvent property. The component passes an empty array.

RequestBindingConfig previewMessageIdChange

Action executed after the component scrolls to the message set in the previewMessageId property.

Parameters

Name	Type	Description
@event	string	Empty string.

array actions

Collection of elements in the chat header. Out of the box, the chat header includes the following elements.

Element	Description	Request or component
Back	Returns to the item list. Shown in split mode only. Shows a notification mark next to the button. Passes the `params.chatMessagesAttributeName` property.	`crt.CloseOmniChatConversationRequest` request
	Shows or hides the translation panel.	`crt.ToggleTranslationPanelRequest` request
	Transfers the chat to another agent or queue.	`crt.ChatTransferSelect` component
	Runs business processes configured on the Chat actions expanded list on the Chat settings page.	`crt.ChatQuickActions` component
Complete	Completes the chat session.	`crt.CompleteOmniChatRequest` request

The and elements are separate components, not Button components.

array information

Collection of elements in the contact information area. Out of the box, the area includes the Contact profile component (crt.ContactProfilePanel) and translation controls.

array typing

Collection of elements that show the typing indicator.

array tools

Collection of elements in the message sender area. Out of the box, the area includes a Flex container layout element that contains the Message editor component.

array placeholder

Collection of elements that the component shows when it has no conversation to show.

Message editor component (crt.MessageEditor)

Message editor is a component to write and send messages. Child component of the Conversation component. Out of the box, placed in a Flex container layout element in the tools property. Parent component for the Message editor body component.

string type

Component type. "crt.MessageEditor" for the Message editor component.

array items

Collection of elements nested in the component. Out of the box, the area includes the Message editor body component.

Message editor body component (crt.MessageEditorBody)

Message editor body is a component that contains the toolbar and the chat input of the message sender. Child component of the Message editor component.

string type

Component type. "crt.MessageEditorBody" for the Message editor body component.

array toolbarItems

Collection of elements in the toolbar of the message sender. The property accepts any view element, not only buttons. The component shows the elements in the order of the array. Out of the box, the toolbar includes the following elements.

Element	Type	Description
	crt.Button	Uploads attachments using the `crt.SelectChatFilesRequest` request.
	crt.EmojiSelect	Opens the emoji picker.
	crt.TemplateSelect	Opens the template list.
	crt.AutoTranslateToggleButton	Turns the translation of outgoing messages on or off.
	crt.TranslateToggleButton	Translates the message or shows the original. The tooltip changes between "Translate," "Show original," and "Retry," depending on the state.

array inputs

Collection of chat input elements. Out of the box, the collection includes the Message editor input component.

string chatInput

Text in the chat input.

boolean isDisabled

Whether to block sending messages.

Available values

Value	Description
true	Sending messages is blocked.
false	Sending messages is allowed.

boolean isFocused

Whether the chat input has focus.

array attachments

Collection of message attachments. By default, "[]."

boolean hasPendingUploads

Whether files are uploading. Sending messages is blocked until the upload finishes. By default, "false." Available in version 10.1 and later.

string editorTooltip

Tooltip of the message editor. By default, "null."

boolean isFileUploadEnabled

Whether to allow attachments. If attachments are not allowed, users cannot send a message without text. By default, "false."

Available values

Value	Description
true	Attachments are allowed.
false	Attachments are not allowed.

RequestBindingConfig sendMessage

Action executed when a user clicks the button. The Message editor input component handles the Enter key using its own sendMessage action, which checks only whether the message has text or attachments. The component does not execute the action if the message has no text and no attachments or the isDisabled property is set to "true." In version 10.1 and later, the component also does not execute the action if an attachment is uploading or failed to upload, or the tooltip of the message editor shows an error. The component counts attachments only if the isFileUploadEnabled property is set to "true." Out of the box, both actions execute the crt.MessageEditorSendRequest request.

Parameters

Name	Type	Description
@event	string	Value of the `chatInput` property.

Message editor input component (crt.MessageEditorInput)

Message editor input is a component to enter the message text. Child component of the Message editor body component placed in the inputs property.

string type

Component type. "crt.MessageEditorInput" for the Message editor input component.

string inputMode

Input mode. By default, "text."

Available values

Value	Description
text	Plain text.
html	HTML. Lets users mention people using "@."

string chatInput

Text in the chat input.

boolean isDisabled

Whether to block editing and sending messages.

Available values

Value	Description
true	Editing and sending messages are blocked.
false	Editing and sending messages are allowed.

boolean isFocused

Whether the chat input has focus.

boolean readonly

Whether the input is read-only. The input is also read-only if the isDisabled property is set to "true." By default, "false."

string readonlyPlaceholderKey

Key of the placeholder shown in read-only mode. If the value is empty, the input uses the MessageEditor.InputPlaceholder key. By default, an empty string.

array attachments

Collection of message attachments. By default, "[]."

boolean isFileUploadEnabled

Whether to allow pasting files from the clipboard. By default, "false."

Available values

Value	Description
true	Pasting files is allowed.
false	Pasting files is not allowed.

number maxFilesCount

Maximum number of attachments. By default, "10."

object mentionService

Service that provides mentions.

RequestBindingConfig sendMessage

Action executed when a user presses Enter.

Parameters

Name	Type	Description
@event	string	In the "html" input mode, the HTML content of the input. In the "text" input mode, the action passes no event data.

RequestBindingConfig chatInputChange

Action executed when the text in the input changes.

Parameters

Name	Type	Description
@event	string	New text. In the "html" input mode, the HTML content of the input.

RequestBindingConfig attachmentsChange

Action executed when the collection of attachments changes, for example, after a user deletes an attachment using the button.

Parameters

Name	Type	Description
@event	array	New collection of attachments.

RequestBindingConfig isFocusedChange

Action executed when the input receives or loses focus.

Parameters

Name	Type	Description
@event	boolean	Whether the input has focus.

Agent inbox component (crt.AgentInbox)

Agent inbox is a component to show the details of the selected call in the item view. The call details include the caller identity, the call duration, built-in call control buttons, and custom elements in four content slots.

string type

Component type. "crt.AgentInbox" for the Agent inbox component.

BaseViewModelCollection callsCollection

Collection of calls in progress. The component uses the collection to restore unsaved call changes after the collection reloads and to set the WrapUpStopped attribute of the call to "true" when the wrap-up timer stops.

Guid selectedCallId

ID of the call record to show. Creatio shows the call only while it is in progress or in wrap-up. If you bind the property to an attribute, the component writes the ID of the consultation call to the attribute when the main call ends during a consultation. The component executes the selectedCallIdChange action.

CallLookupValue currentCall

Details of the call that the component shows. The property is read-only: the component ignores the value you pass. If you bind the property to an attribute without converters, the component writes the call that it shows to the attribute, or "null" if no call is shown.

LookupValue currentCallContact

Contact or employee of the call that the component shows. The property is read-only: the component ignores the value you pass. If you bind the property to an attribute without converters, the component writes the contact or employee to the attribute.

LookupValue currentCallAccount

Account of the call that the component shows. The property is read-only: the component ignores the value you pass. If you bind the property to an attribute without converters, the component writes the account to the attribute.

LookupValue[] currentCallIdentifiedContacts

Contacts and employees identified for the call that the component shows. The property is read-only: the component ignores the value you pass. If you bind the property to an attribute without converters, the component writes the list to the attribute.

LookupValue[] currentCallIdentifiedAccounts

Accounts identified for the call that the component shows. The property is read-only: the component ignores the value you pass. If you bind the property to an attribute without converters, the component writes the list to the attribute.

boolean visible

Whether to show the component.

Available values

Value	Description
true	The component is shown.
false	The component is hidden.

string[] editableAttributesList

List of call attributes whose unsaved values the component restores after the collection of calls reloads, for calls in progress or in wrap-up. The component always restores the WrapUpStopped attribute. By default, the list is empty.

array callControlsPanel

Collection of elements to show in the call details below the caller identity, the call duration, and the built-in call control buttons, for example, the call result, a comment, and buttons to save or complete the call. Creatio shows the elements only while the component shows a call.

array centerPanel

Collection of elements to show below the call details.

array footerPanel

Collection of elements to show at the bottom of the component.

array topActions

Collection of elements in the top action bar.

string visibilityStrategyMode

Strategy to hide the component. By default, "destroy."

Available values

Value	Description
destroy	Creatio removes the component from the page.
hide	Creatio hides the component and keeps its state. Creatio creates the component the first time it becomes visible. Available if the `UseHideVisibilityStrategy` additional feature is enabled. Otherwise, Creatio removes the component from the page. Learn more: Interface control tools (FeatureToggle).

RequestBindingConfig currentCallChange

Action executed each time the component refreshes the call that it shows.

Parameters

Name	Type	Description
@event	CallLookupValue	Call that the component shows. "null" if no call is shown. Includes the `value` (ID of the call record), `displayValue` (phone number of the selected identity), `state` (call state), and `callId` (telephony call ID) properties.

RequestBindingConfig selectedCallIdChange

Action executed when the component selects the consultation call because the main call ended during a consultation.

Parameters

Name	Type	Description
@event	Guid	ID of the consultation call record.

RequestBindingConfig currentCallContactChange

Action executed each time the component refreshes the call that it shows, for example, after the call state changes, after identification, or after the user selects a different identity.

Parameters

Name	Type	Description
@event	LookupValue	Contact or employee selected for the call. "null" if no call is shown or the selected identity is not a contact or employee.

RequestBindingConfig currentCallAccountChange

Action executed each time the component refreshes the call that it shows. If a contact is selected for the call, the action receives "null" even if the contact belongs to an account.

Parameters

Name	Type	Description
@event	LookupValue	Account selected for the call. "null" if no call is shown or the selected identity is not an account.

RequestBindingConfig currentCallIdentifiedContactsChange

Action executed each time the component refreshes the call that it shows.

Parameters

Name	Type	Description
@event	LookupValue[]	Contacts and employees identified for the call. An empty array if none are identified, "null" if no call is shown.

RequestBindingConfig currentCallIdentifiedAccountsChange

Action executed each time the component refreshes the call that it shows.

Parameters

Name	Type	Description
@event	LookupValue[]	Accounts identified for the call. An empty array if none are identified, "null" if no call is shown.

RequestBindingConfig identityClick

Action executed when a user clicks the contact, account, or employee of the main or consultation call. The action is not executed if the identity has no object name.

Parameters

Name	Type	Description
@event.id	Guid	Record ID.
@event.entityName	string	Object name.
@event.fields	array	Collection of identity fields. Each field includes the optional `caption`, `value`, and `icon` properties.

Item list component (crt.MultiList)​

Conversation component (crt.Conversation)​

Message editor component (crt.MessageEditor)​

Message editor body component (crt.MessageEditorBody)​

Message editor input component (crt.MessageEditorInput)​

Agent inbox component (crt.AgentInbox)​

See also​

Item list component (crt.MultiList)

Conversation component (crt.Conversation)

Message editor component (crt.MessageEditor)

Message editor body component (crt.MessageEditorBody)

Message editor input component (crt.MessageEditorInput)

Agent inbox component (crt.AgentInbox)

See also