# @copilotkit/bot-ui 中文文档

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

版本：0\.0\.3
npm 元数据更新时间：2026-07-08T20:45:32.526Z
中文译文更新时间：2026-11-10T22:27:17.457Z
软件包许可：MIT

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

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

弃用说明：Renamed — install @copilotkit/channels-ui instead\.

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

- 包体积（解压后）：37.6 kB，39 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-06-10T20:10:43.844Z
- 最新版本发布：2026-06-19T15:39:40.323Z
- 近 30 天下载量：2572（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

JSX运行时间,IR,以及用于CopilotKit bots的跨平台组件词汇.

## 安装

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

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

## README

# @ copilotkit/ bot- ui (韩语)

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

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

## 安装

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

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

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

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

## 示例

```tsx
import {
  Message,
  Header,
  Section,
  Actions,
  Button,
  renderToIR,
} from "@copilotkit/bot-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/bot post it.
```

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

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

## 组件词汇

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

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

\* 构成部分 \* 目的 \* |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - - ----------- - - - --- - - - - - -- - - - -- - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - -- - - - -- - - | `Message` 用于发布单个消息的根容器 | `Header` 粗体头/标题行 | `Section` QQ 块正文文本 。 @ @ info | `Markdown` 明确标记的文本块 | `Field` \* 内部有一个标签/值单元格 `Fields`。 。 。 | `Fields` 网格数 `Field`s (双栏键/值布局). | | `Context` |小而微弱的次要文本(脚注,元数据). | | `Actions` 用于交互控件的行容器 | `Button` QQ 可点击按钮 - `onClick`, (中文(简体) ), `value`, (中文(简体) ), `style: "primary" | "danger"`。 。 。 | `Select` \* 倒计时—— `onSelect`, (中文(简体) ), `placeholder`, (中文(简体) ), `options: {label,value}[]`。 。 。 | `Input` QQ 文本输入 - `onSubmit`, (中文(简体) ), `placeholder`, (中文(简体) ), `multiline`, (中文(简体) ), `name`。 。 。 | `Image` 一个图像块 | `Divider` 横向规则

### 行为道具

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

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

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: PlatformUser;
  platform: string;
}
```

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

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

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

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

```tsx
import { bind } from "@copilotkit/bot-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`, (中文(简体) ), `PlatformUser`, (中文(简体) ), `IncomingMessage`, (中文(简体) ), `MessageRef`, (中文(简体) ), `ClickHandler`,以及每个组件道具类型(`MessageProps`, (中文(简体) ), `ButtonProps`, (中文(简体) ), `SelectProps`, (中文(简体) ), `TableProps`, (中文(简体) ), `TableColumn`(中文(简体) ).

## 常见问题

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

JSX运行时间,IR,以及用于CopilotKit bots的跨平台组件词汇\.注意：该包已被作者标记为弃用——Renamed — install @copilotkit/channels-ui instead\.

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

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

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

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

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

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

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

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

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

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

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

最新版本 0\.0\.3 发布于 2026/06/19（4 个月前）；至今共发布 3 个版本，其中过去 12 个月发布了 3 个；首次发布于 2026/06/11。作者已将其标记为弃用，新项目建议寻找替代方案。