@ 组装- js/ app- bridge

辅助器功能用于自定义应用程序(嵌入于iframes)和Copilot母应用程序之间的Message后通信.

安装

npm/ yarn( 亚伦)

npm install @assembly-js/app-bridge
# or
yarn add @assembly-js/app-bridge

使用量

npm 使用量

import { AssemblyBridge } from "@assembly-js/app-bridge";

// Set breadcrumbs
AssemblyBridge.header.setBreadcrumbs([
  { label: "Dashboard" },
  { label: "Users", onClick: () => console.log("navigated") },
]);

// Set actions menu
AssemblyBridge.header.setActionsMenu([
  { label: "Download", icon: "Download", onClick: () => downloadFile() },
  {
    label: "Delete",
    icon: "Trash",
    color: "red",
    onClick: () => confirmDelete(),
  },
]);

API 参考

AssemblyBridge.header

setBreadcrumbs(items)

在信头中设置面包屑导航项 .

AssemblyBridge.header.setBreadcrumbs([
  { label: "Home" },
  { label: "Projects", onClick: () => navigateToProjects() },
  { label: "Current Project" },
]);

参数:

• items: 阵列 { label: string, onClick?: () => void }

setPrimaryCta(config)

设置或清除主 CTA 按钮 .

// Set a CTA
AssemblyBridge.header.setPrimaryCta({
  label: "Save Changes",
  icon: "Check",
  onClick: () => save(),
});

// Clear the CTA
AssemblyBridge.header.setPrimaryCta(null);

参数:

• config数字 : { label: string, icon?: Icon, onClick: () => void } 或者说 null

setSecondaryCta(config)

设置或清除二级 CTA 按钮 。 与 API 相同 setPrimaryCta。 。 。 .

setActionsMenu(items)

设定动作下放菜单项 .

AssemblyBridge.header.setActionsMenu([
  { label: "Archive", icon: "Archive", onClick: () => archive() },
  { label: "Delete", icon: "Trash", color: "red", onClick: () => remove() },
]);

参数:

• items: 阵列 { label: string, icon?: Icon, color?: 'red', onClick: () => void }

AssemblyBridge.configure(config)

配置附加设置的桥.

AssemblyBridge.configure({
  additionalOrigins: ["portal.yourcompany.com", "https://custom-domain.com"],
  debug: true, // Enable debug logging
});

参数:

• config.additionalOrigins: 由起源排列,允许Message后通信. HTTPS 不设协议的出处。 可以称为多倍-由来是累积的.
• config.debug: 当信件无法发送时, 启用调试模式将警告日志到控制台( 例如, 父来源不在允许列表中, 不在 iframe 中运行) 。 对解决问题有用.

说明: 该桥包括内部支持 *.copilot.app, (中文(简体) ), *.myassembly.com, (中文(简体) ), dashboard.assembly.com当地人, 和他们的等效。 你只需要用这个 configure() 用于自定义门户域。 父源是从第一个经源码验证的父源消息中得知的—— document.referrer 未使用.

AssemblyBridge.navigate(route, options?)

在父应用程序中导航不同的路由 .

// Navigate to settings
AssemblyBridge.navigate("settings");

// Navigate to a specific app
AssemblyBridge.navigate("apps", { id: "app-123" });

// Navigate to a specific form
AssemblyBridge.navigate("forms", { id: "form-456" });

参数:

• route: 所支持的路线之一(见下文)
• options: 可选 { id?: string }

AssemblyBridge.navigateTo(destination, options?)

导航到打入的目的地并等待主机的确认. 返回一个与 { ok: true } 关于成功, { ok: false, reason } 当主机拒绝导航时,或在超时后拒绝,如果主机从未响应.

TypeScript在编译时间强制每个目的地所需的参数.

// Navigate to a specific invoice
const result = await AssemblyBridge.navigateTo({ to: "invoice", invoiceId: "inv_abc" });
if (!result.ok) {
  console.warn("Navigation rejected:", result.reason);
}

// Navigate to a client detail page
await AssemblyBridge.navigateTo({ to: "client", clientId: "cli_xyz", tab: "notes" });

// Navigate to home
await AssemblyBridge.navigateTo({ to: "home" });

支持的目的地:

选项 :

• replace: 替换当前历史条目而不要按 (默认 : false(中文(简体) )
• newTab: 在新标签中打开( 默认 ): false(中文(简体) )
• timeout: Miliseconds 等待主机确认后再拒绝(默认 : 10000(中文(简体) )

AssemblyBridge.location.report(path, search, replace?)

向主机报告应用程序当前位置 。 每一次客户端路由更改都叫这个 这个 path 必须剥去表面前缀——报告 /orders/42没有 /c/orders/42。 。 。 .

AssemblyBridge.location.report("/orders/42", "?tab=details");
AssemblyBridge.location.report("/dashboard", "");
// Signal a replace (no new history entry on the host):
AssemblyBridge.location.report("/settings", "", true);

参数:

• path: App-local path,表面前缀剥离(例如. /orders/42) (中文(简体) ).
• search: 查询字符串,包括主线 ?,或 '' 当缺席时.
• replace: 当 true,东道主应该取代其历史条目而不是推.

AssemblyBridge.location.onNavigate(handler)

当主机发送一个 location.navigate 命令。 处理者收到 { path, search, replace? } 没有表面前缀的有效载荷——应用在通航前必须重新添加自己的前缀.

AssemblyBridge.location.onNavigate(({ path, search, replace }) => {
  const destination = `/c${path}${search}`;
  if (replace) {
    router.replace(destination);
  } else {
    router.push(destination);
  }
});

参数:

• handler: 调用 { path: string; search: string; replace?: boolean }。 。 。 .

支持的数值

图标

CTA 可用: Archive, (中文(简体) ), Plus, (中文(简体) ), Templates, (中文(简体) ), Trash, (中文(简体) ), Check

可用于动作菜单项 : Archive, (中文(简体) ), Plus, (中文(简体) ), Templates, (中文(简体) ), Trash, (中文(简体) ), Download, (中文(简体) ), Check, (中文(简体) ), Disconnect

路线

• apps - 应用程序页面(支持) id 用于特定应用程序)
• billing - 账单页
• contracts - 合同页
• files - 文件页面(支持) id 用于频道)
• forms - 窗体页面(支持) id 具体形式)
• helpdesk - 服务台网页(支助) id 关于具体条款)
• invoices - 发票页
• messages - 信件页面(支持) id 用于频道)
• notifications - 通知页(支持) id 用于频道)
• settings - 设置页面
• settings.billing - 计费设置
• settings.profile - 配置设置
• products.create - 创建产品页面
• products.edit - 编辑产品页面(支持) id (用于产品)

类型脚本支持

该套件包括了TypeScript声明. 视需要导入类型:

import type {
  BreadcrumbItem,
  CtaConfig,
  ActionMenuItem,
  Route,
  Icon,
  NavigateDestination,
  NavigateToOptions,
  NavigateResult,
} from "@assembly-js/app-bridge";

发展

# Install dependencies
yarn install

# Build
yarn build

# Type check
yarn type-check

# Run tests
yarn test

# Generate content-hashed files
yarn generate-manifest

许可证

麻省理工学院