Skip to main content

Компоненты UI

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

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

Во всех случаях frame - это функция компоновки элементов. Она получает подкомпоненты в виде лямбд и отвечает за расположение этих элементов (порядок, отступы, контейнеры)

Тикет​

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

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

  • заменена стандартная верхняя панель
  • изменена компоновка элементов (верхняя панель будет состоять из текста и кнопки закрытия, без иконки агента)
ChatView(
    ...
    ticket = { CustomTicket() },
)
@Composable
fun TicketScope.CustomTicket() {
    Ticket(
        header = {
            CustomHeader()
        },
    )
}
@Composable
fun ChatHeaderScope.CustomHeader() {
    ChatHeader(
        frame = {
            Row {
                it.text()
                it.closeButton()
            }
        }
    )
}

Чат​

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

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

ChatView(
    ...
    chat = { CustomChat() },
)
@Composable
fun ChatScope.CustomChat() {

    ChatPage(
        prependMessages = {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable {
                        showPrependMessages()
                    }
                    .background(Color(0xFF03D256))
                    .padding(uiConfig.dimensions.topPanelPadding)
            ) {
                Box(modifier = Modifier.fillMaxWidth(),
                    contentAlignment = Alignment.CenterStart) {
                    Text(text = "Предыдущие сообщения")
                }
                Box(modifier = Modifier.fillMaxWidth(),
                    contentAlignment = Alignment.CenterEnd) {
                    Text(text = "Показать")
                }
            }
        },
        chatList = {
            ChatListMessages(
                startDate = {
                    CustomStartDate(it)
                },
                serverMessage = {
                    ServerMessage(
                        serverTextMessage = {
                            CustomServerTextMessage()
                        },
                    )
                },
                userMessage = {
                    UserMessage(
                        userTextMessage = {
                            CustomUserTextMessage()
                        }
                    )
                }
            )
        }
    )
}
@Composable
fun ChatUIScope.CustomStartDate(date: String) {
    // реализация 
}

@Composable
fun ServerMessageScope.CustomServerTextMessage() {
    // реализация 
}

@Composable
fun UserMessageScope.CustomUserTextMessage() {
    // реализация 
}

Скоупы​

Каждый UI-компонент оформлен как @Composable с ресивером-скоупом - то есть функция объявляется в виде @Composable SomeScope.Component(...). Скоуп — это интерфейс с дополнительными данными и действиями.

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

  • ChatUIScope
    • uiConfig: ChatUIConfig

Ticket​

  • TicketScope: ChatUIScope

    • isGlobalLoading: Boolean - показывать ли общий лоадер экрана тикета
    • ticketStatus: TicketStatus - текущее состояние тикета (ожидание ответа, офлайн и др.)
    • options: TicketOptions - настройки формы тикета

  • NameInputContext

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

  • EmailInputScope

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

  • ContentInputScope

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

  • TicketCheckboxScope

    • isConsented: Boolean - отмечено ли согласие с политикой
    • onConsentAgreementChange: (Boolean) -> Unit - обработчик переключения чекбокса согласия

  • PolicyConsentScope: TicketCheckboxScope

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

  • TicketSendButtonScope

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

Chat​

  • ChatScope

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

  • ChatHeaderScope

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

  • ChatFooterScope

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

  • ErrorBannerScope

    • error: String - текст ошибки
    • showError: Boolean - показывать ли ошибку
    • onHide: () -> Unit - скрыть баннер ошибки

  • RateChatScope

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

  • PrependMessagesScope

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

  • ServerMessageScope

    • getTextWidth: (text: String, fontSize: TextUnit) -> Dp - получить размер текстовой строки
    • uiMessage: UiMessage - данные сообщения
    • baseURL: String - базовый URL для относительных ссылок
    • timeWidth: Dp - ширина текста подписи времени
    • buttonMaxTextWidth: Dp - максимальная ширина текста на кнопках сообщения
    • onFileClick: (FileData.Text) -> Unit - клик по вложению-файлу
    • onImageClick: (FileData.Image) -> Unit - клик по изображению
    • onChatButtonClick: (ChatButton) -> Unit - клик по кнопке в сообщении
    • showButtons: Boolean - показывать ли кнопки-ответы под сообщением

  • UserMessageScope

    • getTextWidth: (text: String, fontSize: TextUnit) -> Dp - получить размер текстовой строки
    • uiMessage: UiMessage - данные пользовательского сообщения
    • baseURL: String - базовый URL для относительных ссылок
    • timeWidth: Dp - ширина текста подписи времени
    • onFileClick: (FileData.Text) -> Unit - клик по вложению-файлу
    • onImageClick: (FileData.Image) -> Unit - клик по изображению