Nav Bar Menu

[dtcyad1]

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 (

} /> } /> } /> }>

); }

Below is how my nav header is looking..

Thanks

[dtcyad1]

Oops - the code did not make it - attaching again

[FredrikOseberg]

Looking into it.

[dtcyad1]

Hi Fredrik,

were you able to figure out a way? Really appreciate you looking into this.

Thanks

[FredrikOseberg]

Hi Fredrik,

were you able to figure out a way? Really appreciate you looking into this.

Thanks

Yeah. I'm going to inject the actionProvider into the header function when it's called. That way you should be able to access the actionprovider in your custom header.

[dtcyad1]

Awesome - Thanks.

[FredrikOseberg]

Awesome - Thanks.

If you get the latest version (1.1.14) and amend your config like this:

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

import Header from "./header";

const config = {
  initialMessages: [createChatBotMessage(`Hello world`)],
  customComponents: {
    header: (props) => <Header {...props} />,
  },
};

export default config;

You should now have access to the actionProvider.

[dtcyad1]

So i got the latest code - i can see that you are now passing in the action header. But i am unable to get the actionProvider. This is how I am using it:

config.js: customComponents: { header: (props) => <NavHeader {...props} />, },

NavHeader.js: function NavHeader({actionProvider}) { console.log("Header::" + actionProvider); return ( ....Header render code ); }

But in the console, this is what i see printed in the console:

Header::undefined

[FredrikOseberg]

So i got the latest code - i can see that you are now passing in the action header. But i am unable to get the actionProvider. This is how I am using it:

config.js: customComponents: { header: (props) => <NavHeader {...props} />, },

NavHeader.js: function NavHeader({actionProvider}) { console.log("Header::" + actionProvider); return ( ....Header render code ); }

But in the console, this is what i see printed in the console:

Header::undefined

Try augmenting your config like this:

const config = {
  initialMessages: [createChatBotMessage(`Hello world`)],
  customComponents: {
    header: (actionProvider) => <Header actionProvider={actionProvider} />,
  },
};

[dtcyad1]

Hi Fredrik,

This is awesome!! Works like a charm. Really appreciate this fast turnaround!! You can close this case.

Thanks

[FredrikOseberg]

Hi Fredrik,

This is awesome!! Works like a charm. Really appreciate this fast turnaround!! You can close this case.

Thanks

Perfect. Thanks for reporting :)

[iammmk]

Hi Fredrik,

This is awesome!! Works like a charm. Really appreciate this fast turnaround!! You can close this case.

Thanks

Hi @dtcyad1 I can see that actionProvider is giving the ActionProvider function when log this in console. If this is correct, then how to use this actionProvider. Can you please provide the code.

Thanks