Tutorial: implementando botões de opção customizada no bate-papo da web

Este tutorial mostra como substituir a renderização padrão de uma resposta de opções por seus próprios botões clicáveis customizados.

Para obter uma versão de trabalho completa do exemplo descrito neste tutorial, consulte Botões customizados para watsonx Assistant bate-papo da web.

Por padrão, o bate-papo da web sempre exibe uma resposta de opções como um conjunto de botões clicáveis (para 4 ou menos opções) ou uma lista suspensa (para 5 ou mais opções). Este exemplo mostra a renderização padrão de uma resposta de opções com 3 opções:

Para este tutorial, substituiremos essa renderização padrão por botões maiores no estilo de cartão:

Como a renderização de uma resposta de opções não pode ser modificada, isso será feito interceptando quaisquer respostas de opções recebidas do assistente e convertendo-as em respostas customizadas (user_defined) Podemos então implementar uma renderização customizada para essas respostas.

1. Crie um manipulador para o evento pre:receive. Neste manipulador, procure quaisquer respostas option na carga útil da mensagem e converta-as em respostas 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. Crie um manipulador para o evento customResponse. Esse manipulador renderiza os botões customizados, usando um estilo CardButton customizado que podemos definir no CSS.. (É possível ver a definição desse estilo no exemplo completo.).

   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. Em seu manipulador de eventos do onLoad, use o método da instância on() para assinar os eventos pre:receive e customResponse, registrando os manipuladores como retornos de chamada

   instance.on({ type: 'customResponse', handler: customResponseHandler });
   instance.on({ type: 'pre:receive', handler: preReceiveHandler });
   

4. Crie um manipulador de clique para responder quando o cliente clicar em um dos botões customizados. No manipulador, use o método da instância do send() para enviar uma mensagem para o assistente, usando o rótulo do botão como o texto da mensagem

   Além disso, estamos incluindo a classe CSS customizada CardButton--selected no botão clicado, mudando sua aparência para mostrar que ela foi selecionada. (Essa classe também é definida no exemplo completo.)

   function onClick(messageItem, button, fullMessage, itemIndex) {
     webChatInstance.send({ input: { text: messageItem.label }});
     button.classList.add('CardButton--selected');
   }
   

5. Se o usuário recarrega a página ou navega para uma página diferente, o bate-papo da Web é recarregado do histórico de sessão. Se isso acontecer, queremos preservar o estado "selecionado" de quaisquer botões clicados.

   Para fazer isso, no manipulador onClick, use o método de instância updateHistoryUserDefined para armazenar uma variável no histórico de sessão que indica qual botão foi clicado

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

   Em seguida, no manipulador customResponse, leia esse valor e use-o para configurar os estados iniciais dos botões em quaisquer respostas customizadas já no histórico de sessão.

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

Para obter o código de trabalho completo, consulte o exemplo de Botões customizados para watsonx Assistant chat da web. O exemplo também mostra como desativar os botões em uma resposta customizada após o cliente ter enviado uma mensagem, o que evita o uso dos botões para enviar uma mensagem fora de ordem