javascript - 如何在机器人回复建议操作时隐藏/显示发送箱

Question

我正在使用 Azure 聊天机器人(v4 MS 机器人框架)并应用于直线 channel ，并且我正在发送

suggestedActions 在某些地方，此时我想禁用/隐藏 sendbox - 输入文本框

以下是我在前端的完整代码。

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

 }

在后端使用 C# 代码，我发送建议的操作。下面是相同的代码。

私有(private)静态异步任务消息SuggestedActionsAsync(ITurnContextturnContext，CancellationTokencancelToken) { 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 { }
}

请帮助修改我的代码以实现我的要求。

Answer 1

在意识到这个问题没有解决方案后，他们仍在努力在 MS bot 框架中实现此功能，

我使用以下简单的 JavaScript 方法来实现我的要求

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

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

虽然很简单，但它确实对我有用。