Cambiar el CSS de Chatbot incrustado como IFRAME

2020-02-27 botframework

PROBLEMA:

Hoy mi bot de chat dejó de funcionar y comenzó a dar el siguiente error. No se hicieron cambios de mi parte cuando esto comenzó a suceder.

ingrese la descripción de la imagen aquí No pude encontrar ningún error en el registro de la consola. Luego probé el bot con Emulator y en la función Prueba de Azure Portal en Webchat y el bot funcionó bien. Este bot usa webchat (incrustación de iframe) así como también el canal DirectLine. El canal DirectLine funciona bien, solo el chat web no funciona.

Entonces, para probar mi teoría de que recibo el error debido a que Microsoft actualiza el chat web. Usé el código de inserción en Azure Portal para usar el último chat web y el canal de chat comenzó a funcionar.

BREVE HISTORIA: Para modificar la interfaz de usuario del chat web, utilicé este método para modificar la interfaz de usuario del IFrame de mi bot. Este método requiere descargar la fuente de IFrame, crear una página HTML y usar esa página como fuente de su IFRAME en su sitio web (puede ver la personalización en la imagen).

Ahora que comencé a tener el problema que mencioné anteriormente, intenté hacer lo mismo con la última versión de webchat, pero no funciona. Webchat no envía mensajes y no puedo encontrar qué archivo CSS está utilizando esta nueva versión de webchat.

PARA QUÉ NECESITO ORIENTACIÓN:

  1. Cualquiera de las dos formas de continuar usando el viejo chat web con la interfaz de usuario adecuada

O

  1. ¿Cómo actualizar la interfaz de usuario de esta nueva versión de webchat?

Answers

No puedo aconsejar que arreglemos la versión del iframe, pero esto ya no era oficialmente compatible, y con la última actualización de webchat, Microsoft se está moviendo más a recomendar botframework-webchat (directline) para formatear la interfaz de usuario. Un buen lugar para comenzar es la muestra de marca .

Esa muestra no detalla las opciones en el código, pero si echa un vistazo al archivo de opciones predeterminado , eso debería darle todo lo que necesita para personalizar el chat de la manera que desee.

Lo que esto no hace es configurar el encabezado que solía estar presente en ootb webchat (y que te veo personalizado en tu ejemplo). Ahora, la mejor manera es hacerlo en html / css, y probablemente pueda reutilizar lo que hizo para su opción personalizada. Acabo de crear un DIV adicional, height: 40px; en height: 40px; , luego configure el webchat DIV a la height: calc(100% - 40px); . Cualquiera que sea bueno con HTML probablemente pueda obtener algo mejor que esto, esencialmente solo construye su página como quiera en ese momento y la implementación de chat web solo controla el área de chat en sí (esencialmente el cuadro de envío y el área de respuesta / burbuja). También agregué un botón personalizado a mi encabezado.

<div id="chatbotTitle"><h3 style="padding-left:10px;">OEM CSC Support Bot</h3><button class="btn" id="transcriptButton">Email Transcript</button></div>
<div id="webchat" role="main"></div>

El error que está recibiendo no es un problema de chat web. Es un problema en su bot que se informa a través del chat web porque ese es el cliente que se está utilizando.

Por lo general, este error se refiere a una actividad entrante que su bot no sabe cómo manejar (es decir, su lógica de bot). Por ejemplo, tiene un paso de cascada en su diálogo principal que, dependiendo de la respuesta del usuario, abre un diálogo de componente. Ese diálogo obtiene información del usuario (nombre, edad, etc.) que, cuando se completa, vuelve al diálogo principal. Sin embargo, el siguiente paso no está preparado ya que quizás el usuario salió de ese diálogo prematuramente o no respondió a todas las preguntas como se esperaba.

Cualquiera sea el caso, porque no está configurado para manejar la actividad entrante, no está devolviendo el estado de giro del diálogo. Tendrá que depurar su código, pasando a través de él, para ver qué "paso" es la causa raíz.

Para mí, he experimentado esto cuando configuré Web Chat para enviar un evento a mi bot. Mi bot no sabía qué hacer con la actividad de tipo de evento entrante y produciría ese error.

Esperanza de ayuda!

Related