自定义Web Chat气泡Nub尺寸覆盖内容问题求助

气泡Nub覆盖内容主要是边框设置、Nub偏移规则和内边距的配置冲突导致的，可以通过以下方式解决：

• 调整气泡内边距，给内容留出Nub空间：在styleOptions里添加bubblePadding配置，比如设置为'10px 12px'，根据Nub大小微调数值，确保气泡内容和Nub之间有足够间隙。
• 补偿边框宽度对Nub偏移的影响：你设置了bubbleBorderWidth:2，默认的Nub偏移没有考虑边框厚度，把bubbleNubOffset和bubbleFromUserNubOffset调整为带补偿值的格式，比如"bottom 2px"，让Nub避开边框区域。
• 减小Nub尺寸：当前bubbleNubSize:5搭配2px边框，容易出现重叠，试试把尺寸改成3px左右，降低覆盖概率。
• 自定义CSS强制调整样式：如果上述配置仍不生效，添加全局CSS修正Nub和内容的位置：

/* 修正机器人气泡Nub位置 */
.webchat__bubble--from-bot .webchat__bubble__nub {
  transform: translateY(2px);
}
/* 修正用户气泡Nub位置 */
.webchat__bubble--from-user .webchat__bubble__nub {
  transform: translateY(2px);
}
/* 给气泡内容增加内边距 */
.webchat__bubble__content {
  padding: 10px 12px;
}

调整后的示例配置代码：

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

内容的提问来源于stack exchange，提问作者Manish Chitre