How-tos

Styling message boxes

You can provide custom styles and templates for message boxes. In this how-to we'll try to achieve the following result:

First of all create a new custom class and inherit it from the default class (chat.views["messages"]):

class CustomMessages extends chat.views["messages"] {
  config() {
    let ui = super.config();
    // the second row is a 'comments' widget
    let messages = ui.rows[1];
  }
}

Applying custom styles

You can apply your custom styles to the component via the css property of the component. Make sure to define css class before setting it to the component:

class CustomMessages extends chat.views["messages"] {
  config() {
    // ...
    // set a custom css class for the 'comments' widget
    messages.css = "messages-list";
  }
}

Custom templates

Messages in Chat are based on the comments widget so you can define a template for them via the listItem property.

class CustomMessages extends chat.views["messages"] {
  config() {
    // ...
    // define a new template for items
    messages.listItem.template = (obj, common) => {
      let message;
      let avatar = common.templateAvatar(obj, common);
      // ...
      if (obj.user_id === this.app.config.user) {
        message = `<div class='message'>${user}${menu}${date}${text}</div>${avatar}`;
      }
      return message;
  }
 
  return ui; // returning styled ui
}

Do not forget to override the default class with the new one for the changes to take effect:

webix.ui({
  view: "chat",
  override: new Map([
    [chat.views["messages"], CustomMessages]
  ]),
  // other properties
})

Related sample:  Chat: Styling Messages

Back to top