@iam_vishalkhare/chatter-box

ChatterBox

ChatterBox is an angular component library planned to be utilized as chat or comment component needed for an angular application development.

Use Cases

One on one chat	Group Chat	Comment section
One on one chat with a user or a chatbot - User will see his/her chat in the blue bubble	Group chat experience- User will see his/her chat in the blue background bubble.	Comment section component - User will see his/her comment in blue background bubble.

How to Use?

• Import ChatterBoxModule in your app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ChatterBoxModule } from '@iam_vishalkhare/chatter-box';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		ChatterBoxModule //<-- add the module in imports
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

• Include <vis-chatterBox> component where this component is expected in your application.

<vis-chatterBox
	[heading]=heading
	[headerImage]=headerImage
	[allComments]=allComments
	[inputMaxLength]=inputMaxLength
	[currentUserId]=currentUserId
	[showErrorDiv]=showErrorDiv
	[errorMsg]=errorMsg
	[placeholderText]=placeholderText
	(onKeyupEnter)=sendMessage($event)
	(onKeyup)=onKeyUp(message)
>
</vis-chatterBox>

To brief the signatures of the components as below

Name	Type	Optional?	Description
[heading]	string	No	A heading string to be displayed on the header of ChatterBox
[headerImage]	string	Yes	A URL to the image that should be displayed on the header along with heading
[allComments]	Array<CommentPayload>	No	Array of all comment objects. Each object will be of type CommentPayload. Definition of CommentPayload is mentioned below.
[inputMaxLength]	number	No	Maximum length of input allowed in the textfield of ChatterBox.
[currentUserId]	number or string	Yes	Any unique user Identifier of current/logged in user. This is used to show a user his/her own chats/comments in blue conversation bubble. All other chats/comments are shown in grey conversation bubbles.
[showErrorDiv]	boolean	Yes	Default - false. Set True if an error needs to be shown in chatbox instead of chats. This can be used to show errors occurring while communicating with backend.
[errorMsg]	string	Yes	If there is an error, set your error message in this.
[placeholderText]	string	Yes	This text will be visible as placeholder in input field of ChatterBox. Not providing any placeholderText will render no placeholder.
(onKeyupEnter)	Callback function	No	This function will be called when return is pressed on keyboard after typing a input. Use this to create a CommentPayload object and push it to allComments so that it renders on the chatbox, then do whatever you want with it. E.g. Sending the message/comment to backend etc.
(onKeyup)	Callback function	No	This function will be called on every keyup event of the text field.

CommentPayload Interface

interface  CommentPayload {
	msgId:  number;
	userId?:  number  |  string;
	msg:  string;
	timestamp:  string;
	userName:  string;
	userImagePath?:  string;
}

Name	type	Optional	Description
msgId	number	No	Each message/comment should have a unique numeric value.
userId	number or string	Yes	Each message can have a unique userId which can be either a number or a string. This is used to identify current user show that user his/her chat/comment in blue conversation bubble.
msg	string	No	Actual message to be displayed in conversation bubble.
timestamp	string	No	Timestamp to be displayed in conversation bubble.
userName	string	No	User name to be displayed in conversation bubble.
userImagePath	string	Yes	Path to user's image. If this is not provided then Image will contain first letter of User name. (See screenshots above)

Sample implementation

• In app.module.ts

import { BrowserModule } from  '@angular/platform-browser';
import { NgModule } from  '@angular/core';
import { AppComponent } from  './app.component';
import { ChatterBoxModule } from '@iam_vishalkhare/chatter-box';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		ChatterBoxModule
	],
	providers: [],
	bootstrap: [AppComponent]
})
export  class  AppModule { }

• In app.component.html or wherever the ChatterBox component is required.

<div  style="height: 600px; width: 400px;">
	<vis-chatterBox
		[heading]=heading
		[headerImage]=headerImage
		[allComments]=allComments
		[inputMaxLength]=inputMaxLength
		[currentUserId]=currentUserId
		[showErrorDiv]=showErrorDiv
		[errorMsg]=errorMsg
		[placeholderText]=placeholderText
		(onKeyupEnter)=sendMessage($event)
		(onKeyup)=onKeyUp(message)
	>
	</vis-chatterBox>
</div>

Note that <vis-chatterBox> component is enclosed in a <div> with some height and width. This is to demonstrate that <vis-chatterBox> will take the height and width of it's parent <div>

• In app.component.ts

import { Component } from  '@angular/core';
import { CommentPayload } from '@iam_vishalkhare/chatter-box';

@Component({
	selector:  'app-root',
	templateUrl:  './app.component.html',
	styleUrls: ['./app.component.css']
})

export  class  AppComponent {
	heading  =  'John Doe';
	headerImage  =  '../assets/logo.png';
	showErrorDiv:  boolean;
	errorMsg  =  'This is an error';
	inputMaxLength  =  100;
	placeholderText=  'Write a comment...!!!';
	currentUserId  =  8;

	allComments:  Array<CommentPayload> = [
		{msgId:  4, userId:  9, msg:  'This is 2nd test comment', timestamp:  '21st Sept 2019', userName:  'John Doe', userImagePath:  '../assets/logo.png'},
		{msgId:  3, userId:  8, msg:  'This is a test comment', timestamp:  '21st Sept 2019', userName:  'Vishal Khare'},
		{msgId:  5, msg:  'This is 3rd test comment', timestamp:  '21st Sept 2019', userName:  'John Doe', userImagePath:  '../assets/logo.png'},
		{msgId:  4, userId:  9, msg:  'This is 2nd test comment', timestamp:  '21st Sept 2019', userName:  'John Doe', userImagePath:  '../assets/logo.png'},
	];

	sendMessage(msgPayload:  string) {
		// Constructing a desired object of type CommentPayload to be added to allComments
		const  payload  = {
			msgId:  6,
			msg:  msgPayload,
			timestamp:  '21st Sept 2019',
			userName:  'Brown Fox'
		};
		this.allComments.push(payload);
	}

	onKeyUp(msgPayload:  string) {
		console.log(msgPayload);
	}
}

Result of sample implementation

Give this component a try. Reach out to me at [e-mail] in case of any questions/suggestions. Thank You...!!!