score:4
Accepted answer
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!
Source: stackoverflow.com
Related Query
- Send message to bot on click of menu item bot framework
- How to change Content based on Menu Item click in AntD (React UI Library)
- Material-UI Left Drawer in App Bar won't close on overlay click or menu item click in React
- How to send request on click React Hooks way?
- How to open a page in new tab on click of a button in react? I want to send some data to that page also
- Right Click Menu using React JS
- React native send a message to specific whatsapp Number
- react-bootstrap how to collapse menu when item is selected
- React Router with - Ant Design Sider: how to populate content section with components for relevant menu item
- Material UI Menu not closing after clicking a menu item
- how to remove an item from a list with a click event in ReactJS?
- Ant design: Wrapping a menu item into a custom component
- React Semantic UI - position icon to the left of text in Menu Item
- How to Make Material-UI Menu based on Hover, not Click
- How to send CSRF Cookie from React to Django Rest Framework with Axios
- Why does this Material-UI Grid item move when I click on it?
- How to redirect with react-router and send a message
- Get Message From Kafka, send to Rsocket and Receive it from React client
- Send message from service woker to react component in some of the browser which donot support BroadcastChannel
- React onClick not firing on first click, second click behaves as expected (simple debug message doesn't appear until second click)
- Change state on click then change again after delay and show message in React
- ReactJS send key(index) on click
- Dropdown menu with item IDs in FluentUI/react-northstar
- React - Render Item inside map function by click event
- React: Edit and Delete from a pop-up menu on a list item
- Make an unclickable Menu Item
- react-sortable-hoc: Handling of click event on list item
- How show menu item in Material Table
- ReactJS - Disable Click & Hold for Context menu for mobile without disabling click events?
- What is the proper way to show blank menu item for SelectField (material-ui, react)
More Query from same tag
- Rendering json data in react js error: 'TypeError: Cannot read properties of undefined (reading 'item')'
- Warning after redirect to another route in React Router
- Side by side controls in React DOM using api
- How to refactor an if else if with previous state when using useState Hook?
- How to detect global mousemoves in React?
- JSX breaks ... Looping over an array with map generating conditional JSX elements
- Flask, serving a React application: cannot refresh "pages"
- Warning: React.createElement: type should not be null, undefined, boolean, or number
- this.props.match.params.vendor_id giving undefined value
- onhover mousevent bug React
- Jest: mock one of several exported components
- adding a script on Gatsby with setPostBodyComponents only on certain pages
- Jest/React - How to use global object in unit tests?
- React Redux with Redux Observable wait for authentication action to finish before continuing
- Parameter 'href' should represent a valid URL
- webpack entry and output path
- How to Use Google Analytics in ReactJs Application to Track Events
- Setting up Airbnb ESLint with React and Webpack
- React | props inside UseCallBack not updating inside custom hook
- Why CSS is not applying correctly to button in react material web components?
- React `onClick` change between Function and Class component
- React-Google-Maps showed grey area on container div resize
- Why is react-native-image-picker's showImagePicker undefined in React Native?
- Display native Map data in React
- Arrow function passing a variable within a prop within a .map
- I want to compare value of each column using react-table
- how to setup --max-http-header-size with webpack-dev-server
- How can I use formik "arrayHelper" outside of FieldArray?
- Custom pagination using ReactJS
- how to translate searchPlaceholder of MaterialTable reactjs using FormattedMessage