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) - 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
• calls (boolean) - enables/disables an ability to perform calls. Can only be performed tete-a-tete (in private chats)
• 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: 9,
  callStatus: 1,
  callId: 4,
  callUsers: [9, 3],
  callChatId: 6,
  timer: 5000,
  time: 5
}
*/

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
• callStatus (number) - status of the call. Can have the following values:
  • 1 - CallStatusInitiated
  • 2 - CallStatusAccepted
  • 3 - CallStatusActive
  • 900 - CallStatusDrop
  • 901 - CallStatusRejected
  • 902 - CallStatusEnded
  • 903 - CallStatusIgnored
  • 904 - CallStatusLost.
• callId (number) - stores the call ID
• callUsers (array) - an array with IDs of users participating in the call
• callChatId (number) - ID of the chat the call is in
• timer (number) - call timer. Increments the time field
• time (number) - number of second passed from the beginning of the call.

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