Kapture’s Interactive Chat UI Using ReactJS and Redux

A chat module is a must for any software, especially one at an enterprise level. What Kapture wanted to deliver with the revamped Chat UI was:

An interactive view with tabbed browsing between different chat pages.
To reduce time taken to render requested data.
Automatic routing to a particular client page directly from the chat page.
Quick resolution of queries by providing history and details on a preview pane.

We at Kapture developed a bigger and better interactive Chat User Interface for the agent CRM platform. While the previous version was a pop-up themed Chat UI― much like Facebook’s Desktop Chat head which hovered over the timeline, the new Chat tool is a clean whole page dynamic setup. Google’s very own MIT-licenced Material UI is the design language used to give it a modern look.

Initially, the interface was built only for raising chat tickets. However, now it has evolved into a whole Ticketing Module. This now allows for inflow from Chat, Text, Email and Social Media and so on. Being that it is a highly stable UI, it now allows an agent to handle multiple client queries with such ease. The chances of making mistakes drop dramatically.

Project Structure

The initiation process involving building the base kicked off with a comprehensive plan for the directory structure. Other than recommending a few approaches, React does not hold you to set standards of stacking your files and folders. We split the project into modules with its own directories. Custom library to handle common functions were created to deal with different components individually.

Chat Server

Strophe.js library facilitates web-based XMPP applications in real time. It is used to connect the front-end with the back-end. A functionality that was created to ping the server. With a set time interval of say, 30 seconds, it made sure the chat module was always active by pinging the server and receiving responses.

Interface with React

React – The most painless way to create a UI Library– React delivers a component-based logic in JavaScript instead of templates so we could pass rich data through the app easily. Furthermore, code in React does not need to be rewritten for reusability of components.

Cache System on Redux

Redux – Data Management is Redux’s end of things. Because it works with practically any UI layer, the application behaves consistently. It is a single source of truth. A failsafe for chat history performance issues was to create a cache system. It is actually a fake database. When data from the API is incoming, it checks if it is for the active chat. Active data is stored on Redux and inactive data goes to the cache system, thus not overworking Redux with excess data management.

Webpack

A build tool named Webpack was used to save time while compiling code. It is a powerful bundler which basically combines multiple modules of dependencies and packs them into a select few static assets.

Translate Component

Internationalization or i18n process allowed for products to be localized from different languages and cultures. This was built from scratch by the front-end development team at Kapture. What it does is recognize different scripts and translate text from other languages to chosen locales.

The code for it looks something like this: