Category: Chat

Each second countless amount of data is created by social media users on the internet, for instance, since 2013, the number of Tweets each minute has increased 58 % to more than 474000 Tweets per minute in 2019. Instagram users upload over 100 million photos and videos everyday. Due to this constant flow of data the internet turns out to be the best data source that can be encountered, thus being the object of numerous analysis that can be performed using artificial intelligence.

One of the most famous platforms used these days to share media content is YouTube. YouTube is the preferred way that people use to share content, on this platform it can be encounter videos about endless topics so each video can reach millions of people that can react in a variety of ways. The purpose of this post is truly worth it. since, we will learn how to use data analysis, machine learning, and data mining techniques to analyze videos on YouTube.

Knowing the inside of a website.

First things first. Before performing any analysis, we need to collect the data of interest. Performing analysis over websites can be a bit challenging since in these cases there is not a data set or formal database that can be used to perform such analysis. To perform these studies we need to extract the data directly from the website delving into the deepest parts of it, the process to navigate into the website is called web scraping.

A brief introduction to Selenium.

Selenium is a web scraping Python library that allows us to interact with websites and extract data from them using Python code. Selenium serves as an interface between Python and the website using a web browser like Firefox or Chrome as a web engine. Let’s see a simple example to get an idea about all the potential this library can unfold.

The website https://quotes.toscrape.com/ will be our target to explore the different methods we can use to extract data from this page. The page looks like this:

The goal is to obtain quotes from the website, to do that we need to understand what is behind this website, thus we should dive into the html code that structures every website on the internet. Using the developer tools that most browsers have, we can uncover the HTML and CSS code, said that, the inner structure of our website looks like this:

In the image above it is shown part of the HTML code within the website, it can be observed a kind of tree structure where each node is represented by a HTML tag. HTML tags are like keywords that define how the web browser will format and display the content. With the help of tags, a web browser can distinguish between HTML content and simple content.

The text we want to obtain is within a span tag, which has a class named “text”, the tag span and therefore the “text” class are within a div section with a class named “quote”. We can see that the class “quote” is a container for each quote on the page. Known this, we can easily infer that each quote is within a tag named “text”, which in turn is inside a div tag with a class named “quote”. Let’s use this to get the first quote with Selenium. The code is shown below.

Selenium has a class WebDriver that will allow us to interact with websites. in this particular case, we are going to use Firefox as an interface between Python and the website. By default, when you use the WebDriver class, it opens up your browser.

Preventing the browser from loading

Since we are not interested in opening the browser when the WebDriver is executed, the lines the code 4 and 5 disable this event creating an option that is passed as an argument of the WebDriver instantiation done at the line of code 7.

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

The first quote

The driver.get method will then navigate to the page given by the URL. WebDriver will wait until the page is fully loaded before returning control to the script. Finally, WebDriver offers a number of ways to find elements by using one of the find_element_by_* methods.

Since we already know the name of the class that contains the quote, we will use it using the method find_element_by_class_name(class_name) using the class name as a parameter. Then we extract the text property from the object returned by the method to obtain the quote.

“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”

Getting the rest of the quotes.

This method obtains the first quote by default, however, we are getting the first quote just because it appears in the first element with the text class. if we want to obtain all the quotes on the first page, the driver object provides a set of methods that extract all the elements on the website with the class name indicated. In this scenario, the ways to find elements would be done using the find_elements_by_* methods. Notice the plural on the word “elements”.

If we want to obtain all the quotes from the first page, it is enough to implement a for loop using the method mentioned before. For example, the code shown below will extract all the quotes from the first page.

Diving into a YouTube page video.

Try to open a YouTube video and you will notice that the website does not load the comments until you scroll down over the page. Therefore, if we try to use the previous script we will have nothing but the data referring to the video player, which is loaded when the website starts.

Using Selenium to execute JavaScript code.

Fortunately, one of the advantages of selenium is that it allows us to navigate into the website using Python code in the same way as we would with the web browser. Using the following script we can scroll down over the web page.

The key to moving through the web page is the ability of Selenium to execute JavaScript code by using the method execute_script . Consequently, we can take advantage of all the dynamic properties within a web page. Thus, the script shown above gets information about the web page, specifically, the scrollHeight property, which indicates the height of the document element.

Then, it is time to scroll down over the web page using the method window.scrollTo(0, height) . Finally, the while loop will continue scrolling down to the point where it is impossible to continue doing this, that is, the property scrollHeight will not change anymore, indicating the page is fully loaded.

The comment section.

If we look at the HTML code that generates the comment section we will see the following structure.

It can be observed that the comments are inside a structure which starts with the id “comments”, then if we continue unfolding the structure, we realize that all the comments are within a div tag that contains the id “contents”, hence each comment is identified with the classes style-scope and ytd-comment-thread-renderer

Within this section we encounter two subsections that store data about the comment. The first section is identified with the id: “comment”, the second section identified with the id “replies” stores information about the replies made on that specific comment. Since the interest holds just above the text written about the video, let us concentrate on the first section.

As we unfolded the comment section we see two new sections, the first is identified with the id “paid-comment-images” and the other with id “body”, the last one contains the information that we are looking for, so unfolding this section we encounter three subsections with ids “author-thumbnail”, “main”, and “action-menu”. The first two contain the desired information, which for this case, will be the author of the comment, its URL channel, and the comment.

Now that we have an idea about the tags that contain the information we are looking for, we can use the WebDriver object to extract the data from those tags, the following methods can be used to achieve this.

The first thing we should do is to scroll down on the website, so we the comment section can fully be loaded, then we use the method find_elements_by_id to retrieve all the elements with the id “comment”. Next, we use a for loop to iterate over each comment. Finally, we use the find_element_by_* methods to move through the HTML structure and retrieve the information that we are looking for.

Conclusions.

In this post I explore only the surface of one of the applications for which we can use Selenium, since what, unlike other frameworks for web scrapping that only allows to load the static content, Selenium can be used to interact with websites using Python code similarly to the way we would do it using a browser.

In this case I used Selenium to execute JavaScript code to move through the page and load the comment section of a YouTube video. and extract the text content from the comments. This is a very naive implementation and the script I developed was just to show the potential of this library, but the wait times and the way we extract the comment can be optimized to use for real applications.

In future posts I will show how an entire application can be developed to not only extract the text from the comments but to analyze them using natural language processing (NLP). The script can be found in the following GitHub repository.

If you want to keep in contact with me and know more about this kind of content. I invite you to follow me on Medium and check my profile on LinkedIn

References

How Much Data is Created on the Internet Each Day?

YouTube Demographics & Data to Know in 2021

Selenium with Python

Don’t forget to give us your 👏 !

---

YouTube comment analysis. Part I. was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.

submitted by /u/jorenwouters
[link] [comments]

Lecturers, professors, teachers, and educational institutions have been coming up with new ways to conduct lessons since the pandemic began. 

There are a lot of factors that go into creating a conducive learning environment, especially with Covid. There are numerous teaching styles as there is no one-size-fits-all approach to learning. 

In recent months, Noodle Factory has talked about various teaching methods and concepts including universal design for learning, blended learning design, and AI intelligent tutoring systems. 

If you have yet to find a suitable solution for your classroom, the flipped classroom could be the answer to your problems.

11 Chatbot Best Practices You Should Follow to Create a Powerful Chatbot — EmpathyBots

If you are reading this guide, then probably you are creating a chatbot or about to create one.

And now you are wondering, What are the traits of a good chatbot?

“The Chatbot Best Practices!”

Isn’t it?

Then, you are at the right place!

Because in this guide, I’m going to share all the golden rules you need to know to create a powerful chatbot.

Just creating and adding a chatbot into your business is not going to work anymore.

It has to drive the expected results for your business as well.

And to achieve that, you need to follow these chatbot best practices, which will help you to create an effective chatbot strategy and make the most out of it.

Suggested Guide: How to Create a Chatbot from Scratch in 2021 (The Ultimate Guide)

11 Chatbot Best Practices to Create a Powerful Chatbot

1. Set Expectations

What do you expect from your chatbot?

The reason it exists?

Its goals?

It can be anything like, you want to generate leads for your business, answer frequently asked questions, improve the customer support system, or just have funny conversations.

For example, the purpose of the restaurant bot will be completely different than the insurance bot.

A restaurant bot can be used to view the menu, order food, book a table, make payments, and many more.

And on the other hand, an insurance bot can be used to find the right policy, manage claims and renewals, premium payments, and many more.

The overall point is, set the purpose of your chatbot because only then you can measure the efficiency of your chatbot.

Like, if your goal is to collect leads then you can track the number of collected leads and so on.

And, It is very important to track your chatbot’s performance and analyze it so that you can optimize it for better results.

Pro Tip:

Don’t rush for a lot of expectations at once as you can’t expect it from a brand new chatbot. Take one goal at a time and add more with time.

2. Choose the Right Development Platform

After setting the expectations from your chatbot, the next task is to choose the right development platform to fulfill those expectations.

There are two types of development platforms,

1. No-code Development Platforms
2. And, Development Frameworks.

The no-code development platforms allow you to create a chatbot with a simple drag-and-drop flow builder.

And, development frameworks allow you to leverage its NLP engine to create awesome conversational experiences.

Now, you might be wondering how to choose between them?

The formula is very simple,

Expectations + Type of Chatbot + Features = Chatbot Platform

Now, you already knew about expectations, so I’m not going to tell you again.

Next, you need to look at which type of chatbot you want to create, like Rule-based or AI-based.

Refer to this guide to know more about the types of chatbot.

Then, look at which features you want in your chatbot.

And finally, choose the platform which marks all of these three checkboxes.

Below is the list of some no-code platforms that I personally use,

1. Chatfuel
2. ManyChat

And, some widely used development frameworks,

1. Dialogflow
2. Wit.ai
3. IBM Watson

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

3. Decide the Bot Functionality Upfront

It’s a good practice to decide the chatbot’s functionality before you actually start to create one.

It is different than setting expectations.

In expectations, you theoretically decide “what” problems are you trying to solve or what goals you are trying to achieve.

But in bot functionality, you decide “how” to solve those problems or achieve those goals. You can call it the technical side of setting expectations.

For example, if your goal is to build a FAQ bot, then you need to decide whether it will be the prefixed question set that users can select or they can ask any question they want.

4. Design Chatbot’s Personality

It’s very important to give a unique personality to your chatbot and be consistent with it.

The chatbot is just the digital extension of you or your brand and hence your chatbot’s personality should also match with it.

Define the tone and voice of your chatbot according to your target audience.

And, decide whether it should be formal and keep the conversation professional or informal and keep the conversation more friendly.

Whatever it be, just keep it consistent throughout the conversation.

Pro Tip:

Be transparent. Tell your users that they are talking with a chatbot by giving such kind of name to it or telling it in the greeting message.

Like I gave the name EmpathyBot to my chatbot and send a greeting message as,

“Hey there! I’m EmpathyBot! How can I help you?”

By doing so, you will not mislead your users and also earn their trust.

5. Make Conversations Human

How do you chat with anyone?

Give an answer to yourself.

Yes, you are creating a chat “bot” but still, it is chatting with a human.

So your conversations should also be designed in such a way that humans can understand and relate.

Don’t write long paragraphs, cut them into small chunks of messages as most of us do.

Use emojis, photos, videos, GIFs, etc. Just bring the personality into it.

Pro Tip:

Just be natural while designing the conversations as if you are talking to a real human being and read it aloud so that you can improve it.

6. Close-ended Conversations

Always remember to design close-ended conversations.

Especially, when you are creating an AI-based chatbot.

But, What is close-ended?

For example, asking people, “Tell me about yourself?”

The answer will be unpredictable and not have a fixed endpoint.

It is an “open-ended” conversation.

But if you asked, “Tell me your name?”

Then, the answer will be predictable and fixed for everyone.

It is called a “close-ended” conversation.

Then the question arises, Why to design close-ended conversations?

And the answer is, because you are creating a chatbot to achieve some business goals.

For example, if you are creating a lead generation bot, then to generate a lead you need to design a funnel that consists of some conversational steps.

And to go from one step to another, you need to have specific and fixed responses on each step.

But open-ended conversations do not have fixed endpoints, hence the chatbot will not understand what next step to take, which will lead to the conversation failure.

That is the reason you should design close-ended conversations.

7. Repairing the Conversation Failure

In the previous point, you learned how conversations can fail in chatbots.

And it is quite normal in real-life communication as well.

Remember, how sometimes you get out of track when talking about some specific topic and your friend brings you on track again.

This same process is implemented in chatbots as well to repair the conversation failure.

It is called fallback intent or message.

If a user asked something out of the chatbot’s scope, then the chatbot will reply with a fallback message and try to bring the conversation on track again.

Pro Tip:

Don’t use the generic fallback message like “Sorry, I don’t understand!”.

Show the available options with buttons or ask if they want to talk with a live agent instead.

8. Keep it Simple and Clean

Would you like to use an ugly-looking complex app and spend time on it?

Definitely not! (I’m guessing…)

The more simple it is, the better it is!

Don’t make it too complex.

Both for you and your chatbot’s users.

It should be easy for users to navigate through its different functions.

Because it’s all about user experience.

9. Ability to Easy Exit and Unsubscribe

Another key point in improving its user experience is the ability to easy exit and unsubscribe at any time from the chatbot.

You should not force them to be in a conversation or a subscriber if they don’t want to.

By saying the ability to exit, I mean that they should have the option to exit from the ongoing conversation and return back to the main menu or start a new conversation.

And also the ability to leave the conversation at any time and unsubscribe to the bot.

Pro Tip:

You can achieve it by either giving an option button at the bottom or notifying them about a keyword to do so at the beginning of a conversation.

10. Create Different Prototypes

You cannot create Siri or Alexa in the first attempt.

You have to create different conversational flows, design multiple conversational scripts, and create different versions of chatbot.

Then finally select the one which is better at meeting your expectations and giving a top-notch user experience.

11. Measure & Improve Your Performance

And finally, the most common thing you need to practice to be successful in any kind of work, measuring the results and improving for better performance.

This part comes after you successfully launch your chatbot.

You have to track that whether it’s meeting your KPI’s (goals) or not.

Then, improve it by observing your users, trends, how they are interacting with a chatbot, the most common topic they discussed, and so on.

Wrapping up the Chatbot Best Practices

Creating a chatbot takes planning and effective implementation of that plan.

You have to spend time creating and optimizing your chatbot.

It’s possible to not get the expected results from it in the initial days, but it doesn’t mean that there is a problem with the entire chatbot.

It is just that your chatbot is missing one of these important chatbot best practices and need to identify and correct it.

I hope that these 11 chatbot best practices will help you to create a powerful chatbot for your business.

Liked this story? Consider following me to read more stories like this.

You can also follow me on Twitter and LinkedIn.

Don’t forget to give us your 👏 !

---

11 Chatbot Best Practices You Should Follow to Create a Powerful Chatbot — EmpathyBots was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.

submitted by /u/ADSPLTech7512 [link] [comments]

Building an AI Chatbot has never been easier

Microsoft Bot Framework is a framework for building enterprise-grade conversational AI experiences. It is hosted on Microsoft Azure’s cloud infrastructure. With this framework, we have launched a few virtual assistants such as Meva for PETRONAS Dagangan Berhad’s MyMesra, Skye for Kuala Lumpur Convention Centre, and Nadia for Affin Hwang Asset Management. In this article, I’m going to share why you should consider Microsoft Bot Framework for your next AI Chatbot as a developer.

Easy to start

First, this bot framework is very easy to start. We can have a simple Q&A bot using QnA Maker in less than an hour without coding at all. You can upload an excel file of questions and answers or provide a webpage. You can refer to this link to get your first bot up and running. Some bots may continue as a simple QnA bot, and some may evolve to be a more complex bot.

Flexibility & Complexity

A bot may need to be very flexible, or complex based on clients’ business requirements. Here, we can use the Microsoft Bot Framework SDK to build our complex bot dialogs and integrations. We can program complex nested dialogs to run product recommender, for example. You can also program the bot to guide users to give feedback or make an appointment.

Within the bot dialogs, we can also integrate our bot with Microsoft LUIS which is a Cognitive Service solution. LUIS allows us to get a user’s intents and entities to make our bot smarter. For example, if a user’s intent is to submit a complain, we can use LUIS to get their name, email, and phone numbers accurately. LUIS also can get dates, measurements and also custom entities using regular expressions such as your countries’ identity number.

Since the bot can be hand coded, we can also connect to any REST API. For example, we can connect the Azure Text Translator to translate Malay language into English to be processed by LUIS. This is because there are languages that are not supported by LUIS natively. We can also connect to our other apps to push or get data.

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

Programming Languages

Even though this bot framework is built by Microsoft, we can use 4 types of different programming languages ranging from C#, Java, JavaScript to Python to build the bot. We do not need to learn another language if we already know one of those programming languages. There are also bot project templates for Visual Studio to help us to get started. The templates come with samples on how to do certain tasks in a chatbot.

Bot Testing

For testing the bot, we can use Bot Framework Emulator which is installed onto our machine. This tool is a conversation interface to debug the bot locally with our development tool. It is fully integrated with Visual Studio, and it makes testing and debugging work a lot easier. For example, we can set breakpoints in the code and do live debugging.

Ready Integration with XTOPIA

Microsoft Bot Framework is also ready for integration with XTOPIA. By integrating with XTOPIA, your end users can update the bot’s responses easily and enhance your website with bot interaction. The end users can also make your bot better with XTOPIA codeless workflow by getting data from internal and external sources.

That’s all for now. We will share more about Microsoft LUIS and bot development in the future. You can find out more about Microsoft Bot Framework here and XTOPIA platform here.

XIMNET is a digital solutions provider with two decades of track records specialising in web application development, AI Chatbot and system integration.

XIMNET is introducing a brand new way of building AI Chatbot with XYAN. Head over to our website to experience it and sign up for a trial today.

Don’t forget to give us your 👏 !

---

Why you should consider Microsoft Bot Framework for your next AI Chatbot was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.

If you’ve spent any time testing your Dialogflow ES or CX while creating agents, working with webhooks, and integrations with other platforms, you’ve probably seen various error messages. In this post, we cover some of the most common errors, and how to resolve those errors.

Dialogflow ES erros & solution

API call mentions an unknown project

The error would be like,Dialogflow API has not been used in the particular project id error for API call.

Solution

To resolve this issue, ensure you have done the following.

Set the GOOGLE_APPLICATION_CREDENTIALS environment variable and then also check if you have provided the correct project ID to the API call. Please refer to this doc for setting environment variables.

Unable to delete project

When trying to delete a GCP project, you might get a notification that the project cannot be deleted, It is due to different ownership property, and one of the liens is related to Dialogflow.

Solution

You should delete the Dialogflow ES agent linked to the project.

Open Dialogflow console. If you get a notification that the agent doesn’t exist, it means your agent has been deleted. Otherwise, check if you no longer need the agent and delete it.

Console fails to set up a project

Sometimes you might get the console error Failed to set up GCP project error when creating an agent within the console.

Solution

The permission might have been restricted to create GCP projects. Check if your account/role has permission to create a GCP project directly from the GCP Console. If you are not able to create a project, follow the recommendations provided in the error message or recommend the admin to provide the permissions.

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

API call gets permission denied

The API call received a PERMISSION_DENIED response. This might happen on both ES & CX.

Solution

To resolve the error, please ensure you have set up Dialogflow ES authentication and the roles correctly. Also, ensure you have done the following:

Created a service account earlier and didn’t delete it.

Then provided the service account with a role that grants permission to call the desired method.

Downloaded the service account private key file of the project.

Set the GOOGLE_APPLICATION_CREDENTIALS environment variable to the private key file.

Please refer to this doc for setting environment variables.

DEADLINE_EXCEEDED

If you are using webhooks for actions integration then the Dialogflow agent acts as conversational fulfilment for your Actions on Google. For the back-end webhook. Some of the requests might be receiving this error Webhook call failed. Error: DEADLINE_EXCEEDED Request timed out

Webhook timeout limit for Actions on Google integration is 10 seconds. For all other integrations, including self-developed implementations sending requests to the Dialogflow API, webhook timeout is 5 seconds. These values are not customizable. The timeout limit includes time for Dialogflow requests to your webhook endpoint, the webhook processing time, and webhook response time back to Dialogflow.

Conversational interfaces are meant to be designed as a continuous message exchange between the end-user and the app/bot. If the web service requires more time for executing operations in the background and this cannot be optimized, consider redesigning the conversation flow in such a way that end-users don’t wait for the app/bot reply for more than 5 seconds (10 for Actions on Google).

Suggested read: A complete overview of Dialogflow CX vs Dialogflow ES

Dialogflow CX erros & solution

Dialogflow Console fails to create an agent

If you have not enabled Dialogflow API for the project then you will receive the error.
Code: FAILED_PRECONDITION error when creating an agent with the console.

Solution

You just need to enable the Dialogflow CX API for the particular project. Please refer to this doc for enabling the API for Dialogflow CX.

Dialogflow CX no response

No agent response for Dialogflow CX interactions when integrated with other messaging or bot platforms.

Solution

If you are not seeing any responses from Dialogflow CX, you should enable billing and Dialogflow API on the project. Please refer to this doc for enabling the API for Dialogflow CX.

Disclaimer: This blog was originally published here.

Don’t forget to give us your 👏 !

---

Handle Dialogflow Errors (ES & CX) was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.

Expo, React native… on boarding chatbot : Part two

How onboard user, simply and efficiently.

This is the second part of my chatbot article.
This time we will focus on making an input animation, indicating that your interlocutor is typing.
If you missed the first part, it’s over here !

As I explained in the first part, the chatbot and the user use bubbles, but there is a big difference… this famous animation.

This little animation gives life to the chat, and allows to simulate an interaction with a person and not a machine.

For this animation, we will create 2 components.

• The first one, chat-typing which will be the animation component. A kind of animated bubble with an opening and closing animation.
• The second component, chat-bubble, will look like the user-bubble but with the management of the chat-typing component.

At the end we will modified the chat-bot screen created in the part one, to used the chat-bubble component.

Chat-typing

Let’s take a closer look at the design.
We can see 3 black circles, spaced one from the other, and with different opacity. You have to imagine this animated board of course …

We will break this down into three components. Dot, AnimatedWrapper, and finally the exported component ChatTyping.

Dot :

const Dot = ({ color = 'black', size = 8 }) => (
    <View
style={{
            width: size,
            height: size,
            borderRadius: (size || 0) / 2,
            backgroundColor: color
        }}
    />
)

A simple component with 2 props with default value, that can be easily modified.

AnimatedWrapper :

const AnimatedWrapper = ({ delay, children }) => {
const [timing] = useState(new Animated.Value(0))

    useEffect(() => {
const animation = Animated.sequence([
            Animated.delay(delay),
            Animated.loop(
                Animated.timing(timing, {
                    toValue: 1,
                    duration: 987,
                    useNativeDriver: true
})
            )
        ])
        animation.start()
return () => animation.stop()
    }, [])

const opacity = timing.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: [0.2, 1, 0.2]
    })

return (
        <Animated.View
style={
                {
                    justifyContent: 'center',
                    alignItems: 'center',
                    width: 18,
                    opacity
                }
            }>
            {children}
        </Animated.View>
    )
}

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

This component is more complex. We will use the children props which is available for all react components to reuse the animation logic. We wrap children, in this case the circle, to animate it :

<Animated.View
style={
        {
            justifyContent: 'center',
            alignItems: 'center',
            width: 18,
            opacity
        }
    }>
    {children}
</Animated.View>

For the animation we use the Animated library of react native. If you have never used this library I advise you to look at the documentation and play with it a bit.

Let’s start our animation…

We create a state variable (timing), to animate the opacity of the encapsulated object, the circle. We initialise its value to 0. We find this variable in the object loop and in the interpolate function.

const [timing] = useState(new Animated.Value(0))

During the component initialisation, in the useEffect. We create the animation variable. It is an animation sequence, in our case, a delay, and a loop, with start and stop method.

• The delay will allow us to starts animation after the given delay.
• In the loop method, we pass a time animation with the timing method… this method will in a given time (duration), update our state variable, up to the desired value (toValue).

We will now interpret the value of our state variable with the interpolate method. Here is an excellent article explaining in details, the principles of this method. (https://eveningkid.medium.com/interpolation-with-react-native-animations-853e467fe5c1) :

const opacity = timing.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [0.2, 1, 0.2]
})

The principle is to interpret the value of our state variable, using an array representing different input points (inputRange) to obtain a value according to the array we pass to it (outputRange).
In our case, for the value 0 we will get 0.2 in output, for the value 0.5 we will get 1, etc.

this way our state variable opacity will oscillate between 0.2 to 1 depending of the timing value.

ChatTyping :

Let’s put that togever…

function ChatTyping () {
const delayValues = [0, 300, 600]
return (
        <Fragment>
            <View style={styles.bubble}>
                <View style={{ flexDirection: 'row' }}>
                    {delayValues.map((delay) => (
                        <AnimatedWrapper key={delay} {...{ delay }}>
                            <Dot/>
                        </AnimatedWrapper>
                    ))}
                </View>
            </View>
        </Fragment>

    )
}

We declare a array of delay values, then use it with a map function and for each value as a millisecond delay, we pass it to the AnimatedWrapper as a de-structured object props :

{delayValues.map((delay) => (
    <AnimatedWrapper key={delay} {...{ delay }}>
          <Dot/>
    </AnimatedWrapper>
))}

Dot is wrapped by AnimatedWrapper and will be animated.

Chat-bubble

In the first part of this article, we have created a user-bubble component. Chat-bubble have the same approach with the chatTyping management.

We initialise de component by starting the chatTyping animation :

useEffect(() => {
let timer
if (!isTyping) {
        Opening.start()
    } else {
        FadeIn.start(() => {
            timer = setTimeout(() => {
                FadeOut.start(() => {
                    setTypingVisibility(false)
                    Opening.start()
                })
            }, 1000)
        })
    }
return () => { timer && clearTimeout(timer) }
}, [])

Like in the user-bubble component, opening is a parallel function used to change the opacity and horizontal position.

FadeIn and FadeOut are both animations created to display the chatTyping animation. You can easily guess their roles…

IsTypingVisibility state variable is used to display either the chatTyping animation or the bubble.

The start method of the animated library takes a completion callback that will be called when the animation is done. So, at the end of the FadeIn animation, we create a setTimeout method called timer. This will represent the duration of the chatTyping animation display. By setting isTypingVisibility to false we simply display the bubble.

return (
    <View style={styles.container}>
        {isTypingVisibility
            ? <Animated.View style={{ opacity: typingOpacityAnimated }}>
                <ChatTyping />
            </Animated.View>
            : <Animated.View style={{ ...styles.bubble, opacity: opacityAnimated, transform: [{ translateX: positionAnimated }] }}>
                <Text style={styles.textBubble} >{data.text}</Text>
            </Animated.View>}
    </View>
)

Few Chatbot Screen modification to finish

useEffect(() => {
if (data) {
        setComponents([
<BubblesFactory data={data?.chatBot.messages} bubble={<ChatBubble/>} interval={3000}/>
        ])
    }
}, [])

We add the chat-bubble component in the components array and modify the interval by adding 2s more to display the chatTyping animation. This way we have the typing animation and then the bubble just after.

You can find the all source code here.

Next step !

It’s finish for today… Thank you for taking the time to read this article. Don’t hesitate to leave comments, ask questions, improvements.
The next part, will be on the mechanics or how to make all the components communicate together and…

Don’t forget to give us your 👏 !

---

Expo, React native… on boarding chatbot : Part two was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.

Expo, React native… on boarding chatbot : Part one

How onboard user, simply and efficiently.

The purpose of this article is to share my approach from start to finish to create software that exactly meets the demand. Examples have always been a great help for me. It is also important to share experience to evolve and exchange.

Prerequisites :

You need to know React and React-native’s ecosystem and familiar with react hooks, functional component and their life cycle. I’ll provide source code for each part of this article, but you can easily create you own project using Expo CLI.

While building a React Native application for car rentals, we needed users to validate some options and provide us some documents.

The solution found is to simulate exchange with us, through an interface where the user could interact with us and send us some documents.

I had a Figma board for the full scenario from the designer team :

What the design shows us is a scrollView with the chatbot’s bubbles on the left and the user’s bubbles on the right. A button positioned at the bottom fixed and therefore not part of the scrollview.

Starting from there, i was able to identify several things, but mostly a repetitive process :

• The bot asks for something and the user answers with an action.
• For each chatbot bubbles we have a typing animation.
• For each bubbles we have opening animation.
• At the end of chatbot messages the bottom button appear.
• Each time the user click the button we have a user’s bubble with a new part of the scenario.

The idea is to identify recurrent processes allowing us to reuse components.

For this first part of the article we will look at the bubbles. From the user to the bot, how to simplify the development.

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

Make a Bubbles Factory !

Users and bot are both use bubbles to display messages, but both bubbles are not the same. To simulate a discussion we need to find a way to make each message display independently with a delay. ChatBot bubble need animation before show message.

We need to take all this specification to build our factory.
For this part we create a bubble component, user-bubble, and the factory component, bubbles-factory. Finally we display them in a screen named Chat-bot.

User-bubble

It’s a simple component that displays the message we pass in its props (data) and some styling to match the design. I added an opening animation using the native react library, animated. I used animated’s parallel method to start an array of animations, opacity and x position.

const UserBubble = ({ data }) => {
const positionAnimated = useRef(new Animated.Value(10)).current
const opacityAnimated = useRef(new Animated.Value(0)).current

const Opening = Animated.parallel([
        Animated.timing(
            opacityAnimated,
            {
                toValue: 1,
                duration: 100,
                useNativeDriver: true
}
        ),
        Animated.timing(
            positionAnimated,
            {
                toValue: 0,
                duration: 200,
                useNativeDriver: true
}
        )
    ])

    useEffect(() => {
        Opening.start()
    }, [])

return (
        <Animated.View style={{ ...styles.bubble, opacity: opacityAnimated, transform: [{ translateX: positionAnimated }] }}>
            <Text style={styles.textBubble} >{data.text}</Text>
        </Animated.View>
    )
}

Bubbles-factory

Bubbles-factory is more complex. We have 2 very important props, data, bubble.

• Data is a simple array of objects. Each object represent a bubble, with a text object property.

{
  "chatBot": {
    "messages": [
      {
        "text": "test 1"
      },
      {
        "text": "test 2"
      },
      {
        "text": "test 3"
      }
    ]
  }
}

• Bubble props is the component to use to display the message. for now we use user-bubble only.
• Interval is just the delay we want to show the next message by default i have set this props to 1000 (1 second).

This is the code for the Bubble-Factory component :

const BubblesFactory = ({
    data,
    bubble,
    interval = 1000
}) => {
const [bubbles, setBubbles] = useState([])
const [index, setIndex] = useState(null)
const componentsLength = useMemo(() => { return data?.length }, [data])

    useEffect(() => {
let count = 0
const timer = setInterval(() => {
if (count === componentsLength) {
                stopBubbles()
                clearInterval(timer)
            } else {
                setIndex(count)
                count++
            }
        }, interval)
    }, [])

    useEffect(() => {
if (index !== null) {
            setBubbles([
                ...bubbles,
                data[index]
            ])
        }
    }, [index])

const stopBubbles = () => {
console.log('stopBubbles - end of sequence')
// Code here to dispatch next action
}

return (
        <Fragment>
            {bubbles.map((component, index) => {
return cloneElement(bubble, {
                    key: index,
                    data: component
                })
            })}
        </Fragment>
    )
}

First, we declare 2 stateful values, and a functions with the useState hook :

const [bubbles, setBubbles] = useState([])
const [index, setIndex] = useState(null)

• Bubbles is an array that we will use to display components as we go.
• Index is a number used to increment the data array props and to push the component is the bubble array.

At the initialisation of the factory, I create a SetInterval method which will allow me to increment the index variable. I set up a conditional logic to stop the SetInterval method according to the length of the data array.

useEffect(() => {
let count = 0
const timer = setInterval(() => {
if (count === componentsLength) {
                stopBubbles()
                clearInterval(timer)
            } else {
                setIndex(count)
                count++
            }
        }, interval)
    }, [])

As the useState is asynchronous, I use a second useEffect hook only when the index value changes to add the next data value.

useEffect(() => {
if (index !== null) {
        setBubbles([
            ...bubbles,
            data[index]
        ])
    }
}, [index])

I use a map function in the renderer, to display all the bubbles, and use a cloneElement method to return a new React element from the original element sent by props.

return (
    <Fragment>
        {bubbles.map((component, index) => {
return cloneElement(bubble, {
                key: index,
                data: component
            })
        })}
    </Fragment>
)

Make Bubbles !

You can find the all source code here.

With a bit of imagination you can modify and play with the factory and create your own effect. You can use different bubble styles, different components to use, even tried to use a decelerating interval ? Is that possible ? 😉

Next step

For the next part, i will show you how to add type animation for the chatbot bubble component.

Congratulations ! Thank you for reading this article, don’t hesitate to leave me comments on possible improvements, your opinions, your modifications, your tests.

Don’t forget to give us your 👏 !

---

React native onboarding chatbot : Part one was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.

When you think to build quick chatbot with an open source framework system the first framework might pops will be Rasa. No doubt its a great framework, provide you to develop chatbot application with very easily with nice organization of documentation. After all the setup and training, the application seems to perform well. But when you go for the load testing of the application things starts to look messy : Response time increases, concurrency drops etc.

So based upon this, here in this blog I will be writing few things which I observed should be taken care off while setting up the configuration of Rasa.

1.Is there a way to solve concurrency issue?
Ans : One solution I came up with is by increasing the Sanic workers. Rasa 2.x use Sanic web server. As per my exposure I haven’t found any command line argument predefined by Rasa to change the workers. But you can the change the worker of Rasa and Rasa-sdk by making hard-coded changes of the Sanic Workers values in the Constant.py of both or writing a wrapper function to set the environment variable ACTION_WORKER_SANIC_SERVER = #Desired Worker.
Same to be done for Rasa.

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

2. How to handle increasing response time?
Ans : There are various reasons which can be looked upon but I guess most ignored reason while doing any testing is consideration of sender id. The tracker of event is build based upon the sender id. As the list increases so do increase of response time.
One could think of using setting up a Session timeout variable but problem is, it only works in cases of inactivity for that sender id after a period of time which is set in config. So question arises is how to solve it.

I will answer this question in my next blog. Thank you for your time.
Please let me know if you have any suggestion and thought, or if I have misinterpreted.

Don’t forget to give us your 👏 !

---

Challenges faced with Rasa Chatbot Scaling was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.