Skip to content

sovaai/chatKit-lib

Repository files navigation

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