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.

Note that token is an optional property used by the built-in Backend service to pass it to the server. You can specify your own way of the user authentication.

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