Пользовательские сценарии (flow)

Flow — это настройки конкретного экрана. Они переопределяют компоненты дизайн-системы точечно: изменения в одном flow не затрагивают другие экраны и базовые настройки.

Архитектура flows

Все flow наследуют от ChatUserFlow. Базовый класс реализует протокол Applicable (метод apply { ... } для группировки настроек) и содержит общие свойства:

Свойство	Тип	Описание
backgroundColor	UIColor	Цвет фона экрана (инициализируется из components.colors.background)
navigationBarStyle	NavigationBarStyle	Стиль верхней панели навигации. По умолчанию ссылается на тот же объект, что и components.navigationBarStyle. Поэтому мутация chatFlow.navigationBarStyle.X = ... затрагивает оба flow и общие компоненты. Для изоляции присвойте новый экземпляр — пример в секции Изоляция navigationBarStyle ниже.

Подклассы — ChatFlow (экран чата) и SearchFlow (экран поиска).

Настройка готового flow:

В текущей версии SDK конструкторы ChatFlow/SearchFlow не входят в публичный API — создавать новые экземпляры извне модуля нельзя. Настройка выполняется через мутацию готового flow, который SDK создал внутри ChatTheme:

let theme = ChatTheme(components: components)

// Настраиваем существующий chatFlow
theme.flows.chatFlow.backgroundColor = .systemBackground
theme.flows.chatFlow.navigationBarStyle.hidden = false

// Аналогично для searchFlow
theme.flows.searchFlow.backgroundColor = .systemBackground

Для группировки изменений используйте apply:

theme.flows.chatFlow.apply {
    $0.backgroundColor = .systemBackground
    $0.navigationBarStyle.hidden = false
}

Изоляция navigationBarStyle для одного flow:

Так как chatFlow.navigationBarStyle по умолчанию ссылается на тот же объект, что и searchFlow.navigationBarStyle и components.navigationBarStyle, мутация затронет всё. Чтобы поменять навигацию только для одного flow — присвойте новый экземпляр:

Для создания нового экземпляра используется обобщённый билдер ChatStyle.build(with:configure:) — публичный статический метод базового класса ChatStyle, доступный всем его подклассам (включая NavigationBarStyle). Тип создаваемого стиля выводится из контекста присваивания:

// Только для chatFlow — searchFlow и components сохранят прежний navigationBarStyle.
// build(...) унаследован от ChatStyle; конкретный тип (NavigationBarStyle)
// выводится из типа левой части присваивания.
theme.flows.chatFlow.navigationBarStyle = NavigationBarStyle.build(with: theme.components) { nav in
    nav.hidden = false
    nav.backButtonColor = .systemBlue
}

Пример настройки:

// Создание компонентов дизайн системы
let components = ChatComponents()

// Создание темы из компонентов
let theme = ChatTheme(components: components)

// Получение настроек экрана чата
let chatFlow = theme.flows.chatFlow
chatFlow.incomeMessages.showAvatar = true
chatFlow.outcomeMessages.showAvatar = false

// Получение настроек экрана поиска
let searchFlow = theme.flows.searchFlow
searchFlow.searchMessageStyle.matchTextStyle.color = .red

Чат

Экран чата — основной экран SDK: список сообщений и панель ввода.

Получение стиля сообщений

Метод messageStyle(for:) возвращает стиль сообщений по направлению (входящее или исходящее):

// Получить стиль входящего сообщения
let incomingStyle = chatFlow.messageStyle(for: false)

// Получить стиль исходящего сообщения
let outgoingStyle = chatFlow.messageStyle(for: true)

Метод возвращает объект ChatMessagesStyles — полный набор параметров стилизации (цвета, шрифты, отступы, иконки статусов).

Загрузка данных:

Пустой чат:

Ошибка получения данных:

Список сообщений:

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

Вспомогательный экран для поиска сообщений в чате и отображения результатов.

Открывается по нажатию на иконку поиска в панели навигации; видимость иконки настраивается в ChatConfig.

Открытие экрана поиска:

Пустые результаты:

Найденные сообщения:

Примеры настройки SearchFlow

let searchFlow = theme.flows.searchFlow

// Цвет выделения совпадений в результатах поиска
searchFlow.searchMessageStyle.matchTextStyle.color = UIColor(named: "BrandColor") ?? .systemOrange

// Шрифт выделения
searchFlow.searchMessageStyle.matchTextStyle.font = .systemFont(ofSize: 14, weight: .bold)

// Навигационная панель экрана поиска
searchFlow.navigationBarStyle.apply { nav in
    nav.titleTextStyle.color = .white
    nav.backgroundColor      = UIColor(named: "BrandColor") ?? .systemBlue
    nav.backButtonColor      = .white
}

// Кнопка «Отмена» в поисковой строке — из-за ограничений UISearchBar API применяется только color.normal,
// см. design-system/known_issues.md
searchFlow.navigationBarStyle.searchBarStyle.cancelButtonStyle.color.normal = .white

// Текст при отсутствии результатов
searchFlow.notFoundTextStyle = ChatTextStyle(
    font:  .systemFont(ofSize: 15),
    color: .secondaryLabel
)

// Фон экрана поиска
searchFlow.backgroundColor = .systemBackground