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

 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