gpt4 book ai didi

javascript - 如何在使用 C# 中的 Microsoft Bot Framework SDK V4 开发的 ChatBot 中添加条件 w.r.t 自适应卡?

转载 作者:行者123 更新时间:2023-12-02 22:40:47 24 4
gpt4 key购买 nike

Blockquote

我有一个带有多个瀑布对话框的聊天机器人,其中一个使用自适应卡来显示获取输入的表单,它是使用 SDK V4 模板在 C# 中使用 MS Bot 框架开发的, channel 是 WebChannel,因此 HTML 是在后端用于机器人工作

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Full-featured bundle with ES5 polyfills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
or lock down on a specific version with the following format: "/4.1.0/webchat.js".
-->
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<style>
html, body {
height: 100%
}

body {
margin: 0
}

#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main">

</div>
<script>
const token = 's7W';

const styleOptions = {
botAvatarImage: '',
botAvatarInitials: 'BF',
userAvatarImage: '',
userAvatarInitials: 'WC',
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
};
var d = new Date();
var tzoffset = d.getTimezoneOffset();
const store = window.WebChat.createStore(
{},
function (_ref) {
const dispatch = _ref.dispatch;
return function (next) {
return function (action) {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: tzoffset.toString()
}
});
}
return next(action);
};
};
});

window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token: token }),
styleOptions: styleOptions,
store: store,
webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
</script>
</body>
</html>

在浏览器或网络 channel 中。

我的查询是:

我想在自适应卡中保留条件,例如:

  1. 检查必填字段值,
  2. 根据下拉列表中选择的特定值显示容器
  3. 如何使用 REGEX 检查电子邮件值是否有效
  4. 如何检查给定容器中的值(根据下拉列表中选择的值显示)是否已提供,即强制值验证?

我认为这必须通过使用 JavaScript 来完成,JavaScript 应该嵌入到背面的 HTML 页面中,但问题是我不知道如何实现?因为我是 javascript 的新手。

请通过分步方式或指导方式提供详细信息来帮助我解决查询或问题,因为我对 es5 bundle 的 javascript 和编码内容非常陌生。

我已附上当前与 ChatBot 相关的 HTML 文件以供引用,其中我在 HTML 中使用了几行脚本,或者在网络的帮助下使用了一些其他内容,以及我之前使用 es5 bundle 在 ChatBot 上提出的一些问题。

为了清楚起见更新了查询,2019 年 10 月 29 日:

我有一张采用以下容器设计的自适应卡:

  • 容器 1:需要填写的文本输入很少
  • 容器 2:需要选中的复选框很少
  • 容器 3:下拉选项,有 1、2 或两者可供选择
  • 容器 4:很少有其他用于输入的文本框
  • 最后:所有容器外部的提交按钮

我的查询如下:

  1. 如果我选择 2 或两者作为下拉列表中的选项作为容器 3 的一部分,则仅应显示容器 4。如果我选择 1,那么容器 4 应该被禁用或隐藏。这可以通过 JavaScript 或 C# 代码或任何其他设置来实现吗?如果是,那么如何,请尽可能详细地解释,因为我对编码非常陌生?

  2. 在自适应卡中提交数据时,我们是否可以进行强制值验证,即根据我上面修改的解释,如果我单击提交而不输入容器 1 中提供的文本输入,我应该会弹出一个窗口或未提供强制值的任何可能的错误消息?这是否可以通过自适应卡中的一些 JavaScript 或 C# 来实现,如果可以,请尽可能详细地逐步解释,因为我对编码非常陌生?

  3. 文本输入之一是电子邮件,如何对电子邮件输入进行验证,其中用户可以提供用分号 (;) 分隔的多封电子邮件,但值应采用正确的电子邮件格式,例如 john.doe@gy.com。我们如何在自适应卡中提供这种验证?

最佳答案

使用自适应卡的内置功能在客户端无法实现您所要求的任何功能。如果您不想使用自己的自适应卡渲染器构建自己的 Direct Line 客户端(这将非常困难),那么您要么必须对解决方法感到满意,要么重新考虑您的设计规范。您实际上并没有提供相关卡片的草稿,无论是 JSON 还是屏幕截图,所以我有点盲目工作。

If I select 2 or Both as options in drop down as part of Container 3 then only Container 4 should be displayed. If I select 1 then container 4 should be disabled or hidden. Is this achievable either through JavaScript or C# code or any other settings?

这里的传统解决方案是仅使用多张卡。等到用户从“容器 3”中选择一个选项并将该信息发送给机器人,然后机器人就可以根据用户的选择发送下一张卡片。

或者,您可以去掉容器 3,并根据用户填写的卡片部分来推断用户的选择。您也许可以将容器 4 放入 ShowCard action 中表明它是可选的。

Can we have mandatory values validation while submitting the data in the Adaptive card i.e. as per my above modified explanation if i click on submit without entering the text inputs provided in the container 1 i should be getting a pop up or any kind of error message possible that mandatory values are not provided?

. . .

One of the text inputs is email how to have validations for email input where user can provide multiple emails with semicolon(;) separated but the value should be in proper email format like john.doe@gy.com. How can we provide this kind of validation in adaptive cards?

同样,除非您构建自己的客户端,否则这在客户端是不可能的,尽管这可以在机器人端实现。当您的机器人从自适应卡获取用户的响应时,机器人可以验证它,然后向用户发送一条消息,解释出了什么问题并要求他们重试。 Eventually there will be packages to help you with this ,同时您可以查看 this DCR获取您可以做什么的示例。您可能还有兴趣阅读my latest blog post了解更多信息。

关于javascript - 如何在使用 C# 中的 Microsoft Bot Framework SDK V4 开发的 ChatBot 中添加条件 w.r.t 自适应卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58594750/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com