Alexander Tyler

Alexander Tyler

1594700214

How to Build a Chatbot with React

Learn to build a chatbot with react chatbot kit from start to finish.

Documentation: https://fredrikoseberg.github.io/react-chatbot-kit-docs/

Repository: https://github.com/FredrikOseberg/chatbot-tutorial

My philosophy is simple. To become good at something, you need to do it a lot.

It’s not enough to do it once. You need to do it again, and again and again. It will never end. I used the same philosophy to get good at programming.

One thing I’ve noticed on this journey is that it’s a lot more fun to build things that are interesting, and that look good. Things you can show you friends and be proud of. Something that makes you excited to get started when you sit down in front of your keyboard.

That’s why I built a chatbot.

Which morphed into a npm package.

So let’s build one together. If you want to take on this challenge on your own, you can go directly to the documentation (which is actually a chatbot).

Otherwise, let’s go. I’m going to assume that you have Node installed, and access to the npx command. If not, go get it here.

Initial setup

// Run these commands from your command line
npx create-react-app chatbot
cd chatbot
yarn add react-chatbot-kit
yarn start

This should install the npm package and open the development server at localhost:3000.

Next head over to App.js and make these changes:

import Chatbot from 'react-chatbot-kit'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Chatbot />
      </header>
    </div>
  );
}

Great job. We’re getting there. You should see this in your development server now:

The chatbot takes three props that must be included for it to work. First, it needs a config which must include an initialMessages property with chatbot message objects.

Secondly, it needs a MessageParser class that must implement a parse method.

Thirdly, it needs an ActionProvider class which will implement actions that we want to take based on parsing the message.

We’ll go deeper into this later. For now, go here to get the boilerplate code to get started.

  • Put the MessageParser code in a file called MessageParser.js
  • Put the ActionProvider code in a file called ActionProvider.js
  • Put the config code in a file called config.js

When that’s done, go back to your App.js file and add this code:

import React from 'react';
import Chatbot from 'react-chatbot-kit'
import './App.css';

import ActionProvider from './ActionProvider';
import MessageParser from './MessageParser';
import config from './config';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Chatbot config={config} actionProvider={ActionProvider} 	    messageParser={MessageParser} />
      </header>
    </div>
  );
}

You should now see this on localhost:3000:

Sweet. Now we have the chatbot rendered to the screen and we can write in the input field and submit it to send a message to the chat. But when we try that, nothing happens.

Understanding how the chatbot works

Here we need to take a pit stop and take a look at how the MessageParser and ActionProvider interacts to make our bot take action.

When the bot is initialized, the initialMessages property from the config is put into the chatbot’s internal state in a property called messages, which is used to render messages to the screen.

Moreover, when we write and push the submit button in the chat field, our MessageParser (which we passed as props to the chatbot) is calling its parse method. This is why this method must be implemented.

Let’s take a closer look at the MessageParser starter code:

class MessageParser {
  constructor(actionProvider) {
    this.actionProvider = actionProvider;
  }

  parse(message) {
    ... parse logic
  }
}

If we look closely, this method is constructed with an actionProvider. This is the same ActionProvider class that we pass as props to the chatbot. This means that we control two things - how the message is parsed, and what action to take based on said parsing.

Let’s use this information to create a simple chatbot response. First alter the MessageParser like this:

class MessageParser {
  constructor(actionProvider) {
    this.actionProvider = actionProvider;
  }

  parse(message) {
    const lowerCaseMessage = message.toLowerCase()

    if (lowerCaseMessage.includes("hello")) {
      this.actionProvider.greet()
    }
  }
}

export default MessageParser

Now our MessageParser is receiving the user message, checking if it includes the word “hello”. If it does, it calls the greet method on the actionProvider.

Right now, this would crash, because we haven’t implemented the greet method. Let’s do that next. Head over to ActionProvider.js:

class ActionProvider {
  constructor(createChatBotMessage, setStateFunc) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
  }

  greet() {
    const greetingMessage = this.createChatBotMessage("Hi, friend.")
    this.updateChatbotState(greetingMessage)
  }

  updateChatbotState(message) {

// NOTE: This function is set in the constructor, and is passed in      // from the top level Chatbot component. The setState function here     // actually manipulates the top level state of the Chatbot, so it's     // important that we make sure that we preserve the previous state.

   this.setState(prevState => ({
    	...prevState, messages: [...prevState.messages, message]
    }))
  }
}

export default ActionProvider

Nice. Now if we type in “hello” into the chat field, we get this back:

Fantastic. Now that we can control parsing the message and responding with an action, let’s try to make something more complicated. Let’s try to make a bot that provides you with learning resources for the programming language you ask for.

Creating a learning bot

First, let’s go back to our config.js file and make some slight changes:

import { createChatBotMessage } from 'react-chatbot-kit';

const config = { 
  botName: "LearningBot",
  initialMessages: [createChatBotMessage("Hi, I'm here to help. What do you want to learn?")],
  customStyles: {
    botMessageBox: {
      backgroundColor: "#376B7E",
    },
    chatButton: {
      backgroundColor: "#376B7E",
    },
  },
}

export default config

OK, so we’ve added some properties here and changed our initial message. Most notably we have given the bot a name and changed the color of the messagebox and chatbutton components.

Alright. Now we’re getting to the good part.

Not only can we parse messages and the respond to the user with a chatbot message, we can define custom React components that we want to render with the message. These components can be anything we want – they are just plain old React components.

Let’s try it out by creating an options component that will guide the user to possible options.

First, we define the learning options component:

// in src/components/LearningOptions/LearningOptions.jsx

import React from "react";

import "./LearningOptions.css";

const LearningOptions = (props) => {
  const options = [
    { text: "Javascript", handler: () => {}, id: 1 },
    { text: "Data visualization", handler: () => {}, id: 2 },
    { text: "APIs", handler: () => {}, id: 3 },
    { text: "Security", handler: () => {}, id: 4 },
    { text: "Interview prep", handler: () => {}, id: 5 },
  ];

  const optionsMarkup = options.map((option) => (
    <button
      className="learning-option-button"
      key={option.id}
      onClick={option.handler}
    >
      {option.text}
    </button>
  ));

  return <div className="learning-options-container">{optionsMarkup}</div>;
};

export default LearningOptions;

// in src/components/LearningOptions/LearningOptions.css

.learning-options-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.learning-option-button {
  padding: 0.5rem;
  border-radius: 25px;
  background: transparent;
  border: 1px solid green;
  margin: 3px;
}

Now that we have our component, we need to register it with our chatbot. Head over to config.js and add the following:

import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";

import LearningOptions from "./components/LearningOptions/LearningOptions";

const config = {
initialMessages: [
    createChatBotMessage("Hi, I'm here to help. What do you want to 		learn?", {
      widget: "learningOptions",
    }),
  ],
 ...,
 widgets: [
     {
     	widgetName: "learningOptions",
    	widgetFunc: (props) => <LearningOptions {...props} />,
     },
 ],
}

Understanding widgets

Alright. Let’s take a breather and explore what we’ve done.

  1. We created the LearningOptions component.
  2. We registered the component under widgets in our config.
  3. We gave the createChatbotMessage function an options object specifying which widget to render with this message.

The result:

Fantastic, but why did we need to register our component in the config as a widget function?

By giving it a function, we control when we perform the invocation. This allows us room to decorate the widget with important properties inside the chatbot.

The widget that we define will receive a number of properties from the chatbot (some of which can be controlled by config properties):

  1. actionProvider - we give the actionProvider to the widget in order to execute actions if we need to.
  2. setState - we give the top level chatbot setState function to the widget in case we need to manipulate state.
  3. scrollIntoView - utility function to scroll to the bottom of the chat window, should we need to adjust the view.
  4. props - if we define any props in the widget config, those will be passed to the widget under the property name configProps.
  5. state - if we define custom state in the config, we can map it to the widget by using the mapStateToProps property

If you recall, we defined some options in the LearningOptions component:

  const options = [
    { text: "Javascript", handler: () => {}, id: 1 },
    { text: "Data visualization", handler: () => {}, id: 2 },
    { text: "APIs", handler: () => {}, id: 3 },
    { text: "Security", handler: () => {}, id: 4 },
    { text: "Interview prep", handler: () => {}, id: 5 },
  ];

Currently these have an empty handler. What we want to do now is to replace this handler by a call to the actionProvider.

So what do we want to have happen when we execute these functions? Ideally, we’d have some sort of chatbot message, and an accompanying widget that displays a list of links to helpful resources for each topic. So let’s see how we can implement that.

First, we need to create the link list component:

// in src/components/LinkList/LinkList.jsx

import React from "react";

import "./LinkList.css";

const LinkList = (props) => {
  const linkMarkup = props.options.map((link) => (
    <li key={link.id} className="link-list-item">
      <a
        href={link.url}
        target="_blank"
        rel="noopener noreferrer"
        className="link-list-item-url"
      >
        {link.text}
      </a>
    </li>
  ));

  return <ul className="link-list">{linkMarkup}</ul>;
};

export default LinkList;

// in src/components/LinkList/LinkList.css

.link-list {
  padding: 0;
}

.link-list-item {
  text-align: left;
  font-size: 0.9rem;
}

.link-list-item-url {
  text-decoration: none;
  margin: 6px;
  display: block;
  color: #1d1d1d;
  background-color: #f1f1f1;
  padding: 8px;
  border-radius: 3px;
  box-shadow: 2px 2px 4px rgba(150, 149, 149, 0.4);
}

Great. We now have a component that can display a list of links. Now we need to register it in in the widget section of the config:

import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";

import LearningOptions from "./components/LearningOptions/LearningOptions";
import LinkList from "./components/LinkList/LinkList";

const config = {
  ...
  widgets: [
    {
      widgetName: "learningOptions",
      widgetFunc: (props) => <LearningOptions {...props} />,
    },
    {
      widgetName: "javascriptLinks",
      widgetFunc: (props) => <LinkList {...props} />,
    },
  ],
};

export default config;

So far so good, but we want to dynamically pass in props to this component so that we can reuse it for the other options as well. This means that we need to add another property to the widget object in the config:

import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";

import LearningOptions from "./components/LearningOptions/LearningOptions";
import LinkList from "./components/LinkList/LinkList";

const config = {
  ...,
  widgets: [
    ...,
    {
      widgetName: "javascriptLinks",
      widgetFunc: (props) => <LinkList {...props} />,
      props: {
        options: [
          {
            text: "Introduction to JS",
            url:
              "https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/",
            id: 1,
          },
          {
            text: "Mozilla JS Guide",
            url:
              "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide",
            id: 2,
          },
          {
            text: "Frontend Masters",
            url: "https://frontendmasters.com",
            id: 3,
          },
        ],
      },
    },
  ],
};

export default config;

Now these props will be passed to the LinkList component as props.

Now we need to do two more things.

  1. We need to add a method to the actionProvider
class ActionProvider {
  constructor(createChatBotMessage, setStateFunc) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
  }

  handleJavascriptList = () => {
    const message = this.createChatBotMessage(
      "Fantastic, I've got the following resources for you on Javascript:",
      {
        widget: "javascriptLinks",
      }
    );

    this.updateChatbotState(message);
  };

  updateChatbotState(message) {
    // NOTICE: This function is set in the constructor, and is passed in from the top level Chatbot component. The setState function here actually manipulates the top level state of the Chatbot, so it's important that we make sure that we preserve the previous state.

    this.setState((prevState) => ({
      ...prevState,
      messages: [...prevState.messages, message],
    }));
  }
}

export default ActionProvider;
  1. We need to add this method as the handler in the LearningOptions component:
import React from "react";

import "./LearningOptions.css";

const LearningOptions = (props) => {
  const options = [
    {
      text: "Javascript",
      handler: props.actionProvider.handleJavascriptList,
      id: 1,
    },
    { text: "Data visualization", handler: () => {}, id: 2 },
    { text: "APIs", handler: () => {}, id: 3 },
    { text: "Security", handler: () => {}, id: 4 },
    { text: "Interview prep", handler: () => {}, id: 5 },
  ];

  const optionsMarkup = options.map((option) => (
    <button
      className="learning-option-button"
      key={option.id}
      onClick={option.handler}
    >
      {option.text}
    </button>
  ));

  return <div className="learning-options-container">{optionsMarkup}</div>;
};

export default LearningOptions;

Alright! That was quite a lot of information. But if we now try to click the JavaScript option in the chatbot, we get this result:

Perfect. But we don’t want to stop there, this is a chatbot after all. We want to be able to respond to users who want to use the input field as well. So we need to make a new rule in MessageParser.

Let’s update our MessageParser.js file to look like this:

class MessageParser {
  constructor(actionProvider) {
    this.actionProvider = actionProvider;
  }

  parse(message) {
    const lowerCaseMessage = message.toLowerCase();

    if (lowerCaseMessage.includes("hello")) {
      this.actionProvider.greet();
    }

    if (lowerCaseMessage.includes("javascript")) {
      this.actionProvider.handleJavascriptList();
    }
  }
}

export default MessageParser;

Now try typing “javascript” into the input field and sending the message. You should get the same list in response from the chatbot.

So there you have it. We’ve set up a chatbot that renders a list of possible options and responds to user input.

For now, we’ve only set up the bot to handle when someone clicks or types in JavaScript, but you can try to expand the other options on your own. Here’s a link to the repository.

All the code is on GitHub, so feel free to dive into the react-chatbot-kit code or docs.

#react #chatbot #javascript #developer

What is GEEK

Buddha Community

How to Build a Chatbot with React
Autumn Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Clovis Halvorson

Clovis Halvorson

1624653660

The Best Way to Build a Chatbot in 2021

A useful tool several businesses implement for answering questions that potential customers may have is a chatbot. Many programming languages give web designers several ways on how to make a chatbot for their websites. They are capable of answering basic questions for visitors and offer innovation for businesses.

With the help of programming languages, it is possible to create a chatbot from the ground up to satisfy someone’s needs.

Plan Out the Chatbot’s Purpose

Before building a chatbot, it is ideal for web designers to determine how it will function on a website. Several chatbot duties center around fulfilling customers’ needs and questions or compiling and optimizing data via transactions.

Some benefits of implementing chatbots include:

  • Generating leads for marketing products and services
  • Improve work capacity when employees cannot answer questions or during non-business hours
  • Reducing errors while providing accurate information to customers or visitors
  • Meeting customer demands through instant communication
  • Alerting customers about their online transactions

Some programmers may choose to design a chatbox to function through predefined answers based on the questions customers may input or function by adapting and learning via human input.

#chatbots #latest news #the best way to build a chatbot in 2021 #build #build a chatbot #best way to build a chatbot

Erwin Boyer

Erwin Boyer

1624498185

AI Chatbots for Business: Why You Need One Now!

It’s said that Artificial Intelligence will be just as smart as humans by 2050. Experts like Ray Kurzweil have even predicted that we’ll achieve a technological singularity by 2045.

From that point on, it’s believed that AI will start inventing Nobel Prize-winning inventions every 5 minutes. Granted it’s gonna be out of our control, but hey, at least we’ll see a revolutionary breakthrough.

We may think that these claims are outlandish and ridiculous, but if someone were to tell me in the 70s that there will be self-driving cars in the future, I would’ve wanted to smoke whatever they were smoking.

But guess what, here we are in 2020, and Tesla already has their self-driving cars on the roads right now. And these were all recently developed technologies. Did you know that the first chatbot was actually launched in 1966?

Features of AI Chatbots

Why Do You Need an AI Chatbot?

Chatbots Across Various Industries

Wrapping Up

#ai-chatbot #what-is-a-chatbot #chatbot-online #chatbot #chatbot-website #facebook-chatbot #google-chatbot #best-chatbot

Erwin Boyer

Erwin Boyer

1624502703

11 Of The Best Artificial Intelligence Enterprise Chatbots in 2021

Chatbots for businesses help them engage their website visitors and convert them into potential customers. The implementation of chatbots transforms the way businesses interact with their users. They can use a chatbot AI for sales, marketing, customer support, and automate many other business tasks.

The AI chatbots have revolutionized the customer service experience and enabled businesses to serve their customers in a better way. Chatbots, if created and used right, can help you take your business to all-new levels of success.

To make the best AI chatbot for your business, you need an efficient chatbot builder with various advanced features. In this post, we have listed different chatbot builders with their features, pros, and cons. Just go through the post and find the one that best fits your business needs.

chatbot for your business.

  1. Chatfuel
  2. Gupshup
  3. Appy Pie Chatbot
  4. ChatterOn
  5. MobileMonkey
  6. ActiveChat.ai
  7. Imperson
  8. SnatchBot
  9. Botsify
  10. BotCore
  11. Pandorabots

#chatbots #chatbot-development #ai-chatbot #customer-support-chatbots #power-of-chatbots #enterprise-chatbots #use-cases-of-chatbots #what-is-a-chatbot

Erwin Boyer

Erwin Boyer

1624546320

6 Chatbot Builders You Can Use to Emulate Facebook's Messenger

Innovative technologies like Artificial Intelligence (AI) and Machine Learning

are essential enablers of digital transformation. The unique ability to distill all complex data into knowledge, along with judgment (AI) and mechanical rules (ML) undoubtedly makes these technologies stand apart.

In order to perform any specific task, AI and ML get to the atom of every job and get it done with comparative ease. In this way, rule-based work separates from knowledge-based work, which typically depends on critical thinking and decision-making skills. This process not only disrupts the current organizational working practices, but also improves the customer experience by reducing time, human resources required, and budget.

For instance: AI and ML, along with Data Science, create Inductive Logic

programming (ILPs) efficient for image and voice recognition. An ILP is the backbone of chatbots. Robotic Process Automation (RPA) is another specific case, which accurately illustrates a fundamental change in digital technology.

RPAs are software robots that first learn and then mimic and perform rule-based tasks. They easily interact with any computer application or system with 100% accuracy.

As AI and cognitive computing together erase out the demarcation between the digital and physical worlds, making cognitive systems think, observe, assimilate and learn like humans.

It properly understands the human inputs via Natural Language Processing (NLP) and replies using Dialog Management.

#chatbots #chatbot-development #customer-support-chatbots #chatbots-and-voice-searches #how-to-make-a-chatbot #how-to-build-a-chatbot #free-chatbot-builders #marketing