Customizing Chat

Chat is a complex widget created with Webix Jet, the MV* framework for Webix Library. It is a ready-to-use application that needs minimal configuration and has an API for redefining the logic of inner modules.

Jet App and Inner Modules

Chat is built as a Jet App and wrapped in a Webix view, so you can initialize it in either way.

Views

The interface of Chat is split into parts (views). Each view is a class that extends the JetView class and has its own handlers for setting the configuration and logic.

The sources for interface parts (Jet Views) are located in the sources/views folder.

views
  chats.js
  list.js
  messages
    toolbar.js
  ...

Models/Services

Chat models contain the logic for loading and storing data, uploading avatars, working with templates etc. They are defined as Jet Services.

The sources for models (Jet Services) are located in the sources/models folder.

models
  Backend.js
  Helpers.js
  Local.js
  Operations.js
  Upload.js
  Emojis.js
  VoiceMessages.js

Service methods are called by the UI and can be called by a programmer as:

$$('myChat').getService('helpers').listAvatar(user, cssClass);

Customizing Views

When you customize a view, you can:

• override the config() method to change the UI
• override the init() method to change the UI and behavior
• override any existing method, but do it with caution
• add and call your own methods

Check the Class Map to find which view renders the part you want to modify.

First, create your own view class and inherit it from one of the default views or from chat.views.JetView:

class CustomToolbar extends chat.views['messages/toolbar'] {
    config() {
        //get JSON object with configuration
        const ui = super.config();
        //exact changes depend on a particular view
        ui.height = 60;
        return ui;
    }
    init() {
        // call default logic
        super.init();
        // custom logic below
        this.doSomething();
    }
    doSomething() {
        // do something on init
    }
}

Then, replace the default view via the override map:

webix.ui({
    view: 'chat',
    url: 'https://docs.webix.com/chat-backend/',
    override: new Map([[chat.views['messages/toolbar'], CustomToolbar]]),
});

Custom toolbar content

To add custom content to the toolbar take the following steps:

1. Create a new class and inherit it from the default chat.views["messages/toolbar"] one.
2. Redefine the TitleTemplate method so that it returns the desired content.

class CustomToolbar extends chat.views['messages/toolbar'] {
    TitleTemplate(chat) {
        var helpers = this.app.getService('helpers');
        // getting avatar
        var result = helpers.listAvatar(chat, 'webix_chat_toolbar_avatar');
        return (
            result +
            `
      <div class='webix_chat_title'>
          <div class="webix_chat_messages_groupchat_name">${chat.name}</div>
          <div class="webix_chat_messages_groupchat_members">
            Custom content here
          </div>
      </div>`
        );
    }
}

3. Replace the default class with a custom one via the override map:

webix.ui({
    view: 'chat',
    override: new Map([[chat.views['messages/toolbar'], CustomToolbar]]),
    // other properties
});

Related sample:  Chat: Custom Toolbar Content

Notes

Hiding Components

We do not recommend removing any component from the interface as the inner logic might still try accessing it. Instead, hide the components.

class CustomToolbar extends chat.views.sidebar {
    init(view) {
        // preserving default logic
        super.init();
        // removing components can cause errors
        // hiding components is safe
        this.$$('search').hide();
    }
}

Accessing Component Instances

Within a Jet view, you can access component instances in two ways.

Use the $$(id) method of JetView for an inner component that has the localId setting:

init(view) {
  // preserving default logic
  super.init();
  // removing components can cause errors
  // hiding components is safe
  this.$$("search").hide();
}

Use queryView if localId is not defined:

init(view) {
    // default logic
    super.init();
    // get instance of the search input
    view.queryView("chat-search").hide();
}

Checking the Compact Mode

You can find out whether the app is currently compact from any view or service method:

const compact = this.getParam('compact', true);

Getting State Properties

You can get state properties from any view or service method:

const state = this.app.getState();
// or
const state = this.getParam('state');

Customizing Jet Services

When you customize a service, you can:

• add and call your own methods
• override any existing method, but do it with caution

First, create your own service class and inherit it from one of the default services:

class MyBackend extends chat.services.backend {
    chats() {
        // client-side data
        return webix.promise.resolve(chats);
    }
}

Then, replace the default service via the override map:

{
  view: "chat",
  url:"https://docs.webix.com/chat-backend/",
  override: new Map([
    [chat.services.Backend, MyBackend]
  ])
}

Related sample:  Chat: Local Data

You can find more information about Chat Backend service in the Working with Server article.

Backward Compatibility

Chat is flexible: you can change almost anything in it. However, keep in mind the following:

• The inner logic of Chat modules may change in future releases.
• We will try to maintain method signatures, but breaking changes might happen if they are necessary for further development of the widget.

Back to top