Disable user typing text box c#

Question

Is it possible to disable the user typing input text area in the V4 bot framework in any channel ? I have this as part of customer requirement Can someone please help me

Answer 1

The box you refer to is called the send box. If you are using BotFramework-Web Chat, you can disable it by passing the value via styleOptions like so:

<script>
  (async function () {

    const styleOptions = {
      hideSendBox = true
    }

    [...]

    window.ReactDOM.render(
      <ReactWebChat
        directLine={directLine},
        styleOptions={styleOptions}
      />,
      document.getElementById( 'webchat' )
    );
  })
</script>

If you are using the iFrame embedded version of Web Chat, it is not configurable.

Hope of help!

---

Edit

If you are wanting the send box to be responsive according to the type of activity received from the bot, then you will want to use a combination of the activityMiddleware() function as well as an event emitter/listener. In the following example, I am hiding/showing the send box when suggestedActions is an activity property.

Please be aware that the data values should be "none" and "flex". In particular, the latter value when it is not suggestedActions in order to maintain the current code.

<script>
  (async function () {

    [...]

    const activityMiddleware = () => next => card => {
      const { activity: { suggestedActions } } = card;
      const toggleSendBoxEvent = new Event('ToggleSendBoxEvent')
      if (suggestedActions) {
        toggleSendBoxEvent.data = "none";
        window.dispatchEvent(toggleSendBoxEvent);
      } else {
        toggleSendBoxEvent.data = "flex";
        window.dispatchEvent(toggleSendBoxEvent);
      }
  
      return next(card);
    )

    [...]

    window.ReactDOM.render(
      <ReactWebChat
        directLine={ window.WebChat.createDirectLine({ token }) }
        activityMiddleware={ activityMiddleware }
      />,
      document.getElementById( 'webchat' )
    );

    window.addEventListener('ToggleSendBoxEvent', ( { data } ) => {
      const sendBoxes = document.getElementsByClassName("main");
      let send_Box;
      for (let sendBox of sendBoxes) {
        send_Box = sendBox;
      }
      send_Box.setAttribute('style', `display:${ data }`)
    })

  });
</script>

Hope of help!