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

app.messages.destroy(el)
Знищити екземпляр Messages

● el - HTMLElement or string (за допомогою селектора CSS) or objectелемент Messages або екземпляр Messages для знищення.

app.messages.get(el)
Отримати екземпляр Messages за елементом HTML

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

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

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

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

(message, previousMessage,

nextMessage)

lastMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано останній клас message-last повідомлення
function

(message, previousMessage,

nextMessage)

tailMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас хвоста повідомлення message-tail
function

(message, previousMessage,

nextMessage)

sameNameMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас message-same-name
function

(message, previousMessage,

nextMessage)

sameHeaderMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас message-same-header
function

(message, previousMessage,

nextMessage)

sameFooterMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас message-same-footer
function

(message, previousMessage,

nextMessage)

sameAvatarMessageRule
Функція, яка має повертати логічне значення true або false на основі необхідної умови залежно від попереднього та наступного повідомлень. У разі збігу до повідомлення буде додано клас message-same-avatar
function

(message, previousMessage,

nextMessage)

customClassMessageRule
Функція, яка має повертати додаткові класи повідомлень у вигляді рядка на основі необхідної умови залежно від попереднього та наступного повідомлень.
function

(message, previousMessage,

nextMessage)

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

Давайте подивимося на єдиний об’єкт параметрів повідомлення, який ми повинні використовувати, коли передаємо масив 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
Об'єкт із переданими параметрами ініціалізації
messages.el
Елемент HTML контейнера повідомлень (<div class="messages">)
messages.$el
Елемент Dom64 з елементом HTML повідомлень
messages.messages
Масив з повідомленнями
Методи
МетодОпис
messages.showTyping(message)
Показати індикатор повідомлень, що вводяться

● message - object - параметри повідомлення, які потрібно додати

messages.hideTyping()
Приховати індикатор введеного повідомлення
messages.addMessage

(message, method, animate);

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

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

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

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

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

messages.addMessages

(messages, method, animate);

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

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

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

messages.removeMessage

(message);

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

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

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

messages.removeMessages

(messages);

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

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

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

messages.scroll

(duration, position);

Прокрутити повідомлення вгору/вниз залежно від параметра newMessagesFirst

● duration - number тривалість прокручування в мс

● position - number положення прокручування в px

messages.renderMessages()
Виводити повідомлення HTML залежно від масиву повідомлень
messages.layout();
Примусове автоматичне компонування повідомлень
messages.clear();
Очистити/видалити всі повідомлення
messages.destroy();
Знищити екземпляр повідомлень

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

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

Події DOM

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

<div class="messages">

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

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

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

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

Якщо вам не потрібно використовувати 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>

Techno4 Framework