@dbx-tools/ui-teams (英语)

微软团队适应卡或团队风格的对话预览 a 反应应用程序。 此浏览器包使用 适应卡 发卡器 合同来源 @dbx-tools/ 共享团队,共享 @dbx-tools/ ui (英语) 基础.

快开始

import { TeamsChat } from "@dbx-tools/ui-teams/react";

export function SupportChat() {
  return <TeamsChat className="h-full" />;
}

在您的 AppKit 用户界面主题后导入样式表 .

包装

使用此软件包 @dbx-工具/团队 服务器插件. 导入 @databricks/appkit-ui/styles.css 在此软件包的样式表之前 。 这个 组件不读取 AppKit 客户端配置. TeamsChat 财务报告和审定财务报表 AdaptiveCardGallery 使用明确的 endpoint 财务报告和审定财务报表 buildEndpoint 道具吗, 默认为 /api/teams/messages 财务报告和审定财务报表 /api/teams/card。 。 。 .

浏览器预览不执行Microsoft Bot框架认证. 这个 /messages 路由返回 HTTP 响应中的活动 服务器只允许开发 allowUnauthenticated 选项。 为本地人 对照正常服务器配置进行预览,设置 endpoint="/api/teams/activity"保持微软团队的bot 证书和 服务器上的连接器 API 发送 .

使用 @dbx-tools/ui-mastra (英语) 为 Mastra 聊天和 @dbx-tools/ ui (英语) 用于常见的 AppKit、认证、电子邮件和搜索 组件.

软件包内容

• TeamsChat 将 Bot 框架活动作为答复附件 适应卡. 它每个挂载一个对话ID, 取消一个活动 在卸载时请求,并支持启动提示.
• AdaptiveCardView 制作已编译的可适配卡并提供支持 Action.OpenUrl 处理通过 onOpenUrl。 。 。 .
• AdaptiveCardGallery 编辑 a CardSpec,通过 POST /api/teams/card,并得出结果.
• CARD_SAMPLES 提供有事实的例子,将行动和说明联系起来.
• TextBlock 标记用途 marked。如果解析失败,则渲染器显示 源为纯文本.

配置聊天预览

import { TeamsChat } from "@dbx-tools/ui-teams/react";

const Chat = () => <TeamsChat className="h-full" />;

点 endpoint 如果插件以不同名称挂起, 则在其它位置 通过 agentId 以与特定代理人对质,而不是服务器的默认值. starters 替换内置 DEFAULT_STARTERS 电源.

张牌

import { AdaptiveCardView, type AdaptiveCard } from "@dbx-tools/ui-teams/react";

const Preview = ({ card }: { card: AdaptiveCard }) => (
  <AdaptiveCardView card={card} className="ac-container" />
);

AdaptiveCardView 制作任何编译的可适应卡文档,包括一个 返回时间 create_teams_card 工具,插件的 buildCard 导出,或 页:1 /api/teams/card 路线。 卡片文本作为Markdown 处理, 匹配方式 团队 TextBlock。 。 。 .

添加实时预览页面

import { AdaptiveCardGallery } from "@dbx-tools/ui-teams/react";

const Cards = () => <AdaptiveCardGallery />;
export default Cards;

添加 <AdaptiveCardGallery /> 到一条路线。 它张贴编辑器 CardSpec 页:1 @dbx-tools/teams 插头 /api/teams/card 路径和编译 纸牌。 指向另一个山 buildEndpoint。 。 。 .

样式

从主机应用程序的 Tailwind 条目中导入样式表一次, 在 Tailwind 和 您的 AppKit 用户界面主题 :

@import "tailwindcss";
@import "@databricks/appkit-ui/styles.css";
@import "@dbx-tools/ui-teams/styles.css";

团队样式表导入共享 @dbx-tools/ui 基础和用途 AppKit语义符号. 从主机应用程序 Tailwind 导入一次 进入点.

软件包出口

• ./react数字 : TeamsChat, (中文(简体) ), DEFAULT_STARTERS, (中文(简体) ), AdaptiveCardView, (中文(简体) ), AdaptiveCardGallery, (中文(简体) ), CARD_SAMPLES,则 再出口 Activity, (中文(简体) ), AdaptiveCard, (中文(简体) ), CardResult,以及 CardSpec 类型.
• ./styles.css: 基于 AppKit-token 的画廊样式和最小 适应卡容器外皮.