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

问题

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.

来源：https://stackoverflow.com/questions/60412674/how-to-hide-show-the-sendbox-whenever-the-bot-replies-with-the-suggested-actio