更改嵌入为 IFRAME 的 Chatbot CSS
Change the CSS of Chatbot embedded as IFRAME
问题：
今天我的聊天机器人停止工作并开始出现以下错误。当这种情况开始发生时，我没有做出任何改变。
我在控制台日志中找不到任何错误。然后我使用 Emulator 和 Azure Portal 的 Test in Webchat 功能测试了机器人，机器人工作正常。这个机器人正在使用网络聊天（iframe 嵌入）以及 DirectLine 频道。 DirectLine 频道工作正常，只是网络聊天不工作。
所以为了验证我的理论，我收到错误是因为微软更新了网络聊天。我使用 Azure 门户中的嵌入代码来使用最新的网络聊天，网络聊天频道开始工作。
简要历史：
要修改网络聊天的 UI，我使用 this 方法来修改我的机器人的 IFrame 的 UI。此方法需要下载 IFrame 的源代码，创建一个 HTML 页面并将该页面用作您网站中的 IFRAME 源（您可以在图像中看到自定义）。
既然我开始遇到上面提到的问题，我尝试用最新版本的网络聊天做同样的事情，但它不起作用。网络聊天不发送消息，我找不到这个新版本的网络聊天正在使用的 CSS 文件。
我需要什么 GUI跳舞：
- 继续使用旧网络聊天的方法 UI
或
- 如何更新这个新版的UI？
我无法就修复 iframe 版本提供建议，但这尚未得到官方支持，并且随着最新的网络聊天更新，微软正在更多地推荐 botframework-webchat（直线）格式化 UI。一个好的起点是 branding sample.
该示例没有详细说明代码中的选项，但如果您看一下 default options file，它应该会为您提供按照您想要的方式自定义聊天所需的一切。
这不会设置 header，它曾经出现在 ootb 网络聊天中（我看到你在你的例子中自定义了）。现在最好的方法是在 html/css 中执行此操作，您可能可以重复使用您为自定义选项所做的操作。我刚刚创建了一个额外的 DIV，将其设置为 height: 40px;，然后将网络聊天 DIV 设置为 height: calc(100% - 40px);。任何精通 HTML 的人都可能想出比这更好的办法，本质上，您只是在此时构建您的页面，而网络聊天实现仅控制聊天区域本身（本质上是发送框和 response/bubble区域）。我还在我的 header.
中添加了一个自定义按钮
<div id="chatbotTitle"><h3 style="padding-left:10px;">OEM CSC Support Bot</h3><button class="btn" id="transcriptButton">Email Transcript</button></div>
<div id="webchat" role="main"></div>
您收到的错误不是网络聊天问题。这是通过网络聊天报告的您的机器人中的一个问题，因为这是正在使用的客户端。
通常，此错误是指您的机器人不知道如何处理（即您的机器人逻辑）的传入 activity。例如，您的主对话框中有一个瀑布式步骤，根据用户的响应打开一个组件对话框。该对话框获取用户信息（姓名、年龄等），完成后，returns 到主对话框。但是，下一步尚未准备好，因为用户可能过早退出该对话框或未按预期回答所有问题。
不管是什么情况，因为它没有设置来处理传入的 activity，所以它不会返回对话框的轮到状态。您将需要调试您的代码，单步执行，以查看哪个 "step" 是根本原因。
对我来说，我在设置网络聊天以将事件发回我的机器人时遇到过这种情况。我的机器人不知道如何处理传入的事件类型 activity 并且会产生该错误。
希望得到帮助！
问题：
今天我的聊天机器人停止工作并开始出现以下错误。当这种情况开始发生时，我没有做出任何改变。
所以为了验证我的理论，我收到错误是因为微软更新了网络聊天。我使用 Azure 门户中的嵌入代码来使用最新的网络聊天，网络聊天频道开始工作。
简要历史： 要修改网络聊天的 UI，我使用 this 方法来修改我的机器人的 IFrame 的 UI。此方法需要下载 IFrame 的源代码，创建一个 HTML 页面并将该页面用作您网站中的 IFRAME 源（您可以在图像中看到自定义）。
既然我开始遇到上面提到的问题，我尝试用最新版本的网络聊天做同样的事情，但它不起作用。网络聊天不发送消息，我找不到这个新版本的网络聊天正在使用的 CSS 文件。
我需要什么 GUI跳舞：
- 继续使用旧网络聊天的方法 UI
或
- 如何更新这个新版的UI？
我无法就修复 iframe 版本提供建议，但这尚未得到官方支持，并且随着最新的网络聊天更新，微软正在更多地推荐 botframework-webchat（直线）格式化 UI。一个好的起点是 branding sample.
该示例没有详细说明代码中的选项，但如果您看一下 default options file，它应该会为您提供按照您想要的方式自定义聊天所需的一切。
这不会设置 header，它曾经出现在 ootb 网络聊天中（我看到你在你的例子中自定义了）。现在最好的方法是在 html/css 中执行此操作，您可能可以重复使用您为自定义选项所做的操作。我刚刚创建了一个额外的 DIV，将其设置为 height: 40px;，然后将网络聊天 DIV 设置为 height: calc(100% - 40px);。任何精通 HTML 的人都可能想出比这更好的办法，本质上，您只是在此时构建您的页面，而网络聊天实现仅控制聊天区域本身（本质上是发送框和 response/bubble区域）。我还在我的 header.
<div id="chatbotTitle"><h3 style="padding-left:10px;">OEM CSC Support Bot</h3><button class="btn" id="transcriptButton">Email Transcript</button></div>
<div id="webchat" role="main"></div>
您收到的错误不是网络聊天问题。这是通过网络聊天报告的您的机器人中的一个问题，因为这是正在使用的客户端。
通常，此错误是指您的机器人不知道如何处理（即您的机器人逻辑）的传入 activity。例如，您的主对话框中有一个瀑布式步骤，根据用户的响应打开一个组件对话框。该对话框获取用户信息（姓名、年龄等），完成后，returns 到主对话框。但是，下一步尚未准备好，因为用户可能过早退出该对话框或未按预期回答所有问题。
不管是什么情况，因为它没有设置来处理传入的 activity，所以它不会返回对话框的轮到状态。您将需要调试您的代码，单步执行，以查看哪个 "step" 是根本原因。
对我来说，我在设置网络聊天以将事件发回我的机器人时遇到过这种情况。我的机器人不知道如何处理传入的事件类型 activity 并且会产生该错误。
希望得到帮助！