react-tailwind-chatbot v0.1.1

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.\ See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.\ It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\ Your app is ready to be deployed!

See the section about deployment for more information.

React Config Component

A configurable React component that allows you to create dynamic chat-like interfaces with ease. You can use it to build static chatbots.

Installation

Install the React Config Component

using npm: npm install simple-react-chatbot

or using yarn: yarn add simple-rect-chatbot

Usage

Import the ChatBot and pass your configuration data as a prop in "config" to create chat interfaces. Here's how you can use it with the provided configData:

import React from 'react';
import { ChatBot } from '**simple-react-chatbot**';

const configData = {
  // ... Your configData here ...
};

function App() {
  return (
    <div className="App">
      <ChatBot config={configData} />
    </div>
  );
}

export default App;

Configuration

The configData prop should be an object containing the chat configuration. Here's a breakdown of the configData you can provide:

* position(optional): The position of the chat window (e.g., 'bottom-left', 'bottom-right', 'top-left', 'top-right') By default, it will be positioned on bottom right. * profileImage(optional): URL of the profile image. * title: Title of the chat window. * subTitle: Subtitle of the chat window. * rounded(optional): The roundness of the chat bubble corners (e.g., 'full', 'lg', 'md', 'sm', ''). By default, it takes 'full' as roundness. * theme(optional): Custom CSS class for styling the chat window(e.g., 'emerald', 'orange', 'yellow', 'blue', 'green'). By default, it will take a gray color. * messageData: An array of message objects representing the conversation flow.

Example `configData`:
const configData = {
  messageData: [
  ... Your messageData configuration ...
  ],
  position: "bottom-left",
  profileImage: "",
  title: "Wallah Habibi",
  subTile: "I'm your Friend",
  rounded: "full",
  theme: "",
};

messageData configuration

  {
      id: v4(),
      question:
        "Hi there! My name is Elsa. I'm your virtual assitant| How can I help you😇.",
      options: [
        {
          id: v4(),
          title: "Trouble finding my order",
          answer: "Trouble finding my order",
          value: "1.1",
          selected: false,
        },
        {
          id: v4(),
          title: "Track my package",
          answer: "Can you please track my package",
          value: "1.2",
          selected: false,
        },
      ],
      visible: true,
      parentQuestionValue: "",
      inputType: "string",
      by: "bot",
    }

Here's a breakdown of the messageData you can provide:

* question: String that you want to ask by the chatbot. The pipeline("|") in between the string split the string and creates multiple chat bubbles depending the number of pipelines. * options(optional): Based on the question asked you can provide options for the user to select and provide the response. * options.title: option title * options.answer: user chat bubble when a user selects an option * options.value: value of the option that later will be used to find question on response of selected option. * parentQuestionValue: Value same as an option. Means it holds the value same as the option that you have selected. In brief, in messageData array of object the 1st option you select with that has a value of 1.1, then in messageData there has to be an object that has the parentWuestionValue 1.1 so that when the user select an option with 1.1 then yo can find the answer related to selected option.

Note: as there is no input field for user you have provide options in questions so that the user can keep interacting with the bot. If you want to end the round you can just stop passing the options in the last question.

Image preview