green-chat

Install

npm install green-chat --save

Imports

Import the components and constants from the package into the file:

import { Chat, ChatList, CHAT_TOKEN } from "green-chat";

Important

After logging the user into your application, you should set the access token in the local storage of the browser for the chat components:

localStorage.setItem(CHAT_TOKEN, access_token);

After calling the function to refresh a token from your app, the new received token must be installed in local storage of the browser under the key CHAT_TOKEN and returned from the function.

Chat Component

import { Chat } from "green-chat";

  <Chat
    userId="userId"
    userLocale="locale"
    chatId="chatId"
    isOnlyChat={true}
    cbHandleCloseChat={cbCloseChat}
    handleRefreshToken={cbRefreshToken}
    classHeader="customCSSClass"
    classMessages="customCSSClass"
    classFieldBox="customCSSClass"
    cbHandleHideChat={cbHideChat}
    isDisplayGroupInfo={isDisplayGroupInfo}
    cbHandleHideChat={cbHandleHideChat}
  />

Chat props

prop	default	type	description
chatId	none	string	Id of the chat or group
userId	none	string	User id got from the access token by decoding
userLocale	ru/en	string	Chat interface language. The browser language is set by default
isOnlyChat	none	boolean	true value is set when only the chat close functionality is used. false allows more chat functionality
cbHandleCloseChat	none	function	A callback function that is called when the user clicks the close chat button
handleRefreshToken	none	function	An asynchronous callback function that is called if the chat API call returns an error. Takes an axios error as an argument. Should return the new user token
classHeader	" "	string	Adds a custom style class for the Chat header
classMessages	" "	string	Adds a custom style class for the box with messages
classFieldBox	" "	string	Adds a custom style class for the box with input field
cbHandleHideChat	none	function	A callback function that is called when the user clicks on the close chat button to hide the chat, while the chat will work in the background
isDisplayGroupInfo	none	boolean	If you pass false, the "Chat" text will be displayed; if you pass true, information about the opponent or group will be displayed in the header

ChatList Component

import { ChatList } from "green-chat";

  <ChatList
    userId="userId"
    userLocale="locale"
    isOnlyChatList={true}
    cbHandleCloseChatList={handleCloseList}
    handleRefreshToken={handleRefreshToken}
    classList="customCSSClass"
    cbHandleOpenChat={handleOpenChat}
    isOpenChatList={boolean}
  />

ChatList props

prop	default	type	description
userId	none	string	User id got from the access token by decoding
userLocale	ru/en	string	ChatList interface language. The browser language is set by default.
isOnlyChatList	none	boolean	true value is set when only the chat list close functionality is used. false allows more chat list functionality.
cbHandleCloseChatList	none	function	A callback function that is called when the user clicks the close chat button.
cbHandleOpenChat	none	function	A callback function that is called when the user clicks on a specific chat in the list. Takes an string as a function argument: chat_id:string
handleRefreshToken	none	function	An asynchronous callback function that is called if the chat API call returns an error. Takes an axios error as an argument. Should return the new user token.
classList	" "	string	Adds a custom style class for the ChatList wrapper
isOpenChatList	none	boolean	Variable for displaying the list. If false is passed, the list will be hidden from the page, but the socket connection will be open.