sovaai / chatKit-lib

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

👾 Install

For install library you need enter next comand:

npm i sova-chatkit

🚀 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

👑 Table of contents

The library consists of the next components:

🦄 CkComponents - UI components of widget (react-components);
🔧 ckAPIMethods - methods that affect behavior of UI or interaction with UI;
📘 ckStore - management of content.

Detailed description of the library is given below.

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