CODEWITHSUNDEEP
javascriptreactjsbotframeworkweb-chat
TrevorBrooks
TrevorBrooks

Reputation: 3840

Update Bot Framework WebChat SendBox Text

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?

Upvotes: 1

Views: 488

Answers (1)

Steven Kanberg
Steven Kanberg

Reputation: 6383

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!

Upvotes: 1

Related Questions