Version: Next

Темы оформления

Применение тем

В классе ChatCenterUI до вызова метода init(...) задайте стили, изменив поля theme или darkTheme. Данные параметры опциональны. В SDK уже заданы параметры по-умолчанию для светлой темы, если вы не определите свои. В случае, если не определена темная тема, внутри SDK всегда будет использоваться светлая тема.

Пример:

chatCenterUI = ChatCenterUI(applicationContext).apply {
    theme = chatLightTheme
    darkTheme = chatDarkTheme
    init(server.threadsGateProviderUid, server.appMarker, chatConfig)
}

Тема состоит из двух уровней. Первый уровень - это компоненты (ChatComponents), второй флоу (ChatFlows). Компоненты представляют собой набор общих стилей для отдельных view. К примеру, ниже представлен фрагмент кода для "кнопок-иконок" внутри SDK:

class IconButtonComponent(
    internal val context: Context,
    colors: ChatColors,
    images: ChatImages
) {
    /**
     * Иконка для кнопки "назад"
     */
    @DrawableRes
    var backBtnImage = images.backBtn

   //...

    /**
     * Цвет кнопки "назад"
     */
    @ColorRes
    var backButtonColor = colors.backButton

    /**
     * Цвет кнопки "назад"
     */
    @ColorRes
    var chatToolbarInverseIconTintColor = colors.chatToolbarInverseIconTint

    //...

    /**
     * Цвет иконки очистки цитаты
     */
    @ColorRes
    var quoteClearIconColor = colors.quoteClearIcon
    
}

Поля данного класса будут применены ко всем подобным кнопкам в приложении. Вы можете переопределить в SDK какие-то компоненты целиком, либо переопределить точечно конкрутную кнопку через ChatFlows.

Компонент чата можно переопределить как целиком, так и его часть:

val lightChatComponents = ChatComponents(
    applicationContext,
    colors = lightColors,
    images = lightImages
).apply {
    navigationBarStyle = navigationBarStyle.copy(closeButtonEnabled = false)
}

Цвета и картинки, указанные выше при создании компонентов - опциональны. Можно задать свои, переопределив только те, которые считаете нужным:

val lightColors = ChatColors(
    main = R.color.light_main,
    searchingProgressLoader = R.color.light_main,
    bodyIconsTint = R.color.light_main,
    incomingText = R.color.black_color,
    incomingTimeText = R.color.light_time_text,
    outgoingTimeText = R.color.light_time_text,
    outgoingText = R.color.black_color,
    incomingBubble = R.color.alt_white,
    outgoingBubble = R.color.light_outgoing_bubble,
    toolbarText = R.color.white_color,
    messageSendingStatus = R.color.light_icons,
    messageSentStatus = R.color.light_icons,
    messageDeliveredStatus = R.color.light_icons,
    messageReadStatus = R.color.light_icons,
    messageFailedStatus = R.color.light_icons,
    incomingLink = R.color.light_links,
    outgoingLink = R.color.light_links,
    toolbar = R.color.light_main,
    statusBar = R.color.light_statusbar,
    menuItem = R.color.light_main
)

При переопределении компонента выше для светлой темы мы меняем кнопку назад для всех экранов: чат, просмотр изображений и т.д. Однако если вы переопределите эту кнопку внутри ChatFlows, это будет иметь более высокий приоритет перед компонентом.

В дальнейшем вы создаете тему:

chatLightTheme = ChatTheme(lightChatComponents)

и при инициализации SDK устанавливаете ее:

chatCenterUI = ChatCenterUI(applicationContext, loggerConfig).apply {
    theme = chatLightTheme
    darkTheme = chatDarkTheme
    init(server.threadsGateProviderUid ?: "", server.appMarker ?: "", chatConf)
}

Внутри ChatFlows представлены все элементы, которые отображены в SDK. Если вам, к примеру, нужно точечно переопределить только кнопку "назад", вы можете сделать это следующий образом:

val flows = ChatFlows(ChatComponents(applicationContext)).apply {
    // меняем кнопку "назад"
    chatFlow.navigationBar.backButton = IconButtonChatStyle(
        IconButtonColorStyle(
            iconTintColor = R.color.blue_color
        ),
        R.drawable.ic_cloud
    )
    // центрируем текст в тулбаре
    chatFlow.navigationBar.centerToolbarText = true
}
chatLightTheme = ChatTheme(flows) // создайте инстанс темы, переопределив точечно нужные элементы

note

При определении flow, как в случае с backButton выше, необходимо вызвать метод copy() на уже существующем flow (data класс) и переопределить значение при копировании, либо создать новый flow. Обращение к полю напрямую может не дать нужного эффекта

То есть при создании тем вы можете определять как компоненты, которые на более низком уровне будут задавать стили для view, так и переопределить конкретные view с помощью ChatFlows.

Или, к примеру, если вам нужно переопределить подсказку при поиске в поле ввода:

val flows = ChatFlows(ChatComponents(applicationContext)).apply {
    // ... Иные настройки flows, если необходимо
    searchFlow.searchBar.textInput?.placeholderText = "Поиск в сообщениях"
}

Пример переопределения внутри компонента цвета текста для всех полей ввода:

ChatTheme(
    lightChatComponents.apply {
        inputTextComponent.inputMessageColor = R.color.alt_blue
    }
)

Подробнее можно посмотреть в нашем демо и в специальном разделе, описывающем все методы публичного апи.

Ресурсы

Описание используемых ресурсов можно почитать в данном разделе

Инфографика

Данный раздел в изображениях описывает элементы чата и их кастомизацию через флоу и компоненты тем.

Основные элементы чата

1.1. Заголовок в тулбаре – chatFlow → navigationBar → toolbarHeaderText
Компонент: NavigationBarStyle

1.2. Подзаголовок в тулбаре – chatFlow → navigationBar → toolbarSubtitleText
Компонент: NavigationBarStyle

1.3. Заголовок с форматированием (Spannable) – chatFlow → navigationBar → toolbarSpannableHeaderText Компонент: NavigationBarStyle

1.4. Иконка поиска – searchFlow → searchBar → searchIcon Компонент: SearchChatComponent

1.5. Фоновый цвет панели навигации – chatFlow → navigationBar Параметр: backgroundColor Компонент: NavigationBarStyle

1.6. Цвет статус бара – chatFlow → navigationBar Параметр: statusBarColor
Компонент: NavigationBarStyle

1.7. Отображение тени под тулбаром – chatFlow → navigationBar Параметр: visibleShadow
Компонент: NavigationBarStyle

1.8. Центрирование текста в тулбаре – chatFlow → navigationBar Параметр: centerToolbarText
Компонент: NavigationBarStyle

1.9. Активность кнопки "Назад" – chatFlow → navigationBar Параметр: closeButtonEnabled
Компонент: NavigationBarStyle

1.10. Видимость подзаголовка в тулбаре – chatFlow → navigationBar Параметр: chatSubtitleEnabled
Компонент: NavigationBarStyle

1.11. Стиль кнопки "Назад" – chatFlow → navigationBar → backButton
Компонент: NavigationBarStyle

1.12. Стиль кнопки поиска – chatFlow → navigationBar → searchButton
Компонент: NavigationBarStyle

2.1. Изображение в сообщении – chatFlow → image Компонент: ImageComponent

2.2. Баббл чата (общий стиль) – chatFlow → chatBubble
Компонент: BubbleComponent

2.3. Иконки статусов сообщений – chatFlow → statusIcons
Компонент: MessageStatusesComponent

3. Текст для временной метки в сообщении с изображением – chatFlow → imagesTimeText
Компонент: TextComponent

4. Описание стиля системных сообщений – systemMessages → systemMessageText
Компоненты: TextComponent, ImageComponent

5. Стиль исходящих сообщений – outcomeMessages

6. Аватар оператора в чате – imageFlow
Компонент: ImageComponent

7. Стиль входящих сообщений – incomeMessages
Задействованы все компоненты

8. Кнопка прикрепления вложения – chatFlow → inputView → attachButton
Компонент: iconButtonComponent

9. Поле ввода сообщения – chatFlow → inputView
Компоненты: iconButtonComponent, inputTextComponent

10.1. Запись сообщения – chatFlow → inputView → voiceButton
Компонент: iconButtonComponent

10.2. Отправка сообщения – chatFlow → inputView → sendButton
Компонент: iconButtonComponent

Поведение при выделении сообщения

1. Стиль кнопки "Копировать" – chatFlow → navigationBar → copyButton
Компонент: NavigationBarStyle

2. Стиль кнопки "Ответить с цитированием" – chatFlow → navigationBar → replyButton
Компонент: NavigationBarStyle

3. Инвертированная кнопка "Назад" – chatFlow → navigationBar → invertedBackButton
Компонент: NavigationBarStyle

4. Цвет фона под выделенным сообщением – chatFlow → highlightingColor

Поле поиска сообщений

Поле поиска со�общений

1. Стиль кнопки поиска – chatFlow → navigationBar → searchButton
Компонент: SearchChatComponent

2. Цвет лоадера при поиске – searchFlow → searchLoaderColor
Компонент: SearchChatComponent

3. Стиль поля ввода – searchFlow → textInput
Компонент: SearchChatComponent

Список найденный сообщений

Поле поиска сообщений

1. Стиль кнопки очистки поля ввода – searchFlow → clearSearch
Компонент: SearchChatComponent

2.1. Цвет текста с автором сообщения – searchFlow → searchResultsStyle → searchResultsItemNameTextColor
Компонент: SearchChatComponent

2.2. Цвет текста с сообщением – searchFlow → searchResultsStyle → searchResultsItemMessageTextColor
Компонент: SearchChatComponent

2.3. Цвет текста даты – searchFlow → searchResultsStyle → searchResultsItemDateTextColor
Компонент: SearchChatComponent

2.4. Цвет разделителя между результатами – searchFlow → searchResultsStyle → searchResultsDividerColor
Компонент: SearchChatComponent

2.5. Иконка "стрелка вправо" – searchFlow → searchResultsStyle → searchResultsItemRightArrowDrawable
Компонент: SearchChatComponent

2.6. Цвет иконки "стрелка вправо" – searchFlow → searchResultsStyle → searchResultsItemRightArrowTintColor
Компонент: SearchChatComponent

2.7. Изображение при отсутствии результатов – searchFlow → searchResultsStyle → searchResultsNoItemsImageDrawable
Компонент: SearchChatComponent

2.8. Текст при отсутствии результатов – searchFlow → searchResultsStyle → searchResultsNoItemsText
Компонент: SearchChatComponent

2.9. Цвет текста при отсутствии результатов – searchFlow → searchResultsStyle → searchResultsNoItemsTextColor
Компонент: SearchChatComponent

2.10. Цвет фона в результатах поиска – searchFlow → searchResultsStyle → backgroundColor
Компонент: SearchChatComponent

Всплывающее сообщение

Всплывающее сообщени�е

Стиль для всплывающих сообщений – balloonsChatStyle
Стилизуется только в случае, если система может выбрать Snackbar, привязавшись ко вью

Компактный пуш

Стиль компактного push-уведомления – smallPushes
Компонент: PushesComponent

Развернутый пуш

Стиль расширенного push-уведомления – bigPushes
Компонент: PushesComponent

Быстрый ответ на пуш-уведомление

1. Стиль для тулбара – chatFlow → navigationBarStyle
Компонент: NavigationBarStyle

2. Фоновый цвет – chatFlow → backgroundColor
Компонент: ImageComponent

3. Цвет фона за полем ввода – chatFlow → answerLayoutBackgroundColor
Компонент: InputTextComponent

4. Иконка для ответа на сообщение с цитированием – chatFlow → replyIcon
Компонент: IconButtonComponent

5. Цвет иконок – chatFlow → iconColor
Компонент: ImageComponent

6. Стиль кнопки отправки сообщения – chatFlow → sendButton
Компонент: IconButtonComponent

7. Стиль текста с именем оператора – chatFlow → consultNameText
Компонент: TextComponent

8. Стиль текста с вопросом – chatFlow → questionText
Компонент: TextComponent

9. Стиль поля ввода для быстрых ответов – chatFlow → fastTextInput
Компонент: InputTextComponent

Запрос на завершение диалога

1. Текст – chatFlow → systemMessages → approveRequest
Компонент: TextComponent

2. Кнопка с положительным ответом – chatFlow → systemMessages → denyRequest
Компонент: TextComponent

3. Кнопка с отрицательным ответом – chatFlow → systemMessages → requestToResolve
Компонент: TextComponent

Отзыв о работе оператора (звезды)

Отзыв о работе оператора

1. Текст при просьбе проставить оценку – chatFlow → systemMessages → ratingStyle → askForRateText
Компонент: TextComponent

2. Текст благодарности за проставленную оценку – chatFlow → systemMessages → ratingStyle → thanksForRateText Компонент: TextComponent

3. Вид пустой звезды – chatFlow → surveyStyle → optionsSurveyUnselected
Компонент: ImageComponent

4. Вид заполненной звезды – chatFlow → surveyStyle → optionsSurveySelected
Компонент: ImageComponent

Опрос при завершении диалога (пальцы)

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

Стиль для рейтинга – chatFlow → systemMessages → ratingStyle
Компонент: RatingComponent

Опрос с кнопками

1. Стиль для кнопки опроса – chatFlow → buttonSurveyButton
Компонент: IconButtonChatStyle

2. Стиль текста для вопроса в опросах – chatFlow → buttonSurveyQuestion
Компонент: TextComponent

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

Стиль текста для кнопки быстрых ответов – chatFlow → chip
Компонент: TextComponent

Предпросмотр отправляемого файла

1. Стиль текста с заголовком цитаты – QuoteViewStyle → quoteHeaderChatViewText
Компонент: TextComponent

2. Стиль текста с сообщением цитаты – QuoteViewStyle → quoteMessageChatViewText
Компонент: TextComponent

3. Стиль кнопки "очистить" в цитате – QuoteViewStyle → quoteClearIconButton
Компонент: IconButtonChatStyle

Предпросмотр голосового файла

1. Стиль кнопки воспроизведения/паузы – chatFlow → quotePlayPauseButton
Компонент: IconButtonChatStyle

2. Стиль текста с продолжительностью голосового сообщения – chatFlow → quoteViewStyle → quoteDurationChatViewText
Компонент: TextComponent

Сообщения с файлом

chatFlow → outcomeMessages /incomeMessages → см. описание полей ниже:

1. Фоновый цвет элемента с файлом – FileMessageStyle → backgroundColor
Компонент: ImageComponent

2. Внутренние отступы для элемента - padding
Компонент: ImageComponent

3. Стиль для лоадера - loader
Компонент: LoaderChatStyle

4. Стиль для имени файла - fileName
Компонент: TextComponent

5. Стиль для характеристик файла - fileSpecs
Компонент: TextComponent

Сообщение с ошибкой при отправке

1. Текст ошибки загрузки файла - chatFlow → outcomeMessages /incomeMessages → fileMessageStyle → error

2. Стиль сообщений с ошибками – chatFlow → errorMessages → chatBubble
Компонент: BubbleComponent

Заглушка для изображения

Ресурс заглушки для недоступного изображения – imageFlow → imagePlaceholderResId
Компонент: ImageComponent

Прогресс-бар при старте чата

Прогресс-бар при старте чата – chatFlow → loader
Компонент: LoadingIndicatorComponent

Экран с ошибкой

1. Кнопка повторной инициализации чата – chatFlow → retryChatInitButton
Компонент: TextButtonComponent

2. Сообщение на экране ошибки чата – chatFlow → errorScreenMessage
Компонент: TextComponent

3. Изображение на экране ошибки чата – chatFlow → errorScreenImage
Компонент: ImageComponent

Экран-приветствие

1. Стиль заголовка приветствия – chatFlow → welcomeScreenStyle → welcomeScreenTitle
Компонент: TextComponent

2. Стиль подзаголовка приветствия – chatFlow → welcomeScreenStyle → welcomeScreenSubtitle
Компонент: TextComponent

3. Стиль изображения приветствия – chatFlow → welcomeScreenStyle → welcomeScreenImage
Компонент: ImagesChatStyle

4. Фоновый цвет экрана приветствия – chatFlow → welcomeScreenStyle → backgroundColor
Компонент: ChatMainComponent

Кнопка скролла вниз по сообщениям

1. Стиль кнопки скролла – chatFlow → outcomeMessages / incomeMessages → scrollDownButton
Компонент: ImageComponent

2. Цвет стикера непрочитанных сообщений – chatFlow → outcomeMessages / incomeMessages → unreadMsgStickerColor
Компонент: ChatMainComponent

3. Текст на стикере непрочитанных сообщений – chatFlow → outcomeMessages / incomeMessages → unreadMessagesCount
Компонент: TextComponent

Кнопка скролла вверх по сообщениям

1. Стиль кнопки скролла – chatFlow → outcomeMessages / incomeMessages → scrollUpButton
Компонент: ImageComponent

2. Цвет стикера непрочитанных сообщений – chatFlow → outcomeMessages / incomeMessages → unreadMsgStickerUpColor
Компонент: ChatMainComponent

3. Текст на стикере непрочитанных сообщений – chatFlow → outcomeMessages / incomeMessages → unreadMessagesCountUp
Компонент: TextComponent

Справочник параметров ChatColors

Ниже перечислены все доступные поля ChatColors. Значения задаются ссылками на ресурсы цветов (R.color.*).

Поле	Описание	Значение по умолчанию
`backButton`	цвет кнопки "назад"	`R.color.ecc_white`
`main`	основной цвет чата. Используется в элементах тулбара, лоадерах и т.д, где не задан собственный цвет	`R.color.ecc_green_83b144`
`searchingProgressLoader`	цвет для лоадера при поиске оператора	`R.color.ecc_consult_searching_progress_color`
`bodyIconsTint`	цвет иконок, если не задан собственный цвет	`main`
`toolbar`	цвет тулбара	`R.color.ecc_chat_toolbar`
`toolbarContextMenu`	цвет иконки "три точки", вызывающей меню в тулбаре	`R.color.ecc_chat_toolbar_context_menu`
`statusBar`	цвет статус бара	`R.color.ecc_chat_status_bar`
`menuItem`	цвет текста в элементе меню	`R.color.ecc_chat_toolbar_menu_item`
`toolbarText`	цвет текста в тулбаре	`R.color.ecc_white`
`incomingText`	цвет текста во входящих сообщениях	`R.color.ecc_black`
`outgoingText`	цвет текста в исходящих сообщениях	`R.color.ecc_white`
`incomingLink`	цвет текста во входящих ссылках	`R.color.ecc_incoming_message_link`
`outgoingLink`	цвет текста в исходящих ссылках	`R.color.ecc_outgoing_message_link`
`disabledColor`	цвет для отключенных элементов	`R.color.ecc_disabled_text_color`
`incomingBubble`	цвет входящего баббла	`R.color.ecc_white`
`outgoingBubble`	цвет исходящего баббла	`main`
`chatToolbarInverseIconTint`	цвет иконок в тулбаре, если цвет тулбара был инвертирован (при выборе сообщения, например)	`R.color.ecc_white`
`systemMessage`	цвет системных сообщений	`R.color.ecc_chat_system_message`
`errorText`	цвет текста с ошибками	`R.color.ecc_error_red_df0000`
`mainTextWhenErrorBubble`	см. название поля: main Text When Error Bubble	`R.color.ecc_white`
`errorBackground`	цвет баббла, если произошла ошибка в сообщении (например, не сработала отправка)	`R.color.ecc_error_red_df0000`
`errorIcon`	см. название поля: error Icon	`R.color.ecc_white`
`gallerySearchTitle`	цвет текста для заголовка при поиске на экране галереи	`R.color.ecc_white`
`gallerySearchSubtitle`	цвет текста для подзаголовка при поиске на экране галереи	`R.color.ecc_gallery_search_subtitle`
`galleryImageBottomName`	цвет для названия файла под изображением	`R.color.ecc_white`
`mediaAndFilesText`	цвет текста в разделе "Файлы и медиа" для заголовка, размера файла и его времени	`R.color.ecc_black`
`quickRepliesText`	цвет текста в быстрых ответах	`R.color.ecc_black`
`quickReplyButtonBackgroundTint`	см. название поля: quick Reply Button Background Tint	`R.color.ecc_white`
`incomingTimeText`	цвет текста для времени во входящих сообщениях	`incomingText`
`outgoingTimeText`	цвет текста для времени в исходящих сообщениях	`outgoingText`
`incomingImageTimeBackground`	цвет подложки под временем во входящих сообщениях	`R.color.ecc_incoming_time_background`
`outgoingImageTimeBackground`	цвет подложки под временем в исходящих сообщениях	`R.color.ecc_outgoing_time_background`
`surveyText`	цвет текста для опросов	`R.color.ecc_chat_system_message`
`buttonSurveyTextButtonColor`	см. название поля: button Survey Text Button Color	`R.color.ecc_white`
`surveyButtonBackgroundTintColor`	см. название поля: survey Button Background Tint Color	`main`
`buttonSurveyQuestionTextColor`	см. название поля: button Survey Question Text Color	`R.color.ecc_chat_system_message`
`surveyChoicesText`	цвет текста для выбора варианта ответа при опросе	`R.color.ecc_survey_choices_text`
`rateStarsCount`	цвет текста для количества выставленных звезд	`R.color.ecc_chat_outgoing_message_bubble`
`rateTotalStarsCount`	цвет текста для доступных звезд к выбору	`outgoingText`
`rateFrom`	цвет текста для предлога "из" (3 из 5)	`outgoingText`
`rateStar`	цвет иконки звезды	`outgoingText`
`scheduleText`	цвет текста для расписания	`R.color.ecc_schedule_text`
`unreadMessagesCountText`	цвет текста для количества непрочитанных сообщений	`R.color.ecc_chat_unread_msg_count_text`
`quoteHeaderChatView`	цвет текста для заголовка при цитировании	`R.color.ecc_black`
`quoteText`	цвет текста при цитировании	`R.color.ecc_black`
`quoteClearIcon`	см. название поля: quote Clear Icon	`main`
`welcomeScreenTitleText`	цвет текста для заголовка на приветственном экране	`R.color.ecc_welcome_screen_title`
`welcomeScreenSubtitleText`	цвет текста для подзаголовка на приветственном экране	`R.color.ecc_welcome_screen_subtitle`
`inputMessage`	цвет текста для полей ввода, кроме поиска	`R.color.ecc_black`
`inputMessageHint`	цвет текста для подсказки в полях ввода, кроме поиска	`R.color.ecc_grey_aaa`
`inputFieldBackground`	цвет фона для поля ввода	`R.color.ecc_white`
`searchText`	цвет текста для поля поиска	`R.color.ecc_white`
`searchHint`	цвет текста для подсказки в поле поиска	`R.color.ecc_cian_b2dfdb`
`chatBackground`	фоновый цвет для окна чата	`R.color.ecc_chat_background`
`searchResultBackground`	см. название поля: search Result Background	`R.color.ecc_chat_background`
`filesAndMediaIconTint`	цвет иконок в разделе "Файлы и медиа"	`R.color.ecc_green_83b144`
`voiceBtnBackground`	цвет фона для кнопки записи звукового сообщения	`main`
`voiceBtnIconColor`	цвет кнопки записи звукового сообщения	`R.color.ecc_white`
`sendBtnIconColor`	см. название поля: send Btn Icon Color	`main`
`messageSendingStatus`	цвет иконки статуса "отправляется"	`R.color.ecc_white`
`messageSentStatus`	цвет иконки статуса "отправлено"	`R.color.ecc_white`
`messageDeliveredStatus`	цвет иконки статуса "доставлено"	`R.color.ecc_white`
`messageReadStatus`	цвет иконки статуса "прочитано"	`R.color.ecc_white`
`messageFailedStatus`	цвет иконки статуса "ошибка"	`R.color.ecc_white`
`messageHighlighting`	цвет баббла при его подсветке	`R.color.ecc_chat_highlighting`
`chatButtonTintColorStateList`	набор цветов для разных состояний кнопки	`arrayOf(disabledColor, main, main)`
`chatErrorScreenButtonText`	цвет текста кнопки на экране с ошибкой при входе в чат	`R.color.ecc_white`
`chatErrorScreenMessageText`	цвет текста сообщения на экране с ошибкой при входе в чат	`R.color.ecc_chat_new_system_message`
`chatErrorScreenImageTint`	цвет тента изображения на экране с ошибкой при входе в чат	`main`
`pushBackground`	фоновый цвет для пуш-уведомления	`R.color.ecc_push_background`
`pushMessage`	цвет текста в пуш-уведомлениях	`inputMessage`
`quotePlayPauseButton`	цвет текста для кнопки запуска воспроизведения при цитировании сообщения	`R.color.ecc_preview_play_pause_button`
`imageScreenBackground`	фоновый цвет на полноэкранном просмотре изображения	`R.color.ecc_attachments_background`
`emptyStateBackground`	фоновый цвет, если нет сообщений в чате	`R.color.ecc_empty_state_background`
`separators`	цвет разделителей в чате	`R.color.ecc_icon_and_separators_color`
`unreadMsgSticker`	цвет стикера (фона под цифрами) непрочитанных сообщений	`R.color.ecc_chat_unread_msg_sticker_background`
`microphone`	цвет иконки микрофона	`R.color.ecc_record_button_small_mic`
`balloonText`	цвет текста во всплывающих сообщениях (Toast или Snackbar)	`R.color.ecc_black`
`balloonBackground`	фоновый цвет во всплывающих сообщениях (Toast или Snackbar)	`R.color.ecc_white`
`progressButtonStartDownloadTint`	цвет кнопки "загрузить файл" в начальном состоянии (загрузка еще не началась)	`bodyIconsTint`
`progressButtonInProgressTint`	цвет кнопки "загрузить файл" в процессе загрузки	`bodyIconsTint`
`progressButtonCompletedTint`	цвет кнопки "загрузить файл" после загрузки	`bodyIconsTint`
`progressButtonBackgroundTint`	фоновый цвет кнопки "загрузить файл"	`R.color.ecc_progress_button_background`
`surveySelectedColorFilter`	цвет для иконок при опросе, если опрос был выбран	`R.color.ecc_survey_selected_icon_tint`
`surveyUnselectedColorFilter`	цвет для иконок при опросе, если опрос не был выбран	`R.color.ecc_survey_unselected_icon_tint`
`bottomButtonTextColor`	цвет текста для кнопок внизу чата (камера, галерея, файл)	`R.color.ecc_chat_toolbar`
`bottomButtonsBackground`	цвет фона для кнопок внизу чата (камера, галерея, файл)	`R.color.ecc_white`
`imagesScreenText`	цвет текста на полноэкранном просмотре изображения	`R.color.ecc_white`
`emptyFilesAndMediaText`	цвет текста в случае отсутствия элементов на экране "Файлы и медиа"	`R.color.ecc_black`
`audioStatus`	цвет текста для текущего статуса аудио ("processing", например)	`R.color.ecc_black`
`alertsText`	цвет текста на всплывающих экранах (alerts)	`R.color.ecc_black`
`loaderTextColor`	цвет текста для сообщения при лоадере	`R.color.ecc_black`
`buttonsDefaultText`	цвет текста по умолчанию для кнопок	`R.color.ecc_black`
`buttonsDefaultStroke`	цвет границы по умолчанию для кнопок	`R.color.ecc_black`
`searchIcon`	цвет для иконок поиска	`R.color.ecc_white`
`searchLoaderTint`	цвет иконки поиска для лоадера при загрузке результатов поиска в поле ввода	`R.color.ecc_white`
`searchResultsDivider`	цвет разделителя между элементами в результатах поиска	`R.color.ecc_search_divider_color`
`searchResultsItemRightArrowTint`	цвет для иконки "стрелка вправо" в результатах поиска	`R.color.ecc_search_results_item_secondary`
`searchResultsItemDateText`	цвет текста для даты в результатах поиска	`R.color.ecc_search_results_item_secondary`
`searchResultsItemMessageText`	цвет текста с сообщением	`R.color.ecc_search_results_message_color`
`searchResultsItemNameText`	цвет текста с автором сообщения	`R.color.ecc_black`
`searchResultNoItemsText`	цвет текста для сообщения при отсутствии результатов поиска	`R.color.ecc_black`
`searchBarText`	цвет текста при вводе запроса	`R.color.ecc_white`
`chatToolbarHintText`	цвет текста для подсказки при поиске в поле ввода	`R.color.ecc_chat_toolbar_hint`
`messageEditedStatus`	см. название поля: message Edited Status	`R.color.ecc_message_edited_color`
`quoteBgColor`	цвет фона цитаты	`R.color.ecc_quote_bg_color`
`quoteDelimiterColor`	цвет разделителя цитаты	`R.color.ecc_quote_delimiter_color`
`quoteAuthorColorText`	цвет текста автора	`R.color.ecc_quote_author_color_text`
`quoteColorText`	цвет текста цитаты	`R.color.ecc_quote_color_text`
`quoteIconTintColor`	см. название поля: quote Icon Tint Color	`R.color.ecc_white`
`infoIcon`	см. название поля: info Icon	`R.color.ecc_error_red_df0000`
`searchHighlight`	см. название поля: search Highlight	`main`
`popupsBackground`	см. название поля: popups Background	`R.color.ecc_cian_b2dfdb`

Справочник параметров ChatImages

Ниже перечислены все доступные поля ChatImages. Значения задаются ссылками на ресурсы изображений (R.drawable.*).

Поле	Описание	Значение по умолчанию
`backBtn`	иконка для кнопки "назад" в тулбаре	`R.drawable.ecc_ic_arrow_back_white_24dp`
`selectRing`	иконка круга, отображаемая в правом верхнем углу при выборе файла (невыбранное состояние)	`R.drawable.ecc_aqua_ring`
`loader`	изображение главного лоадера по центру экрана	`R.drawable.ecc_im_loading`
`attachIcon`	иконка присоединения файла	`R.drawable.ecc_ic_attachment_button`
`voiceBtnBackground`	фоновое изображение для кнопки записи голосового сообщения	`R.drawable.ecc_record_button_background`
`voiceBtnIcon`	иконка микрофона для кнопки записи голосового сообщения	`R.drawable.ecc_record_button_icon`
`sendBtn`	иконка для кнопки отправки голосового сообщения	`R.drawable.ecc_ic_send_button`
`quoteClearBtn`	иконка для кнопки отмены цитирования	`R.drawable.ecc_ic_clear_36dp`
`clearSearch`	иконка для кнопки очистки поля ввода поиска	`R.drawable.ecc_ic_clear_gray_30dp`
`menuIcon`	иконка для кнопки меню в тулбаре	`R.drawable.ecc_ic_more_vert_24dp`
`downloadIcon`	иконка для кнопки загрузки файла	`R.drawable.ecc_ic_file_download_white_24dp`
`searchIcon`	см. название поля: search Icon	`R.drawable.ecc_ic_search_white_24dp`
`playIcon`	иконка для запуска воспроизведения голосового файла	`R.drawable.ecc_voice_message_play`
`pauseIcon`	иконка для приостановки воспроизведения голосового файла	`R.drawable.ecc_voice_message_pause`
`copyIcon`	иконка копирования файла (кнопка в тулбаре)	`R.drawable.ecc_ic_content_copy_24dp`
`replyIcon`	иконка цитирования файла (кнопка в тулбаре)	`R.drawable.ecc_ic_reply_24dp`
`quickReplyButtonBackground`	фоновое изображение для кнопки быстрого цитирования	`R.drawable.ecc_quick_reply_button_background`
`surveyButtonBackground`	см. название поля: survey Button Background	`R.drawable.ecc_survey_button_backround`
`timestampOutgoingBackground`	фоновое изображение для метки времени в исходящем сообщении	`R.drawable.ecc_timestamp_outgoing_underlayer`
`timestampIncomingBackground`	фоновое изображение для метки времени во входящем сообщении	`R.drawable.ecc_timestamp_incoming_background`
`chatInputBackground`	фоновое изображение для поля ввода сообщения	`R.drawable.ecc_chat_input_background`
`logoImage`	логотип, отображаемый на экране приветствия	`R.drawable.ecc_welcome_logo`
`operatorAvatarPlaceholder`	плейсхолдер для изображения оператора	`R.drawable.ecc_operator_avatar_placeholder`
`imagePlaceholder`	плейсхолдер для изображения в сообщении	`R.drawable.ecc_image_placeholder`
`outgoingImageMask`	маска для исходящего изображения, определяет его форму	`R.drawable.alt_ecc_outgoing_image_mask`
`incomingImageMask`	маска для входящего изображения, определяет его форму	`R.drawable.alt_ecc_incoming_image_mask`
`outgoingBubbleImage`	маска для исходящего сообщения, определяет его форму	`R.drawable.alt_ecc_outgoing_bubble`
`incomingBubbleImage`	маска для входящего сообщения, определяет его форму	`R.drawable.alt_ecc_incoming_bubble`
`scrollDownButtonIcon`	иконка для кнопки прокрутки списка сообщений к последнему	`R.drawable.ecc_scroll_down_icon`
`scrollDownBackground`	фоновое изображение для кнопки прокрутки списка сообщений к последнему	`R.drawable.ecc_scroll_down_background`
`scrollUpButtonIcon`	см. название поля: scroll Up Button Icon	`R.drawable.ecc_scroll_up_icon`
`scrollUpBackground`	см. название поля: scroll Up Background	`R.drawable.ecc_scroll_down_background`
`messageSending`	иконка для статуса "отправляется"	`R.drawable.ecc_message_image_sending`
`messageSent`	иконка для статуса "отправлено"	`R.drawable.ecc_message_image_sending`
`messageDelivered`	иконка для статуса "доставлено"	`R.drawable.ecc_message_image_delivered`
`messageRead`	иконка для статуса "прочитано"	`R.drawable.ecc_image_message_read`
`messageFailed`	иконка для статуса "ошибка"	`R.drawable.ecc_message_image_failed`
`rateStarSelected`	иконка заполненной звезды при выставлении оценки (опрос)	`R.drawable.ecc_options_survey_selected`
`rateStarUnselected`	иконка пустой звезды при выставлении оценки (опрос)	`R.drawable.ecc_options_survey_unselected`
`errorScreenImage`	изображение, отображаемое по центру экрана при ошибке загрузки чата	`R.drawable.ecc_serious_worker`
`pushIcon`	иконка, отображаемая в пуш-уведомлениях	`R.drawable.ecc_default_push_icon`
`balloonBackground`	фоновое изображение для всплывающего уведомления (Toast и Snackbar)	`R.drawable.ecc_background_snackbar`
`progressButtonStartDownload`	иконка начала загрузки файла	`R.drawable.ecc_ic_vertical_align_bottom_18dp`
`progressButtonInProgress`	иконка отмены загрузки файла	`R.drawable.ecc_ic_clear_36dp`
`progressButtonCompleted`	иконка по окончанию загрузки файла	`R.drawable.ecc_ic_file_outline_24dp`
`scheduleMessageIcon`	иконка для сообщений с недоступным оператором в связи с его расписанием	`R.drawable.ecc_schedule_icon`
`binarySurveyLikeUnselectedIcon`	иконка незаполненного пальца вверх (опрос)	`R.drawable.ecc_binary_survey_like_unselected`
`binarySurveyLikeSelectedIcon`	иконка заполненного пальца вверх (опрос)	`R.drawable.ecc_binary_survey_like_selected`
`binarySurveyDislikeUnselectedIcon`	иконка незаполненного пальца вниз (опрос)	`R.drawable.ecc_binary_survey_dislike_unselected`
`binarySurveyDislikeSelectedIcon`	иконка заполненного пальца вниз (опрос)	`R.drawable.ecc_binary_survey_dislike_selected`
`attachmentCameraIcon`	иконка камеры, используется в нижнем меню чата при выборе изображения	`R.drawable.ecc_ic_camera_42dp`
`attachmentGalleryIcon`	иконка галереи, используется в нижнем меню чата при выборе изображения	`R.drawable.ecc_ic_photo_42dp`
`attachmentFileIcon`	иконка выбора файла, используется в нижнем меню чата	`R.drawable.ecc_ic_file_fill_42dp`
`attachmentSendIcon`	иконка отправки сообщения, если было прикреплено вложение	`R.drawable.ecc_ic_send_42dp`
`attachmentQuoteIcon`	иконка цитирования вложения	`R.drawable.ecc_ic_reply_gray_24dp`
`searchLoader`	иконка поиска для лоадера при загрузке результатов поиска в поле ввода. По умолчанию отображается дефолтный лоадер	`loader`
`searchResultsItemRightArrow`	иконка "стрелка вправо" в результатах поиска	`R.drawable.right_arrow`
`searchResultNoItemsImage`	изображение для сообщения при отсутствии результатов поиска	`R.drawable.ecc_search_not_found`
`messageEditedStatusIcon`	изображение иконки для сообщения со статусом "отредактировано"	`R.drawable.ecc_message_image_edited`
`quoteBackgroundImage`	изображение фона цитаты	`R.drawable.ecc_quote_background`
`quoteIconBackground`	изображение подложки под иконкой файла или микрофона	`R.drawable.ecc_circle_gray_48dp`
`quoteFileIcon`	изображение файла в цитатах сообщения с вложением	`R.drawable.ecc_ic_file_outline_24dp`
`quoteMicIcon`	изображение микрофона в цитате аудиосообщения	`R.drawable.ecc_ic_mic_24dp`
`quoteImageMask`	маска изображения в цитате сообщения с картинкой	`R.drawable.ecc_quote_image_mask`
`infoIcon`	см. название поля: info Icon	`R.drawable.ecc_info_icon`

Приоритеты темизации: ChatColors, ChatImages, Components и Flows

Система тем делится на несколько уровней:

ChatColors / ChatImages / ChatTexts / ChatTypography
Базовые таблицы значений. Здесь вы задаёте глобальные цвета, картинки и шрифты для всего SDK.
ChatComponents
Объединяет базовые таблицы и собирает из них готовые компоненты (кнопки, тулбар, бабблы сообщений, лоадеры и т.п.).
Изменения на этом уровне влияют сразу на целые группы элементов.
ChatFlows
Финальный слой, где из компонентов собираются стили экранов и сценариев (chatFlow, searchFlow и т.д.).
Здесь удобно точечно переопределять поведение конкретных элементов (например, только время сообщений с ошибкой).

Правило приоритета простое:

Если вы изменили значение в ChatColors / ChatImages, оно станет новым значением по умолчанию для всех компонентов.
Если вы переопределили поле в ChatComponents, оно будет использоваться во всех флоу, пока флоу не переопределит его самостоятельно.
Если вы меняете стили напрямую в ChatFlows (как в демо-приложении), именно они имеют наивысший приоритет.

Рекомендуемый порядок кастомизации:

Сначала задать брендовые цвета и иконки через ChatColors и ChatImages.
При необходимости — настроить компоненты (например, navigationBarStyle или audioPlayer).
И только для особых кейсов (ошибки, особые сообщения и т.д.) — модифицировать ChatFlows.

Частые сценарии кастомизации

Ниже несколько типичных примеров настройки внешнего вида на основе демо-приложения.

Пример 1. Свои брендовые цвета бабблов и тулбара

val lightColors = ChatColors(
    main = R.color.my_brand_main,
    incomingBubble = R.color.my_incoming_bubble,
    outgoingBubble = R.color.my_outgoing_bubble,
    toolbar = R.color.my_toolbar_bg,
    toolbarText = R.color.my_toolbar_text,
    incomingText = R.color.my_incoming_text,
    outgoingText = R.color.my_outgoing_text,
)

Теперь все элементы, которые используют эти цвета по умолчанию (бабблы, тулбар, кнопки), будут окрашены в ваши брендовые цвета.

Пример 2. Замена логотипа и иконки пуш-уведомлений

val lightImages = ChatImages(
    logoImage = R.drawable.ic_my_brand_logo,
    pushIcon = R.drawable.ic_my_push_icon,
)

Так вы меняете логотип на приветственном экране и иконку пушей в статус-баре.

Пример 3. Настройка темы через ChatComponents

val lightComponents = ChatComponents(
    context = applicationContext,
    colors = lightColors,
    images = lightImages
).apply {
    navigationBarStyle = navigationBarStyle.copy(
        closeButtonEnabled = false
    )
}

Здесь вы задаёте общие настройки компонентов (например, отключаете кнопку закрытия чата в тулбаре).

Пример 4. Точечная настройка через ChatFlows

val lightFlows = ChatFlows(lightComponents).apply {
    // Меняем цвет подписи времени у сообщений с ошибкой
    chatFlow.outcomeMessages.timeTextWhenError =
        chatFlow.outcomeMessages.timeText.copy(
            textColor = R.color.my_error_time_color
        )

    // Меняем иконку "play" в цитатах
    chatFlow.quotePlayPauseButton = ImagesChatStyle(
        imageResId = R.drawable.ic_my_play_icon,
        tintColor = R.color.my_brand_main
    )
}

val chatLightTheme = ChatTheme(lightFlows)

Этот подход повторяет логику из EdnaChatCenterApplication.initThemes() в демо-приложении:
сначала вы настраиваете компоненты, а затем при необходимости уточняете отдельные элементы через флоу.

Применение тем​

Ресурсы​

Инфографика​

Справочник параметров ChatColors​

Справочник параметров ChatImages​

Приоритеты темизации: ChatColors, ChatImages, Components и Flows​

Частые сценарии кастомизации​

Пример 1. Свои брендовые цвета бабблов и тулбара​

Пример 2. Замена логотипа и иконки пуш-уведомлений​

Пример 3. Настройка темы через ChatComponents​

Пример 4. Точечная настройка через ChatFlows​