如何从Teams选项卡/命令框创建Adaptive Card并插入会话？

问题背景 #

我需要在客户端选项卡或命令框任务中创建Adaptive Card，并将其插入到一对一聊天、会议等会话中（会话可为现有或新建）。曾将任务提交至机器人后端，由其回复卡片，但卡片会插入到命令框中。Teams会添加一个复制按钮，可用于将卡片复制到某处（但并非剪贴板），用户随后可粘贴到选定会话中。但问题在于卡片无法适配命令框，实际不可见，用户体验不佳。

尝试过的方法及问题 #

• microsoftTeams.sharing.shareWebContent：仅支持分享网页内容，无法直接插入Adaptive Card
• 打开深层链接：可跳转至指定会话，但无法直接携带并插入卡片内容
• 使用navigator.clipboard.writeText写入卡片序列化JSON：粘贴到会话后JSON无法渲染（Teams原生复制卡片时可正常渲染），尝试多种编码方式仍无效

可行方案推荐 #

方案1：机器人主动消息推送 #

通过机器人后端调用Teams Graph API，主动将Adaptive Card发送至目标会话，步骤如下：

1. 在客户端获取目标会话ID：可通过microsoftTeams.context获取当前会话，或调用Graph API列出用户的会话列表供选择
2. 将卡片JSON和会话ID发送至后端服务
3. 后端调用Graph API的/chats/{chatId}/messages接口，发送包含Adaptive Card的消息

方案2：剪贴板格式优化 #

Teams原生复制卡片时，剪贴板携带的是富文本格式而非纯JSON。可以通过模拟该格式实现渲染：
在客户端生成卡片的HTML预览，同时将卡片JSON嵌入到HTML的自定义属性中，再通过navigator.clipboard.write同时写入HTML和纯文本内容，粘贴时Teams会识别HTML中的卡片信息并渲染。

示例代码片段：

// 生成带卡片JSON的HTML内容
const cardJson = JSON.stringify(yourAdaptiveCard);
const cardHtml = `<div data-adaptive-card='${cardJson}'>${cardPreviewHtml}</div>`;
// 创建剪贴板项
const clipboardItem = new ClipboardItem({
  'text/html': new Blob([cardHtml], { type: 'text/html' }),
  'text/plain': new Blob([cardJson], { type: 'text/plain' })
});
// 写入剪贴板
await navigator.clipboard.write([clipboardItem]);

方案3：共享对话框间接实现 #

虽然无法直接弹出会话选择对话框，但可通过microsoftTeams.sharing.shareWebContent结合后端处理近似实现：

1. 在客户端生成包含Adaptive Card预览和会话选择逻辑的临时网页
2. 使用microsoftTeams.sharing.shareWebContent分享该网页
3. 用户在分享对话框选择目标会话后，网页脚本通过Teams SDK获取会话ID，调用后端API发送卡片至该会话

注意事项 #

• 确保机器人已获得ChatMessage.Send的应用权限或委派权限
• 调用Graph API时需处理好身份验证，获取有效访问令牌
• 剪贴板方法需要用户授予权限，部分浏览器可能存在兼容性问题

内容的提问来源于stack exchange，提问作者Claude