問題
Azure Bot Serviceからのメッセージで、タイトル部分 (太字)が省略されてしまう場合がある。
(画像中の「Windows 10の基本事項について説明します...」の...以降が省略されている)
関連記事: Azure QnA MakerとBot Serviceで歓迎メッセージ&よくある質問対応のチャットボットを作成する
対処法
Web chatのrichCardWrapTitle
プロパティをtrue
にすることで省略をオフにすることができる。
追加部分イメージ:
const styleOptions = {
richCardWrapTitle: 'true'
};
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ secret: 'YOUR_SECRET' }),
styleOptions
}, document.getElementById('webchat'));
クライアント側全体コード例:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Send welcome event</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
-->
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat"></div>
<script>
(async function () {
// In this demo, we are using Direct Line token from MockBot.
// Your client code must provide either a secret or a token to talk to your bot.
// Tokens are more secure. To learn about the differences between secrets and tokens
// and to understand the risks associated with using secrets, visit https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0
// const res = await fetch('https://shnaga-qna-bot.azurewebsites.net/directline/token', { method: 'POST' });
// const { token } = await res.json();
//
// We are using a customized store to add hooks to connect event
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
// When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
});
const styleOptions = {
richCardWrapTitle: 'true'
};
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: 'YOUR_TOKEN' }),
store,
styleOptions
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>
※YOUR_TOKEN
箇所をご自身のトークンに変更してください。
結果
無事にタイトル部分が省略されずに表示されるようになりました。
参考文献
Web Chat hosted samples
Azure QnA MakerとBot Serviceで歓迎メッセージ&よくある質問対応のチャットボットを作成する
Azure Bot ServiceのWebチャット画面でクライアント側からイベントを送る