chat-wrapper

A package wrapper around the React chat library, used to integrate chat into Vue and Angular apps.

Install

npm install chat-wrapper --save

After installing the wrapper, all the necessary packages for the chat will be automatically installed. Also, to integrate store chat into the application, you need to install reduxjs/toolkit:

npm install @reduxjs/toolkit  --save

---

Imports

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

import { ChatConnector, ChatListConnector, LS_TOKEN_KEY, chatStore, ChatRootState } from "chat-wrapper";

Important

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

localStorage.setItem(LS_TOKEN_KEY, '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 LS_TOKEN_KEY and returned from the function.

---

ChatConnector Component

import { ChatConnector } from "chat-wrapper";

  <ChatConnector
    opponent_id="opponent_id"
    user_id="user_id"
    user_locale="locale"
    isOnlyChat={true}
    cbHandleCloseChat={cbCloseChat}
    handleRefreshToken={cbRefreshToken}
    classHeader="customCSSClass"
    classMessages="customCSSClass"
  />

Chat props

prop	default	type	description
opponent_id	none	string	User opponent ID
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

---

ChatListConnector Component

import { ChatListConnector } from "chat-wrapper";

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

ChatListConnector 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

---

Integration into Vue project

Setting up configuration files

To integrate the React library into the project, you should configure vite to work with react and Vue:

npm install @vitejs/plugin-react

In the vite.config.ts file, add a condition for processing files for React:

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [vue(), react()],
});

---

Connecting redux store

A store redux plugin is being created to connect chat to the store project:

//storePlugin.ts
import { App, reactive } from "vue";
import { EnhancedStore } from "@reduxjs/toolkit";
import { ChatRootState } from "chat-wrapper"; //type for store chat

export const storeKey = Symbol("Redux-Store");

export const createRedux = (store: EnhancedStore) => {
  const rootStore = reactive<{ state: ChatRootState }>({
    state: store.getState(),
  });
  const plugin = {
    install: (app: App) => {
      app.provide<{ state: ChatRootState }>(storeKey, rootStore);

      store.subscribe(() => {
        rootStore.state = store.getState();
      });
    },
  };
  return plugin;
};

In the main.ts file of the app, the chat store and plugin are imported, then connected to the app for use:

//main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createRedux } from "./storePlugin";
import { chatStore } from "chat-wrapper";

const app = createApp(App);
app.use(createRedux(chatStore)); // Connect the plugin from Redux Store in the app
app.mount("#app");

---

Using Connectors

A component is created into which the chat connector from the wrapper package will be imported:

//ChatComponent.vue
<template>
  <div id="app"></div>
</template>

<script lang="ts">
import { onBeforeUnmount, onMounted } from "vue";

import { LS_TOKEN_KEY, ChatConnector} from "chat-wrapper";

export default {
  name: "ChatComponent",
  setup() {
    let reactComponent: InstanceType<typeof ChatConnector> | null = null;

    onMounted(() => {
      const appElement = document.getElementById("app") as HTMLElement;

      reactComponent = new ChatConnector(appElement);

      localStorage.setItem(LS_TOKEN_KEY, 'access_token');

      reactComponent.render({
        opponent_id: "opponent_id",
        cbHandleCloseChat: () => {},
        handleRefreshToken: () => {},
        user_locale: "user_locale",
        isOnlyChat: true,
        user_id: "user_id",
      });
    });

    onBeforeUnmount(() => {
      if (reactComponent) {
        reactComponent.unmount();
      }
    });

    return {};
  },
};
</script>

And for the chat list connector the example would look like this:

//ChatListComponent.vue
<template>
  <div id="app"></div>
</template>

<script lang="ts">
import { onBeforeUnmount, onMounted } from "vue";

import { LS_TOKEN_KEY, ChatListConnector } from "chat-wrapper";

export default {
  name: "ChatListComponent",
  setup() {
    let reactComponent: InstanceType<typeof ChatListConnector> | null = null;

    onMounted(() => {
      const appElement = document.getElementById("app") as HTMLElement;

      reactComponent = new ChatListConnector(appElement);

      localStorage.setItem(LS_TOKEN_KEY, 'access_token');

      reactComponent.render({
        cbHandleOpenChat: () => {},
        cbHandleCloseChatList: () => {},
        handleRefreshToken: () => {},
        user_locale: "user_locale",
        isOnlyChatList: true,
        user_id: "user_id",
      });
    });

    onBeforeUnmount(() => {
      if (reactComponent) {
        reactComponent.unmount();
      }
    });

    return {};
  },
};
</script>

In the App.vue project file you need to import the chat files:

//App.vue
<template>
  <div>
    <ChatComponent />
  </div>
</template>

<script>
import ChatComponent from "./components/ChatComponent.vue";
import ChatListComponent from "./components/ChatListComponent.vue";

export default {
  name: "App",
  components: {
    ChatComponent, ChatListComponent
  },
};
</script>

---

Integration into Angular project

Setting up configuration files

In order to be able to create files with the .tsx extension, you need to make changes to the tsconfig.json file:

//tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react"
  },
  "angularCompilerOptions": {
    ...
  }
}

Connecting redux store

You should import the chat store and connect it to the project; to do this, you should create the file src/redux-store.service.ts

//src/redux-store.service.ts
import { Injectable } from '@angular/core';
import { chatStore } from 'chat-wrapper';

@Injectable({
  providedIn: 'root',
})
export class ReduxStoreService {
  getStore() {
    return chatStore;
  }
}

Using Connectors

Create a component file into which you will import the chat connectors:

//ChatWrapper.tsx
import {
  AfterViewInit,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  OnDestroy,
  Output,
  SimpleChanges,
  ViewChild,
  ViewEncapsulation,
} from "@angular/core";
import { LS_TOKEN_KEY, ChatConnector } from "chat-wrapper";
import { createRoot } from "react-dom/client";

const containerElementRef = "customReactComponentContainer";

@Component({
  selector: "chat-wrapper",
  template: `<div #${containerElementRef}></div>`,
  encapsulation: ViewEncapsulation.None,
})
export class ChatWrapper implements OnChanges, OnDestroy, AfterViewInit {
  @ViewChild(containerElementRef, { static: true }) containerRef!: ElementRef;

  @Output() public componentClick = new EventEmitter<void>();

  @Input() opponentId: string = "opponent_id";
  @Input() userId: string = "user_id";
  @Input() userLocale: string = "user_locale";
  @Input() isOnlyChat: boolean = true;

  private root: ReturnType<typeof createRoot> = {} as ReturnType<
    typeof createRoot
  >;

  private chatConnector!: InstanceType<typeof ChatConnector>;

  ngOnChanges(changes: SimpleChanges): void {
    if (this.chatConnector) {
      this.render();
    }
  }

  ngAfterViewInit() {
    this.chatConnector = new ChatConnector(this.containerRef.nativeElement);
    this.render();
  }

  ngOnDestroy() {
    if (this.chatConnector) {
      this.chatConnector.unmount();
    }
  }

  private render() {
    localStorage.setItem(LS_TOKEN_KEY, 'access_token');

    this.chatConnector.render({
      opponent_id: this.opponentId,
      user_id: this.userId,
      user_locale: this.userLocale,
      isOnlyChat: this.isOnlyChat,
      cbHandleCloseChat: () => {
        this.componentClick.emit();
      },
      handleRefreshToken: () => {},
    });
  }
}

Then you should import the chat wrapper component into the app files:

// app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ChatWrapper } from '../ChatWrapper';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ChatWrapper],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  ...
}

// app/app.component.html
<chat-wrapper></chat-wrapper>
<router-outlet />