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

て烟熏妆下的殇ゞ 提交于 2020-03-04 05:05:58

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!