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
    members={"opponent_id" || ["opponent_id", ...]}
    user_id="user_id"
    user_locale="locale"
    isOnlyChat={true}
    cbHandleCloseChat={cbCloseChat}
    handleRefreshToken={cbRefreshToken}
    classHeader="customCSSClass"
    classMessages="customCSSClass"
    classFieldBox="customCSSClass"
    conversation_name="conversation_name"
    conversation_id="conversation_id"
  />

Chat props

prop	default	type	description
members	none	string or string[]	User opponent ID. If you use chat you need to pass the id as a string, but if you use the conversation you need to pass the id as a array of strings.
user_id	none	string	User id got from the access token by decoding
user_locale	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
conversation_name	"Group"	string	Adds a custom name for a group conversation
conversation_id	none	string	When using chat as a conversation with multiple users, you must pass the conversation ID

---

ChatList Component

import { ChatList } from "green-chat";

  <ChatList
    user_id="user_id"
    user_locale="locale"
    isOnlyChatList={true}
    cbHandleCloseChatList={handleCloseList}
    handleRefreshToken={handleRefreshToken}
    classList="customCSSClass"
    cbHandleOpenChat={handleOpenChat}
  />

ChatList props

prop	default	type	description
user_id	none	string	User id got from the access token by decoding
user_locale	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 object as a function argument: {chat_id:string; opponent_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

---