Custom Web Chat - bubble nub size getting overloaded on front

I have being using sample Minimizable-web-chat sample on github and added my own customization. I tried adding nub to it but it seems to be overloaded on the chat bubble content. Is there anyway to retify this issue.

const styleOptions = {
    hideUploadButton: true,
    botAvatarInitials: "BF",
    userAvatarInitials: "WC",
    suggestedActionLayout: "carousel",
    bubbleNubOffset: "bottom",
    bubbleFromUserBorderStyle: 'solid',
    bubbleFromUserBorderRadius:9,
    bubbleBorderRadius:9,
    bubbleBorderWidth:2,
    bubbleFromUserNubOffset:"bottom",
    bubbleNubSize:5,
  };

screenshot

So, there does appear to be an issue with that particular sample. createStyleSet() as a method and styleSet as a property/value passed into the Web Chat component is, technically, valid. But really, its use cases are limited, it's a little convoluted, and not a good fit in this scenario.

The simpler solution is to just pass in styleOptions , like below, which is considered the best practice (I added a few props to make things easier to see). Implement this and it should work for you as it did for me when I tested.

In short, instead of styleSet, pass styleOptions into ReactWebChat and WebChat.

Hope of help!

In WebChat.js:

const styleOptions = {
  hideUploadButton: true,
  botAvatarInitials: 'BF',
  userAvatarInitials: 'WC',
  suggestedActionLayout: 'carousel',
  bubbleNubOffset: 0,
  bubbleFromUserBorderStyle: 'solid',
  bubbleFromUserBorderRadius: 9,
  bubbleBorderRadius: 9,
  bubbleBorderWidth: 2,
  bubbleFromUserNubOffset:'bottom',
  bubbleNubSize: 5,

  bubbleFromUserNubSize: 5,
  bubbleBorderColor: 'black',
  bubbleFromUserBorderColor: 'black',
  bubbleFromUserBackground: 'lightblue',
  bubbleBackground: 'lightblue',
};

[...]

<ReactWebChat className={`${className || ''} web-chat`} directLine={directLine} store={store} styleOptions={styleOptions} />

In MinimizableWebChat.js:

<WebChat
  className='react-web-chat'
  onFetchToken={handleFetchToken}
  store={store}
  styleOptions
  token={token}
/>

My test result: