@livechat/ui-kit

Chat UI Kit

Stats

StarsIssuesVersionUpdatedCreatedSize
@livechat/ui-kit
0.5.0-202 months ago4 years agoMinified + gzip package size for @livechat/ui-kit in KB

Readme

Hi there! 👋

Welcome to the React Chat UI Kit docs.

React Chat UI Kit is a set of React components to easily build nice-looking chat windows.

Key principles

Our aim was to create a complex set of components to solve common React chat apps implementation issues.

With React Chat UI Kit, we want to:

  • apply good user experience solutions,
  • allow rich theme customization,
  • provide maximum components flexibility,
  • cover various communication needs.

Use cases

You can use React Chat UI Kit for two main purposes:

  • building a custom chat widget,
  • building an app that handles chats view (e.g. a LiveChat archive viewer).

Examples

We have created a sample chat widget, integrated with LiveChat and BotEngine:

Sample Chat Widget

In this widget, BotEngine handles the incoming chats. When the bot returns LiveChat.transfer action, the chat is transferred to a human agent together with the transcript of the initial conversation with the bot.

Getting started

Install React Chat UI Kit

Using npm

To install React Chat UI Kit with npm, run the following command:

npm install --save @livechat/ui-kit This section will guide you through the basic concepts of LiveChat UI Kit, theme structure and components.

The basics

This is the basic app structure:

import { ThemeProvider } from '@livechat/ui-kit'
<ThemeProvider>
  { /* other components /* }
</ThemeProvider>

The whole app should always be wrapped in <ThemeProvider> component.

You can either pass your own theme configuration using theme props (see "Theme structure" section below), or use the default looks. Your theme configuration will be merged with the default theme. What does it mean? For example, you don't have to build the whole object if you only want to change the color of a single element. All you have to do is to pass the relevant property (with the color change) — all other elements will pick up the default styles.

Theme structure

Each LiveChat widget theme is basically a JavaScript object. A theme object groups all properties of a single theme.

Theme objects consist of the following elements:

Property name Description
vars CSS variables available to be used in the components. By default there are 3 colors defined: "primary-color", "secondary-color", and "tertiary-color", but you can add more (and not only colors, of course!).
[COMPONENT_NAME] An object with component's settings. See "Theme components" section below for details.

You can pass custom theme objects to ThemeProvider using theme property (see "Variables" section below for code example).

Variables

Like popular CSS preprocessors, React Chat UI Kit supports variables. It means that you can first define custom properties in vars section, and then reuse them throughout your theme. To refer to a variable, use its property key preceded by -- and wrapped in a var function. For example, if your variable's property key is primary-color, you will use it as follows: var(--primary-color). You can read more about CSS variables here.

In the example below, primary-color, secondary-color, tertiary-color and avatar-border-color are variables:

const theme = { vars: { 'primary-color': '#427fe1', 'secondary-color':
'#fbfbfb', 'tertiary-color': '#fff', 'avatar-border-color': 'blue', }, AgentBar:
{ Avatar: { size: '42px', }, css: { backgroundColor: 'var(--secondary-color)',
borderColor: 'var(--avatar-border-color)', } }, Message: { css: { fontWeight:
'bold', }, }, }

Theme components

Components, or the elements of the LiveChat widget, are the heart of LiveChat UI Kit. Think of them as of building blocks that a chat window is made of: agent bar, avatars, input field, buttons, etc.

You can modify a component by placing its customization object in your theme object. To do so, add a new property to your theme object. This property should consist of component's name and an object as its value.

On the root level of this object, there are component's properties (every component has its own list of style properties) and a css property, where you can place CSS declarations:

{ vars: { 'primary-color': 'red', }, Avatar: { size: '40px', // special Avatar's
property, supported by this component css: { // css object with any CSS
properties borderColor: 'blue', }, }, TextComposer: { css: { 'color': '#000', },
}, }

Nested components

You can also customize components placed inside other components. For example: "Set the size of any avatar to 30px and set the border color to blue, but only Avatars placed inside AgentBar components should have a 1px red border and green background". To do this, add Avatar section inside AgentBar with proper customization:

{ Avatar: { size: '40px', // special Avatar's property, supported by this
component css: { // css object with any CSS properties borderColor: 'blue', },
}, AgentBar: { Avatar: { css: { // you can place there any CSS properties
border: '1px solid red', backgroundColor: 'green', } }, }, }

Subscribe to LiveChat Developers Newsletter to be notified about changes in React Chat UI Kit.

[v0.1.0] - 3.01.2018

Use CSS variables syntax in themes instead of custom syntax

[v0.0.9] - 2.01.2018

Fix onScroll MessageList callback

[v0.0.8] - 2.01.2018

Fix onSeen message callback

[v0.0.6] - 22.12.2017

Fix library peer dependencies, docs improvements

[v0.0.5] - 21.12.2017

First public release

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.