Microsoft Bot Framework WebchatJS单击事件以更改CSS麦粒肿集

问题描述

我已经使用Microsoft bot框架构建了一个bot，现在我正在使用webchat对其进行测试。问题是，我想在用户单击“齿轮”按钮时动态更改颜色，换句话说，如下面的代码所示，从styleSet更改为styleSetDark，但是如您所知，webchatjs中无法识别单个javascript事件（我以一个评论为例）：

<html>
       <body>
          <div style="background-color: #50bdeb; text-align: center;"><img src="Logo.png"><img id="gear" src="Gear.png" width=10% height=10% style="float:right;"></div>
          <div id="contwb" style="background-color: #50bdeb; text-align: center;">
            <div id="webchat" role="main">
            </div>
          </div>
          <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
          <script>

         const styleSet = window.WebChat.createStyleSet({
          hideUploadButton: true,bubbleBackground: '#b9e8f5',bubbleTextColor: '#737277',bubbleBorderRadius: 20,botAvatarBackgroundColor: '#50bdeb',botAvatarImage: "Icon.png",bubbleFromUserTextColor: '#ffffff',bubbleFromUserBackground: '#d3d3d3',bubbleFromUserBorderRadius: 20,sendBoxBackground: '#d3d3d3',sendBoxButtonColor: '#50bdeb',sendBoxTextColor: '#ffffff',sendBoxPlaceholderColor: '#ffffff',sendBoxBorderTop: 'solid 10px #50bdeb',sendBoxBorderLeft: 'solid 10px #50bdeb',sendBoxBorderRight: 'solid 10px #50bdeb',suggestedActionBackground: '#50bdeb',suggestedActionTextColor: '#ffffff',suggestedActionBorderStyle: 'none',suggestedActionBorderRadius: 25,botAvatarInitials: 'BF',});

         styleSet.textContent = {
            ...styleSet.textContent,fontFamily: "'Arial',sans-serif"
         };

         const styleSetDark = window.WebChat.createStyleSet({
          backgroundColor: 'Grey',bubbleBackground: '#ffffff',});

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  secret: 'My_App_key'
               }),styleSet
            },document.getElementById('webchat')
         );


        //  $(document).on("click","#gear",function(){
        //       window.WebChat.renderWebChat(
        //         {
        //           directLine: window.WebChat.createDirectLine({
        //               secret: 'Wa_pcRtLvKk.rTltb7NaZUAmKdZA8cBUZ90IZasydAmvGDfhoqmswkA'
        //           }),//           styleSetDark
        //         },//         document.getElementById('webchat')
        //     );
        //   });


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

有什么方法可以将事件设置为元素，以呈现其他样式集？如果这样，它是否会重新加载整个聊天对话？...谢谢。

解决方法

不幸的是，使用styleSet或styleOptions后，您便无法进行更改，因为这些属性是加载时传递到Web聊天中的属性。要对此进行更改，至少需要重新加载Web Chat，而Web Chat并不能实现流畅的UX（但可行）。

相反，您将需要通过传统方法重新应用样式。请记住，通常，如果用户导航或刷新该页面，则Web Chat样式将恢复为最初传入的属性。

botframework bots direct-line-botframework microsoft-bot-framework webchatjs

Microsoft Bot Framework WebchatJS单击事件以更改CSS麦粒肿集

问题描述

解决方法

相关问答