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:
Para esta guía de aprendizaje, sustituiremos esta representación por omisión con botones más grandes de estilo de tarjeta:
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.
-
Cree un manejador para el suceso
pre:receive
. En este manejador, busque las respuestasoption
en la carga útil de mensajes y conviértalas en respuestasuser_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'; } }) } }
-
Cree un manejador para el suceso
customResponse
. Este manejador representa los botones personalizados, utilizando un estiloCardButton
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); }); }
-
En el manejador de sucesos
onLoad
, utilice el método de instanciaon()
para suscribirse a los sucesospre:receive
ycustomResponse
, registrando los manejadores como devoluciones de llamada.instance.on({ type: 'customResponse', handler: customResponseHandler }); instance.on({ type: 'pre:receive', handler: preReceiveHandler });
-
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'); }
-
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 instanciaupdateHistoryUserDefined
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.