botframework - 英雄卡中长文本的工具提示
问题描述
我正在使用 Bot Framework Webchat(基于 React)。我使用卡片行动(英雄卡片)来建议类似问题的列表。有时英雄卡中的文字可能太长。在这种情况下,文本会被截断并替换为三个点。英雄卡可以有工具提示吗?
我查看HeroCard
了代码中的选项,但没有发现任何相关内容。
我在 Github 上提出了这个问题:https ://github.com/microsoft/BotFramework-WebChat/issues/2032
请问有什么帮助吗?
解决方案
网络聊天利用Adaptive Cards NPM 包来呈现卡片,不幸的是,Adaptive Cards 不支持向卡片中的元素添加工具提示描述。然而,在 GitHub 上存在几个关于添加工具提示功能的问题,因此希望该功能将很快在网络聊天中可用。
即使自适应卡片不支持添加工具提示,您也可以为网络聊天创建自定义附件中间件并实现自己的英雄卡片渲染器。下面的代码片段显示了一个基本的英雄卡片渲染器,没有任何样式。
<script type="text/babel">
const HeroCardAttachment = ({ buttons, images, title, store }) =>
<div className='ac-container'>
<div className='ac-container'>
{ images.map(({ url }, index) =>
<window.React.Fragment key={ index }>
<div>
<img src= { url } />
</div>
<div style={{height: '8px'}}/>
</window.React.Fragment>
)}
<div>{ title }</div>
</div>
<div />
<div >
{ buttons.map(({ title, type, value }, index) => (
<window.React.Fragment key={ index }>
<button
aria-label={ title }
type='button'
title={ title }
onClick={ () => {
switch (type) {
case 'openUrl':
window.open(value)
break;
case 'postBack':
store.dispatch({
type: 'WEB_CHAT/SEND_POST_BACK',
payload: { value }
});
break;
default:
store.dispatch({
type: 'WEB_CHAT/SEND_MESSAGE_BACK',
payload: { value, text: value, displayText: value }
});
}
}}
>
<div title={ title }>
{ title }
</div>
</button>
<div />
</window.React.Fragment>
))}
</div>
</div>;
(async function () {
const res = await fetch('/directline/token', { method: 'POST' });
const { token } = await res.json();
const { createStore, ReactWebChat } = window.WebChat;
const store = createStore();
const attachmentMiddleware = () => next => card => {
switch (card.attachment.contentType) {
case 'application/vnd.microsoft.card.hero':
return <HeroCardAttachment {...card.attachment.content} store={ store }/>;
default:
return next(card);
}
};
window.ReactDOM.render(
<ReactWebChat
attachmentMiddleware={ attachmentMiddleware }
directLine={ window.WebChat.createDirectLine({ token }) }
store={ store }
/>,
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>
有关附件中间件的更多详细信息,请查看此示例。
希望这可以帮助。
推荐阅读
- c++ - async_write 完成处理程序最早何时完成?
- c++ - 使用完数据结构后清空它们是一个好习惯吗?
- java - 有/没有 TRUNCATE_EXISTING 的 StandardOpenOption.WRITE + StandardOpenOption.CREATE 之间的区别?
- .net - SPA 角色声明和授权。.net 核心和 react.js
- amazon-web-services - 如何使用 AWS 实例连接到本地计算机上的服务器?
- reactjs - React Bootstrap 3 - FormControl.Feedback 消息传递
- flutter - 为什么flutter的Future函数会运行多次?
- php - php while循环不在引导程序中水平打印数组的内容
- azure-functions - Azure REST API“listsecrets”为具有自定义路由的函数返回不正确的触发 URL
- reactjs - React 上下文提供程序中的意外令牌“<”