Tutorial: Transcripción descargable de una conversación

Puede personalizar el chat web para ofrecer a sus clientes la opción de descargar una transcripción del historial de la conversación.

Para obtener una versión completa y funcional del ejemplo que se describe en este tutorial, consulta el historial de descargas del chat web del asistente de IA.

Para poder descargar la transcripción de una conversación, este ejemplo añade una opción de menú personalizada al menú de desbordamiento de la cabecera de la ventana de chat:

Al hacer clic en esta opción del menú, se inicia la descarga de un archivo que contiene el historial completo de la conversación en formato CSV (CSV).

1. Crea un controlador para los send eventos receive y. En este manejador, guarda cada mensaje entrante o saliente en una lista (messages) para mantener un historial de la conversación.

    const messages = [];

    function saveMessage(event) {
      messages.push(event.data);
    }

1. Crea un controlador para el history:begin evento, que se activa cuando se vuelve a cargar el chat web desde el historial de la sesión. En este manejador, guarda cualquier historial de sesión recargado en la lista.

    function saveHistory(event) {
      messages.push(...event.messages);
    }

1. En tu onLoad controlador de eventos, utiliza el método on() de instancia para suscribirte a los eventos send, receivehistory:begin , y, registrando los controladores adecuados como funciones de devolución de llamada.

    instance.on({ type: 'send', handler: saveMessage });
    instance.on({ type: 'receive', handler: saveMessage });
    instance.on({ type: 'history:begin', handler: saveHistory });

1. Crea una función que convierta los mensajes que se guardan en la lista ' messages ' al formato que quieras proporcionar en el fichero descargado. Esta conversión necesita acomodar cualquier tipo de respuesta que la conversación pueda incluir (como texto, imágenes, opciones o transferencias a un agente humano).

En este ejemplo, convertimos los mensajes a un formato de archivo de hoja de cálculo ( CSV ) que se puede abrir con una aplicación como Microsoft Excel. La primera columna de cada línea es una etiqueta que indica si el mensaje procede del cliente (You) o del asistente (Lendyr).

Esta función se basa en una función auxiliar (createDownloadText) que formatea el texto de cada línea. Puedes ver la implementación de esta función auxiliar en el ejemplo completo.

    function createDownload() {
      const downloadLines = [createDownloadText('From', 'Message')];

      messages.forEach(message => {
        if (message.input?.text) {
          // This is a message that came from the user.
          downloadLines.push(createDownloadText('You', message.input.text));
        } else if (message.output?.generic?.length) {
          // This is a message that came from the assistant. It can contain an array of individual message items.
          message.output?.generic.forEach(messageItem => {
            // This is only handling a text response but you can handle other types of responses here as well as
            // custom responses.
            if (messageItem?.text) {
              downloadLines.push(createDownloadText('Lendyr', messageItem.text));
            }
          });
        }
      });

      return downloadLines.join('\n');
    }

1. Crear una función que inicie la descarga del archivo del historial de conversaciones. Esta función llama a la función ' createDownload() ' para generar el contenido a descargar. A continuación, simula que se hace clic en un enlace para iniciar la descarga, utilizando un nombre de archivo generado a partir de la fecha actual.

    function doDownload() {
      const downloadContent = createDownload();

      const blob = new Blob([downloadContent], { type: 'text/csv' });
      const url = URL.createObjectURL(blob);

      // To automatically trigger a download, we have to create a fake "a" element and then click it.
      const timestamp = new Date().toISOString().replace(/[_:]/g, '-').replace(/.[0-9][0-9][0-9]Z/, '');
      const a = document.createElement('a');
      a.setAttribute('href', url);
      a.setAttribute('download', `Chat History ${timestamp}.csv`);
      a.click();
    }

1. En tu onLoad controlador de eventos, utiliza el método updateCustomMenuOptions() de instancia para añadir una opción de menú personalizada que los clientes puedan utilizar para descargar el historial de conversaciones. Añade esta línea inmediatamente antes de la llamada al método de instancia ' render() '.

    instance.updateCustomMenuOptions('bot', [{ text: 'Download history', handler: doDownload }]);

Para ver el código completo y funcional, consulte el historial de descargas del ejemplo de chat web del asistente de IA.