intercept user message to modify it , bot framework

Question

I am using a bot framework with direct line, and I would like to intercept the user's message before sending it to the server to modify it.

The idea is that if the user enters some phone number, credit card, etc, modify that part of the message by asterisks for example, and that does not travel the message with that data to the server. I have tried to configure some event or activity but I can not do it.

I have tried using javascript, create an addeventlistener to the inputBox and the button, but when that event is launched the message can no longer be modified

any ideas?

conect.activity$
                    .filter(function (activity) {   
                      return activity.type === 'endOfConversation';
                    })
                    .subscribe(function (activity) {
                        console.log('RemoveLocalStorage endOfConversation');
                     RemoveLocalStorage("paramCon");
                    });

                      BotChat.App({
                        botConnection : conect,
                        speechOptions: speechOptions,
                        user: user,
                        bot: bot,
                        typing:false,
                        locale: (params.locale !== undefined) ? params.locale : "es-es",
                        resize: 'detect'
                      },window.parent.frames["chatBot"].document.getElementById('bot'));
                     //window.frames[0].document.getElementById('bot')
                      //document.getElementById("bot")

window.parent.frames["chatBot"].document.getElementsByClassName("wc-send")[0].addEventListener("click", disableSensitiveData);
    window.parent.frames["chatBot"].document.getElementsByClassName("wc-textbox")[0].addEventListener("keyup", disableSensitiveData);

Answer 1

You can create a custom middleware to intercept and modify the text attribute of messages when the user hits send. I created examples in V3 and V4 of Webchat below that convert the entire message to asterisks.

WebChat V4

// We are adding a new middleware to customize the behavior of WEB_CHAT/SEND_MESSAGE.
const store = window.WebChat.createStore(
  {},
  ({ dispatch }) => next => action => {
      if (action.type === 'WEB_CHAT/SEND_MESSAGE') {
        // Edit text when user sends message
        action.payload.text = action.payload.text.split('').map(_ => '*').join('')
      }
      return next(action);
  }
);

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

Checkout the WebChat Repository for more samples and information about v4.

WebChat V3

We are going to modify how the bot handles posting activities to intercept and modify the message from the user.

var dl = new BotChat.DirectLine({ secret: '<SECRET>' });

BotChat.App({
  botConnection: Object.assign({}, dl, {
    postActivity: activity => {
      // Edit text when user sends message
      activity.text = activity.text.split('').map(_ => '*').join('');
      return dl.postActivity(activity);
    }
  }),
  bot: 'bot',
  user: 'user',
  resize: 'detect',
}, document.getElementById('bot'));

Hope this helps!