0.0.57 • Published 5 years ago

chat-form v0.0.57

Weekly downloads
110
License
MIT
Repository
github
Last release
5 years ago

Chat Form

NPM CircleCI npm version Coverage Status

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

 npm install chat-form

or

 yarn add chat-form

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; // value argument is the user input value
  validatorCallback: (value: any) => boolean;
}

Question

interface Question {
  question: (value: any) => string;
  answerType: 'paragraph' | 'input' | 'boolean' | 'select' | 'file' | 'number' | 'csv' | any;
  identifier: string; // identifier is the key of response values 
  options?: string[]; // only if answerType is select
  validator?: ValidatorObject;
}

Message

interface Message {
  message: string;
  sender: 'bot' | 'user';
  time?: string;
  fileSrc?: string; // Required if message is of file type
  file?: File;
}

Props

interface Props {
  className?: string;
  lastMessage: (value: any) => string; // The message after all the values have been filled. It takes in an object of { [identifier]: user input }
  questions: Question[];
  initialMessages?: Message[];
  onAnswer: (questions: Question[], value?: any) => void; // where value is an object of { [identifier]: user input }
}

Here is the full demo

0.0.57

5 years ago

0.0.56

5 years ago

0.0.55

5 years ago

0.0.53

5 years ago

0.0.50

5 years ago

0.0.49

5 years ago

0.0.47

5 years ago

0.0.48

5 years ago

0.0.46

5 years ago

0.0.37

5 years ago

0.0.36

5 years ago

0.0.35

5 years ago

0.0.34

5 years ago

0.0.33

5 years ago

0.0.32

5 years ago

0.0.31

5 years ago

0.0.30

5 years ago

0.0.29

5 years ago

0.0.28

5 years ago

0.0.27

5 years ago

0.0.26

5 years ago

0.0.25

5 years ago

0.0.24

5 years ago

0.0.23

5 years ago

0.0.22

5 years ago

0.0.21

5 years ago

0.0.20

5 years ago

0.0.19

5 years ago

0.0.18

5 years ago

0.0.17

5 years ago

0.0.16

5 years ago

0.0.15

5 years ago

0.0.14

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago

0.0.11

5 years ago

0.0.1

5 years ago

0.1.0

5 years ago