このサンプルコードを用いることで、Web Chatにおいて file:https:// からはじまる文字列に対してハイパーリンクを設定することができます。
Web ChatのUIを制御しているデフォルトのエンジンとして、markdown-itというものが使用されています。Web Chatでは、markdown-itの初期設定において file:https:// から始まる文字列を、セキュリティの問題から、単なる文字列として出力することになっています(QnA Makerで登録したマークダウンが file:https:// に対しては適応されません)。そのため、file:https:// に対してWeb Chat上でハイパーリンクを付ける場合には、レンダリングエンジンの設定を変える必要があります。
このサンプルではレンダリングエンジンとして、Markedを採用しています。また、サニタイジング処理も書かれています。ローカルファイルやファイルサーバ上のファイルリンクを特別な都合上ボットに載せたいという要求がある時のみ使用すべきサンプルと考えて頂き、セキュリティの管理に関しては、ご使用者様のご責任でお願いいたします。
Google Chrome, Microsoft Edge, Internet Explorer 11 で動作を確認済みです。
- Azureポータルでボットのチャネル設定から、Direct Lineを選択し、発行されるキーをコピーしてください。
- index.htmlの28行目 YOUR_SECRET_KEY を消し、コピーしたキーを貼り付けてください。
- 動作をローカル環境でご確認後、Azure Web Appのwwwroot配下に作成したindex.htmlを配置してください。
- 動作確認をお願いします。
本サンプルを用いることで file:https:// に対してもWeb Chatでハイパーリンク表示をさせることができますが、その後ユーザがファイルを直接ダウンロードできるかどうかの設定はブラウザ側の設定になります。Chromeではローカルファイルをダウンロードするための拡張機能が提供されておりますが、セキュリティの都合上採用できないという場合には、ボット側のUIで、ユーザにリンクをコピーすることを促すようなデザインを作る必要があるかと思います。
This sample code was created by William-san(https://github.com/compulim), a software engineer developing Web Chat. Corina-san(https://github.com/corinagum) also gave us some advice and it was really helpful. Thank you so much!