Group Chat

Basic Group Chat component.

Features/Functionality

• Previous messages are shown with latest at end.
• New message can be sent.
• For desktops, scroll bar will be shown on hover.
• For small screens it will already be shown.

Basic Usage

Dependencies

• font-awesome
• jquery
• shared styles
• shared scripts

HTML Structure

<require from="{user_path}/grp_chats/grp_chat"></require>

<cst-grp-chat get-data-callback.bind="{getData}" evt-send-callback.bind="{evtSendCallback}" options.bind="{options}" container-class.bind="{containerClass}"></cst-grp-chat>

Bindable Properties

Property Name	Data Type	Required	Decription	Example	Expected Return
getDataCallback	method	Yes	Method to be called to get data	getDataCalback(_overrideContext)	Promise object with data in following structure
evtSendCallback	method	Yes	Method to be called to send a new message	evtSendCallback(_event, _info)	Promise object with status whether message has been sent/stored or not
options	object	No	options for component	options = { dateTimeFormat: 'DD/MM/YYYY HH:mm'}
containerClass	string	No	Class to be applied on component container

*Data structure*

data = {
   activeUser: '',
   messages: [{
      user: '',
      message: '',
      dateTime: '',
      messageId: ''
   }]
}

*info structure*

_info = {

overrideContext: '',

value : {

messages: [],

newMessage: {}

}

}

Working Example

HTML

<template>

<require from="./shared/custom_comp/grp_chats/grp_chat"></require>

<div>

<cst-grp-chat get-data-callback.bind="getData" evt-send-callback.bind="evtSendCallback" options.bind="options" container-class.bind="containerClass"></cst-grp-chat>

</div>

</template>

CSS

.cst-container-cls {

background-image: url('') !important;

background-repeat: no-repeat !important;

}

JS

class MyCls{

constructor(){

this.options = {

}

this.containerClass: 'cst-container-cls';

}

getData(_overrideContext){

}

evtSendCallback(_event,_info) {

}

}

export { MyCls }

Example Screen Shots

Demo Link
Group Chat

---

Commit check list

Mark down usage
https://guides.github.co