Send Message To Bot On Click Of Menu Item Bot Framework

I am having a challenge to send message to bot on click of static menu item in Microsoft boframework webchat. I have modified the top nav and have static menu items and on click of

Solution 1:

I'm assuming you are building on top of the Minimizable Web Chat sample. Instead of making a post request to Direct Line to send a message, I would recommend dispatching a sendMessage action from Web Chat's store. Most of the logic is already there for you. You just need to import the sendAction method from Web Chat Core and define a handleMenuItemClick function. Take a look at the code snippets bellow.

Minimizable Web Chat Sample

...
// Import `sendMessage` actiion from Web Chat Coreimport sendMessage from'botframework-webchat-core/lib/actions/sendMessage';

...

exportdefaultclassextendsReact.Component {
  constructor(props) {
    super(props);
    ...
    // bind `handleMenuItemClick` to componentthis.handleMenuItemClick = this.handleMenuItemClick.bind(this);
    ...
  }

  // add `handleMenuItemClick` to componenthandleMenuItemClick({ target: { innerText }}) {
    const { store: { dispatch }} = this.state;
    dispatch(sendMessage(innerText));
  }

  render() {
    const { state: {
      minimized,
      newMessage,
      side,
      store,
      styleSet,
      token
    } } = this;

    return (
      <divclassName="minimizable-web-chat">
         ...
      </div>
  }
}

Screen Capture

Hope this helps!