我有一个用例，我必须向用户显示来自 API 的响应，因为他在自适应卡中的文本视图中键入，我有一个使用 Microsoft Bot Framework 的机器人，我的聊天机器人目前正在使用一个 Web 客户端，但我希望此功能也可以在 Microsoft Teams 和其他平台（支持自适应卡）上运行。 Adaptive Card 不支持 AutoComplete 视图，目前在路线图中。
所以我在这里寻找一种解决方法来在我的 Bot 中实现此功能。
【问题讨论】：
标签： botframework microsoft-cognitive azure-language-understanding adaptive-cards
如果您的主要用例是 Teams，那么您还有另一个选择，但它仅在 Teams 中有效 - 它是使用任务模块。基本上，任务模块是 Teams 中一种特殊的弹出窗口。对于任务模块中显示的内容，您有两种选择：
因此，您可以考虑使用上面的选项 2，将您想要的任何内容构建到网页中，包括“自动完成”。稍后，如果/当自适应卡片提供您需要的内容时，您可以简单地将向用户显示的内容从您的自定义网页更改为自适应卡片。
您可以在What are Task Modules 阅读有关任务模块以及如何开始的更多信息。
当然，正如我所说，任务模块仅适用于团队，因此它对您的其他场景没有帮助，但也许您可以在那里使用常规的自适应卡，如果您检测到客户端正在使用任务模块，请执行任务模块微软团队。
【讨论】：
虽然自适应卡片目前不支持自动完成视图，但您可以构建我们自己的组件并使用附件中间件来拦截这些卡片，而不是使用自适应卡片。您可以在自定义渲染器中添加带有自动完成逻辑的输入字段。
代码示例：
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Custom attachment with GitHub Stargazers</title>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-redux@7.1.0/dist/react-redux.min.js"></script>
<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" role="main"></div>
<script type="text/babel">
const GitHubRepositoryAttachment = props =>
<div style={{ fontFamily: '\'Calibri\', \'Helvetica Neue\', Arial, sans-serif', margin: 20, textAlign: 'center' }}>
<svg height="64" viewBox="0 0 16 16" version="1.1" width="64" aria-hidden="true"><path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
<p>
<a href={ `https://github.com/${ encodeURI(props.owner) }/${ encodeURI(props.repo) }` } target="_blank">{ props.owner }/<br />{ props.repo }</a>
</p>
</div>;
(async function () {
const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
const { token } = await res.json();
const { ReactWebChat } = window.WebChat;
const attachmentMiddleware = () => next => card => {
switch (card.attachment.contentType) {
case 'application/vnd.microsoft.botframework.samples.github-repository':
return <GitHubRepositoryAttachment owner={ card.attachment.content.owner } repo={ card.attachment.content.repo } />;
default:
return next(card);
}
};
window.ReactDOM.render(
<ReactWebChat
attachmentMiddleware={ attachmentMiddleware }
directLine={ window.WebChat.createDirectLine({ token }) }
/>,
document.getElementById('webchat')
);
store.dispatch({
type: 'WEB_CHAT/SET_SEND_BOX',
payload: { text: 'sample:github-repository' }
});
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>
希望这会有所帮助。
【讨论】：