When user type a blank message, I don't want to show user-chat. Pls Help me

Hi Fredrik,

Great framework. It's been quite useful for us.

This is just a question. Not an issue.

We needed to modify the framework to meet our needs. I am wondering how do you build and test your framework in your machine? Disclaimer: we are not experts in npm, yarn, react, etc.

So, if I have an application (as a different project) that uses the framework, how do I build it and use it in my application, as opposed to using the npm package from the web?

So far, we have just copied the generated input.js into the node_modules directory. This seems like a dirty hack.

Any advice would be greatly appreciated.

Thank you.

const clientMessage = props.actionProvider.createClientMesssage(image)
props.actionProvider.setClientMessage(clientMessage)

I want to change from message to image. Help me please

Hi Fredrik,

Thank you for the awesome package. This is more a suggestion or perhaps a feature request 😂 rather than an issue. Any plans to make the UI fully customisable through customStyles a feature? As a UX&D, coding is not my forte; however, your package allows me to translate my ideas into something tangible. It would be great to have this feature in the future!

Thank you again for the package.
D

Hello, Fredrik. Thanks for the great component that you created.

Is there a possibility to obtain the history from an api, instead of the local storage? In this case I think it could be the initial messages, coming from an api.

I saw your comment on the issue below, but still, I don't know how I could read the history of an api.

#4 (comment)

Thank you.

Hi Fredrik,

I am implementing a nav header with icons and a dropdown menu. I have gotten the menu to work - but now i need some help integrating that with the chatbot kit. I have 2 solns in mind - but could not get either of them to work. The first soln was to pass the actionProvider to my Functional Menu Component. However, I could not find a way to do that. Currently, my config looks like this:

customComponents: {
header: () =>

The second approach i thought was to somehow programatically fire the submit button - something like this:

document.getElementsByClassName('react-chatbot-kit-chat-input').value = 'hello';
document.getElementsByClassName("react-chatbot-kit-chat-input-form")[0].submit();

and then everything should work normally. But, what happens is the whole page is getting refreshed instead of sending a message with the value of "hello".

This is the starting code for my nav component:

function NavHeader() {

return (

<NavItem icon={} />
<NavItem icon={} />
<NavItem icon={} />

  <NavItem icon={<CaretIcon />}>
    <DropdownMenu></DropdownMenu>
  </NavItem>
</Navbar>

);
}

Below is how my nav header is looking..

Thanks

Is it possible to load message parser and config from an API :

I want to develop a backend that save all the messages sent by clients and from the backend type a reply for each of these questions .

Hi Fredrik,

Really great app!! I am trying to add multi language support. How can i change the orientation of the input text field to be from right to left instead of left to right(default)? I can do that permanently by adding this in the App.js

.react-chatbot-kit-chat-input-form {
direction: rtl;
}

However, it needs to be dynamic. It needs to change based on whatever the language code is set to in the browser.
I can set a prop like so in the config.js.

direction:(navigator.language || navigator.userLanguage)=='ar'?'rtl':'ltr',

While I can read that property and make use of it in the ActionProvider.js, I cannot use this to set the above css property and override the default:

Please let me know if there is any way to achieve this.
Thanks

In the action provider
Please add a new function similar to
this.createChatBotMessage("");

That allow to create a client message

this.createClientMessage("");

To display the text in the button clicked on So the client feel like he said something ( when he clicked on the button )

Hi Fredrik,

Is it possible to create a User Chat Message? For example, in your example with learning options, you create a couple of buttons. Instead of firing the action directly, i want to submit that as a user message. So if the user clicked on the button called "JavaScript", then i want the user message to show as "JavaScript" in the chatbot - which can then be processed by the Message Parser in the normal way (and call the required action).

Thanks

Hello Fredrik,thanks for your chatbot-kit .it helped me a lot .
I am making a chatBot with a chatbot kit but I'm facing a problem that when I click on enter without message then chatbot kit render the empty message .I want to stop this one . here is the pic of issue. How can I remove this empty message .

Hello Everyone

Need help. Is there any way to Place a minimize or close button on the header [rightside]?
As in screenshot?

AND a way to minimize the chatbot popover on outside click. [Clicking anywhere outside in the window]

Hi there,

On my prototype, I ask users personal questions, such as their name and address. Those are difficult answers to predict, so I can't generate triggers on the MessageParser to execute the next question using the ActionProvider. Is there a way to execute the ActionProvider after a specific question?

I really appreciate any help you can provide.

When we don't have any message to display and we want to display widgets only, then what should be first parameter to createChatBotMessage method?
e.g. createChatBotMessage (what should go here,{widget: widgetName});

Hi, Fredrik. So I will give a little explanation about what I want to do.

Let's think that an user start a conversation with the chatbot inside the "Home" with my website, and they exchange some messages (the user and the chatbot). Now, this fake user wants to switch to the "About" page of my website. In the "About" page the chatbot keeps maintain the previous messages that they was sent to each other.

So, how can I implement this behavior using this library? I'm trying to do something with localStorage, but I don't know if it have a better way to do. Can you help?

Thanks a lot.

I really love this chatbot, and I took some time to get familiar with the commands and how it works, but I'd really love to be able to change the B to something else. Even just to be able to change that letter to match the name of the bot I intend to have, or (ideally) to be able to put an image in that position. Is there any way to do that?

Hello Fredrik, thanks for your nice chatbot!

Would be possible for you to fix the npm vulnerabilities ?

There are several reference to vulnerable packages:
npm audit report

serialize-javascript <=3.0.0
Severity: high
Cross-Site Scripting - https://npmjs.com/advisories/1426
Remote Code Execution - https://npmjs.com/advisories/1548
No fix available
node_modules/uglifyjs-webpack-plugin/node_modules/serialize-javascript
uglifyjs-webpack-plugin >=1.1.3
Depends on vulnerable versions of serialize-javascript
node_modules/uglifyjs-webpack-plugin
webpack 4.3.0 - 4.25.1
Depends on vulnerable versions of uglifyjs-webpack-plugin
node_modules/react-util-kit/node_modules/webpack
react-util-kit *
Depends on vulnerable versions of webpack
node_modules/react-util-kit

4 vulnerabilities (3 moderate, 1 high)

@FredrikOseberg, thanks for reducing developers work. It saved my time a lot.

when i tried use this lib in react-native it is showing me error:
$ react-native run-android
ReferenceError: Can't find variable: document Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

I'm new in react, react-native. Please help

I'm trying to change the header properties in config.js to allow for a background image. However neither the div element with a backgroundImage property applied nor an img tag with src defined works. I've even tried editing the css code for .App-header to allow the background-image, but still nothing. And for that matter, within the div element, I can't place an img tag to hold another small logo image in the header. How can I go about doing these things, if any are possible?

I checked within the module and the text is non-configurable i.e. static. I really liked the framework and it suits very well in the majority of use cases. One additional option I wished was if there could be a way to configure the whole header instead of just changing the Bot name.
Thank you for your contribution!

My chat bot works in the following way.

1. parses message (async operation from server).
2. receives an answer that contains a JSON, which sometimes contains a

{
"widget":"Links",
options: [... array of links]
}

3. My ActionProvider sets the state with the last answer received, and then a creates a chatbot message. (sometimes with the Links widget)

Problems is - the Links widget always renders according to the last answer that is saved in the state. So If I got 2 links answers, they will both look the same. (both are updated to the latest state)

How can I set the widget instance with a specific answer, instead of having multiple instances that all look the same since they access the same state ?

I have a situation where it's a questionnaire asked by the bot and the user replies (not necessarily from chosen options but can be typed by the user as well). So, for example, multiple user replies can be of the format of national ID.
I need to know which step of the chat is currently going on. So I can differentiate between question 2 and question 7 asking for the national ID of the person and the national ID of his spouse. (Just a scenario, but I have a similar situation). And this information is needed inside the parse() method so, I can trigger the correct method from ActionProvider class.

Any idea how to approach this?
I am stuck here but altogether, thanks for a great library. and the documentation/videos you made.

Hi Fredrik,

I have come across an unusual issue. When we save message and then click on the button to open the chat again, all the messages with widgets are essentially re-run to create the widgets. However - for widgets like the WidgetDocs with InformationBox, then end result is that the InfoBox will pop up - although it was a past message. Is there a way to not "render" the old messages?

On a similar note, for widgets like forms with submit buttons, i guess we could make use of the state info and have some logic in there that if there are filled values, then have the submit button greyed out.For this to work, we will need to have the form fields as part of the state info in the config.js?

Thanks

Thank you for creating a great chatbot kit! Only issue I seem to have is when I add custom widgets, these aren't always clickable or only clickable in certain locations in the chatbot environment. Is there a specific reason for that?

Hi there,

Could you help me to understand why when i try to "yarn start" in the command prompt, I get this error message =

Failed to compile.

src\components\ChatBot\Chatbot.jsx

Line 50:29: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? react-hooks/rules-of-hooks
Line 55:23: React Hook "useRef" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? react-hooks/rules-of-hooks
Line 57:3: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? react-hooks/rules-of-hooks
Line 61:3: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

I checked hooks documentation, but didn't find where the issue come from..

Thanks a lot

I'd like to know if it's possible to implement voice recognition embedded with this library. If so, how can I do that?

Thanks in advance.

i bulid my react chat bot app. Now I want to deploy my app to client .So I ran a command yarn run build. So from build folder, I ran index.html file .my app is running properly but images are broken .i am not able to figure out , how to resolve this issue.
please help me to resolve this issue.

(https://user-images.githubusercontent.com/76420996/116043212-00442e80-a68d-11eb-992e-fd616991d134.png)

Hello Fredrik,
i want to disable input tag based on condition like {display :"none"},how can I add condition to this class "react-chatbot-kit-chat-input".
I'm trying to find out .how to resolve this issue but I was not able.
Please tell me, if there is any way to resolve this issue.
Thanks

@FredrikOseberg bro thanks so much for the quick response.

It worked, but when i click on next question, i get this error..

Plus any hints on how can i have this floating button on my project... please

Originally posted by @atishwarchand in #16 (comment)

I am getting this error :-
Exception
Can't find variable: document

Code :-

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Fragment } from 'react';
import ReactDOM from "react-dom";

export default function App() {
  return (
    <Fragment>
      <View id="head" style={{
        backgroundImage: `url("https://i.postimg.cc/dVPkC3Y2/imageedit-2-8164670552.jpg")`,
        backgroundAttachment: "fixed",
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundColor: "black",
        color: "white",
        padding: 50,
        textAlign: 'center',
        fontFamily: "Verdana",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}>
        <h1 style={{
          background: "black",
          padding: 50 ,
          color: "white"
        }}> Awareness Cafe </h1>
      </View>
      <View style={{
        backgroundImage: `url("https://image.freepik.com/free-photo/dark-black-soil-texture_196038-122.jpg")`,
        backgroundAttachment: "fixed",
        color: "white",
        padding: 50,
        textAlign: 'center',
        fontFamily: "Verdana",
      }}>
        <h3> “The key to growth is the introduction of higher dimensions of consciousness into our awareness.” - Lao Tzu </h3>
      </View>
      <View style={{
        backgroundColor: "black",
        color: "white",
        padding: 50,
        textAlign: 'center',
        fontFamily: "Verdana",
      }}>
        <h3> In this website, we show you news that have impacted the rest of the world and that helps you realize the importance of raising awareness </h3>
      </View>
      <View style={{
        backgroundImage: `url("https://www.who.int/images/default-source/searo---images/health-topics/corona-virus19/coronavirus-blue.tmb-1200v.jpg?Culture=en&sfvrsn=1bdbbe71_6")`,
        backgroundAttachment: "fixed",
        padding: 50,
        textAlign: "center",
        fontFamily: "Verdana",
        color: "white"
      }}>
        <h1 style={{
          padding: 50,
          background: 'black',
          fontSize: 20
        }}> The CoronaVirus Pandemic </h1>
      </View>
      <View style={{
        padding: 50,
        color: 'white',
        background: 'black',
        fontFamily: "Verdana",
      }}>
        <h2 style={{ color: "red" }}> What is Novel Coronavirus (COVID-19)? </h2>
        <h2 style={{ fontSize: 15 }}> Novel Coronavirus (COVID-19) is a new strain of coronavirus which may cause illness in animals or humans.  In humans, several coronaviruses are known to cause respiratory infections ranging from the common cold to more severe diseases. First identified in a cluster with pneumonia symptoms in Wuhan city, Hubei province of China. </h2><br />
        <h2 style={{ color: "red" }}> What are the symptoms of COVID-19 ? </h2>
        <h2 style={{ fontSize: 15 }}> The most common symptoms of COVID-19 are: <br /> - Fever <br /> -Ti"red"ness <br /> - Dry cough <br /> - Some patients may have aches and pains, nasal congestion, runny nose, sore throat or diarrhoea. These symptoms are usually mild and begin gradually. <br /><br /> Note: Not everyone with a cold or upper respiratory symptom needs to get tested for COVID-19. Only a person with a symptoms and travel history can do the test. Additionally, most people (about 80%) recover from the disease without needing special treatment. </h2><br />
        <h2 style={{ color: "red" }}> Is there any treatment for COVID-19? </h2>
        <h2 style={{ fontSize: 15 }}> The treatment of COVID-19 depends on enhancing the immunity level of patients, treating the symptoms and easing complications, as there is no specific treatment for the virus to date. </h2><br /><br />
        <h2 style={{ color: "red" }}> What are the ways to prevent the disease? </h2>
        <h2 style={{ fontSize: 15 }}> - Washing hands with soap and water or using alcohol-based hand rub kills viruses that may be on your hands.<br /><br /> - Maintain at least 1 metre (3 feet) distance between yourself and anyone who is coughing or sneezing. <br /><br /> - Covering mouth and nose with your bent elbow or tissue when you cough or sneeze. Then dispose of the used tissue immediately. <br /><br /> - Avoid touching your eyes, nose or mouth without washing your hands. <br /><br /> - Avoid shaking hands and wave. <br /><br /> - Avoid nose-to-nose greeting, hugging or kissing others. <br /><br /> - Avoid contact with animals (live or dead). <br /><br /> - Take enough rest and take a large amount of fluids. </h2>

      </View>
      <View style={{
        backgroundImage: `url("https://sm.mashable.com/mashable_me/article/1/12-free-an/12-free-and-printable-black-lives-matter-posters-from-black_57v7.jpg")`,
        backgroundPosition: "center",
        backgroundAttachment: "fixed",
        padding: 50,
        textAlign: "center",
        fontFamily: "Verdana",
        color: "white"
      }}>
        <h1 style={{
          padding: 50,
          background: 'black',
          fontSize: 20
        }}> Black Lives Matter Movement </h1>
      </View>
      <View style={{
        padding: 50,
        color: 'white',
        background: 'black',
        fontFamily: "Verdana",
      }}>
        <h3> You must have heard about the <span style={{color: "grey"}}>Black Lives Matter Movement</span> which was initiated in July 13 2013, however it has <span style={{color: "turquoise"}}> escalated </span> more during 2020. It has been escalated even more when the <span style={{color: "blue"}}>American hip-hop artist George Floyed </span> had been <span style={{color: "red"}}> killed </span> by the police. </h3>
        <h3> This movement has been intiated to <span style={{color: "orange"}}> fight for black men and women rights. </span> During the 19s, Black people had <span style={{color: "green"}}> lost certain privilages </span> , and they were <span style={{color: "blue"}}> considered as a very low class.</span> At that point of time, discrimination had been at it's <span style={{color: "gold"}}> peak.</span></h3>
        <h3> Until George Floyd's death, the world had not taken much notice to this movement, however, now the situation has been recognized by the rest of the world and this movement had been resumed in many other parts of the world. <br /><br /> In July 2013, the movement began with the use of the hashtag <span style={{color: "turquoise"}}> #BlackLivesMatter </span> on social media after the <span style={{color: "blue"}}> acquittal of George Zimmerman </span> in the <span style={{color: "red"}}> shooting death </span> of <span style={{color: "orange"}}> African-American teen Trayvon Martin </span> 17 months earlier in February 2012. </h3>
        <h3> An estimated <span style={{color: "yellow"}}> 15 million </span> to <span style={{color: "yellow"}}> 26 million people </span>, although not all are members or part of the organization, participated in the <span style={{color: "turquoise"}}> 2020 Black Lives Matter protests in the United States</span> , making Black Lives Matter <span style={{color: "pink"}}> one of the largest movements in United States history. </span></h3>
        <br />
        <br />
        <img src='https://media.newyorker.com/photos/5ed542a47204402b936444ca/4:3/w_2275,h_1706,c_limit/Wright-GlobalProtestsGeorgeFloyd.jpg' style={{height: 150 , display: "block", marginLeft: "auto", marginRight: "auto"}}></img>
        <br />
        <br />
        <center>
          <h3><u> Links :- </u></h3>
          <a href='https://blacklivesmatter.com/' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none" ,
            transition: 0.8
          }}> Homepage </a>
          <a id='no-trans'> &nbsp;| &nbsp; </a>
          <a href='https://secure.actblue.com/donate/ms_blm_homepage_2019' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none",
            transition: 0.8
          }}> Donate </a>
          <a id='no-trans'> &nbsp;| &nbsp; </a>
          <a href='https://blacklivesmatter.com/what-matters-2020/' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none",
            transition: 0.8
          }}> BLM'S #WHATMATTERS2020 </a>
          <a id='no-trans'> &nbsp;| &nbsp; </a>
          <a href='https://store.blacklivesmatter.com/store/' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none",
            transition: 0.8
          }}> Store </a>
          <a id='no-trans'> &nbsp;| &nbsp; </a>
          <a href='https://blacklivesmatter.com/global-actions/' id='b-a-tag' target="_blank" style={{
            fontSize: 15,
            color: "turquoise",
            textDecoration: "none",
            transition: 0.8
          }}> Global Actions <br /><br /></a>
      </center>
        <h3 style={{textAlign: "center", fontFamily: "Verdana", backgroundColor: "white", padding: 30, color: "black"}}> As you can see, a small change in the administration or a small cause of discrimintion or sexism can cause a globally-noticed situation, and these movements are the only way the countries can notice the faults and make some changes. </h3>
      </View>
      <View style={{
        backgroundImage: `url("https://www.who.int/images/default-source/searo---images/health-topics/corona-virus19/coronavirus-blue.tmb-1200v.jpg?Culture=en&sfvrsn=1bdbbe71_6")`,
        backgroundAttachment: "fixed",
        padding: 50,
        textAlign: "center",
        fontFamily: "Verdana",
        color: "white"
      }}>
        <h1 style={{
          padding: 50,
          background: 'black',
          fontSize: 20
        }}> The Beirut Explosion 2020 </h1>
      </View>
      <View style={{
        padding: 50,
        color: 'white',
        background: 'black',
        fontFamily: "Verdana",
      }}>


        <h2 style={{ fontSize: 15 }}> On 4 August 2020, a large amount of ammonium nitrate stored at the port of the city of Beirut, the capital of Lebanon, exploded, causing at least 203 deaths, 6,500 injuries, and US$15 billion in property damages, and leaving an estimated 300,000 people homeless. </h2>
        <br />
        <h2 style={{color: "red"}}> What was the cause? </h2>
        <h2 style={{fontSize: 15}}> Lebanon's Prime Minister, Hassan Diab, blamed the detonation on 2,750 tonnes of ammonium nitrate that he said had been stored unsafely at a warehouse in the port. </h2>
        <br />
        <h2 style={{color: "red"}}> Background :- </h2>
        <h2 style={{fontSize: 15}}> The economy of Lebanon was in a state of crisis before the explosions, with the government having defaulted on debt, the pound plunging, and a poverty rate that had risen past 50%. </h2>
        <br />
        <h2 style={{color: "red"}}> Casualties :- </h2>
        <h2 style={{fontSize: 15}}> 203 people were confirmed dead (with an additional three missing), and more than 6,500 people were injured. Foreigners from at least 22 countries were among the casualties. </h2>
        <h2 style={{color: "red"}}> Damage :- </h2><br />
        <br />
        <div style={{
          textAlign: "center"
        }}>
          <img src='https://i.kym-cdn.com/photos/images/original/001/880/118/af7.gif' style={{height: 150}}></img>
        </div>


      </View>
    </Fragment>
    /*
    <Fragment>
      <div style={{
        color: "white",
        backgroundColor: "black",
        textAlign: 'center',
        padding: 50,
      }}>
        <h1> Shashwat Mahalanobis </h1>

      </div>
      <div style={{
      color: "black",
      backgroundColor: "white",
      textAlign: 'center',
      padding: 50,
      }}>
        <h2> I am a developer aiming towards a career in the field of Data Science. I mostly specialize in the field of Machine learning and Artificial Intelligence and also in the field of Web Development. I also love to design certain aspects of apps or websites. <br /><br />The idea of working in a team fscinates me, since in a team, there will be more knowledge shared and learnt and the problem will be solver faster and efficiently. </h2>
        <br />
        <img src='https://cdn.business2community.com/wp-content/uploads/2018/01/how-to-develop-a-marketing-strategy-600x316.jpg'></img>
      </div>
    </Fragment>
    /*
    <View>
      <Text style={styles.text}>Shashwat Mahalanobis</Text>
      <StatusBar style="auto" />
    </View>
    */
  )
}

const styles = StyleSheet.create({
  header: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },

  mystyle: {
    backgroundColor: 'black',
    color: 'white',
    padding: 50 ,
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 30 ,
  }
});

ReactDOM.render(<img />, document.getElementById("root"));
ReactDOM.render(<h1 />, document.getElementById("root"));
ReactDOM.render(<h2 />, document.getElementById("root"));
ReactDOM.render(<div />, document.getElementById("root"));
ReactDOM.render(<h3 />, document.getElementById("root"));

Ho,
Thank you for this great package 👌.
There is just one question (but I may have read the doc incorrectly 😅), I would like to customize the input and the send message button, to add my features, or simply remove it and do mine.

could you help me thank you 🙏

Hi,

After I have uploaded my web apps to Heroku. Some of the CSS styles have returned to the original form although everything works perfectly fine on my local machine.

CSS classes that have returned to original form including:

• react-chatbot-kit-chat-inner-container
• react-chatbot-kit-chat-container
• react-chatbot-kit-chat-bot-message
  etc.

May I know how to retain the CSS styling of elements after deployment?

Edit:

• Specifically, after moving the chatbot to its own component folder. It becomes the same as my deployed web apps, which is good because it allows better debugging for now.

However, how to find out the reason why some CSS is not taking effect? Is there any particular way to modify the CSS styles?
Still debugging.

Thank you

If user types 4 or more messages too fast, bot bumps into an infinite loop answering on all of the questions all the time.
It is reproducible on DocsBot too.

Let me show you what i mean, there is screen recording of DocsBot (and a .gif image made of recording)
https://user-images.githubusercontent.com/52914678/110318164-72917e80-800d-11eb-9213-2523b8e0a04e.mov

@FredrikOseberg,
Hi, Thxs for providing this awesome chatbot kit in advance.
I want to resize of chatbot window size. but I couldn't find information about resizing in your documents.
I have tried to set the chatbot container's width and height in CSS files. Of course, the chatbot app didn't change its size at all.
I guessed I could have changed the size of the window using config.customStyles properties but I couldn't.
Please, Could you let me know how to change it?

When user types nothing in input and hit enter/submit button, it should not create new user message with createChatBotMesage() method. Rather it should not accept null value. Trying to do this, but not getting solution.

Hello @FredrikOseberg

Followed all the steps in your Youtube video: https://youtu.be/vTpk-PKZwTs?list=PL_kr51suci7UQAxHOF2GitkM5WrOBPcpf

But I am getting this error for what reasons idk.

Can you help me with this please..

Quiz.js

import React, { useState } from 'react';

import FlashCard from '/Users/atishwar/Desktop/bkp/poms_ui_template copy/src/components/Quiz/FlashCard.js';

const Quiz = (props) => {
    let [questionIndex, setQuestionIndex] = useState(0);

    const incrementIndex = () =>
        setQuestionIndex((prev) => (prev.questionIndex += 1));
    
    const currentQuestion = props.configProps.questions[questionIndex];

    if (!currentQuestion){
        return <p>Quiz Over</p>;
    }
    
    return (
        <FlashCard
            question={currentQuestion.question}
            answer={currentQuestion.answer}
            incrementIndex={incrementIndex}
        />
    );
};

export default Quiz;

config.js

import React from 'react';
import { createChatBotMessage } from "react-chatbot-kit";
import Options from 'components/Options/Options';
import Quiz from 'components/Quiz/Quiz';
import BotAvator from '@material-ui/icons/SupervisedUserCircle';


const config = {
    botName: "Sara",
    initialMessages: [createChatBotMessage('Bula',{
        widget: "options",
    }),],
    customComponents: {
        botAvator: (props) => <BotAvator {...props} />
    },
    widgets:[
        {
            widgetName: 'options',
            widgetFunc: (props) => <Options {...props} />,
        },
        {
            widgetName: 'JavascriptQuiz',
            widgetFunc: (props) => <Quiz {...props}/>,
            props: {
                questions:[
                            {
                                question: "q",
                                answer: "a",
                                id: 1,
                            },
                            {
                                question: "q",
                                answer: "a",
                                id: 2,
                            },
                            {
                                question: "q",
                                answer: "a",
                                id: 3,
                            },
                ]
        },
        },
    ],
};

export default config;

option.js

import React from 'react';

//import './Options.css'

const Options = (props) =>{
const options = [
            {
                text: "Javascript",
                handler: props.actionProvider.handleJavascriptQuiz,
                id:1,
            },
            {
                text: "Timeline of Events",
                handler: () => {},
                id:2,
            },
            {
                text: "Editing",
                handler: () => {},
                id:3,
            },
        ];

    const buttonMarkup = options.map((option) => (
        <button key={option.id} onClick={option.handler} className='option-button'>
            {option.text}
        </button>
    ));
    
    return <div className='options-container'>{buttonMarkup}</div>;
};

export default Options;

MessageParser.js

class MessageParser {
    constructor(actionProvider, state) {
      this.actionProvider = actionProvider;
      this.state = state;
    }
  
    parse(message) {
      console.log(message)
      const lowercase = message.toLowerCase()

      if (lowercase.includes("hello") || lowercase.includes('hi')){
          this.actionProvider.greet();
      }

      if (lowercase.includes('Javascript') || lowercase.includes('js')){
          this.actionProvider.handleJavascriptQuiz();
      }


    }
  }

  
  export default MessageParser;
   

ActionProvider.js

class ActionProvider {
    constructor(createChatBotMessage, setStateFunc, createClientMessage) {
      this.createChatBotMessage = createChatBotMessage;
      this.setState = setStateFunc;
      this.createClientMessage = createClientMessage;
    }
    //create a fuction method
    greet = () => {
        const message = this.createChatBotMessage("Hello " +localStorage.getItem('first_name'));
        this.addMessageToState(message);
    };


    handleJavascriptQuiz = () => {
        const message = this.createChatBotMessage('Good Luck!',
        {
            widget: "JavascriptQuiz",
        }
        );
        this.addMessageToState(message);
    };

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


        }));
    };

  }
  
  export default ActionProvider;

Also requesting if you could share the css file for options.css which you used in the same video tutorial would be appreciated.

Hello Sir, While i am trying to run it on the localhost then it tries to show this error. How can i solve this? It would be a great help if u can help me with this error. Thanks in Advance

Hi Fredrik,

currently, you have provided a way to customize the bot and user chat "bubbles". But i was looking to see if that can be dynamic. For example, i want my "bubbles" to be of different shapes. While i have a different custom bot message for all the different types, i don't know how I can do this. I still want to be able to get the avatar also something like this:

Avatar <-Round Circle Bubble with Message Inside it

Avatar <- Rectangle Bubble with Message Inside it
....

Is there any way to do this?

Thanks

Hi,
I try to make a dynamic bot that could be configured by an administrator using your great framework ;)

But I am facing on problem to display multiple widget attach to the same message.
I found a solution by creating a special widget that could load the required ones. But I can not access WidgetRegistry to get widget component as the chatbot do.
I would like to know if you already have think about this functionality.

Thanks in advance

How to restart conversation on some conditions? Like I am getting 'restart' flag from backend. Whenever I am getting this flag, I need to restart conversation.

I am trying to build a bot that uses the context that which user is accessing the chatbot and from which page in the website. But for this I either have to pass props into the Chatbot (which it doesn't accept) or create a Context and then use that value in the ActionProvider class (again which I can't because ActionProvider is not a Component).

Is there any way of going about this?

Hey Fredrick,

Super cool library and very easy to use - well done!

Issue Summary
This library has a dependency on your other library, react-util-kit. In that library, the package.json has the webpack version hardcoded to version 4.23.1 and the devDependency webpack version you have in the react-chatbot-kit is at 4.42.0.

These different webpack versions are causing some build issues for our team as this dependency tree check causes the preflight check to fail.

Can you update your react-util-kit webpack version to be equal to this library, please?

Can we compile application using this library and serve in via express application ?

Hi Fredrik,

Got it to work in the ActionProvider. I was using an older version of the AP where the createClientMessage was not being passed in my constructor. You may close this issue.

Thanks

Originally posted by @dtcyad1 in #30 (comment)

Hi,

I just wanted to start by thanking for making this chatbot and the tutorials which went along with it. I have found the chatbot extremely useful for a project I am making in my professional life.

I was wondering if it would be possible for you to amend the source files so that the 'state' is passed to the action provider as a fourth argument. I use the state to store specific answers the user has given along the way. The then want to display the state to the user once they have answered all the questions so they can confirm if they are happy. Many of my answers require very specific questions and so I use widgets to display 'options' which then trigger a function within the action provider. As the state is not accessible within the action provider, I cannot display this to the user once they have answer all the questions.

Thanks

Hi,

Is there any way to provide file custom component which select from the gallery?

Example of the custom component will be appreciated.

Hello,

Thank you so much for this bot, it's really amazing.

I caught a behavior that is not ideal, the chat bot allows the user to write empty strings "" as a valid input and it's impossible to treat it inside the MessageParser or ActionProvider.

react-chatbot-kit/src/components/Chat/Chat.jsx

const handleSubmit = (e) => {
    e.preventDefault();
    setState((state) => ({
      ...state,
      messages: [...state.messages, createChatMessage(input, "user")],
    }));
    messageParser.parse(input);
    scrollIntoView();
    setInputValue("");
  };

this part should or be treated or extracted to allow modular user input treatment.

I have widget displaying main menu at the start of conversation(e.g. Live demo, Request for trial version, Sales team etc). When I click any of these, it should appear as user input message and that widget should disappear. So that user can not click any of those again in between the flow of conversation. Is it possible?