IBM Cloud Docs
教程: 在 Web 聊天中实现定制选项按钮

教程: 在 Web 聊天中实现定制选项按钮

本教程说明如何将选项响应的缺省呈现替换为您自己的定制可单击按钮。

要获取本教程中描述的示例的完整工作版本,请参阅 watsonx Assistant Web 聊天的定制按钮

缺省情况下,Web 聊天始终将选项响应显示为一组可单击的按钮 (对于 4 或更少的选项) 或下拉列表 (对于 5 或更多选项)。 此示例显示了使用 3 选项的选项响应的缺省呈现:

选项响应呈现为 3 按钮

对于本教程,我们将使用更大的卡式按钮来替换此缺省呈现:

选项响应呈现为 3 定制卡样式按钮

由于无法修改选项响应的呈现,因此我们将通过拦截来自助手的任何入局选项响应并将其转换为定制 (user_defined) 响应来执行此操作。 然后,我们可以为这些响应实现定制呈现。

  1. pre:receive 事件创建处理程序。 在此处理程序中,在消息有效内容中查找任何 option 响应,并将其转换为 user_defined 响应。

    function preReceiveHandler(event) {
      const message = event.data;
      if (message.output.generic) {
        message.output.generic.forEach(messageItem => {
          if (messageItem.response_type === 'option') {
            messageItem.response_type = 'user_defined';
          }
        })
      }
    }
    
  2. customResponse 事件创建处理程序。 此处理程序使用我们可以在 CSS 中定义的定制 CardButton 样式来呈现定制按钮。 (您可以在 完整示例中查看此样式的定义。)

    function customResponseHandler(event) {
      const { message, element, fullMessage } = event.data;
      message.options.forEach((messageItem, index) => {
        const button = document.createElement('button');
        button.innerHTML = messageItem.label;
        button.classList.add('CardButton');
        button.addEventListener('click', () => onClick(messageItem, button,     fullMessage, index));
        element.appendChild(button);
      });
    }
    
  3. onLoad 事件处理程序中,使用 on() 实例方法来预订 pre:receivecustomResponse 事件,并将处理程序注册为回调。

    instance.on({ type: 'customResponse', handler: customResponseHandler });
    instance.on({ type: 'pre:receive', handler: preReceiveHandler });
    
  4. 创建单击处理程序以在客户单击其中一个定制按钮时进行响应。 在处理程序中,使用 send() 实例方法将消息发送到助手,使用按钮标签作为消息文本。

    此外,我们将定制 CSS 类 CardButton--selected 添加到单击的按钮,更改其外观以显示其已选中。 (此类也在 完整示例中定义。)

    function onClick(messageItem, button, fullMessage, itemIndex) {
      webChatInstance.send({ input: { text: messageItem.label }});
      button.classList.add('CardButton--selected');
    }
    
  5. 如果用户重新装入页面或浏览到其他页面,那么 Web 交谈将从会话历史记录中重新装入。 如果发生这种情况,我们希望保留任何已单击按钮的“已选择”状态。

    为此,在 onClick 处理程序中,使用 updateHistoryUserDefined 实例方法在会话历史记录中存储一个变量,该变量指示单击了哪个按钮。

    webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });
    

    然后,在 customResponse 处理程序中,读取此值并使用它来设置会话历史记录中已有的任何定制响应中按钮的初始状态。

    if (fullMessage.history?.user_defined?.selectedIndex === index) {
      button.classList.add('CardButton--selected');
    }
    

有关完整的工作代码,请参阅 watsonx Assistant Web 聊天的定制按钮 示例。 该示例还显示了如何在客户发送消息后禁用定制响应中的按钮,这将阻止使用这些按钮来发送不按顺序的消息。