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;

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

@FredrikOseberg Hello, thank you very much for this package. I have a question, I can't break lines within the bot's messages. <br / > and \n don't work. Can you tell me what I should do?

Hey @FredrikOseberg,

I am trying to add Arabic support to the chatbot. For that, I want to display chatbot messages on the right and user messages on the left. Could you please share if this part is dynamic? Can we access to show messages vice-versa?