如何重构聊天气泡并在其内部添加自定义星级评分器？

当然可以对聊天气泡本身做重构来实现星级评分器的内部底部放置，以下是几种可行的落地思路：

1. 直接替换默认气泡组件 #

绕过activityMiddleware的包裹限制，直接替换框架默认的聊天气泡渲染组件。以Bot Framework Web Chat为例，你可以找到对应Activity或Attachment的默认渲染组件，将其改写为内置评分器的版本：

• 核心逻辑：在组件内部通过消息的自定义属性（比如channelData.needsRating）判断是否需要显示评分器，若是则在气泡内容的底部区域插入评分器元素。

示例伪代码：

// 自定义气泡组件
const CustomBubble = (props) => {
  const { activity } = props;
  const needRating = activity.channelData?.needsRating || false;

  return (
    <div className="chat-bubble">
      <div className="bubble-content">{activity.text}</div>
      {needRating && <StarRating activityId={activity.id} />}
    </div>
  );
};

// 在Web Chat中注册自定义组件
window.WebChat.renderWebChat({
  ...webChatProps,
  components: {
    ...webChatProps.components,
    Activity: CustomBubble
  }
}, document.getElementById('webchat'));

2. 通过DOM操作精准插入评分器 #

如果暂时无法替换组件，可在activityMiddleware中完成气泡包裹后，用DOM选择器定位到气泡内部的内容容器，将评分器直接插入容器末尾：

• 注意要确保选择器的准确性，同时处理消息动态加载（如滚动加载历史消息）的场景，避免遗漏评分器插入逻辑。

示例伪代码：

const ratingMiddleware = () => next => card => {
  const element = next(card);
  if (card.activity.channelData?.needsRating) {
    // 创建评分器元素
    const ratingElement = document.createElement('div');
    ratingElement.className = 'star-rating';
    // 插入到气泡内容底部
    const bubbleContent = element.querySelector('.bubble-content');
    bubbleContent && bubbleContent.appendChild(ratingElement);
  }
  return element;
};

3. 用CSS定位实现视觉内嵌效果 #

若前两种方法受限于框架约束，可通过CSS调整评分器的定位，让它视觉上处于气泡内部底部：

• 给气泡容器设置position: relative，给评分器设置绝对定位，同时调整气泡内边距避免内容被遮挡。

示例CSS：

.chat-bubble {
  position: relative;
  padding-bottom: 32px; /* 预留评分器空间 */
}

.star-rating {
  position: absolute;
  bottom: 6px;
  left: 12px;
  display: flex;
  gap: 4px;
}

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