Update Bot Framework WebChat SendBox Text

Question

I want to update the text in my WebChat SendBox, using the following code in the Console on Edge:

window.WebChat.createStore().dispatch({
    type: 'WEB_CHAT/SET_SEND_BOX',
    payload: {
        text: 'Hello World',
    }
});

The Console returns:

{type: 'WEB_CHAT/SET_SEND_BOX', payload: {…}}
payload: {text: 'Hello World'}
type: "WEB_CHAT/SET_SEND_BOX"
[[Prototype]]: Object

But the WebChat SendBox is not updated with "Hello World".

What am I doing wrong?

Answer 1

It's hard to tell from your code if you are already doing this, but you need to give the createStore() an assignment. Then, you need to pass that variable in as a parameter to Web Chat's render component.

Also, in the store, you should have it dispatch the SET_SEND_BOX action on CONNECT_FULFILLED or similar. If all you do is tell the store to dispatch the SET_SEND_BOX action as you have in your code, it will get called on every action. This will effectively disallow anyone from typing in the send box as their input will always get overwritten.

const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => async action => {
  if ( action.type === 'DIRECT_LINE/CONNECT_FULFILLED' ) {
    store.dispatch( {
      type: 'WEB_CHAT/SET_SEND_BOX',
       payload: {
         text: 'Hello World'
       },
    } );
  };
  next( action );
} );

[ ... ]

window.WebChat.renderWebChat(
  {
    directLine: directLine,
    store: store
  },
  document.getElementById( 'webchat' )
);

Please look over the official BotFramework-WebChat samples. There are many examples on how to do this, and more.

Hope of help!