Версия: 5.8.2

Дизайн-система

Для настройки пользовательского интерфейса в SDK используется дизайн-система на основе класса ChatTheme. С её помощью можно настроить внешний вид чата под корпоративный стиль вашего приложения.

SDK поддерживает светлую и тёмную темы — они задаются через свойства theme и darkTheme на экземпляре ChatCenterUISDK. Если тёмная тема не задана, используются значения из светлой.

к сведению

Визуальное представление дизайн-системы доступно в виде UIKit в Figma.

Файл содержит следующие страницы:

Foundation — цвета, типографика, иконки (светлая и тёмная темы)
Message Type — все типы сообщений в контексте чата
Components — Navigation, Status, Button, Bubbles, Input Field, OS UI, Content, Illustration
User Flow — 40+ экранов с полным пользовательским сценарием

подсказка

Начните с Быстрого старта — готовый пример, который можно скопировать и адаптировать.

Не знакомы с терминами «токен», «компонент», «flow»? Смотрите Глоссарий.

Быстрый пример

// Создание темы с кастомными цветами
let colors = ChatColors()
colors.main = .black
colors.link = .systemBlue

let theme = ChatTheme(colors: colors)

// Применение
chatCenterSDK.theme = theme
chatCenterSDK.darkTheme = darkTheme // опционально

ChatTheme можно создать двумя способами:

// Из базовых токенов (цвета, шрифты, изображения)
ChatTheme(colors: ChatColors(), images: ChatImages(), typography: ChatTypography())

// Из настроенных компонентов (для более детальной кастомизации)
ChatTheme(components: myComponents)

Что и когда настраивать

Как выбрать уровень кастомизации?

Дизайн-система имеет три уровня кастомизации. Выберите подходящий:

Задача	Уровень	Что изменить
Изменить фирменный цвет во всём SDK	Токен	`ChatColors`
Изменить шрифты во всём SDK	Токен	`ChatTypography`
Заменить иконки	Токен	`ChatImages`
Настроить кнопку, панель или виджет во всём SDK	Компонент	`ChatComponents`
Настроить элемент только в экране чата	Сценарий	`ChatFlow`
Настроить элемент только в экране поиска	Сценарий	`SearchFlow`

Общее правило

Токены → меняют значения по умолчанию глобально. Компоненты → меняют готовые виджеты глобально. Сценарии (Flows) → позволяют переопределить любой компонент для конкретного экрана, не затрагивая остальные.

Маршруты в зависимости от задачи

Применить фирменный стиль:

Задайте цвета → ChatColors
При необходимости замените шрифты → ChatTypography
Примените тему: chatCenterSDK.theme = ChatTheme(colors: colors)

Детальная настройка компонентов:

Настройте компоненты → ChatComponents
Изучите список стилей → Стили
Примените через ChatTheme(components: components)

Переопределить элемент только на одном экране:

Создайте тему с базовыми настройками
Получите нужный flow: theme.flows.chatFlow или theme.flows.searchFlow
Переопределите нужный стиль → Сценарии

Базовые настройки

На базовом уровне можно задать общие для всего SDK стили:

Цвета — цветовая палитра (ChatColors)
Типографика — шрифты (ChatTypography)
Изображения — иконки и изображения (ChatImages)
Компоненты — стили панелей, кнопок и элементов (ChatComponents)

Переопределение не обязательное — по умолчанию используются стандартные настройки.

Метод `apply`

Все объекты дизайн-системы (ChatTheme, ChatColors, ChatTypography, ChatImages, ChatComponents, стили и сценарии) поддерживают метод apply для удобной настройки:

theme.flows.chatFlow.apply {
    $0.incomeMessages.showAvatar = true
    $0.outcomeMessages.showAvatar = false
    $0.inputViewStyle.sendButtonStyle.tintColor = .white
}

apply возвращает тот же объект — используйте его для точечной настройки существующих стилей. Для создания нового стиля с нуля используйте фабричный метод build.

Расширенные настройки

Для точечной кастомизации отдельных элементов используйте стили через пользовательские сценарии. Например, можно поменять цвет кнопки только на конкретном экране, не затрагивая остальные.

Типичные сценарии кастомизации

Сценарий	Код
Сменить фирменный цвет	`colors.link = .myBrandColor`
Скрыть аватар в исходящих	`chatFlow.outcomeMessages.showAvatar = false`
Задать кастомный шрифт для сообщений	`typography.message = .systemFont(ofSize: 15)`
Изменить цвет пузыря сообщения	`chatFlow.incomeMessages.bubbleTintColor = .systemBlue`
Заменить иконку отправки	`images.sendButtonImage = ChatImage(system: "arrow.up")`
Задать тёмную тему	`chatCenterSDK.darkTheme = darkTheme`
Скрыть навигационную панель	`chatFlow.navigationBarStyle.hidden = true`

Если что-то идёт не так — смотрите Troubleshooting.

Быстрый поиск: куда идти

Хочу...	Файл	Класс / свойство
Применить фирменный цвет	Цвета	`ChatColors.link`
Заменить шрифт в пузырях	Типографика	`ChatTypography.message`
Заменить иконку отправки	Изображения	`ChatImages.sendButtonImage`
Настроить навигационную панель	Компоненты	`ChatComponents.navigationBarStyle`
Скрыть аватар у исходящих	Сценарии	`chatFlow.outcomeMessages.showAvatar`
Изменить цвет выделения в поиске	Сценарии	`searchFlow.searchMessageStyle.matchTextStyle.color`
Настроить аудиоплеер	Компоненты	`ChatComponents.audioPlayerStyle`
Задать тёмную тему	Быстрый старт	`chatCenterSDK.darkTheme`
Найти все классы стилей	Стили	—
Что-то не работает	Troubleshooting	—
Изменить цвет кнопки отправки (везде)	Компоненты	`components.inputViewStyle.sendButtonStyle.tintColor`
Изменить цвет кнопки отправки (только чат)	Сценарии	`chatFlow.inputViewStyle.sendButtonStyle.tintColor`
Настроить пустой экран чата	Компоненты	`components.chatPlaceholderStyle`

Быстрый пример​

Что и когда настраивать​

Как выбрать уровень кастомизации?​

Маршруты в зависимости от задачи​

Базовые настройки​

Метод apply​

Расширенные настройки​

Рекомендации по производительности​

Типичные сценарии кастомизации​

Быстрый поиск: куда идти​