Bot framework Webchat Postback 按钮在我单击它们后会在聊天中显示文本

Question

Webchat version: 4.15.1 using CDN,网聊版本：4.15.1 使用CDN，

Description: I am using HeroCards with postback buttons but they show the text in the value after I click them, It also happens with SuggestedActions.描述：我正在使用带有回发按钮的 HeroCards，但在我单击它们后它们会在值中显示文本，这也发生在 SuggestedActions 中。 Since in some cases I am using special codes I need to hide them from the user由于在某些情况下我使用特殊代码，我需要对用户隐藏它们

Code of the cards:卡片代码：

 private async Task<DialogTurnResult> ProcesarEnvioMenu(WaterfallStepContext stepContext, CancellationToken cancellationToken)
        {
            var tarjetaNecesitoPrueba = new HeroCard()
            {
                Buttons = new List<CardAction>()
                    {
                        new CardAction()
                        {
                           Title = "Pruebas",
                           Type = ActionTypes.PostBack,
                           Value = "Pruebas"
                        }
                    },
                Images = new List<CardImage>()
                    {
                        new CardImage()
                        {
                            Url="https://chatbotfcsblobstorage2.blob.core.windows.net/imagenes/63de5d7e-bf00-498f-bb1a-84c16feef299.png"
                        }
                    },
                Title = "Necesito una prueba diagnóstica ",
                Subtitle = "para saber si tengo COVID"
            }.ToAttachment();


            var mensaje = stepContext.Context.Activity.CreateReply($"Por favor elige la opción que deseas o si lo prefieres hazme una pregunta directamente.");
            mensaje.Attachments = new List<Attachment>();
            mensaje.AttachmentLayout = AttachmentLayoutTypes.Carousel;
            mensaje.Attachments.Add(tarjetaNecesitoPrueba);
      
            await stepContext.Context.SendActivityAsync(mensaje, cancellationToken: cancellationToken);

            return await stepContext.EndDialogAsync();
        }

Code of the webchat:网络聊天代码：

<!DOCTYPE html> <html> <head>
    <script src="https://cdn.botframework.com/botframework-webchat/4.15.1/webchat.js"></script>
   
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style> </head> <body>
   
    <div id="webchat" role="main"></div>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>

    
     const styleSet = window.WebChat.createStyleSet({
         rootHeight: '100%',
         rootWidth: '100%',

        
         bubbleFromUserBackground: '#EA431C',
         bubbleFromUserBorderRadius: 15,
         bubbleFromUserBorderColor: '#EA431C',
         bubbleFromUserTextColor: 'White',

         bubbleBackground: '#24B5B1',
         bubbleBorderRadius: 15,
         bubbleBorderColor: '#24B5B1',
         bubbleTextColor: 'White',

         sendBoxButtonColor: '#0063B1',
         sendBoxBorderBottom: 'solid 1px #006FBA',
         sendBoxBorderLeft: 'solid 1px #006FBA',
         sendBoxBorderRight: 'solid 1px #006FBA',
         sendBoxBorderTop: 'solid 1px #006FBA',

         suggestedActionBackgroundColor: '#EA431C',
         suggestedActionBorderColor: '#EA431C',
         suggestedActionBorderColor: 'White',
         suggestedActionTextColor: 'White',
         suggestedActionBorderStyle: 'none',
         suggestedActionBorderRadius: 5,
      

      });



        styleSet.textContent = {
            ...styleSet.textContent,
            fontFamily: "'Gotham', 'Calibri', 'Helvetica Neue', 'Arial', 'sans-serif'",
            fontColor: 'White'
        };

        const avatarOptions = {
            botAvatarBackgroundColor: '#FE9913',
            botAvatarImage: 'https://wikiaprendofcscontainer.blob.core.windows.net/imagenes/wikiaprendo/logowikiaprendofcs.png',
            botAvatarInitials: 'BF',
         
            hideUploadButton: true,
            
        };
        (async function () {
        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'
                       }
                 });
           }

        return next(action);   });

            const token = '@ViewBag.Token';
            var d1 = window.WebChat.createDirectLine({ token })

            window.WebChat.renderWebChat({
                directLine: Object.assign({}, d1, {
                    postActivity: activity => {
                        var newActivity = Object.assign({}, activity, { channelData: { "MonitorId": "@ViewBag.IdMonitor" } });
                        return d1.postActivity(newActivity);
                    }
                }),
                styleSet,
                styleOptions:avatarOptions,
                store,
                sendTypingIndicator:true

            }, document.getElementById('webchat'));

            document.querySelector('#webchat > *').focus();
        })().catch(err => console.error(err));

    </script> </body> </html>

Answer 1

The error was in the webchat configuration on the html file.错误出现在 html 文件的网络聊天配置中。 This is the right way of having a welcome message AND passing arguments to a chatbot in the channel data这是在频道数据中发送欢迎消息并将参数传递给聊天机器人的正确方法

 (async function () {
         const token = '@ViewBag.Token';
            var d1 = window.WebChat.createDirectLine({ token });
            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: { language: window.navigator.language }
                        }
                    });
                }

                if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
                    action = window.simpleUpdateIn(
                        action,
                        ['payload', 'activity', 'channelData', 'MonitorId'],
                        () => '@ViewBag.IdMonitor'
                    );
                }

                return next(action);
            });

            window.WebChat.renderWebChat(
                {
                    directLine: window.WebChat.createDirectLine({ token }),
                    store,
                    styleSet,
                    styleOptions: avatarOptions
                },
                document.getElementById('webchat')
            );

            document.querySelector('#webchat > *').focus();
        })().catch(err => console.error(err));

Bot framework Webchat Postback 按钮在我单击它们后会在聊天中显示文本

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-05-19 00:41:14

Bot framework Webchat Postback 按钮在我单击它们后会在聊天中显示文本

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-05-19 00:41:14

解决方案1
0 已采纳 2022-05-19 00:41:14