Chat

OGX.JS comes with its own Chat component that can be used to create one-to-one or one-to-many chat/messenger interface.

Stack

Extends

 Uxi, Touch

Requires

 Templater, Scroller, Form*

*Forms only needed if user input is restricted

OML

Format

 {"selector:Chat":{CONFIG}}

Example

 {"#chat:Chat":{
      "users":[
           {"_id":1, "first_name":"John", "last_name":"Cena"},
           {"_id":2, "first_name":"Dwayne", "last_name":"Johnson"},
           {"_id":3, "first_name":"Vin", "last_name":"Diesel"}
       ],
       "key":"_id",
       "user":1
 }}

Create

 let config = {
      el:_SELECTOR_, //required, the selector for the HTML element
      users:_ARRAY_, //an array of objects representing a list of users
      key:_STRING_, //the unique property such as an id common to the list of users
      user:_KEY_, //the current user respecting the key property,
      display_mode:_STATIC_, //the display mode to use for users, defaults to initials
      picture_key:_STRING_, //the common property for the picture in picture display mode
      restrict:_BOOLEAN_|_RESTRICT_OBJECT_, //the restriction configuration,
      date_format:_STRING_, //Moment.js compatible format, defaults to 'YYYY-MM-DD h:mm:ss A'
      messages:_ARRAY_ //the array of objects representing the messages of the conversation,
      url_encode:_BOOL_, //set to true to automatically url encode/decode the body of the message,
      read_only: _BOOL_, //show hides the input box
 };

As an OML node

   let oml = {};
   oml['#myDiv:Chat'] = config;
   OGX.OML.render(this, oml);

Direct from an Object extending Uxi

  let chatroom = this.create('Chat', config);

Independently

 let chatroom = OGX.Object.create('Chat', config);

Display Modes

Chat offers the option to display users by their initials or their picture. By default,Chat will use initials. If you wish to use pictures instead, you will need to change the display mode and set the common property that will hold the picture url per user, such as

  let config = {
      ..., 
      display_mode:OGX.Chat.DISPLAY_PICTURE,
      picture_key:'image',
      ...
 };

Note that Chat will fallback into displaying a user initials if the picture_key property is not found on a user or if it is set to false

Get/Set

 chatroom.users(_ARRAY_); //Set users for the chatroom
 chatroom.user(_ID_); //Set current user
 chatroom.setMessages(_ARRAY_); //Set conversation messages
 chatroom.prependMessages(_ARRAY_); //Prepend messages
 chatroom.addMessage(_MSG_OBJ_); //Add a new message
 chatroom.userTyping(_BOOL_, _ID_); //Show a user as currently typing or not
 chatroom.setCompose(_STRING); //Prefill the body in the composer area
 chatroom.getScroller(); //Return the OGX.Scroller instance
 chatroom.clear();  //Clear all messages   
 chatroom.readOnly(_BOOL_); //hides or shows input box

Media & Attach

By default, media is set to true, this means images and videos are supported. To activate attachments, set the attach parameter such as

  ...,
  media: true,
  attach: { width: 500, height: 500 }

You can set your own target width and height of your liking. The image will be resized to match these values.

Message Format

The expected message format is the following

 {from:_USER_ID_, body:_STRING_, date:_STRING_, image:_OPTIONAL_STRING_, video:_OPTIONAL_STRING_}

Events

 OGX.Chat.SEND_MESSAGE
 OGX.Chat.USER_TYPING

Example

 chatroom.el.on(OGX.Chat.SEND_MESSAGE, function(__event, __data){
      //__data: {from:_USER_ID_, body:_STRING_, date:_STRING_}
 });

 chatroom.el.off(OGX.Chat.SEND_MESSAGE);

Destroy

chatroom.destroy();