'nubs' 如何在 Bot Framework React Webchat 中工作？

Question

我的目标是使 Microsoft Bot Framework Chatbot 中的消息看起来更像 'speech bubbles' 并且在每个消息的侧面显示一个三角形 'nub'，例如

作为 Bot Framework 的一部分提供的 React Webchat client 具有可选属性来控制小块的大小和位置，这些小块是

bubbleNubOffset?: number | 'bottom' | 'top';
bubbleNubSize?: number;

我的第一个问题是：无论使用什么（正）bubbleNubOffset 值，小块总是出现在消息气泡的顶部而不是被偏移例如

如何向下移动小块使其看起来更像第一张图片？将 bubbleNubOffset 设置为任何负数会将小块移动到消息气泡的底部。

他们的source in GitHub有评论

  /**
   * Nub offset ''bottom' will render nub at the bottom
   * A positive or negative number will shift nub offset up/down
   * "top" is equivalent to positive zero.
   * "bottom" is equivalent to negative zero.
   */

但它似乎并没有像那样实际工作。

我的第二个问题是：没有添加CSS来设置message元素的z-index，设置bubbleNubSize会导致nub显示在message前面eg:

有没有办法通过配置避免这种情况，或者自定义 CSS 是唯一的方法吗？

Answer 1

我猜你为 bubbleNubSize 属性提供的值太大了。例如，这是我在测试网络聊天客户端中使用的值。

bubbleBackground: 'black',
bubbleBorderColor: 'red',
bubbleBorderRadius: 9,
bubbleBorderWidth: 2,
bubbleTextColor: 'white',
bubbleNubSize: 5,
bubbleNubOffset: 'bottom'

bubbleFromUserBackground: 'black',
bubbleFromUserBorderColor: 'green',
bubbleFromUserBorderRadius: 9,
bubbleFromUserBorderWidth: 2,
bubbleFromUserTextColor: 'white',
bubbleFromUserNubSize: 5,
bubbleFromUserNubOffset: 'top'

值得庆幸的是，Web Chat built-in logic 可以帮助解释气泡和小块如何根据您提供的值显示。例如，小块根据偏移进行垂直镜像，要使用的小块角的边界半径设置为 0 以创建视觉上的无缝流动。

'nubs' 如何在 Bot Framework React Webchat 中工作？

How do 'nubs' work in Bot Framework React Webchat?

reactjs

web-chat

botframework