Skip to main content

Повідомлення

Навігація

Повідомлення

Компонент Messages допоможе вам візуалізувати коментарі та систему обміну повідомленнями у вашому додатку.

Макет повідомлень 

<div class="page">
  <div class="page-content messages-content">
    <div class="messages">
      <!-- Штамп дати -->
      <div class="messages-title"><b>Sunday, Feb 9</b> 12:58</div>

      <!-- Надіслане повідомлення (за умовчанням - зелений і праворуч) -->
      <div class="message message-sent">
        <div class="message-content">
          <!-- Бульбашка з текстом -->
          <div class="message-bubble">
            <div class="message-text">Hi, Kate</div>
          </div>
        </div>
      </div>

      <!-- Ще одне надіслане повідомлення-->
      <div class="message message-sent">
        <div class="message-content">
          <div class="message-bubble">
            <div class="message-text">How are you?</div>
          </div>
        </div>
      </div>

      <!--Отримане повідомлення (за умовчанням - сірий зліва) -->
      <div class="message message-received">
        <!-- Аватар відправника -->
        <div class="message-avatar" style="background-image:url(path/to/avatar.jpg)"></div>
        <div class="message-content">
          <!--Ім'я відправника-->
          <div class="message-name">Blue Ninja</div>
          <!-- Бульбашка з текстом -->
          <div class="message-bubble">
            <div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Макет сторінки повідомлень:

  • messages-content — необхідний додатковий клас для оболонки повідомлень. Слід додати до вмісту сторінки page-content
  • messages — потрібна додаткова обгортка для бульбашок повідомлень. Обов'язковий елемент.
  • messages-title — заголовок повідомлень
  • message — одне повідомлення

Макет одного повідомлення

Ось повний макет одного повідомлення:
<div class="message">
  <div class="message-avatar" style="background-image:url(path/to/avatar)"></div>
  <div class="message-content">
    <div class="message-name">John Doe</div>
    <div class="message-header">Message header</div>
    <div class="message-bubble">
      <div class="message-text-header">Text header</div>
      <div class="message-image">
        <img src="path/to/image" />
      </div>
      <div class="message-text">Hello world!</div>
      <div class="message-text-footer">Text footer</div>
    </div>
    <div class="message-footer">Message footer</div>
  </div>
</div>
  • message-avatar — аватар відправника, необов'язково
  • message-name — ім'я відправника, необов'язково
  • message-header — єдиний заголовок повідомлення, необов'язковий
  • message-text-header — текстовий заголовок всередині бульбашки повідомлення, необов’язково
  • message-image — зображення повідомлення, необов'язково
  • message-text — текст повідомлення, необов'язково
  • message-text-footer — текстовий нижній колонтитул усередині бульбашки повідомленя, необов’язково
  • message-footer — текст нижнього колонтитула післябульбашки повідомлення, необов’язково
Додаткові класи для одного контейнера повідомлень
  • message-sent — додатковий клас для одного повідомлення, який вказує, що це повідомлення було надіслано користувачем. Він залишається праворуч із зеленим кольором тла.
  • message-received — додатковий клас для одного повідомлення, який вказує, що це повідомлення було отримано користувачем. Він залишається ліворуч із сірим кольором тла.
  • message-tail — додатковий клас для одного повідомлення (отриманого або надісланого), щоб додати бульбашку "хвіст"
  • message-same-name — додатковий клас для вказівки, що повідомлення має таке саме ім’я відправника, як і попереднє повідомлення
  • message-same-avatar — додатковий клас для вказівки, що повідомлення має той самий аватар, що й попереднє повідомлення
  • message-same-header — додатковий клас для вказівки, що повідомлення має той самий заголовок, що й попереднє повідомлення
  • message-same-footer — додатковий клас для вказівки, що повідомлення має той самий нижній колонтитул, що й попереднє повідомлення
  • message-last — додатковий клас для одного повідомлення (отриманого або надісланого), щоб вказати останнє отримане або останнє надіслане повідомлення в поточній розмові одним відправником
  • message-first — додатковий клас для одного повідомлення (отриманого або надісланого), щоб вказати перше отримане або перше надіслане повідомлення в поточній розмові одним відправником

Методи застосунку Messages

Тепер, коли у нас є HTML Messages, нам потрібно його ініціалізувати. Нам потрібно використовувати метод пов'язаного застосунку:
МетодОписТип
app.messages.create(parameters)
Ініціалізація повідомлень із параметрами

parameters - object об'єкт з параметрами Messages.

Метод повертає ініціалізований екземпляр Messages

object
app.messages.destroy(el)
Знищити екземпляр Messages
  • el - HTMLElement or string — (за допомогою селектора CSS) or objectелемент Messages або екземпляр Messages для знищення.
HTMLElement
app.messages.get(el)
Отримати екземпляр Messages за елементом HTML

el - HTMLElement or string (за допомогою селектора CSS). Елемент повідомлень.

Метод повертає екземпляр Messages

HTMLElement

Параметри повідомлень

Давайте подивимося на список усіх доступних параметрів:
ПараметрЗа замовчуваннямОписТип
autoLayout
true
Увімкніть автоматичний макет, щоб автоматично додавати всі необхідні додаткові класи на основі виконаних умов
boolean
newMessagesFirst
false
Увімкніть, якщо ви хочете використовувати нові повідомлення зверху, а не внизу
boolean
scrollMessages
true
Увімкнути/вимкнути автопрокрутку повідомлень при додаванні нового повідомлення
boolean
scrollMessagesOnEdge
true
Якщо ввімкнено, автоматичне прокручування повідомлень відбуватиметься лише тоді, коли користувач перебуває у верхній/нижній частині перегляду повідомлень
boolean
messages
Масив із початковими повідомленнями. Кожне повідомлення в масиві має бути представлено як об’єкт з окремими параметрами повідомлення
array
renderMessage
Функція відтворення одного повідомлення. Має повертати повний рядок HTML повідомлення
function
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
 
var messages = app.messages.create({
  el: '.messages',
  on: {
    change: function () {
      console.log('Textarea value changed')
    }
  }
})
Умови автоверстки
ПараметрОписТип
firstMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано message-first перший клас повідомлення
function
lastMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано останній клас message-last повідомлення
function
tailMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас хвоста повідомлення message-tail
function
sameNameMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас message-same-name
function
sameHeaderMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас message-same-header
function
sameFooterMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас message-same-footer
function
sameAvatarMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас message-same-avatar
function
customClassMessageRule
Функція, яка має повертати додаткові класи повідомлень у вигляді рядка на основі необхідної умови залежно від попереднього та наступного повідомлень.
function

Параметри одного повідомлення

Давайте подивимося на єдиний об’єкт параметрів повідомлення, який ми повинні використовувати, коли передаємо масив messages:
ПараметрЗа замовчуваннямОписТип
text
Текст повідомлення.
string
header
Один заголовок повідомлення
string
footer
Один футер повідомлення
string
name
Ім'я відправника
string
avatar
Рядок URL-адреси аватара відправника
string
type
sent
Тип повідомлення - надіслане sent або отримане received
string
textHeader
Заголовок тексту повідомлення
string
textFooter
Нижній колонтитул тексту повідомлення
string
image
Рядок HTML зображення повідомлення, напр. <img src="/path/to/image" />. Може використовуватися замість параметра imageSrc
string
imageSrc
Рядок URL-адреси зображення повідомлення. Може використовуватися замість параметра image
string
isTitle
Визначає, чи має відтворюватися як повідомлення чи як заголовок повідомлення
boolean
cssClass
Додатковий клас CSS для встановлення в елементі HTML повідомлення
string
ПараметрОписТип
attrs
Об’єкт із додатковими HTML-атрибутами, який буде встановлено в HTML-елементі повідомлення. Наприклад, щоб встановити додаткові атрибути даних, це має виглядати так:
object
 
var message = {
  text: 'Hello!',
  attrs: {
    'data-id': 1,
    'data-author-id': 150
  }
}

Методи та властивості повідомлень

Отже, щоб створити повідомлення, ми повинні викликати:
var messages = app.messages.create({ /* parameters */ })
Після ініціалізації Messages у нас є його ініціалізований екземпляр у змінній (як у змінній messages у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість ОписТип
messages.params
Об'єкт із переданими параметрами ініціалізації
object
messages.el
Елемент HTML контейнера повідомлень (<div class="messages">)
HTMLElement
messages.$el
Елемент Dom64 з елементом HTML повідомлень
HTMLElement
messages.messages
Масив з повідомленнями
object
Методи
МетодОписТип
messages.showTyping(message)
Показати індикатор повідомлень, що вводяться
  • message - object — параметри повідомлення, які потрібно додати
object
messages.hideTyping()
Приховати індикатор введеного повідомлення
object
messages.addMessage

(message, method, animate);

Додайте нове повідомлення в кінець або на початок залежно від параметра методу

message - object - параметри повідомлення, яке потрібно додати. Вимагається.

method - string - (append or prepend)наказує додати нове повідомлення наприкінці або на початку контейнера повідомлень. Необов’язковий, якщо не вказано, тоді буде додано повідомлення залежно від параметра newMessagesFirst

animate - boolean - (за замовчуванням true) Ви можете передати тут false, і повідомлення буде додано негайно без будь-яких переходів і анімації прокручування. Додатково.

Метод повертає екземпляр Messages

object
messages.addMessages

(messages, method, animate);

Додайте кілька повідомлень за один раз.

messages - array - масив із повідомленнями для додавання. Кожне повідомлення в масиві має бути представлено як об’єкт із обов’язковими параметрами повідомлення.

Метод повертає екземпляр Messages

object
messages.removeMessage

(message);

Видалити повідомлення

message - HTMLElement або string (із CSS Selector) або number (з номером індексу повідомлення з масиву повідомлень) повідомлення для видалення

Метод повертає екземпляр Messages

object
messages.removeMessages

(messages);

Видалити кілька повідомлень

messages - array масив із повідомленнями для видалення

Метод повертає екземпляр Messages

object
messages.scroll

(duration, position);

Прокрутити повідомлення вгору/вниз залежно від параметра newMessagesFirst
  • duration - number — тривалість прокручування в мс
  • position - number — положення прокручування в px
number
messages.renderMessages()
Виводити повідомлення HTML залежно від масиву повідомлень
object
messages.layout();
Примусове автоматичне компонування повідомлень
object
messages.clear();
Очистити/видалити всі повідомлення
object
messages.destroy();
Знищити екземпляр повідомлень
function

Події Повідомлення

Повідомлення запускатимуть такі події DOM в елементі messages і події в екземплярі застосунку та повідомлення:

Події DOM

ПодіяОб'єктОписТип
messages:beforedestroy
Елемент повідомлень

<div class="messages">

Подію буде запущено безпосередньо перед тим, як екземпляр Messages буде знищено
string

Події екземплярів застосунку та повідомлень

Екземпляр Messages заупскає події як у себе, так і в екземплярі застосунку. Події екземплярів застосунку мають однакові назви з префіксом повідомлень messages:
ПодіяАргументОписТип
beforeDestroy
(messages)
Подію буде запущено безпосередньо перед тим, як екземпляр Messages буде знищено
undefined
messagesBeforeDestroy
(messages)
Подію буде запущено безпосередньо перед тим, як екземпляр Messages буде знищено
undefined

Автоматична ініціалізація повідомлень

Якщо вам не потрібно використовувати Messages API, а ваші повідомлення знаходяться всередині сторінки та представлені в DOM на момент ініціалізації сторінки, тоді їх можна автоматично ініціалізувати, просто додавши додатковий клас ініціалізації повідомлень message-init до елемента повідомлень, і всі необхідні параметри можна передаватися за допомогою атрибутів даних data-:
<div class="messages messages-init" data-new-messages-first="true">
  ...
</div>
Параметри, які використовуються в camelCase, наприклад newMessagesFirst, в атрибутах data- повинні використовуватися в kebab-case як data-new-messages-first

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  --t4-message-text-header-text-color: inherit;
  --t4-message-text-header-opacity: 0.65;
  --t4-message-text-header-font-size: 12px;
  --t4-message-text-footer-text-color: inherit;
  --t4-message-text-footer-opacity: 0.65;
  --t4-message-text-footer-font-size: 12px;
  --t4-message-bubble-line-height: 1.2;
  --t4-message-header-font-size: 12px;
  --t4-message-footer-font-size: 11px;
  --t4-message-name-font-size: 12px;
  --t4-message-name-font-weight: inherit;
  --t4-message-avatar-border-radius: 50%;
  --t4-messages-title-font-weight: inherit;
  /*
  --t4-message-sent-bg-color: var(--t4-theme-color);
  */
  --t4-message-sent-text-color: #fff;
  --t4-messages-content-bg-color: #fff;
  --t4-message-typing-indicator-bg-color: #000;
  --t4-message-received-bg-color: #e5e5ea;
  --t4-message-received-text-color: #000;
}
:root .dark,
:root.dark {
  --t4-messages-title-text-color: rgba(255, 255, 255, 0.54);
  --t4-message-header-text-color: rgba(255, 255, 255, 0.54);
  --t4-message-name-text-color: rgba(255, 255, 255, 0.54);
  --t4-message-footer-text-color: rgba(255, 255, 255, 0.54);
  --t4-messages-content-bg-color: transparent;
  --t4-message-received-bg-color: #252525;
  --t4-message-received-text-color: #fff;
  --t4-message-typing-indicator-bg-color: #fff;
}
.ios {
  --t4-messages-title-text-color: rgba(0, 0, 0, 0.45);
  --t4-messages-title-font-size: 11px;
  --t4-message-header-text-color: rgba(0, 0, 0, 0.45);
  --t4-message-footer-text-color: rgba(0, 0, 0, 0.45);
  --t4-message-name-text-color: rgba(0, 0, 0, 0.45);
  --t4-message-avatar-size: 29px;
  --t4-message-margin: 10px;
  --t4-message-bubble-min-height: 32px;
  --t4-message-bubble-font-size: 17px;
  --t4-message-bubble-border-radius: 16px;
  --t4-message-bubble-padding-vertical: 6px;
  --t4-message-bubble-padding-horizontal: 16px;
  --t4-message-typing-indicator-opacity: 0.35;
}
.md {
  --t4-messages-title-font-size: 12px;
  --t4-message-avatar-size: 32px;
  --t4-message-margin: 16px;
  --t4-message-bubble-min-height: 32px;
  --t4-message-bubble-font-size: 16px;
  --t4-message-bubble-border-radius: 4px;
  --t4-message-bubble-padding-vertical: 6px;
  --t4-message-bubble-padding-horizontal: 8px;
  --t4-message-typing-indicator-opacity: 0.6;
  --t4-messages-title-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-header-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-footer-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-name-text-color: rgba(0, 0, 0, 0.51);
}
.aurora {
  --t4-messages-title-font-size: 14px;
  --t4-message-avatar-size: 32px;
  --t4-message-margin: 16px;
  --t4-message-bubble-min-height: 34px;
  --t4-message-bubble-font-size: 16px;
  --t4-message-bubble-line-height: 1.4;
  --t4-message-bubble-border-radius: 16px;
  --t4-message-bubble-padding-vertical: 6px;
  --t4-message-bubble-padding-horizontal: 10px;
  --t4-message-typing-indicator-opacity: 0.5;
  --t4-message-header-font-size: 14px;
  --t4-message-footer-font-size: 12px;
  --t4-message-name-font-size: 14px;
  --t4-messages-title-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-header-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-footer-text-color: rgba(0, 0, 0, 0.51);
  --t4-message-name-text-color: rgba(0, 0, 0, 0.51);
}

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Messages</div>
      </div>
    </div>
    <div class="toolbar messagebar">
      <div class="toolbar-inner">
        <div class="messagebar-area">
          <textarea class="resizable" placeholder="Message"></textarea>
        </div>
        <a class="link send-link" href="#" @click=${sendMessage}>Send</a>
      </div>
    </div>
    <div class="page-content messages-content">
      <div class="messages">
        <div class="messages-title"><b>Sunday, Feb 9,</b> 12:58</div>
        <div class="message message-sent">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-7.jpg)"></div>
          <div class="message-content">
            <div class="message-name">John Doe</div>
            <div class="message-header">Message header</div>
            <div class="message-bubble">
              <div class="message-text-header">Text header</div>
              <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
              <div class="message-text-footer">Text footer</div>
            </div>
            <div class="message-footer">Message footer</div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-7.jpg)"></div>
          <div class="message-content">
            <div class="message-name">John Doe</div>
            <div class="message-header">Message header</div>
            <div class="message-bubble">
              <div class="message-text-header">Text header</div>
              <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
              <div class="message-text-footer">Text footer</div>
            </div>
            <div class="message-footer">Message footer</div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-text">Hi, Kate</div>
            </div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-text">How are you?</div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-9.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Kate</div>
            <div class="message-bubble">
              <div class="message-text">Hi, I am good!</div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-7.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Blue Ninja</div>
            <div class="message-bubble">
              <div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
            </div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-text">Hey, Blue Ninja! Glad to see you ;)</div>
            </div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-text">Hey, look, cutest kitten ever!</div>
            </div>
          </div>
        </div>
        <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-image">
                <img src="https://cdn.techno4.io/placeholder/cats-200x260-4.jpg"
                  style="width:200px; height: 260px" />
              </div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-9.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Kate</div>
            <div class="message-bubble">
              <div class="message-text">Nice!</div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-9.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Kate</div>
            <div class="message-bubble">
              <div class="message-text">Like it very much!</div>
            </div>
          </div>
        </div>
        <div class="message message-received">
          <div class="message-avatar"
            style="background-image:url(https://cdn.techno4.io/placeholder/people-100x100-7.jpg)"></div>
          <div class="message-content">
            <div class="message-name">Blue Ninja</div>
            <div class="message-bubble">
              <div class="message-text">Awesome!</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $, $on }) => {
    let messages;
    let messagebar;

    // Response flag
    var responseInProgress = false;

    // Dummy response
    var answers = [
      'Yes!',
      'No',
      'Hm...',
      'I am not sure',
      'And what about you?',
      'May be ;)',
      'Lorem ipsum dolor sit amet, consectetur',
      'What?',
      'Are you sure?',
      'Of course',
      'Need to think about it',
      'Amazing!!!'
    ]
    var people = [
      {
        name: 'Kate Johnson',
        avatar: 'https://cdn.techno4.io/placeholder/people-100x100-9.jpg'
      },
      {
        name: 'Blue Ninja',
        avatar: 'https://cdn.techno4.io/placeholder/people-100x100-7.jpg'
      }
    ];

    // Отримати повідомлення
    const receiveMessage = () => {
      responseInProgress = true;
      setTimeout(function () {
        // Отримайте випадкову відповідь і випадкову особу
        var answer = answers[Math.floor(Math.random() * answers.length)];
        var person = people[Math.floor(Math.random() * people.length)];

        // Показати індикатор набору тексту
        messages.showTyping({
          header: person.name + ' is typing',
          avatar: person.avatar
        });

        setTimeout(function () {
          // Додати отримане фіктивне повідомлення
          messages.addMessage({
            text: answer,
            type: 'received',
            name: person.name,
            avatar: person.avatar
          });
          // Приховати індикатор набору тексту
          messages.hideTyping();
          responseInProgress = false;
        }, 4000);
      }, 1000);
    }

    // Відправити повідомлення
    const sendMessage = () => {
      var text = messagebar.getValue().replace(/\n/g, '<br>').trim();
      // повернути, якщо повідомлення пусте
      if (!text.length) return;

      // Очистити зону
      messagebar.clear();

      // Повернути фокус до області
      messagebar.focus();

      // Додати повідомлення до повідомлень
      messages.addMessage({
        text: text,
      });

      if (responseInProgress) return;
      // Отримати фіктивне повідомлення
      receiveMessage();
    }

    $on('pageInit', () => {
      // ініціалізація Повідомлення 
      messages = app.messages.create({
        el: '.messages',

        // Правило першого повідомлення
        firstMessageRule: function (message, previousMessage, nextMessage) {
          // Пропустити заголовок
          if (message.isTitle) return false;
          /* якщо:
             - попереднього повідомлення немає
             - або інший тип попереднього повідомлення (надіслано/отримано).
             - або ім'я відправника попереднього повідомлення інше

          */
          if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
          return false;
        },
        // Правило останнього повідомлення
        lastMessageRule: function (message, previousMessage, nextMessage) {
          // Пропустити заголовок
          if (message.isTitle) return false;
          /* якщо:
             - наступного повідомлення немає
             - або тип наступного повідомлення (відправлено/отримано) інший
             - або ім'я відправника наступного повідомлення інше

          */
          if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
          return false;
        },
        // Правило останнього повідомлення
        tailMessageRule: function (message, previousMessage, nextMessage) {
          // Пропустити якщо це  заголовок
          if (message.isTitle) return false;
          /* if (загалом те саме, що lastMessageRule):
           - наступного повідомлення немає
           - або тип наступного повідомлення (відправлено/отримано) інший
           - або ім'я відправника наступного повідомлення інше
        */
          if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
          return false;
        }
      });

      // Init Messagebar
      messagebar = app.messagebar.create({
        el: '.messagebar'
      });
    });

    return $render;
  }



</script>