チュートリアル: ダウンロード可能な会話のトランスクリプトの提供

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

このチュートリアルで説明されているサンプルの完全な作業バージョンについては、 watsonx Assistant Web チャットのダウンロード履歴を参照してください。

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

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

1. send および receive イベントのハンドラーを作成します。 このハンドラーでは、会話の履歴を維持するために、各着信メッセージまたは発信メッセージをリスト (messages) に保存します。

   const messages = [];
   
   function saveMessage(event) {
     messages.push(event.data);
   }
   

2. history:begin イベントのハンドラーを作成します。これは、セッション履歴から Web チャットが再ロードされたときに起動されます。 このハンドラーで、再ロードされたセッション履歴をリストに保存します。

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

3. 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 });
   

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

5. 会話履歴ファイルのダウンロードを開始する機能を作成します。 この関数は、 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();
   }
   

6. onLoad イベント・ハンドラーで、 updateCustomMenuOptions() インスタンス・メソッドを使用して、顧客が会話履歴をダウンロードするために使用できるカスタム・メニュー・オプションを追加します。 この行は、 render() インスタンス・メソッドの呼び出しの直前に追加します。

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

完全な作業コードについては、 watsonx Assistant Web チャットのダウンロード履歴 の例を参照してください。