Компоненты UI

Для детальной настройки UI можно модифицировать стандартные компоненты или заменять их кастомными

Ниже приведены условные иерархические структуры имеющихся компонентов

Во всех случаях layout — это замыкание (builder) компоновки, которое отвечает за расположение слотов/подкомпонентов. В него передаётся контекст и набор готовых View-слотов

Тикет

• TicketPage - экран для ввода логина, пароля и запроса
  • header - верхняя панель
    • logo - логотип
    • text - текст на панели
    • closeButton - кнопка закрытия чата
    • layout
  • globalLoading - компонент загрузки
  • waitForReply - компонент-сообщение об отправленном вопросе
  • staffOffline - компонент-сообщение о том что сотрудников нет в сети
  • name - элемент ввода имени
  • email - элемент ввода электронной почты
  • content - элемент ввода запроса
  • policyConsent - компонент-ссылка на обработку перс. данных
    • checkbox - чекбокс
    • ticketPolicy - надпись
    • ticketPolicyLink - кликабельная ссылка
    • errorMessage - сообщение об ошибке
    • layout
  • sendButton - кнопка отправки
  • layout

Пример кастомизации экрана тикета:

• заменена стандартная верхняя панель
• изменена компоновка элементов (верхняя панель будет состоять из текста и кнопки закрытия, без иконки агента)

ChatHDE.shared.makeChatView()
    .ticket {tvm, cvm in
        TicketPage(tvm, cvm)
            .header {ctx in
                Header(ctx)
                    .layout {slots in
                        HStack {
                            slots.text
                            slots.closeButton
                        }
                    }
            }
    }

Чат

• ChatPage - экран чата
  • header - верхняя панель
    • logo - логотип
    • text - текст на панели
    • closeButton - кнопка закрытия чата
    • layout
  • footer - нижняя панель для отправки сообщений
  • globalLoading - экран загрузки страницы
  • rate - экран оценки сервиса
    • title - текст заголовка
    • rateButtons - кнопки оценки
    • leaveCommentText - текст
    • commentField - поле ввода комментария
    • submitButton - кнопка отправки отзыва
    • layout
  • errorBanner - баннер ошибки
  • prependMessages - кнопка загрузки предыдущих сообщений
  • chatList - компонент-список сообщений
    • serverTextMessage - текстовое сообщение от сервера
    • serverFileMessage - сообщение с файлом от сервера
    • serverImageMessage - сообщение с изображением от сервера
    • userTextMessage - текстовое сообщение клиента
    • userFileMessage - сообщение с файлом клиента
    • userImageMessage - сообщение с изображением клиента
    • startDate - дата создания тикета
  • layout

Пример кастомизации экрана чата:

ChatHDE.shared.makeChatView()
    .chat {cvm in
        ChatPage(cvm)
            .prependMessages {ctx in
                Button {
                    ctx.showPrependMessages()
                } label: {
                    Text("Ранние сообщения")
                        .frame(maxWidth: .infinity)
                        .foregroundStyle(.red)
                        .padding(10)
                        .background(.white)
                }
                .buttonStyle(.plain)
            }
            .chatList {ctx in
                ChatList(ctx)
                    .serverTextMessage {uimes in
                        // UI...
                    }
                    .serverFileMessage {uimes, file in
                        // UI...
                    }
            }
    }

Environment

В кастомных компонентах SDK доступны общие зависимости через @Environment:

• Настройки оформления (цвета, шрифты, размеры, тексты):

@Environment(\.chatUIConfig) var ui

• Стандартные действия SDK:

@Environment(\.chatActions) var actions 

Реализации по умолчанию

Для каждого UI-компонента в SDK доступна стандартная реализация (Default-версия). Стандартные компоненты можно использовать как есть, либо взять за основу, скопировать в проект и адаптировать под требования приложения. Ниже приведён список основных стандартных компонентов, доступных для кастомизации.

• TicketLayoutDefault
• NameInputDefault
• EmailInputDefault
• ContentInputDefault
• TicketSubmitButtonDefault
• StaffOfflineDefault
• PolicyLayoutDefault
• PolicyCheckboxDefault
• PolicyErrorDefault
• PolicyLinkDefault
• PolicyTextDefault
• HeaderLayoutDefault
• HeaderLogoDefault
• HeaderTextDefault
• HeaderCloseButtonDefault
• GlobalLoadingDefault
• ChatFooterDefault
• ChatPageLayoutDefault
• ErrorBannerDefault
• PrependMessagesButtonDefault
• RatingCompleteDefault
• RateChatLayoutDefault
• RateChatTitleDefault
• RateChatButtonsDefault
• RateChatLeaveCommentTextDefault
• RateChatCommentFieldDefault
• RateChatSubmitButtonDefault
• ServerFileMessageDefault
• ServerImageMessageDefault
• ServerTextMessageDefault
• StartDateDefault
• UserFileMessageDefault
• UserImageMessageDefault
• UserTextMessageDefault

Контексты

Каждый UI-компонент в SDK настраивается через builder-замыкание, которое получает контекст компонента. Контекст — это объект, содержащий дополнительные данные и действия, необходимые для построения и управления UI.

Ниже приведен список основных контекстов с данными

Ticket

• TicketLayoutContext

  • isGlobalLoading: Boolean - показывать ли общий лоадер экрана тикета
  • ticketStatus: TicketStatus - текущее состояние тикета (ожидание ответа, офлайн и др.)
  • ticketOptions: TicketOptions - настройки формы тикета
  • effects: AnyPublisher<TicketEffect, Never> - эффект для отслеживания старта нового чата
  • setGlobalLoading(Bool) - глобальная загрузка
  • startChat(StartVisitorChatData) - запуситить новый чат

• NameInputContext

  • name: String - текущее значение поля «Имя»
  • showNameError: Boolean - флаг показа ошибки под полем имени
  • onNameChange(String) - обработчик ввода имени

• EmailInputContext

  • email: String - текущее значение e-mail
  • showEmptyEmailError: Boolean - показать ошибку «e-mail пуст»
  • showIncorrectEmailError: Boolean - показать ошибку «e-mail некорректен»
  • onEmailChange(String) - обработчик ввода e-mail

• ContentInputContext

  • content: String - текст обращения
  • showEmptyContentError: Boolean - показать ошибку «сообщение пусто»
  • onContentChange(String) - обработчик ввода текста обращения

• PolicyConsentContext

  • options: TicketOptions - данные для ссылки на политику конфиденциальности
  • unacceptedConsentError: Boolean - показать ошибку «согласие не принято»
  • isConsented: Bool - принято ли соглашение
  • onConsentAgreementChange(Bool) - изменение статуса соглашения

• TicketSubmitButtonContext

  • onSubmit() - действие отправки формы

Chat

• ChatLayoutContext

  • isGlobalLoading: Boolean - показывать ли общий лоадер экрана чата
  • isRating: Boolean - показывать ли экран оценки сервиса
  • isRatingCompleted: Boolean - отправлена ли оценка пользователем
  • showErrorBanner: Boolean - показать ли баннер ошибки
  • showPrepend: Boolean - показывать ли кнопку «Загрузить предыдущие сообщения»
  • cancelRating() - отменить оценивание (скрыть страницу оценки)

• ChatListContext

  • allMessages: [UiMessage] - все сообщения в чате

• HeaderContext

  • staff: Staff? - данные оператора (имя, аватар)
  • closeChat() - закрыть чат

• ChatFooterContext

  • isConnected: Boolean - есть ли подключение к серверу
  • messageText: String - текущий текст в поле ввода
  • filePickerExpanded: Boolean - открыт ли блок выбора файлов
  • onMessageTextChange(String) - обработчик ввода текста
  • onFileExpandedChange(Boolean) - открыть/закрыть выбор файлов
  • sendMessage(String) -> Unit - отправить текстовое сообщение

• RateChatContext

  • format: String - шаблон оценки
  • maxRateCommentLength: Int - максимум символов в комментарии
  • maxRate: Int - максимум оценки
  • rate: Int - оценка
  • onSubmit(Int, String) - отправить оценку и комментарий
  • onCancel() - закрыть/пропустить оценку
  • onChangeRate(Int) - изменение оценки

• PrependMessagesScope

  • showPrependMessages() - загрузить более ранние сообщения

• ErrorBannerContext

  • error: UploadError - вид ошибки
  • showError: Bool - показывать ли ошибку