reactjsbotframeworkweb-chat

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

I am aiming to make messages in a Microsoft Bot Framework Chatbot appear more like 'speech bubbles' and have a triangular 'nub' display to the side of each, eg

message bubble with nub

The React Webchat client provided as part of the Bot Framework has optional properties to control the size and position of nubs which are

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

My first question is: Regardless of what (positive) bubbleNubOffset value is used, the nub always appears at the top of the message bubble rather than being offset eg

message bubble with nub at top

How can I move the nub down to appear more like the first image? Setting bubbleNubOffset to any negative number moves the nub to the bottom of the message bubble.

The source in GitHub for them has a comment

  /**
   * 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.
   */

but it doesn't appear to actually work like that.

My second question is: Without adding CSS to set the z-index of the message element, setting the bubbleNubSize causes the nub to be displayed in front of the message eg:

message bubble covered by nub

Is there a way to avoid this via configuration or is custom CSS the only way to do it?

Solution

  • My guess is you are supplying too large of a value to the bubbleNubSize property. For instance, here are the values that I use in my test Web Chat client.

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

    enter image description here

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

    enter image description here

    Thankfully, Web Chat has built-in logic that helps interpret how the bubble and nub displays based on the values you provide. For instance, the nub mirrors vertically depending on the offset, and the border radius of the nub corner to be used is set to 0 to create a visually seamless flow.