Configuring Chat

As Chat is an application based on Webix Jet it consists of many stand-alone Webix components. You can customize its inner views or work with Chat-specific confgiuration.

Basic Configuration

You can use the following settings to provide the basic config of the widget:

• id (string, number) - optional, the ID of a widget;
• url (string, function, object) - the URL for loading and saving data;
• locale (string, object) - name of the language in use, or object with locale settings;
• width (number) - widget width;
• height (number) - widget height;
• token (string) - optional, authentication token;
• mode (string) - defines a mode of chat:
  • "limited"- chats are predefined, users cannot change them;
  • "single" - all users are in one and the same chat;
  • "full" (default);
• compact (boolean) - compact mode. false by default;
• compactWidth (number) - width of the widget, when it is switched to a compact mode. 650 by default.

Reactive Configuration

In addition to the basic setting, Chat has specific reactive properties that store global app state and let developers track its changes:

• chatId (number, string) - the id of the chat being viewed currently;

You can get the current state of the widget with the help of the getState() method:

webix.ui({
    view:"chat", 
    id:"myChat",
    token, // token got from the server
    url: "https://docs.webix.com/chat-backend/"
});
 
var state = $$("myChat").getState();
/*
{
  chatId: 6,
  chatType: "chat",
  search: "",
  userId: null
}
*/

The state object also contains several read-only properties:

• userId (number, string) - the id of the user with whom a private chat is active now;
• search (string) - the value in the search field above the list of chats/users;
• chatType (string) - the type of the current chat ("chat" or "user"). "chat" stands for a group chat, "user" is a private chat.

How to Listen to Changes of the Reactive Properties

You can use $observe handler to listen to changes and provide custom handlers for them:

webix.ui({
  view: "chat",
  url: "https://docs.webix.com/chat-backend/",
  on: {
    onInit: app => {
      const state = app.getState();
      state.$observe("chatId", id => {
        webix.message("The chat id is " + id);
      });
    }
  }
});

Related sample:  Chat: Listening to States

In the sample above, the current state is accessed via the instance of the inner JetApp which is available in the onInit event handler.

Back to top