1

我想根据卡片类型将 css 类名添加到相应的 html 元素中。

我已经通过设置 [ AdaptiveCard.customCssSelector] 1属性做到了这一点。例如，您只需要添加这一行builder.card.customCssSelector = "ac-thumbnail";，生成的 html-block 将包含.class="ac-container ac-thumbnail"

但是，我想独立于 Botframework-Webchat 更新并将此逻辑放入中间件中。根据BotFramework-Webchat 文档，可以添加attachmentMiddleware到renderWebChat函数并操作 html 元素。
事实上，我得到了活动和附件，但我无法操作 html 块或添加 css 选择器。

这是我的中间件代码：

export const cardCssSelector = ({ dispatch }) => next => action => {
    if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
        const { activity } = action.payload;
         for (var index in activity.attachments) {       
            const card  = activity.attachments[index].content;
            if(card.tap && card.tap.value){
                card.customCssSelector = 'tap';
            }
        }
    }
    console.log(action);
    return next(action);
};

当然这不起作用，因为附件没有 customCssSelector 属性。

4

1 回答 1

1

要对网络聊天进行真正的自定义样式，则需要进行一些修改。需要注意的一些事项：

  • 您需要匹配卡中传递的值，而不是活动中的值。这允许您识别要设置样式的 html 文档中的特定卡片。为简单起见，我正在匹配按钮文本值。
  • 在网络聊天中，对于文档，卡片被呈现为自适应卡片。
  • 我将adaptiveCards[HTMLCollection] 重铸为一个真正的数组 ( cards) 以进行迭代。
  • 我添加了card-用于将 CSS 映射到卡片的类。
  • 因为基本自适应卡片与转换后的“英雄卡片”自适应卡片具有相同的文档结构，所以我可以指望按钮是第三个孩子 ( children[2]) 来检索值。您需要考虑卡片的变化。
  • 对于具有多张卡片的活动，您可能需要进行调整，但按照与以下类似的设置应该是可行的。

首先，创建一个存储并过滤传入的活动、消息，然后是ac-adaptiveCard类。

const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => async action => {
  if(activity.type === 'message') {
    let aCards = document.body.getElementsByClassName('ac-adaptiveCard');
    let bCards = Object.values( aCards);

    for(let i = 0; i <= bCards.length - 1; i++) {
      if( cards[i].children[2] && cards[i].children[2].innerText && cards[ i ].children[ 2 ].innerText === 'Request Assistance') {
        cards[i].className += ' card-Adaptive'
      }

      if( cards[i].children[2] && cards[i].children[2].innerText && cards[ i ].children[ 2 ].innerText === 'Service details') {
        cards[i].className += ' card-Hero'
      }
    }
  }
}

我按指定的类将样式应用于卡片。

.card-Adaptive {
  background-color: black;
}

.card-Adaptive p {
  color: white;
}

.card-Hero {
  background-color: green;
}

store我作为参数传递。

window.ReactDOM.render(
  <ReactWebChat
    directLine={ directLine }
    store={store}
  />,
  document.getElementById( 'webchat' )
);

自适应卡是黑色的，英雄卡是绿色的。

在此处输入图像描述

于 2019-11-12T21:54:24.053 回答