如何为外接REST式生成式LLM的Teams AI聊天机器人实现自定义Emoji反馈

前端交互实现 #

直接在每条机器人回复的消息容器里加👍、👎按钮，搭配隐藏的文本输入框，用基础的前端技术就能搞定：

• HTML结构示例：

  <div class="bot-message">
    <p>这里是机器人返回的内容</p>
    <div class="feedback-buttons">
      <button class="feedback-btn" data-type="like" data-msg-id="msg_001">👍</button>
      <button class="feedback-btn" data-type="dislike" data-msg-id="msg_001">👎</button>
    </div>
    <!-- 默认隐藏的反馈输入区域 -->
    <div class="feedback-box hidden" data-msg-id="msg_001">
      <textarea placeholder="说说你的具体反馈..."></textarea>
      <button class="submit-btn" data-msg-id="msg_001">提交反馈</button>
    </div>
  </div>
  

• JS逻辑处理：

  // 监听表情按钮点击，显示对应输入框
  document.querySelectorAll('.feedback-btn').forEach(btn => {
    btn.onclick = function() {
      const msgId = this.dataset.msgId;
      const feedbackType = this.dataset.type;
      const inputBox = document.querySelector(`.feedback-box[data-msg-id="${msgId}"]`);
      inputBox.classList.remove('hidden');
      // 给提交按钮绑定反馈类型
      inputBox.querySelector('.submit-btn').dataset.type = feedbackType;
    };
  });
  
  // 监听反馈提交，发送到后端
  document.querySelectorAll('.submit-btn').forEach(btn => {
    btn.onclick = function() {
      const msgId = this.dataset.msgId;
      const feedbackType = this.dataset.type;
      const feedbackText = this.previousElementSibling.value.trim();
      
      if (feedbackText) {
        fetch('/api/save-feedback', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            message_id: msgId,
            type: feedbackType,
            content: feedbackText
          })
        }).then(res => {
          if (res.ok) {
            // 提交成功后重置并隐藏输入框
            this.previousElementSibling.value = '';
            this.parentElement.classList.add('hidden');
          }
        });
      }
    };
  });
  

• 简单CSS样式：

  .hidden { display: none; }
  .feedback-buttons button { border: none; background: transparent; font-size: 1.3rem; cursor: pointer; margin: 0 8px; }
  .feedback-box textarea { width: 100%; height: 70px; padding: 8px; margin: 10px 0; }
  

后端处理流程 #

主要负责接收前端的反馈数据并存储，同时要给每条机器人回复分配唯一ID：

1. 生成消息唯一标识：机器人每次返回消息时，生成一个唯一ID（比如UUID），前端渲染时把这个ID绑定到消息容器和反馈元素上，确保反馈能精准对应到这条回复。
2. 存储反馈数据：用数据库（MySQL、MongoDB都行）建一张反馈表，字段包括message_id（关联回复ID）、feedback_type（like/dislike）、feedback_content（用户输入文本）、created_at（时间戳）。
3. 实现接收接口：比如用Node.js+Express写个接口：

app.post('/api/save-feedback', async (req, res) => {
  const { message_id, type, content } = req.body;
  // 校验参数合法性
  if (!message_id || !['like', 'dislike'].includes(type) || !content) {
    return res.status(400).json({ err: '参数不符合要求' });
  }
  try {
    // 写入数据库，这里是伪代码，根据你的数据库类型调整
    await db.query(
      'INSERT INTO feedbacks (message_id, type, content, created_at) VALUES (?, ?, ?, NOW())',
      [message_id, type, content]
    );
    res.status(200).json({ success: true });
  } catch (err) {
    console.error('存储反馈出错:', err);
    res.status(500).json({ err: '提交失败' });
  }
});

关键注意点 #

• 必须给每条机器人回复分配唯一ID，不然反馈无法对应到具体内容。
• 前端要控制输入框的显示状态，避免用户点击多个表情后弹出一堆输入框。
• 后端要做好参数校验和异常捕获，防止无效数据入库。

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