Question

通过否决BotFramework网络聊天客户端的defaultStyleOptions.js，我可以自定义客户端。这一部分工作正常。当我将鼠标悬停在自适应卡上的动作上或将发送按钮悬停时，我无法修改焦点颜色（请参见附图），我试图推翻有意义但不成功的其他属性。帮助表示赞赏。

我尝试修改以下属性：默认重音和默认微妙 cardEmphasisBackgroundColor sendBoxButtonColorOnFocus sendBoxButtonColorOnHover

    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it-emoji/1.4.0/markdown-it-emoji.js"></script>

<body>
<div id="webchat" role="main"></div>   
    <script>
      // make sure the chat initializes at page load by sending a 'webchat join' event
       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 }
             }
           });
         }
         return next(action);
       });
       // add markdown support including Emoji
        var markdownIt = window.markdownit();
        markdownIt = window.markdownit().use(window.markdownitEmoji);
        window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: webChatToken}),
        renderMarkdown: markdownIt.render.bind(markdownIt),
        store,
        // styling
        styleOptions: {

        rootHeight: '755px',
        rootWidth: 'Auto',
        backgroundColor: 'White',
        bubbleBorder: 'solid 1px Light Blue',
        bubbleTextColor: '#0D0D0D',

        avatarSize: 50,
        botAvatarImage: 'https://botz4u.com/src/assets/img/png/botz4uavatar.png',
        botAvatarInitials: 'BOT',


        userAvatarInitials: 'JIJ',
        bubbleFromUserBorder: 'solid 1px Light Blue',
        bubbleFromUserTextColor: '#0D0D0D',

        hideUploadButton: true,
        sendBoxBorderTop: 'solid 1px #0A9BFB',
        sendBoxBorderBottom: 'solid 1px #0A9BFB',
        },
        userID: 'N/A',
        username: 'Web Chat User',
        locale: 'nl-NL'
      }, document.getElementById('webchat'));
    </script>
  </body>
</html>

标题中使用的自适应卡定义：

 "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "spacing": "none",
                    "size": "medium",
                    "weight": "bolder",
                    "text": "Welkom!"
                },
                {
                    "type": "Image",
                    "horizontalAlignment": "Left",
                    "url": "<link to logo>",
                    "size": "Stretch" 
                },
                {
                    "type": "TextBlock",
                    "spacing": "medium",
                    "size": "medium",
                    "color": "Dark",
                    "text": "some text"
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "some text",
                    "wrap": true
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Wat is een chatbot?",
            "data": "Wat is een chatbot"
        },
        {
            "type": "Action.Submit",
            "title": "Waarom een chatbot?",
            "data": "Waarom een chatbot"
        },
        {
            "type": "Action.Submit",
            "title": "Wat kost een chatbot?",
            "data": "Wat kost het"
        }
    ],

    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"

以及向用户显示自适应卡的bot代码（在标题中为Introcard：

    if (qnaResults[0] && qnaResults[0].score > 0.5) {
                if (qnaResults[0].answer === '#Weather') {
                    var weerVoorspelling = await helper.getWeatherForecast(turnContext);
                    await turnContext.sendActivity('Als je bedoelt dat je een weerbericht wilt, bij deze ....');
                    await turnContext.sendActivity({
                        attachments: [CardFactory.adaptiveCard(weerVoorspelling)]
                    });
                } else if (qnaResults[0].answer === '#DateTime') {
                    await turnContext.sendActivity(moment().tz('Europe/Amsterdam').format('[Vandaag is het ]LL[ en de tijd is ] LT[ uur.]'));
                } else if (qnaResults[0].answer === '#Help') {
                    await turnContext.sendActivity({
                        attachments: [CardFactory.adaptiveCard(IntroCard)]
                    });
                } else {
                    await turnContext.sendActivity(qnaResults[0].answer);
                }
            // If QnaMaker did not find an answer, offer help
            }

我希望能够修改上面提到的颜色。

Answer 1

常规-使用变量设置样式

您可以查看网络聊天源中的可用变量，尤其是here。

关于您的问题

对于 sendButton ，您还可以看到SendBoxButton.js文件here：

值sendBoxButtonColorOnHover很好，可以在悬停时设置SVG的颜色
当前没有用于更改悬停时（包含svg的div的）背景颜色的参数

对于您的自适应卡按钮，来源为here。如您所见，它当前未使用hover。

常规-如何添加当前不支持的自定义样式：

关于自定义样式的需求，您应该查看Github上的this页，讨论如何处理defaultStyleOptions中不可用的字段。

简而言之：

为您的新字段创建请求请求，他们会很高兴地将其考虑在内
最糟糕的解决方案（因为它尚未得到正式支持，并且以后可能会受到重大更改），请执行一些“异类手工样式设置”，请参见示例here

在Botframework网络聊天中，如何在将自适应卡动作悬停并发送按钮时自定义颜色

1 个答案:

常规-使用变量设置样式

关于您的问题

常规-如何添加当前不支持的自定义样式：