如何在基于Dialogflow(api.ai)的网页聊天机器人中添加快捷回复

我来帮你搞定这个快捷回复功能！其实原理很简单：我们要从Dialogflow的返回数据里提取预设的快捷回复选项，然后在网页中生成可点击的按钮，用户点击按钮后自动把按钮文本作为输入发送给机器人。下面是具体的修改步骤，直接对应你的代码：

1. 修改HTML结构，添加快捷回复容器 #

在你的spoken-response容器里，新增一个用来放快捷回复按钮的div：

<div id="spokenResponse" class="spoken-response">
  <div class="spoken-response__text"></div>
  <!-- 新增快捷回复容器 -->
  <div id="quickReplies" class="quick-replies"></div>
</div>

2. 添加快捷回复按钮的CSS样式 #

在你的<style>标签里，新增以下样式，让按钮看起来更美观且适配现有风格：

.quick-replies {
  padding: 1em;
  display: flex;
  gap: 0.8em;
  flex-wrap: wrap;
  background-color: #040E23;
}
.quick-reply-btn {
  background-color: #126178;
  border: 1px solid #549EAF;
  color: #A6CAE6;
  cursor: pointer;
  padding: 0.5em 1.2em;
  border-radius: 22px;
  font-size: 16px;
  font-family: "Titillium Web", Arial, sans-serif;
  transition: all 0.35s ease-in;
}
.quick-reply-btn:hover {
  background-color: #1888A9;
  color: #183035;
}

3. 修改JavaScript逻辑，处理Dialogflow的快捷回复数据 #

首先，更新prepareResponse函数，让它在处理语音回复的同时，调用新的函数来渲染快捷回复：

function prepareResponse(val) {
  var debugJSON = JSON.stringify(val, undefined, 2),
      spokenResponse = val.result.speech;
  
  respond(spokenResponse);
  // 新增：渲染快捷回复
  renderQuickReplies(val.result.fulfillment.messages);
  debugRespond(debugJSON);
}

然后，添加一个专门生成快捷回复按钮的函数：

function renderQuickReplies(messages) {
  const quickRepliesContainer = document.getElementById('quickReplies');
  // 先清空之前的按钮，避免重复显示
  quickRepliesContainer.innerHTML = '';
  
  // 遍历Dialogflow返回的所有消息，找到类型为"quickReplies"的消息
  messages.forEach(msg => {
    // Dialogflow中快捷回复消息的type是2，且包含replies数组
    if (msg.type === 2 && msg.replies && msg.replies.length > 0) {
      msg.replies.forEach(replyText => {
        const btn = document.createElement('button');
        btn.className = 'quick-reply-btn';
        btn.textContent = replyText;
        // 绑定点击事件：点击后自动把按钮文本填入输入框并发送
        btn.addEventListener('click', () => {
          setInput(replyText);
        });
        quickRepliesContainer.appendChild(btn);
      });
    }
  });
}

4. Dialogflow后台配置快捷回复 #

别忘了在Dialogflow的意图设置里添加快捷回复：

• 打开你的Dialogflow控制台，找到要添加快捷回复的意图
• 在“响应”部分，点击“添加响应”，选择“快捷回复”
• 输入你想要的选项（比如"天气怎么样？"、"今天有什么活动？"），保存意图

测试效果 #

现在当用户触发这个意图时，网页机器人不仅会显示语音回复文本，还会在下方生成你设置的快捷回复按钮，用户点击按钮后，按钮文本会自动填入输入框并发送给机器人，完全不需要手动输入！

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