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 configuration.

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, object) - enables/disables an ability to perform calls. Read more about the configuration of one-to-one and group calls in the corresponding API article
• files (boolean) - enables/disables an ability to upload and download files
• emojis (boolean) - enables/disables an ability to send emojis
• 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) - the width of the widget, when it is switched to a compact mode. 650 by default
• typingMode (boolean) - the mode that simulates typing of response for bots. true by default. Check the details
• typingDelay (number) - the delay between letters typing in ms. 50 by default. The property works only with the typingMode configuration option enabled
• typingLoadedDelay (number) - the delay between letters typing in ms, when the "end" operation comes from the server. 10 by default. The property works only with the typingMode configuration option enabled

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,
  callChatId: 0, 
  callInitiator: 0, 
  callIsGroup: false, 
  callName: "", 
  callAvatar: ""
}
*/

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
  • 801 - CallStatusDisconnected
  • 900 - CallStatusDrop
  • 901 - CallStatusRejected
  • 902 - CallStatusEnded
  • 903 - CallStatusIgnored
  • 904 - CallStatusLost
  • 905 - CallStatusBusy.
• userStatus (number) - status of the user. Can have the following values:
  • 0 - CallUserStatusDisconnected
  • 1 - CallUserStatusInitiated
  • 2 - CallUserStatusConnecting
  • 3 - CallUserStatusActive.
• 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 State Changes

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