Стили

Быстрый поиск стиля

Ищете стиль для...	Класс
Навигационная панель	NavigationBarStyle
Поле ввода текста	ChatInputTextStyle
Панель ввода (кнопки + поле)	ChatInputStyle
Запись голоса	ChatInputVoiceStyle
Аудиоплеер	AudioPlayerStyle
Поисковая строка	SearchBarStyle
Экран загрузки	ChatLoadingStyle
Индикатор загрузки	LoadingIndicatorStyle
Пустой чат	ChatPlaceholderStyle
Ошибка загрузки	ChatPlaceholderErrorStyle
Текстовое сообщение	TextChatMessageStyle
Сообщение с файлом	FileChatMessageStyle
Сообщение с изображением	ImageChatMessageStyle
Голосовое сообщение	AudioChatMessageStyle
Опрос / оценка	SurveyChatMessageStyle
Цитата	QuoteStyle
Быстрые ответы (бот)	QuickReplyStyle
Результат поиска	SearchChatMessageStyle
Меню вложений	ChatMenuStyle
Toast-уведомление	ToastAlertStyle
Кнопка прокрутки к новым	ScrollToMessageButtonStyle

---

Внешний вид каждого элемента контролируется через соответствующий класс стиля. Визуальные образцы — на страницах Components и User Flow в Figma.

Класс стиля	Описание	Дизайн
Базовые элементы интерфейса
NavigationBarStyle	Стиль навигационной панели в чате
ChatLoadingStyle	Общий стиль экрана загрузки чата
ChatPlaceholderStyle	Стиль пустого состояния чата (например, нет сообщений)
ChatPlaceholderErrorStyle	Стиль отображения ошибки (например, не удалось загрузить чат)
LoadingIndicatorStyle	Стиль индикатора загрузки (в сообщениях, действиях)
ChatInputStyle	Стиль панели ввода сообщений в чате
ChatInputTextStyle	Стиль контейнера ввода текста
ChatInputVoiceStyle	Стиль элемента записи голосовых сообщений
ChatInputQuoteStyle	Стиль элемента отображения цитаты над полем ввода. См. предупреждение ниже
SearchBarStyle	Стиль поисковой строки в панели навигации
ToastAlertStyle	Стиль всплывающих уведомлений (toast)
ScrollToMessageButtonStyle	Кнопка прокрутки к новым сообщениям. alwaysShow (постоянное отображение) применяется только к кнопке «вниз» в ChatFlow.scrollToBottomUnreadMessagesButtonStyle; для верхней кнопки этот флаг игнорируется. badgeStyle: ChatTextStyle задаёт шрифт и цвет числа на бейдже непрочитанных.
ChatMenuStyle	Стиль меню добавления вложений
ProgressViewStyle	Стиль индикатора прогресса (загрузка файлов и т.п.)
ButtonStyle	Базовый стиль кнопки в чате
TextButtonStyle	Текстовая кнопка (без фона)
IconButtonStyle	Кнопка с иконкой
NavigationBarButtonStyle	Кнопка в навигационной панели с поддержкой позиционирования
AudioPlayerStyle	Стиль аудиоплеера (в чате или отдельно)

ChatInputQuoteStyle: ограничение в 5.8.x

Свойства titleTextStyle и subtitleTextStyle класса ChatInputQuoteStyle в текущей версии не применяются — панель цитаты над полем ввода использует только messageAuthorTextStyle (заголовок цитаты) и messageTextStyle (текст цитируемого сообщения). См. Известные ограничения.

Стили экрана поиска

Название	Описание	Дизайн
SearchFlow	Стиль экрана поиска: searchMessageStyle (SearchChatMessageStyle), notFoundImage, notFoundTextStyle

Стили сообщений

Название	Описание	Дизайн
ChatMessagesStyles	Контейнер стилей сообщений одного направления (исходящие или входящие)
ChatMessageStyle	Базовый стиль сообщения в чате
TextChatMessageStyle	Стиль текстового сообщения
FileChatMessageStyle	Стиль сообщения с файлом
SearchChatMessageStyle	Стиль выделения при поиске в сообщениях
ImageChatMessageStyle	Стиль изображения в сообщении
AudioChatMessageStyle	Стиль аудиосообщения
SurveyChatMessageStyle	Стиль опроса/голосования в сообщении. questionButtonColor: ChatButtonColor (с тремя состояниями: normal, highlighted, disabled) заменяет устаревший questionBackgroundColor: UIColor — миграция не 1:1
ScheduleChatMessageStyle	Стиль сообщения с расписанием/напоминанием
OperatorJoinedChatMessageStyle	Стиль сообщения о подключении оператора
QuickReplyStyle	Стиль быстрых ответов
QuoteStyle	Стиль отображения цитирования сообщений
OpenGraphViewStyle	Стиль отображения OpenGraph в текстовых сообщениях

Стили системных сообщений

Системные сообщения (по центру чата) собраны в контейнере ChatSystemMessagesStyles, доступном через chatFlow.systemMessages.

Свойство	Тип
operatorJoinedMessageStyle	OperatorJoinedChatMessageStyle
scheduleMessageStyle	ScheduleChatMessageStyle
surveyMessageStyle	SurveyChatMessageStyle
dateMessageStyle	ChatTextStyle

// Задавайте до первого открытия чата: при первом обращении к
// chatFlow.systemMessages все вложенные стили получают значения
// из текущих токенов и больше не отслеживают их изменения.
theme.flows.chatFlow.systemMessages.surveyMessageStyle.questionButtonColor =
    ChatButtonColor(normal: .systemBlue, highlighted: .systemTeal, disabled: .systemGray)
theme.flows.chatFlow.systemMessages.dateMessageStyle = ChatTextStyle(
    font: .systemFont(ofSize: 12),
    color: .secondaryLabel
)

Кнопки навигационной панели

NavigationBarButtonStyle наследует от IconButtonStyle и добавляет свойство позиционирования. Используется для кнопок в верхней панели навигации чата и поиска.

Конструктор:

let backButton = NavigationBarButtonStyle(
    image: ChatImage(system: "chevron.left", tintColor: .white),
    position: .left,
    components: components
)

Основное свойство:

Свойство	Тип	Описание
position	NavigationBarButtonPosition	Расположение кнопки (по умолчанию .right)

Конструктор задаёт backgroundColor = .clear и tintColor = image.tintColor ?? .systemBlue — поэтому цвет иконки берётся из tintColor переданного ChatImage, а фон по умолчанию прозрачный. Чтобы изменить фон или цвет, переопределите свойства уже на созданном экземпляре:

backButton.backgroundColor = .black
backButton.tintColor = .yellow

NavigationBarButtonPosition

Перечисление для управления расположением кнопки в навигационной панели:

Значение	Описание
.left	Размещение слева (обычно для кнопки «назад»)
.right	Размещение справа (по умолчанию)

Пример:

let searchButton = NavigationBarButtonStyle(
    image: ChatImage(system: "magnifyingglass", tintColor: .systemBlue),
    position: .right,
    components: components
)

Перечисления и вспомогательные типы

QuickReplyMode

Режим отображения быстрых ответов (QuickReplyStyle.mode):

Значение	Описание
.toolbar	Кнопки отображаются над панелью ввода
.embed	Кнопки отображаются внутри чата как часть сообщения (по умолчанию)

ChatAlignment

Горизонтальное выравнивание (QuickReplyStyle.alignment):

Значение	Описание
.left	Выравнивание по левому краю
.center	По центру
.right	По правому краю (по умолчанию)

ChatInputAlignment

Вертикальное выравнивание кнопок в панели ввода (ChatInputStyle.alignment):

Значение	Описание
.top	Кнопки вверху
.center	По центру
.bottom	Внизу (по умолчанию)

ChatSurveyIcon

Модель иконки для опросов (SurveyChatMessageStyle.voteLikeIcon, voteDislikeIcon, voteIcon):

let icon = ChatSurveyIcon(
    unselectedImage: ChatImage(system: "hand.thumbsup"),
    selectedImage: ChatImage(system: "hand.thumbsup.fill")
)
surveyStyle.voteLikeIcon = icon

---

Стили сообщений в пузыре (TextChatMessageStyle, ImageChatMessageStyle, AudioChatMessageStyle, FileChatMessageStyle, SearchChatMessageStyle, SurveyChatMessageStyle, ScheduleChatMessageStyle, OperatorJoinedChatMessageStyle) наследуют от ChatMessageStyle общие свойства:

Свойство	Тип	Описание
textStyle	ChatTextStyle	Стиль текста сообщения
timeTextStyle	ChatTextStyle	Стиль времени отправки
editedStatusImage	ChatImage	Иконка отредактированного сообщения
pendingStatusImage	ChatImage	Иконка «отправляется»
deliveredStatusImage	ChatImage	Иконка «отправлено»
readStatusImage	ChatImage	Иконка «прочитано»
errorTextStyle	ChatTextStyle	Стиль текста при ошибке отправки
errorInfoButton	IconButtonStyle	Кнопка «i» рядом с сообщением с ошибкой
errorStatusColor	UIColor	Цвет статуса при ошибке
errorTimeTextStyle	ChatTextStyle	Стиль времени при ошибке
messageBubbleEndMargin	CGFloat	Отступ от пузыря до края экрана
containerRightOffset	CGFloat	Отступ контейнера для исходящих сообщений
containerLeftOffset	CGFloat	Отступ контейнера для входящих сообщений

QuoteStyle, OpenGraphViewStyle и QuickReplyStyle наследуют от ChatStyle напрямую и имеют собственный набор свойств.

Уникальные свойства каждого типа сообщений — в API Reference.

Свойства ChatMessagesStyles

Контейнер стилей сообщений одного направления (outcomeMessages / incomeMessages). Помимо вложенных стилей конкретных типов сообщений (textMessageStyle, imageMessageStyle, audioMessageStyle, fileMessageStyle), содержит общие свойства бабла и аватара:

Свойство	Тип	Описание
bubbleMaskImage	ChatImage	Маска формы пузыря сообщения
bubbleTintColor	UIColor	Цвет фона пузыря
bubbleMaskInsets	UIEdgeInsets	Отступы маски пузыря
bubbleErrorColor	UIColor	Цвет пузыря при ошибке отправки
deletedTextStyle	ChatTextStyle	Стиль текста удалённого сообщения
showAvatar	Bool	Показывать ли аватар (по умолчанию true)
avatarSize	CGSize	Размер аватара (по умолчанию 40×40)
avatarOffset	CGFloat	Отступ аватара
avatarPlaceholderImage	ChatImage	Плейсхолдер, если аватар не загружен
quoteStyle	QuoteStyle	Стиль цитат внутри сообщения

При замене chatFlow.incomeMessages новым экземпляром ChatMessagesStyles SDK автоматически зеркалит bubbleMaskImage, если её не задавали явно — см. Глоссарий.

Присвоение bubbleTintColor пересоздаёт текущую bubbleMaskImage с новым цветом — если меняете и маску, и цвет, задавайте bubbleMaskImage после bubbleTintColor.

Стиль можно создать с помощью базового конструктора:

let outcomeMessages = ChatMessagesStyles(components: components)
outcomeMessages.textMessageStyle.textStyle.color = .black
outcomeMessages.showAvatar = showOutcomeAvatar
outcomeMessages.bubbleErrorColor = .red

или с помощью билдера с замыканием для настройки параметров:

let outcomeMessages = ChatMessagesStyles.build(with: components) { messagesStyle in
    messagesStyle.textMessageStyle.textStyle.color = .black
    messagesStyle.showAvatar = showOutcomeAvatar
    messagesStyle.bubbleErrorColor = .red
}

Изменение свойств уже существующего стиля:

// Получение настроек экрана поиска
let searchFlow = theme.flows.searchFlow
searchFlow.navigationBarStyle.hidden = false
searchFlow.navigationBarStyle.searchBarStyle.cancelButtonStyle.tintColor = .white
searchFlow.searchMessageStyle.matchTextStyle.color = .red
searchFlow.notFoundTextStyle = ChatTextStyle(font: typography.message, color: .white)

или через apply:

// Применение настроек для экрана поиска
theme.flows.searchFlow.apply {
    $0.navigationBarStyle = NavigationBarStyle.build(with: components, configure: {
        $0.hidden = false
        $0.backButtonColor = .red
    })
    $0.searchMessageStyle.apply {
        $0.matchTextStyle = .init(font: UIFont.systemFont(ofSize: 20), color: .systemGreen)
        $0.nextImage = ChatImage(system: "chevron.forward", tintColor: .systemGreen)
    }
    $0.navigationBarStyle.searchBarStyle.cancelButtonStyle.tintColor = .red
    $0.notFoundTextStyle = ChatTextStyle(font: typography.message, color: .red)
}

backButtonColor — условие применения

Параметр backButtonColor влияет только на кастомную кнопку закрытия (когда showCloseButton=true) при условии, что чат — корневой контроллер в стеке навигации. Цвет системной кнопки «Назад» в обычном UINavigationController этим параметром не управляется.

Типичные ошибки

Изменение компонента затрагивает все экраны

Самая частая ошибка при работе с flows: изменение компонента через apply затрагивает все экраны, потому что компоненты из ChatComponents — это общие объекты.

Решение: создавайте новый экземпляр через build, а не изменяйте существующий:

// Меняет глобально
theme.flows.chatFlow.apply {
    $0.inputViewStyle.sendButtonStyle.image = ChatImage(system: "arrow.up")
}

// Точечное переопределение только для chatFlow
let customInputStyle = ChatInputStyle.build(with: components) {
    $0.sendButtonStyle.image = ChatImage(system: "arrow.up")
}
theme.flows.chatFlow.inputViewStyle = customInputStyle

Остальные частые ошибки (цвет не применяется, тёмная тема не переключается, аватар не скрывается, шрифт не меняется) — с причинами и решениями в Troubleshooting.