Setup
我使用以下命令创建了一个 Azure QnA Web 聊天机器人QnAMaker https://www.qnamaker.ai/, Azure 机器人服务 https://azure.microsoft.com/en-us/services/bot-service/#overview,以及Bot 框架网络聊天 https://github.com/microsoft/BotFramework-WebChat/blob/master/README.mdJavaScript 中的客户端。
以下是我如何使用 HTML + JS 初始化机器人的示例:
<script src="https://cdn.botframework.com/botframework-webchat/4.6.0/webchat-es5.js"></script>
<div id="projekt-webchat" role="main"></div>
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
secret: 'SECRETHERE'
}),
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
locale: 'en-US',
botAvatarInitials: 'WC',
userAvatarInitials: 'WW'
},
document.getElementById('projekt-webchat')
);
我的机器人已连接到 QnA Maker 的知识库,该知识库具有QnA Pair像这样:
Question: gimmenumber
Answer: +49 5251 123456
本机浏览器检测
某些浏览器会将其呈现为可点击的超链接,然后我选择拨打该号码。但是,其他浏览器不会将电话号码视为超链接,因此我无法单击它
-
Works- 微软边缘41
-
Works- 微软EdgeHTML 16
-
Broken- 谷歌浏览器版本 78
-
Broken- Microsoft Edge 版本 79
我试图改变我的答案+49 5251 123456
至以下内容:
<a href="tel:123-456-7890">123-456-7890</a>
-
<a rel="nofollow" class="external free" href="tel:+49-30-1234567">tel:+49-30-1234567</a>
.
但答案看起来就像那些标签一样<a></a>
没有标签,而是普通文本。 (所以仍然不可点击,而且看起来很丑)。
出于好奇,我自己创建了这个 HTML,它对于上述所有浏览器都有相同的情况:
<div>+49 5251 123456</div>
为什么会发生这种情况?我可以修复它吗?我该如何解决这个问题,以便电话号码可以点击?
Markdown 渲染
机器人服务还将在答案中呈现 Markdown,将文本格式设置为粗体、斜体或链接。
所以下面的例子有效
//making headings works with this
await turnContext.SendActivityAsync(MessageFactory.Text("# " + turnContext.Activity.From.Id));
//bold works
await turnContext.SendActivityAsync(MessageFactory.Text("**" + turnContext.Activity.From.Id + "**"));
然而,当我尝试使用 Markdown 呈现电话号码时,我仍然遇到问题。到目前为止,这是我尝试过的:
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:123456)"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:+49 5251 123456)"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:+495251123456)"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:05251123456)"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:05251 123456)"));
最终会错误地渲染,如下所示: