Tutoriel : Fournir une transcription de conversation téléchargeable

Vous pouvez personnaliser le chat en ligne pour offrir à vos clients la possibilité de télécharger une transcription de l'historique de la conversation.

Pour obtenir une version complète et opérationnelle de l'exemple décrit dans ce tutoriel, consultez l'historique des téléchargements pour l'assistant de conversation en ligne de l'IA.

Pour permettre le téléchargement de la transcription d'une conversation, cet exemple ajoute une option de menu personnalisée au menu de débordement dans l'en-tête de la fenêtre de discussion :

Capture d'écran montrant l'option de menu "Télécharger la transcription" — Télécharger la transcription

En cliquant sur cette option de menu, vous lancez le téléchargement d'un fichier contenant l'historique complet des conversations au format CSV (comma-separated values).

Créez un gestionnaire pour les événements " send et " receive. Dans ce gestionnaire, chaque message entrant ou sortant est enregistré dans une liste (messages) afin de conserver un historique de la conversation.
```
const messages = [];

function saveMessage(event) {
  messages.push(event.data);
}
```
Créer un gestionnaire pour l'événement 'history:begin, qui est déclenché lorsque le web chat est rechargé à partir de l'historique de la session. Dans ce gestionnaire, l'historique des sessions rechargées est enregistré dans la liste.
```
function saveHistory(event) {
  messages.push(...event.messages);
}
```
Dans votre gestionnaire d'événements " onLoad, utilisez la méthode d'instance " on() pour vous abonner aux événements " send, " receive et " history:begin, en enregistrant les gestionnaires appropriés en tant que rappels.
```
instance.on({ type: 'send', handler: saveMessage });
instance.on({ type: 'receive', handler: saveMessage });
instance.on({ type: 'history:begin', handler: saveHistory });
```

Créez une fonction qui convertit les messages enregistrés dans la liste " messages au format que vous souhaitez fournir dans le fichier téléchargé. Cette conversion doit prendre en compte tous les types de réponses que la conversation peut inclure (texte, images, options ou transferts vers un agent humain).

Dans cet exemple, nous convertissons les messages dans un format de fichier CSV qui peut être ouvert avec une application telle que Microsoft Excel. La première colonne de chaque ligne est un libellé qui indique si le message provient du client (You) ou de l'assistant (Lendyr).

Cette fonction s'appuie sur une fonction d'aide (createDownloadText) qui formate le texte pour chaque ligne. Vous pouvez voir la mise en œuvre de cette fonction d'aide dans l'exemple complet.

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');
}

Créez une fonction qui lance le téléchargement du fichier d'historique des conversations. Cette fonction appelle la fonction " createDownload() pour générer le contenu à télécharger. Il simule ensuite un clic sur un lien pour lancer le téléchargement, en utilisant un nom de fichier généré à partir de la date actuelle.

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();
}

Dans votre gestionnaire d'événements " onLoad, utilisez la méthode d'instance " updateCustomMenuOptions() pour ajouter une option de menu personnalisée que les clients peuvent utiliser pour télécharger l'historique des conversations. Ajoutez cette ligne immédiatement avant l'appel à la méthode de l'instance " render()
```
instance.updateCustomMenuOptions('bot', [{ text: 'Download history', handler: doDownload }]);
```

Pour un code de travail complet, voir l'exemple " Historique des téléchargements pour AI assistant web chat