chatbot_config_properties

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

import SingleFlight from './components/SingleFlight/SingleFlight'

const botName = "Somebot";

const config = {
  // Defines the chatbot name
  botName: botName,
  // Defines an array of initial messages that will be displayed on first render
  initialMessages: [
    createChatBotMessage(`Hi I'm ${botName}`),
    createChatBotMessage(
      "First things first, which airport are you looking for information from?",
      {
        widget: "airportSelector",
        delay: 500,
      }
    ),
  ],
  // Defines an object that will be injected into the chatbot state, you can use this state in widgets for example
  state: {
    airports: [],
    flightType: "",
    selectedFlightId: "",
    selectedFlight: null,
  },
  // Defines an object of custom components that will replace the stock chatbot components. 
  customComponents: {
     // Replaces the default header
    header: () => <div style={{ backgroundColor: 'red', padding: "5px", borderRadius: "3px" }}>This is the header</div>
    // Replaces the default bot avatar
    botAvatar: (props) => <FlightBotAvatar {...props} />,
    // Replaces the default bot chat message container
    botChatMessage: (props) => <CustomChatMessage {...props} />,
    // Replaces the default user icon
    userAvatar: (props) => <MyUserAvatar {...props} />,
    // Replaces the default user chat message
    userChatMessage: (props) => <MyUserChatMessage {...props} />
  },
  // Defines an object of custom styles if you want to override styles
  customStyles: {
    // Overrides the chatbot message styles
    botMessageBox: {
      backgroundColor: "#376B7E",
    },
    // Overrides the chat button styles
    chatButton: {
      backgroundColor: "#5ccc9d",
    },
  }
  // Defines an array of widgets that you want to render with a chatbot message
  widgets: [
    {
      // defines the name you will use to reference to this widget in "createChatBotMessage".
      widgetName: "singleFlight",
      // Function that will be called internally to resolve the widget
      widgetFunc: (props) => <SingleFlight {...props} />,
      // Any props you want the widget to receive on render
      props: {},
      // Any piece of state defined in the state object that you want to pass down to this widget
      mapStateToProps: [
        "selectedFlightId",
        "selectedFlight",
      ],
    },
  ],
};

export default config;

Hi @FredrikOseberg !
Absolutely wonderful package!
I had a doubt!
I am making a contextual chatbot which takes input from the screen that is currently open like if user is logged in, the page the user is on etc.Based on this, the messages are shown in the chatbot
How can I pass this data from the parent component to the chatbot?

Hi @FredrikOseberg !
Absolutely wonderful package!
I had a doubt!
I am making a contextual chatbot which takes input from the screen that is currently open like if user is logged in, the page the user is on etc.Based on this, the messages are shown in the chatbot
How can I pass this data from the parent component to the chatbot?

It's a bit convoluted right now, but you should be able to do something like this:

getConfig = (passDownState) => {
   return { 
       initialMessages:[createChatbotMessage("Hi")],
       state: { ...passDownState }
   }
}

// in App: 

const MyComponent = (props) => {
   return <Chatbot config={getConfig(props)} />
}

That way you can pass down props dynamically through the config and insert it into the chatbot state. Does that answer your question?

Yes
This looks perfect
Thank you.

Hello. Thanks for this app. I have the problem. I make several languages in bot and everything works fine besides initialMessage. I want it to rerender, when user change language, but I don't understand how to do it. For example headerText and placeholder I change in props Component. Please, could you explain how to rerender initialMessage when the value of one of the variables changes in the store?

@FredrikOseberg Bot response has a delay of 2-3 seconds. How to remove the delay?

@FredrikOseberg First I cant thank you enough for this chatbot.
Second I want to make the chatbot open when I click on the same button and close when I re-click it like messenger on Facebook .
Thank you.

@rehamashrafshouman
U can use a variable to check whether chatbot is open or closed say,chatbotOpen
{chatbotOpen && < Chatbot />}
<Button onClick={ ()=>setChatbotOpen(!chatbotOpen) }>
Something like this

Fredrik, I saw you updated CSS sheet. I have a question about CSS. I have 4 languages in bot. for example in Hebrew they write from right to left and the string must begin with the right border of the container. That's why I need to have 2 variants react-chatbot-kit-chat-bot-message and use it depending on the selected language. Is it possible?

is is possible we could change the icon from the text input and send button?

about CSS everthing workes well in localhost.. but when I upload in netlify.. it did not work.. any idea? when I check the elements there 2 styles was on it.. and did not overwrite the stock

hey fedrick,I have implemented this bot on user search page in which each user has an enquiry button
I want that when the user clicks on enquiry button the bot appears (till here i am able to implement it)
the problem is that how to restart the bot when user clicks on any other user's enquiry button
Currently same message appear on the bot when i click on any other user

Also is there a way that i can run function of action provider in any other react functional component
As i am able create a reset function in action provider but i am not able to figure out how to call that function in my react component

Hello Fedrick Your chatbot is amazing, But I want to make it more, but I don't know how can i store the messages and answers in the database so that the next time when user login he/she may see their old messages. Thanks

Hey Fedrick, thanks for an amazing chat bot, but I want to make it little more interactive, is there any option to prompt user for an input and collect the text he entered with the help of any funtion?. Can we also make custom widgets on the fly to react to any event(ex: button click) fire an api call and return the user with that widget?. Appericiate your help!

Hey guys!!
I have created a chatbot using this.
https://github.com/sonalprabhu/Groww-chatbot
Feel free to check this out. Some of your answers might be solved.
Check the chatbot-frontend folder

@FredrikOseberg, I'm achieving everything I need using your package thanks a lot to you, although I am stuck on one point: how can I give input to widgets through a message parser.
thanks in advance

Hey guys!!
I have created a chatbot using this.
https://github.com/sonalprabhu/Groww-chatbot
Feel free to check this out. Some of your answers might be solved.
Check the chatbot-frontend folder

Amazing application bruh good work

By default, the chatbot shows up in an empty web page. I have bundled the distribution as a webpack, and it compiles fine. However, the popup does not show on my application. How can i make it a floating chat popup? Have been stuck at this since yesterday, maybe I'm missing something? Any help would be greatly appreciated.. Thanks in advance!

By default, the chatbot shows up in an empty web page. I have bundled the distribution as a webpack, and it compiles fine. However, the popup does not show on my application. How can i make it a floating chat popup? Have been stuck at this since yesterday, maybe I'm missing something? Any help would be greatly appreciated.. Thanks in advance!

@indiyogabloke

Not sure I understand the problem, but here's an example of creating a floating chat popup: https://github.com/FredrikOseberg/react-chatbot-kit-docs/blob/master/src/App.js

@FrederikOseberg - thank you! This was very helpful and helped with my issue. I just love the react-chatbot-kit! Thanks again :)

Hello, thank you for the work.

My question is How can I plz use the header of the customComponents in another component in my app.

I want to use it for a component unmount (So when i click on the header the chatbot is reduced ) .

Thanks.

Hi, Can you please let me know more about userChatMessage. I want to know what can I do using this. I can't find anything :(

Hey @FredrikOseberg :) Thank you very much for your helpful tutorial and template! But I have one question:
I implemented state in the config and updated state in the ActionProvider like you did. But when I try to access state in the ActionProvider (with this.state.authorName), it does not work. I really do not understand why. Maybe you could help me with this problem? You can find my code under the following link: https://codesandbox.io/s/github/MichelleMertin/Masterarbeit_StateError

Thank you very much in advance!
Michelle

Hey @FredrikOseberg !

Can you please tell me. How can I add voice command (speech-to-text) next to send button ?

Hi, FredrikOseberg Thanks for the amazing npm package. I need to change the send button icon how can I achieve this
You can remove the svg tag that creates the default bot button image and instead create a div which holds an src to an image and style it . It will work.

@FredrikOseberg Is there way to change the send Message icon ?

Hello, thank you for the work.

My question is How can I plz use the header of the customComponents in another component in my app.

I want to use it for a component unmount (So when i click on the header the chatbot is reduced ) .

Thanks.

Have you find any solution??

Have you find any solution?

Hi, Does this libraray works with React-Native @FredrikOseberg ?

using functional approach for the actionProvider and messageParser... wheni console.log props in the component that it to be rendered and defined in widgetFunc the props.actionProvider is empty ...thought if i swtich back to class components then it props.actionProvider has all functions defined in actionProvider

and why createClientMessage is not a function in functional component?

@FredrikOseberg, i am using your chat bot i have modified chat header here i want load widget when i click icon which i marked in blue color in screenshot

And chat code is

{showBot ?
<Chatbot
config={config}
actionProvider={ActionProvider}
messageParser={MessageParser}
disableScrollToBottom="false"
headerText={
<div style={{ display: "flex" }}>
<div style={{ display: "flex", alignItems: "center" }}>

<img width="50px" height="30px" src=' alt='' />

Contact Centre

                  
                  
                    
                                
<div style={{ display: "flex", alignItems: "center" }}>

<ThumbsUpDownIcon style={{ cursor: "pointer", color: "white" }} />

   
   
   

<RemoveIcon style={{ cursor: "pointer", color: "white" }} onClick={() => minimizeBot()} />




<CloseIcon style={{ cursor: "pointer", color: 'white' }} onClick={() => toggleBot('false')} />

}
/> :

<IconButton className="chatbot-icon" style={{ cursor: "pointer", color: "white" }} onClick={() => toggleBot('true')}>
{/* */}

}


Can you please help this