IBM Cloud Docs
Guía de aprendizaje: implementación de botones de opción personalizados en la conversación web

Guía de aprendizaje: implementación de botones de opción personalizados en la conversación web

Esta guía de aprendizaje muestra cómo puede sustituir la representación predeterminada de una respuesta de opciones por sus propios botones pulsables personalizados.

Para obtener una versión completa y funcional del ejemplo descrito en esta guía de aprendizaje, consulte Botones personalizados para la conversación web de watsonx Assistant.

De forma predeterminada, el chat web siempre muestra una respuesta de opciones como un conjunto de botones pulsables (para 4 o menos opciones) o como una lista desplegable (para 5 o más opciones). Este ejemplo muestra la representación por omisión de una respuesta de opciones con 3 opciones:

Respuesta de opciones representada como 3 botones

Para esta guía de aprendizaje, sustituiremos esta representación por omisión con botones más grandes de estilo de tarjeta:

Respuesta de opciones representada como 3 botones de estilo de tarjeta personalizada

Puesto que la representación de una respuesta de opciones no se puede modificar, lo haremos interceptando las respuestas de opciones entrantes del asistente y convirtiéndolas en respuestas personalizadas (user_defined). A continuación, podemos implementar una representación personalizada para estas respuestas.

  1. Cree un manejador para el suceso pre:receive. En este manejador, busque las respuestas option en la carga útil de mensajes y conviértalas en respuestas 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. Cree un manejador para el suceso customResponse. Este manejador representa los botones personalizados, utilizando un estilo CardButton personalizado que podemos definir en el CSS. (Puede ver la definición de este estilo en el ejemplo 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. En el manejador de sucesos onLoad, utilice el método de instancia on() para suscribirse a los sucesos pre:receive y customResponse, registrando los manejadores como devoluciones de llamada.

    instance.on({ type: 'customResponse', handler: customResponseHandler });
    instance.on({ type: 'pre:receive', handler: preReceiveHandler });
    
  4. Cree un manejador de pulsaciones para responder cuando el cliente pulse uno de los botones personalizados. En el manejador, utilice el método de instancia send() para enviar un mensaje al asistente, utilizando la etiqueta del botón como texto del mensaje.

    Además, estamos añadiendo la clase CSS personalizada CardButton--selected al botón pulsado, cambiando su aspecto para mostrar que se ha seleccionado. (Esta clase también se define en el ejemplo completo.)

    function onClick(messageItem, button, fullMessage, itemIndex) {
      webChatInstance.send({ input: { text: messageItem.label }});
      button.classList.add('CardButton--selected');
    }
    
  5. Si el usuario vuelve a cargar la página o navega a una página diferente, la conversación web se vuelve a cargar desde el historial de sesiones. Si esto sucede, queremos conservar el estado "seleccionado" de cualquier botón pulsado.

    Para ello, en el manejador onClick, utilice el método de instancia updateHistoryUserDefined para almacenar una variable en el historial de sesiones que indica qué botón se ha pulsado.

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

    A continuación, en el manejador customResponse, lea este valor y utilícelo para establecer los estados iniciales de los botones en las respuestas personalizadas que ya estén en el historial de sesiones.

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

Para ver el código de trabajo completo, consulte el ejemplo Botones personalizados para watsonx Assistant conversación web. El ejemplo también muestra cómo inhabilitar los botones en una respuesta personalizada después de que el cliente haya enviado un mensaje, lo que impide utilizar los botones para enviar un mensaje desordenado.