# @copilotkit/channels-ui 中文文档

规范地址：https://npmcn.com/package/%40copilotkit/channels-ui/

版本：0\.12\.0
npm 元数据更新时间：2026-10-28T13:36:59.963Z
中文译文更新时间：2026-11-10T18:21:37.806Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40copilotkit/channels-ui
原文对照：https://npmcn.com/package/%40copilotkit/channels-ui/?lang=original
项目主页：https://github.com/CopilotKit/CopilotKit
源码仓库：https://github.com/CopilotKit/CopilotKit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：105 kB，60 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-07-08T19:57:23.298Z
- 最新版本发布：2026-10-28T13:36:59.579Z
- 近 30 天下载量：1139501（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：45（近 12 个月 45 个）

## 中文简介

JSX运行时间,IR,和用于CopilotKit频道的跨平台组件词汇.

## 安装

```sh
npm install @copilotkit/channels-ui
```

也可以使用：`pnpm add @copilotkit/channels-ui`、`yarn add @copilotkit/channels-ui`、`bun add @copilotkit/channels-ui`

## README

# @ copilotkit/ channels- ui (英语)

纯洁 **JSX运行时间+中间代表(IR)+跨平台 组件词汇** 用于编写丰富的机器人信息。 没有反应,没有代理 运行时间,没有Slack.. `@copilotkit/channels-ui` 取决于在回购中什么也没有 除外 `@copilotkit/shared` (计: `StandardSchemaV1` 类型)。 这就是让我们 平台适配器(如:. `@copilotkit/channels-slack`) 将同样的UI翻译为 Block Kit, 同时保持组件层可树切变和可测试 隔离.

作为JSX的你作者UI, 它与一个序列式的IR(`BotNode[]`),以及 行为道具( e)`onClick` 编号 : `onSelect` 编号 : `onSubmit`在节点上骑行 发动机`@copilotkit/channels`)来束缚.

## 安装

```sh
pnpm add @copilotkit/channels-ui
```

对作为JSX的作者组件,将TypeScript JSX厂指向这个包件 在消费项目中 `tsconfig.json`数字 :

```jsonc
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@copilotkit/channels-ui",
  },
}
```

这个包裹船 `@copilotkit/channels-ui/jsx-runtime` (和 `/jsx-dev-runtime`出口 `jsx` 编号 : `jsxs` 编号 : `Fragment`。作者组件 文件为 `.tsx`。 。 。 .

## 示例

```tsx
import {
  Message,
  Header,
  Section,
  Actions,
  Button,
  renderToIR,
} from "@copilotkit/channels-ui";

function Greeting({ name }: { name: string }) {
  return (
    <Message>
      <Header>Hello {name}</Header>
      <Section>Pick an option — **bold** and `code` work too.</Section>
      <Actions>
        <Button
          style="primary"
          onClick={(ctx) => ctx.thread.post("you clicked!")}
        >
          Continue
        </Button>
      </Actions>
    </Message>
  );
}

const ir = renderToIR(<Greeting name="Ada" />);
// ir is BotNode[] — hand it to an adapter, or let @copilotkit/channels post it.
```

`renderToIR(ui: Renderable): BotNode[]` 递归引用任何组件 函数(通过道具),直到仅保留内在的字符串类型节点; 儿童中的弦成为 `{ type: "text", props: { value } }`· ; `Fragment` 扁平它的孩子们。 成分必须是 **可序列的纯函数 道具** 同样的道具,同样的树出, 这使得内容稳定 动作绑定并重交还水合 `@copilotkit/channels`。 。 。 .

`Renderable` 还接受 `{ raw }` 逃出舱门,其中 `renderToIR` 通过 以 `{ type: "raw", props: { value } }` 对想要适应的适配器 短路到一个本地有效载荷.

## 组件词汇

每个元件都是薄函数返回 a `BotNode` 拥有稳定 内在 `type` 绳子。 适配器将这些地图映射给原始人.

每个组件都有完全类型的道具接口(`MessageProps`, (中文(简体) ), `ButtonProps`,......,所有出口),以及货包船自己的 `JSX` 命名空间 (通过 `jsxImportSource: "@copilotkit/channels-ui"`) (中文(简体) ). JSX是静态的 选中: 未知属性、 错误的道具值和不良的孩子 编译时间出错 - `<Section bogus={1} />` 或者说 `<Button style="nope">` 不会 类型检查。 没有小写内在标记;词汇是 以下为资本化部分.

| 构成部分 | 目的 |
| --- | --- |
| `Message` | 一个张贴消息的根容器—— `accent`, (中文(简体) ), `onReaction`。 。 。 . |
| `Header` | 粗体头/标题行. |
| `Section` | 块(标记下)正文. |
| `Markdown` | 明确标出文字块. |
| `Field` | 内部一个标签/值单元格 `Fields` - 可选 `label`。 。 。 . |
| `Fields` | 网格为 `Field`s (双栏键/值布局). |
| `Context` | 细小而微弱的副文本(脚注,元数据). |
| `Actions` | 用于交互控件的行容器. |
| `Button` | 可点击按钮.. `onClick`, (中文(简体) ), `value`, (中文(简体) ), `style`,或 `url` (链接按钮). |
| `Select` | 滴滴下来—— `onSelect`, (中文(简体) ), `placeholder`, (中文(简体) ), `options: {label,value}[]`, (中文(简体) ), `multi`。 。 。 . |
| `Input` | 文本输入 - `onSubmit`, (中文(简体) ), `placeholder`, (中文(简体) ), `multiline`, (中文(简体) ), `name`。 。 。 . |
| `Image` | 一个图像块. |
| `Divider` | 横向规则. |

### 行为道具

交互式组件携带打入的处理器道具 `ClickHandler`数字 :

-   `Button` → `onClick`
-   `Select` → `onSelect`
-   `Input` → `onSubmit`

`Message` 还要 `onReaction`,当一个用户对张贴内容作出反应时,该词会开火 消息(添加或删除)。 第一种是爱莫纪 第二种是 `added`编号 :`user`编号 :`rawEmoji` 加一个 `thread` 和反应信息 `messageRef` 同一个地表 an `onClick` 得到,所以一个反应可以发布新的 用户界面, 将信件互换, 或运行 HITL 流 :

```tsx
<Message
  onReaction={async (emoji, r) => {
    if (!r.added) return;
    if (emoji === "bug") await r.thread.post(<FileBug />); // post new UI
    if (emoji === "white_check_mark")
      await r.thread.update(r.messageRef, <Resolved />); // swap UI in place
  }}
>
  …
</Message>
```

和组件一样耐用 `onClick`: 当 `<Message>` 来自于通过 `createChannel({ components: [...] })` (单位:千美元) 持久 `store` 已配置,在重新启动后返回 组件可以重新指定处理器。 内置处理器(和 `<Message>` 使用过的 直接) 路径在进程,但不能从重启中幸存. 耐用, 过滤 反应通路 _全部_ 消息, 使用 `bot.onReaction(...)`。 。 。 .

A 类 `ClickHandler` 收到一个 `InteractionContext`,两个通用 点击控件的值类型 :

```ts
type ClickHandler<TValue = unknown> = (
  ctx: InteractionContext<TValue>,
) => void | Promise<void>;

interface InteractionContext<TValue = unknown> {
  thread: Thread;
  message: IncomingMessage;
  action: { id: string; value?: TValue };
  values: Record<string, unknown>;
  user: ApplicationUser | null;
  actor: ProviderActor;
  platform: string;
}
```

`Button` 通用于其 `value` 道具,这样 `ctx.action.value` 实值 **推断** 从 `value` —— 说 `<Button value={{ confirmed: true }} onClick={(ctx) => ctx.action.value?.confirmed}>` 类型检查,没有投影. `Select`编号 :`Input` 解析值为 `string`。 。 。 .

结构类型 `Thread`, (中文(简体) ), `IncomingMessage`, (中文(简体) ), `ApplicationUser`, (中文(简体) ), `ProviderActor`, (中文(简体) ), `MessageRef`,以及 `ClickHandler` 此处声明只供处理器打字 运行时间由 `@copilotkit/channels` 及其适配器. `@copilotkit/channels-ui` 没有时间依赖他们.

## `bind()` - 第二级逃生舱

内入 `onClick` 处理器受内容约束(组件身份+路径+) 可序列化道具),所以在重启后可以重新生成一个处理器 重置组件. 当处理器关闭数据时 **没办法** 为: 从道具上重建,用 `bind()` 所以引擎坚持 小有效载荷明确与薄荷活性能代号相接:

```tsx
import { bind } from "@copilotkit/channels-ui";

<Button onClick={bind(handleChoice, { choiceId: "abc123" })}>Choose</Button>;
```

`bind(handler, args)` 返回标记的处理器;动作注册存储 `args` 因此,一个寒冷的路径发送 通过他们返回 `ctx.action.value`保留 `args` small——这是在重启后唯一幸存的处理器特定状态.

## 出口

运行时间 : `renderToIR`, (中文(简体) ), `Fragment`, (中文(简体) ), `bind`词汇表 (单位:千美元)`Message`, (中文(简体) ), `Header`, (中文(简体) ), `Section`, (中文(简体) ), `Markdown`, (中文(简体) ), `Field`, (中文(简体) ), `Fields`, (中文(简体) ), `Context`, (中文(简体) ), `Actions`, (中文(简体) ), `Button`, (中文(简体) ), `Select`, (中文(简体) ), `Input`, (中文(简体) ), `Image`, (中文(简体) ), `Divider`) (中文(简体) ). 类型 : `BotNode`, (中文(简体) ), `BotChildren`, (中文(简体) ), `ComponentFn`, (中文(简体) ), `Renderable`, (中文(简体) ), `Thread`, (中文(简体) ), `InteractionContext`, (中文(简体) ), `ApplicationUser`, (中文(简体) ), `ProviderActor`, (中文(简体) ), `IncomingMessage`, (中文(简体) ), `MessageRef`, (中文(简体) ), `ClickHandler`,以及每个组件道具类型(`MessageProps`, (中文(简体) ), `ButtonProps`, (中文(简体) ), `SelectProps`, (中文(简体) ), `TableProps`, (中文(简体) ), `TableColumn`(中文(简体) ).

## 常见问题

### @copilotkit/channels-ui 是什么？

JSX运行时间,IR,和用于CopilotKit频道的跨平台组件词汇\.

### 如何安装 @copilotkit/channels-ui？

在项目目录运行 npm install @copilotkit/channels-ui，或使用 pnpm add / yarn add / bun add。

### @copilotkit/channels-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @copilotkit/channels-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @copilotkit/channels-ui 可以商用吗？

@copilotkit/channels-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @copilotkit/channels-ui 的下载量有多少？

根据 npm 官方下载统计，@copilotkit/channels-ui 在 2026/10/11 – 2026/11/09 这 30 天内被下载 1,139,501 次，日均约 37,983 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @copilotkit/channels-ui 还在维护吗？

最新版本 0\.12\.0 发布于 2026/10/28（13 天前）；至今共发布 45 个版本，其中过去 12 个月发布了 45 个；首次发布于 2026/07/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。