Chat Form
chat-form
is a react based chat-bot like form that allows a dev user to customize the message response to a user on every entry and even add validation reply message with Typescript support.
Why?
I needed to use in some of my projects.
Installation
or
Usage
Import the component
Javascript
import ChatBot from ' chat-form/dist/js/export ' ;
or lazy load
import React , { lazy , Suspense } from ' react ' ;
const ChatBot = lazy ( ( ) => import ( ' chat-form/dist/js/export ' ) ) ;
Typescript
import ChatBot from ' chat-form ' ;
or lazy load
import React , { lazy , Suspense } from ' react ' ;
const ChatBot = lazy ( ( ) => import ( ' chat-form ' ) ) ;
Example
import ChatBot from ' chat-form ' ;
const Component = ( props ) => {
const [ questions , setQuestions ] = React . useState ( [
{
question : ( ) => ' First Question ' ,
answerType : ' input ' ,
identifier : ' name ' ,
validator : {
message : ( value ) => ` Your name length should range between 5 - 26 characters ` ,
validatorCallback : ( value ) => value . length > 4 && value . length < 27 ,
} ,
} ,
] ) ;
return (
< ChatBot
lastMessage = { ' Last message after all the questions have been answered ' }
onAnswer = { setQuestions }
questions = { questions }
/ >
) ;
}
Interfaces
Validator
interface ValidatorObject {
message : ( value : any ) => string ;
validatorCallback : ( value : any ) => boolean ;
}
Question
interface Question {
question : ( value : any ) => string ;
answerType : ' paragraph ' | ' input ' | ' boolean ' | ' select ' | ' file ' | ' number ' | ' csv ' | any ;
identifier : string ;
options ? : string [ ] ;
validator ? : ValidatorObject ;
}
Message
interface Message {
message : string ;
sender : ' bot ' | ' user ' ;
time ? : string ;
fileSrc ? : string ;
file ? : File ;
}
#### Props
interface Props {
className ? : string ;
lastMessage : ( value : any ) => string ;
questions : Question [ ] ;
initialMessages ? : Message [ ] ;
onAnswer : ( questions : Question [ ] , value ? : any ) => void ;
}
Here is the full demo