Send message to bot on click of menu item bot framework

Question

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 any menu item that text should be sent to bot as message.

I read over the Microsoft documentation and I see that we need to post to direct line so send message to bot. please refer https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-send-activity?view=azure-bot-service-4.0

I am wondering if there is any alternative apart from this as I am not able to make the api properly and invoke on click of item.

MenuItemClick(event) {
console.log(event.target.innerText);
Needle('post','https://directline.botframework.com/v3/directline/conversations', headers, {});
}

I am expecting on click of the menu item the text associated with menu item should go to the bot as message.

tdurnford tdurnford · Accepted Answer · 2019-08-29T18:16:33

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 Core
import sendMessage from 'botframework-webchat-core/lib/actions/sendMessage';

...

export default class extends React.Component {
  constructor(props) {
    super(props);
    ...
    // bind `handleMenuItemClick` to component
    this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
    ...
  }

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

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

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

Screen Capture

Hope this helps!

Send message to bot on click of menu item bot framework

1 Answers