使用DirectLine修改Microsoft Chatbot WebChat容器样式问题咨询

看起来你在自定义Bot Framework Web Chat聊天气泡样式时碰了壁，我帮你捋捋可能的问题和解决办法：

1. 先改对参数名！这是最可能的坑 #

你代码里创建了styleSetOptions，但在renderWebChat里传参的时候用错了名字——应该是styleSet而不是styleSetOptions！这大概率就是样式没生效的核心原因。

修正后的核心代码片段：

// 先创建样式集合，这里可以加字体和背景色设置
const styleSet = window.WebChat.createStyleSet({
  // 机器人消息气泡背景
  bubbleBackground: 'rgba(0, 0, 255, .1)',
  // 用户消息气泡背景
  bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
  // 机器人消息字体样式
  bubbleText: {
    fontFamily: 'Arial, sans-serif',
    fontSize: '14px',
    color: '#333'
  },
  // 用户消息字体样式
  bubbleFromUserText: {
    fontFamily: 'Arial, sans-serif',
    fontSize: '14px',
    color: '#fff'
  }
});

// 渲染Web Chat时，正确传入styleSet参数
window.WebChat.renderWebChat(
  {
    directLine: Object.assign(
      {},
      d1,
      {
        postActivity: activity => {
          const newActivity = Object.assign({}, activity, {
            channelData: { "siteDomain": siteDomain }
          });
          return d1.postActivity(newActivity);
        }
      }
    ),
    styleSet // 这里必须是styleSet，不是styleSetOptions！
  },
  document.getElementById('webchat')
);

2. 确认Web Chat版本的属性兼容性 #

你用的是最新版CDN链接，不同版本的Web Chat对样式属性的命名可能有细微差别。当前最新版的核心样式属性是：

• 气泡背景：bubbleBackground（机器人消息）、bubbleFromUserBackground（用户消息）
• 字体相关：bubbleText和bubbleFromUserText，可以在这两个属性里定义fontFamily、fontSize、color等样式

3. 备选方案：用自定义CSS强制覆盖 #

如果StyleSet的方式还是没效果，你可以直接写CSS来覆盖默认样式，把这段代码加到你的HTML <head>里或者外部样式文件：

/* 机器人消息气泡 */
#webchat .webchat__bubble__content {
  background-color: rgba(0, 0, 255, .1) !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
}

/* 用户消息气泡 */
#webchat .webchat__bubble__content--from-user {
  background-color: rgba(0, 255, 0, .1) !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
}

加!important是为了确保自定义样式能覆盖默认的内联样式。

4. 别忘了清缓存！ #

有时候浏览器会缓存旧的Web Chat脚本，导致新样式不生效。你可以试试清除浏览器缓存，或者给CDN链接指定具体版本（比如https://cdn.botframework.com/botframework-webchat/4.15.0/webchat.js），强制加载最新的脚本文件。

最后总结 #

最关键的问题就是你传参时的参数名错误，把styleSetOptions改成styleSet应该就能解决大部分问题。如果还有其他细节样式要调整，结合StyleSet和自定义CSS的方式就能实现你想要的效果啦。

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