:rainbow: Why?

Library of react components that allows you to create dialog interface that interacts with a third-party service that provides the ability to interact with chat.

:space_invader: Install

For install library you need enter next comand:

npm i sova-chatkit

:rocket: Quick start

For quick start and make changes to a library component, enter in your App.jsx file next comand:

import React from "react"
import { CkComponents } from "sova-chatkit"
 
function App() {
 return (
 <div className="App">
   <CkComponents.ChatIt ckStore={true} />
 </div>
 )
}
 
export default App

:crown: Table of contents

The library consists of the next components:

:unicorn: CkComponents - UI components of widget (react-components);
:wrench: ckAPIMethods - methods that affect behavior of UI or interaction with UI;
:blue_book: ckStore - management of content.

Detailed description of the library is given below.

:memo: Library Description

CkComponents

import { CkComponents } from "sova-chatkit"

Widget uses next react components:
| Component | | |-------------------------------------------------------------------------------------------------------------|-----------------------------------------------------| | Badge | widget expand button | | Message| bubble of text message with information about it | | Dialog | displaying a set of text messages | | Header | widget title | | Rate | component of rate the message | | Sender | message input and sending component |

Each component accepts props from ckStore with value true or false denoting whether the component should cling information from the base ckStore or not.

ckAPIMethods

import { ckAPIMethods } from "sova-chatkit"

ckAPIMethods stores a list of methods: | API method | | |---------------------------------------------------------------------------------------------------------------------------------------|---------------------| | recieveMessageAPI | add a text messages to STORE | | sendMessageAPI | send messages to the module to call request | | styleAPI | edit the widget theme or individual component | | uiManagmentAPI | change settings of components in STORE | | settingsAPI | change pictures in widget | | modulesAPI | connection of dialog modules | | languageAPI | settings language packs |

All methods affect information stored ckStore and can change widget behavior and display.

ckStore

import { ckStore } from "sova-chatkit"

ckStore stores content information in global keys:
| Key | | |------------------------------------------------------------------------------------------------------------|--------------------------------------------------------| | message | user message history and incoming answers | | modules | information of dialog modules | | settings | dialog settings and its states | | language | settings language packs | | styles | style settings of the dialog and individual components | | clientConfig | top-level widget settings | | managment | widget settings |

Implemented with Storeon. You can see all content information in react dev tools.