如何将工具提示添加到 Microsoft Bot Framework Webchat 中的 QnAMakerOptions 按钮

Question

我正在从 QnAMakerOptions 获取选项并将其显示在 Webchat 上。有时该选项上的文本太大而被截断。因此，我需要提供有关这些选项的提示，以便用户可以将鼠标悬停在上面并阅读完整的文本。我在 bot 框架的 webchat.js 中看到属性 _element.title ，但是需要为其分配什么值或者是否有任何其他方法可以实现它。任何指针都会有所帮助。提前致谢。

Answer 1

如果您使用 Web Chat 的商店，您可以按 activity 进行过滤并在 DOM 中找到关联的卡片。然后，只需将按钮的 textContent 值应用到 title 属性.

请注意：

在网络聊天中，所有卡片都呈现为自适应卡片，尽管卡片的元素（例如按钮）可能会根据发送的原始卡片类型（例如英雄卡片）引用不同的架构。因此，以下查询正确搜索 .ac-adaptiveCard.
setTimeout() 是必要的，因为如果没有它，脚本将在 store 完成处理活动之前查询 DOM，寻找 .ac-adaptiveCard （经过处理的 activity 表示它在抄本 window 中呈现为 HTML）。结果是在按钮实际存在于 DOM.

[...]

const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
  if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
    let activity = action.payload.activity;
    if (activity?.attachments && activity.attachments[ 0 ]?.contentType.includes( 'card' ))

    setTimeout( () => {
      let cards = document.querySelectorAll( '.ac-adaptiveCard' )
      let cardLength = cards.length;
      let card = cards[ cardLength - 1 ];
      card.querySelectorAll( 'button' ).forEach( button => {
        if ( !!button.children[ 0 ].textContent === true ) {
          button.title = button.children[ 0 ].textContent;
        }
      } );
    }, 300 )
  }

  return next( action );
} );

[...]

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

希望得到帮助！

如何将工具提示添加到 Microsoft Bot Framework Webchat 中的 QnAMakerOptions 按钮

How to add tooltip to QnAMakerOptions button in Microsoft Bot Framework Webchat

web-chat

botframework