Настройка внешнего вида

Дизайн и поведение чата задаются полями THRAttributes.

Настройка отображения

История

• historyLoadingCount - количество сообщений, которое загружается из истории. По умолчанию загружается 50 сообщений.

Поведение навигации

• canShowSpecialistInfo - показывать ли экран информации об операторе (открывается по тапу на аватар оператора).

Экран спиннера + загрузки

• launchActivityViewColor - спиннер, цвет анимационной картинки, показывающая загрузку
• launchViewInnerBoxBackgroundColor - спиннер, цвет прямоугольника в центре экрана
• launchViewInnerBoxCornerRadius - спиннер, радиус скругления углов прямоугольника в центре экрана
• launchViewInnerBoxSize - спиннер, размеры прямоугольника в центре экрана
• launchViewTextColor - спиннер, цвет текста под анимационной картинкой
• launchViewTextFont - спиннер, шрифт текста под анимационной картинкой
• launchViewBackgroundColor - спиннер, цвет экрана загрузки
• loadingChatErrorImage - (UIImage) центральная картинка на экране загрузки
• loadingChatTitleFont - шрифт текста на экране загрузки
• loadingChatTitleColor - цвет текста на экране загрузки
• loadingChatSubtitleFont - шрифт подтекста на экране загрузки
• loadingChatSubtitleColor - цвет подтекста на экране загрузки
• loadingChatRepeatButtonTitleFont - шрифт текста кнопки на экране загрузки
• loadingChatRepeatButtonTitleColor - цвет текста кнопки на экране загрузки
• loadingChatRepeatButtonBackgroundColor - цвет кнопки на экране загрузки

Внешний вид navigationBar

• statusBarStyle - стиль статус бара, применяется только при интеграции чата на полный экран default: UIStatusBarStyleLightContent
• navigationBarVisible - признак, определяет, отображается ли шапка чата (по умолчанию скрыта)
• attributes.showCloseButton - признак, определяет, скрыта ли кнопка закрытия чата
• closeButtonColor - (UIColor) цвет кнопки закрытия чата (template rendering)
• closeButtonImage - (UIImage) иконка кнопки закрытия чата (template rendering)
• navigationBarTitleFont - шрифт основного текста в шапке чата
• navigationBarTitleColor - цвет основного текста в шапке чата
• navigationBarBackButtonColor - цвет кнопки назад в шапке чата
• navigationBarSubtitleFont - шрифт подзаголовка в шапке чата
• navigationBarSubtitleColor - цвет подзаголовка в шапке чата
• chatStateNotConnectedTitle (Устаревшее с 3.8.4) - заголовок чата при отсутствии связи, по умолчанию "Контакт центр" (начиная с версии 3.8.4 перенесен в ThreadsLocalizable. Новый ключ state_not_connected)
• chatStateReadyTitle (Устаревшее с 3.8.4) - заголовок чата готового к работе, по умолчанию "Контакт центр" (начиная с версии 3.8.4 перенесен в ThreadsLocalizable. Новый ключ state_ready)
• navigationBarSubtitleShowOrgUnit - показывать ли подразделение агента, по умолчанию выключено
• navigationBarCustomizeTitle - использовать динамический заголовок в шапке чата, по умолчанию включено
• navigationBarTitle - статический заголовок в шапке чата
• navigationBarLarge - увеличенный заголовок в шапке чата, выравнивание влево, кнопка закрытия чата отключена
• navigationBarShadow - тень для навигационного бара (по умолчанию выключено)
• navigationBarShadowSettings - (THRSettingsShadow) сгруппированный в структуру набор настроек для тени навигационного бара

    let shadowSettings = THRSettingsShadow(opacity: 1.0,
                                           radius: 3.0,
                                           offset: CGSize(width: 3.0, height: 3.0),
                                           color: .black)
        
    Threads.threads().attributes.navigationBarShadowSettings = shadowSettings

Приветственный экран

к сведению

отображается, пока в чате нет сообщений

• backgroundColor - фоновый цвет чата
• placeholderImage - изображение на пустом экране
• placeholderTitleColor - цвет основного текста на пустом экране
• placeholderSubtitleColor - цвет описания на пустом экране
• placeholderTitleFont - шрифт основного текста на пустом экране
• placeholderSubtitleFont - шрифт описания на пустом экране

Внешний вид поля ввода сообщения

• showAttachButton - отображать или нет кнопку отправки файла: true - отображать, false - не отображать. По умолчанию true.
• attachButtonColor - основной цвет кнопки отправки файла
• attachButtonHighlightColor - цвет нажатой кнопки отправки файла
• attachButtonImage - иконка кнопки отправки файла
• sendButtonColor - основной цвет кнопки отправки сообщений
• sendButtonHighlightColor - цвет нажатой кнопки отправки сообщений
• sendButtonDisabledColor - цвет неактивной кнопки отправки сообщений
• sendButtonImage - иконка кнопки отправки сообщения (если задана - то имеет приоритет перед конфигурацией кнопки с текстом "Отправить")
• sendButtonFont - шрифт на кнопке отправки сообщений (для кнопки без иконки, с текстом "Отправить")
• myMessageFont - шрифт текста набираемого сообщения
• toolbarInputTextColor - цвет текста сообщения
• toolbarInputCursorColor - цвет курсора в поле ввода
• toolbarBackgroundColor - цвет заливки toolbar
• toolbarTintColor - цвет подсветки элементов в toolbar
• toolbarSeparatorLineColor - цвет разделительной линии тулбара
• toolbarQuotedMessageAuthorFont - шрифт для имени автора в цитируемом сообщении
• toolbarQuotedMessageFont - шрифт для текста цитируемого сообщения
• toolbarQuotedMessageAuthorColor - цвет для имени автора в цитируемом сообщении
• toolbarQuotedMessageColor - цвет для текста цитируемого сообщения
• toolbarInputMinimumHeight - минимальная высота поля ввода
• toolbarInputMaximumHeight - максимальная высота поля ввода
• toolbarInputCornerRadius - радиус скругления углов поля ввода
• toolbarInputHasBorder (true/false) - управление отображением контура поля ввода
• toolbarInputBackgroundColor - цвет заливки поля ввода

Внешний вид индикатора ожидания оператора

• waitingSpecialistSpinnerColor - цвет индикатора загрузки
• waitingSpecialistBgColor - цвет фона индикатора загрузки
• waitingSpecialistBorderColor - цвет границ индикатора загрузки
• waitingSpecialistBorderWidth - толщина границ индикатора загрузки
• showWaitingForSpecialistProgress - признак, отображать ли индикатор загрузки при поиске оператора

Внешний вид индикатора ScrollToBottom

• scrollToBottomImage - иконка на кнопке ScrollToBottom
• scrollToBottomBadgeColor - цвет фона для индикатора непрочитанных сообщений сверху ScrollToBottom
• scrollToBottomBadgeTextColor - цвет текста для индикатора непрочитанных сообщений сверху ScrollToBottom

Общие настройки сообщений

• bubbleMessageFont - шрифт в текстах сообщений
• bubbleTimeFont - шрифт времени отправки сообщения
• failedMessageFont - шрифт для предупреждения "Сообщение не отправлено"
• messageHeaderFont - шрифт для даты сообщений
• messageHeaderTextColor - цвет для даты сообщений
• quoteAuthorFont - шрифт для имени автора цитированного сообщения
• quoteMessageFont - шрифт для текста цитированного сообщения
• quoteTimeFont - шрифт для времени цитированного сообщения
• quoteFilesizeFont - шрифт для размера цитированоого файла
• messageBubbleFilledMaskImage - изображение маски для сообщений (png-файл, заполненный бабл с прозрачным фоном). Если дефолтная настройка изменяется, то для messageBubbleStrokedMaskImage нужно использовать файл, учитывающий новые контуры messageBubble.
• messageBubbleStrokedMaskImage - изображение маски для сообщений (png-файл, контур бабла с прозрачным фоном)
• messageContainerLeftOffset - сдвиг контейнера сообщения слева направо. Используйте, если ваш бабл содержит ручку-выступ. Сдвиг задается по размеру ширины этого выступа.
• messageContainerRightOffset - сдвиг контейнера сообщения справа налево. Используйте, если ваш бабл содержит ручку-выступ. Сдвиг задается по размеру ширины этого выступа.
• emptyImageColor - цвет незагруженного изображения
• commonMessageAvatarSize - размер аватара несистемного сообщения в pt.
• timeAndStatusBackgroundColor - цвет подложки статуса и времени на сообщениях с картинкой

Системные сообщения

• systemMessageAvatarSize - размер аватара в системном сообщении
• specialisConnectTitleFont - шрифт текста с именем подключившегося оператора
• specialisConnectSubtitleFont - шрифт дополнительного текста под именем оператора ("подключился к диалогу")
• specialisConnectTitleColor - цвет текста с именем подключившегося оператора
• specialisConnectSubtitleColor - цвет дополнительного текста под именем оператора ("подключился к диалогу")
• typingText - текст, для индикатора тайпинга (если текст будет не задан, будет отображаться стандартная для чата анимированная view)
• scheduleIcon - иконка системного сообщения "Чат недоступен"
• scheduleAlertColor - цвет текста системного сообщения "Чат недоступен"
• scheduleAlertFont - шрифт текста системного сообщения "Чат недоступен"
• scheduleIconBackgroundColor - цвет иконки нерабочего времени чата

Входящие сообщения

• incomingBubbleStroked - (BOOL) должен ли фон входящего сообщения быть контурным
• incomingBubbleColor - цвет фона/контура входящего сообщения
• incomingBubbleTextColor - цвет текста входящего сообщения
• incomingTimeColor - цвет времени отправки входящего сообщения
• showIncomingAvatar - показывать ли аватар специалиста во входящих сообщениях
• incomingQuoteSeparatorColor - цвет вертикальной черты во входящем сообщении с цитатой
• incomingQuoteAuthorColor - цвет имени автора во входящем сообщении с цитатой
• incomingQuoteMessageColor - цвет текста во входящем сообщении с цитатой
• incomingQuoteFilesizeColor - цвет размера файла во входящем сообщении с цитатой
• incomingFileIconTintColor - цвет иконки файла во входящем сообщении
• incomingFileIconBgColor - фон индикатора загрузки файла во входящем сообщении
• incomingMediaTimeColor - цвет времени отправки во входящем сообщении с ка
• incomingBubbleLinkColor - цвет ссылок

Исходящие сообщения

• failedBubbleStroked - (BOOL) должен ли фон неотправленного сообщения быть контурным
• failedBubbleColor - цвет фона/контура неотправленного сообщения
• outgoingBubbleStroked - (BOOL) должен ли фон отправленного сообщения быть контурным
• outgoingBubbleColor - цвет фона/контура отправленного сообщения
• outgoingBubbleTextColor - цвет текста отправленного сообщения
• outgoingTimeColor - цвет времени отправки исходящего сообщения
• outgoingPendingStatusColor, outgoingDeliveredStatusColor, outgoingReadStatusColor - цвета иконок статусов отправки сообщения
• avatarPlaceholderImage - заглушка для несуществующих аватаров
• outgoingQuoteSeparatorColor - цвет разделителя в исходящем сообщении с цитатой
• outgoingQuoteAuthorColor - цвет имени автора в исходящем сообщении с цитатой
• outgoingQuoteMessageColor - цвет текста цитаты в исходящем сообщении
• outgoingQuoteFilesizeColor - цвет размера файла в цитированном исходящем сообщении
• outgoingMediaTimeColor - цвет времени отправки исходящего сообщения с картинкой
• outgoingMediaPendingStatusColor, outgoingMediaDeliveredStatusColor, outgoingMediaReadStatusColor - цвета иконок статусов отправки сообщений с картинкой
• outgoingBubbleLinkColor - цвет ссылок
  • outgoingPendingStatusImage - (UIImage) картинка для статуса Ожидание
  • outgoingDeliveredStatusImage - (UIImage) картинка для статуса Доставлено
  • outgoingReadStatusImage - (UIImage) картинка для статуса Прочитано

Голосовые сообщения

• voiceRecordingAllowed - показывать ли кнопку записи голосового сообщения
• voiceMessageRecordButtonImage - иконка кнопки записи
• voiceMessageSendButtonImage - иконка кнопки отправки голосового сообщения
• voiceMessageRecordSendButtonColor - цвет иконки записи/отправки голосового сообщения
• voiceMessagePlayImage - иконка кнопки воспроизведения
• voiceMessagePauseImage - иконка кнопки паузы
• incomingVoiceMessagePlayPauseColor - цвет кнопки воспроизведения/паузы входящего сообщения
• outgoingVoiceMessagePlayPauseColor - цвет кнопки воспроизведения/паузы исходящего сообщения
• previewVoiceMessagePlayPauseColor - цвет кнопки воспроизведения/паузы превью сообщения
• incomingVoiceMessageProgressColor - цвет части прослушанного входящего сообщения
• outgoingVoiceMessageProgressColor - цвет части прослушанного исходящего сообщения
• previewVoiceMessageProgressColor - цвет части прослушанного превью сообщения
• previewVoiceMessageBackgroundColor - цвет фона превью голосового сообщения

Изображения + отступы от краев сообщения

• imageEdgesActivated - (Bool) включить/выключить отступы у изображений внутри bubble сообщения
• imageEdges - (UIEdgeInsets) структура с определениями отступов (top, left, bottom, right)
• imageCornerRadius - (CGFloat) радиус на углах изображения (при включенной опции imageEdgesActivated)

Поиск сообщений

• searchEnabled - показывать ли кнопку поиска сообщений (по умолчанию true)
• searchScopeBarTintColor - цвет подсветки scopeBar-а экрана поиска сообщений (переключение режимов поиска - сообщения, изображения, файлы)
• searchBarTextColor - цвет текста в строке поиска
• searchBarTintColor - цвет каретки в строке поиска
• searchScopeBarFont - шрифт текста в scopeBar-е
• searchBarTextFont - шрифт текста в строке поиска
• clearSearchIcon - иконка для кнопки "Очистить" в строке поиска
• findedMessageHeaderTextColor - цвет текста в шапке таблицы с результатами поиска
• findedMessageHeaderBackgroundColor - фон шапки таблицы с результатами поиска
• findedMessageHeaderTextFont - шрифт текста в шапке таблицы с результатами поиска
• findMoreMessageTextColor - цвет текста в кнопке "Найти еще" в поиске
• findMoreMessageTextFont - шрифт текста в кнопке "Найти еще" в поиске
• searchMessageAuthorTextColor - цвет имени автора найденного сообщения
• searchMessageTextColor - цвет текста найденного сообщения
• searchMessageDateTextColor - цвет даты отправки найденного сообщения
• searchMessageFileTextColor - цвет имени файла в найденном сообщении
• searchMessageMatchTextColor - цвет "совпадения" поискового запроса в тексте найденного сообщения (если поисковый запрос “Прив”, в сообщении с текстом “Привет” подстрока”Прив” выделится этим цветом)
• searchMessageAuthorTextFont - шрифт имени автора найденного сообщения
• searchMessageTextFont - шрифт текста найденного сообщения
• searchMessageDateTextFont - шрифт даты отправки найденного сообщения
• searchMessageFileTextFont - шрифт имени файла в найденном сообщении
• searchMessageMatchTextFont - шрифт "совпадения" поискового запроса в тексте найденного сообщения
• searchBarIconTintColor - цвет иконки поиска в шапке чата
• searchImageNotFound - (UIImage) картинка, если не было найдено при поисковом запросе ни одного сообщения
• searchTextColorNotFound - цвет текста сообщения, если не было найдено при поисковом запросе ни одного сообщения
• searchTextFontColorNotFound - шрифт текста сообщения, если не было найдено при поисковом запросе ни одного сообщения

Превью ссылок

• linkPreviewEnabled - выключает | выключает превью ссылок в сообщениях (false по умолчанию)

Отправка фотографий в чат

• photoPickerBackgroundColor - цвет заливки pickerSheet
• photoPickerSheetTextColor - цвет шрифта в pickerSheet-е со списком фотографий
• photoPickerMaxImagesCount - максимальное количество изображений, который клиент может отправить в одном сообщении (минимум - 1, максимум - 20, по умолчанию - 10)

Просмотр файлов и изображений

• fileViewerNavBarBackgroundColor - цвет навбара на экране просмотра файлов\изображений
• fileViewerNavBarTintColor - цвет контролов навбара
• fileViewerBackgroundColor - цвет фона
• fileViewerTitleColor - цвет заголовка
• fileViewerTitleFont - шрифт заголовка

Опросы

• surveyTextColor - цвет основного текста опроса
• surveyTextFont - шрифт основного текста опроса
• surveyCompletionColor - цвет текста завершения опроса
• surveyCompletionFont - шрифт текста завершения опроса
• surveyCompletionDelay - задержка завершения опроса в миллисекундах, в течение которой можно поменять оценку. По умолчанию 3000.
• iconStarRatingEmty - иконка пустого рейтинга - передавать как темплейт imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
• iconStarRatingFull - иконка заполненного рейтинга - передавать как темплейт imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
• starRatingColorEnabled - цвет заполненной иконки рейтинга опроса
• starRatingColorDisabled - цвет пустой иконки рейтинга опроса
• starRatingColorCompleted - цвет иконки рейтинга завершенного опроса
• iconLikeEmpty - иконка не выбранного положительного ответа бинарного опроса - передавать как темплейт imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
• iconLikeFull - иконка выбранного положительного ответа бинарного опроса - передавать как темплейт imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
• iconDislikeEmpty - иконка не выбранного отрицательного ответа бинарного опроса - передавать как темплейт imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
• iconDislikeFull - иконка выбранного отрицательного ответа бинарного опроса - передавать как темплейт imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
• likeRatingColorEnabled - цвет выбранной иконки ответа на бинарный опрос
• likeRatingColorDisabled - цвет не выбранной иконки ответа на бинарный опрос
• likeRatingColorCompleted - цвет иконки выбранного ответа завершенного бинарного опроса
• likeLabelOnStarColor - цвет текста на иконке завершенного опроса
• likeLabelUnderStarColor - цвет текста под иконкой завершенного опроса
• surveyButtonsBackgroundColor - цвет фона кнопок в кнопочном опросе
• surveyButtonsTextColor - цвет текста кнопок в кнопочном опросе
• surveyButtonsCompletedColor - цвет текста завершенного кнопочного опроса

Быстрые ответы

• quickRepliesBlockInput - блокировать ли поле ввода при наличии быстрых ответов
• quickReplyPresentationMode - режим отображения кнопок быстрых ответов. .toolbar - во всплывающей панели, .embed - в потоке сообщений
• quickReplyAlignment - выравнивание быстых ответов по горизонтали. Выравнивание по центру : .center. Выравнивание по левому краю: .left. Выравнивание по правому краю: .right. Значение по умолчанию: .right
• quickReplyFont - шрифт текста быстрых ответов
• quickReplyBorderCornerRadius - радиус скругления углов
• quickReplyBorderColor - цвет границы
• quickReplyBackgroundColor - цвет фона
• quickReplyTextColor - цвет текста
• quickReplyBackgroundColorHighlighted - цвет фона при нажатии
• quickReplyTextColorHighLighted - цвет текста при нажатии

Локальные уведомления

• toastViewTextCopy - текст уведомления (String)
• toastViewTextColor - цвет текста уведомления (UIColor)
• toastViewBackgroundColor - цвет фона уведомления (UIColor)
• toastViewSize - размер уведомления (CGSize)

Дополнительные параметры

• canShowSpecialistInfo - можно ли открыть экран с информацией об операторе
• navigationBarVisible - видимость шапки (навигейшн бара)
• customHTTPHeadersForDataStore - набор пользовательских HTTP-заголовков для датастора
• historyLoadingCount - количество сообщений, загружаемых при запросе истории
• refreshColor - цвет индикатора подгрузки сообщений
• scrollToLatest - прокрутка чата к последнему сообщению в ленте после получения истории (по умолчанию false)

Расширенные настройки элементов управления

Для некоторых элементов управления есть возможность полного переопределения внешнего вида:

Кнопка отправить

• [Threads threads].controls.sendButton - кнопка отправки сообщения

  let sendButton = UIButton(frame: .zero)
    sendButton.backgroundColor = UIColor.lightGray
    sendButton.setTitle("Послать", for: .normal)
    sendButton.tintColor = (UIColor.blue)
    sendButton.setTitleColor(UIColor.red, for: .normal)
    sendButton.setTitleColor(UIColor.gray, for: .focused)
    sendButton.setTitleColor(UIColor.green, for: .disabled)
    sendButton.layer.borderWidth = 1
    sendButton.layer.cornerRadius = 4
    
    threads.controls.sendButton = sendButton

Кнопка добавления файлов

• [Threads threads].controls.attachButton - кнопка прикрепления вложения к сообщению

  let frame = CGRect(x: 0, y: 0, width: 60, height: 44)
  let attachButton = UIButton(frame: frame)
      attachButton.setImage(UIImage(named: "tabBarItemUsers"), for: .normal)
      attachButton.tintColor = UIColor.brown
      attachButton.backgroundColor = UIColor.lightGray
      attachButton.layer.borderWidth = 1
      attachButton.layer.cornerRadius = 4
  
  threads.controls.attachButton = attachButton