チュートリアルダウンロード可能な会話記録の提供

ウェブチャットをカスタマイズして、会話履歴のトランスクリプトをダウンロードするオプションを顧客に提供することができます。

このチュートリアルで説明する例の完全な動作バージョンは、AIアシスタントウェブチャットのダウンロード履歴を参照してください。

会話記録のダウンロードをサポートするために、この例ではチャットウィンドウのヘッダーにあるオーバーフローメニューにカスタムメニューオプションを追加しています：

トランスクリプトをダウンロード」メニューオプションを示す画面キャプチャ — トランスクリプトをダウンロードする

このメニューオプションをクリックすると、完全な会話履歴をカンマ区切り（CSV）形式で含むファイルのダウンロードが開始されます。

sendと 'receiveイベント用のハンドラを作成する。このハンドラでは、会話の履歴を管理するために、送受信されるメッセージをそれぞれリスト（messages）に保存する。
```
const messages = [];

function saveMessage(event) {
  messages.push(event.data);
}
```
ウェブチャットがセッション履歴からリロードされたときに発生する 'history:beginイベント用のハンドラを作成します。このハンドラで、リロードされたセッション履歴をリストに保存する。
```
function saveHistory(event) {
  messages.push(...event.messages);
}
```
onLoadイベントハンドラで、'on()インスタンスメソッドを使って'send、'receive、'history:beginイベントをサブスクライブし、適切なハンドラをコールバックとして登録する。
```
instance.on({ type: 'send', handler: saveMessage });
instance.on({ type: 'receive', handler: saveMessage });
instance.on({ type: 'history:begin', handler: saveHistory });
```

messagesリストに保存されているメッセージを、ダウンロードしたファイルに提供したいフォーマットに変換する関数を作成する。この変換は、会話に含まれる可能性のあるあらゆる応答タイプ（テキスト、画像、オプション、人間のエージェントへの転送など）に対応する必要がある。

この例では、メッセージをMicrosoft Excelなどのアプリケーションで開けるCSVファイル形式に変換します。各行の最初の列は、メッセージの発信元が顧客（You）かアシスタント（Lendyr）かを示すラベルです。

この関数は、各行のテキストを整形するヘルパー関数（createDownloadText）に依存している。このヘルパー関数の実装は、完全な例で見ることができる。

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

会話履歴ファイルのダウンロードを開始する関数を作成する。この関数は、ダウンロードするコンテンツを生成するために「createDownload()関数を呼び出す。そして、現在の日付から生成されたファイル名を使って、リンクをクリックしてダウンロードを開始するシミュレーションを行う。

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

onLoadイベントハンドラで、'updateCustomMenuOptions()インスタンスメソッドを使用して、顧客が会話履歴をダウンロードするために使用できるカスタムメニューオプションを追加します。 render()インスタンスメソッドの呼び出しの直前にこの行を追加する。
```
instance.updateCustomMenuOptions('bot', [{ text: 'Download history', handler: doDownload }]);
```

完全な動作コードについては、「AIアシスタントウェブチャットのダウンロード履歴例を参照のこと。