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. |