How to Hide / Show the Sendbox whenever the bot replies with the suggested action

Question

I'm using Azure Chat bot (v4 MS bot framework) and applied in Direct line channel, and also I'm sending

suggestedActions on certain places, on such time i want to disable/hide the sendbox - the input text box

Following is my full code at the front end.

(async function bot() {



 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);

    };

    const styleOptions = 
    {
        hideUploadButton: true,
        bubbleBackground: '#D8F4FF',
        bubbleFromUserBackground: '#E8E8E8',
        botAvatarImage: 'img',
        botAvatarInitials: 'bot',
        userAvatarInitials: initial,
        userAvatarImage: userimg,
        rootHeight: '100%',
        rootWidth: '50%'

    };

    const styleSet = window.WebChat.createStyleSet({
        bubbleBackground: 'rgba(0, 0, 255, .1)',
        bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
    });


    styleSet.textContent = {
        fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
        fontWeight: 'bold'
    };
    const secret = 'token';
    const res = await fetch('../generate',
        {
            headers: {
                Authorization: `Bearer ${secret}`,
            },
            method: 'POST'
        });
    const { token } = await res.json();

    const store = window.WebChat.createStore(
        {},
        ({ dispatch }) => next => action => {
            if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                dispatch({
                    type: 'WEB_CHAT/SEND_EVENT',
                    payload: {
                        name: 'webchat/join',
                        value:{
                            parms
                        },

                    }
                });
            }
            return next(action);
        }
    );

    window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token }),
        activityMiddleware: activityMiddleware,
        store,
        styleOptions,
        userID: emailid,
        username: fullname,
        locale: 'en-US',
        userAvatarInitials: initial
    }, document.getElementById('webchat'));


    document.querySelector('#webchat > *').focus();
    document.querySelectorAll('[aria-label="Sendbox"]')[0].placeholder = "Type your question and press enter";

    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 }`)
    });

    $('.css-115fwte').on('click',removequestion);

    const sendbox = document.querySelector("[aria-label='Sendbox']");


function removeQuestions() {
    const questionDivs = document.querySelectorAll('#ques');
    questionDivs.forEach((div) => {div.remove();})

    }    

  sendbox.addEventListener('keyup', (eventObject) => 
            {
                if (sendbox.defaultValue.length > 3)
                 {
                    getquestion(sendbox.value+eventObject.key,product,releaseval);
                 } 
                 else 
                 {
                    removeQuestions();
                 }
            });



function send(question) 
 {
    store.dispatch({
    type: 'WEB_CHAT/SEND_MESSAGE',
    payload: { text: question }

     });
                event.currentTarget.remove();
                removeQuestions();
                document.querySelector("[aria-label='Sendbox']").value =""; 
   }

function getquestion(value,prod,release) {
    var token = 'token';
    var questionquery =
    {
        question: value,
        top: 2,
        scoreThreshold: 50,
        "strictFilters": [
            {
                "name": prod,
                "value":release
            }],
    }
    $.ajax({
        type: "POST",
         url: ".../generateAnswer",


        data: JSON.stringify(questionquery),
        beforeSend: function (xhr) {
              xhr.setRequestHeader('Authorization','id');

        },
        dataType: "json",
        contentType: "application/json",
        success: function (data) {

            console.log(data);
            console.log(data.answers[0].answer);

            var countofques = data.answers[0].questions.length;
            var questions = "";
            $('#ques').remove();

            for (var i = 0; i < data.answers.length; i++) 
            {
                for(var j=0;j<3;j++)
                    {
                        if (data.answers[i].questions[j] != null && data.answers[i].questions[j] != 'undefined')
                        questions = questions + "<div class='probing'>" + data.answers[i].questions[j] + "</div>";
                    }   
            }

            $('.content').last().append("<div id='ques'>" + questions + "</div>");

            $('div.probing').click(function () {
            send(this.innerText);

            });

        },
        error: function (data) {
            alert(data.responseText);
        }
    });
}


function removequestion()
{
    $('#ques').remove();


}

  })().catch(err => console.error(err));

 }

in the back end using c# code, I'm sending the suggested actions.below is the code for the same.

private static async Task messageSuggestedActionsAsync(ITurnContext turnContext, CancellationToken cancellationToken) { mPrevUserMssg = turnContext.Activity.Text;

    if (mPrevUserMssg == turnContext.Activity.Text)
    {
        var reply = turnContext.Activity.CreateReply("Did you find this helpful?");
        reply.SuggestedActions = new SuggestedActions()
        {
            Actions = new List<CardAction>()
        {

            new CardAction() { Title = "Yes", Type = ActionTypes.ImBack, Value = "Yes" },
            new CardAction() { Title = "No", Type = ActionTypes.ImBack, Value = "No" },


        },
        };

        await turnContext.SendActivityAsync(reply, cancellationToken);
    }
    else { }
}

Please help with any modification required in my code to achieve my requirements.

Answer 1

After realizing that there is no solutions for this issue and still they are working to implement this feature in MS bot framework,

I used the following simple JavaScript method to achieve my requirement

function hidesendbox()
{
    var suggestion = $('div.css-6p8cnn').length;

    if(suggestion > 0)
    {
        $(".main").hide();
    }else
    {
        $(".main").show();
    }
 }

though its simple, it actually worked for me.