如何在Angular项目中为Microsoft Bot Framework WebChat设置背景图片

以下代码可直接在已完成基础WebChat集成的Angular项目中复用：

方案1：通过Angular样式穿透实现（推荐，无需修改原有WebChat初始化逻辑） #

直接在你放置WebChat组件的Angular组件样式文件（.css/.scss）中添加如下代码：

/* 聊天消息列表容器添加背景图 */
::ng-deep .webchat__basic-transcript {
  /* 本地图片建议放在src/assets目录下，路径替换为你的实际图片路径 */
  background-image: url('/assets/chat-background.png') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  /* 如需调整背景透明度，可添加以下两行配置，数值可按需调整 */
  background-color: rgba(255, 255, 255, 0.85) !important;
  background-blend-mode: overlay !important;
}

/* 可选：调整消息气泡透明度，避免遮挡背景图 */
/* 机器人/对方发送的消息气泡 */
::ng-deep .webchat__bubble__content {
  background-color: rgba(255, 255, 255, 0.9) !important;
}
/* 当前用户发送的消息气泡 */
::ng-deep .webchat__bubble--from-user .webchat__bubble__content {
  background-color: rgba(0, 120, 212, 0.9) !important;
  color: #ffffff !important;
}

方案2：通过WebChat原生styleSet配置实现 #

如果你习惯通过WebChat的官方样式配置项修改样式，可直接在组件的ts初始化逻辑中添加如下代码：

import { createStyleSet } from 'botframework-webchat';

// 在WebChat初始化逻辑中添加样式配置
const customStyleSet = createStyleSet({
  // 此处保留你之前已经修改的其他样式配置
});

// 覆写聊天容器的背景样式
customStyleSet.transcript = {
  ...customStyleSet.transcript,
  backgroundImage: 'url(/assets/chat-background.png)',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center'
};

// 将customStyleSet作为参数传给WebChat组件的styleSet属性即可

注意事项 #

• 本地背景图片建议存放在项目src/assets目录下，路径填写/assets/文件名.后缀即可，避免相对路径导致的加载失败问题
• 添加!important是为了覆盖WebChat自带的默认样式优先级，保证自定义样式生效

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