@ 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)来束缚.

安装

pnpm add @copilotkit/channels-ui

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

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

这个包裹船 @copilotkit/channels-ui/jsx-runtime (和 /jsx-dev-runtime出口 jsx 编号 : jsxs 编号 : Fragment。作者组件 文件为 .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"> 不会 类型检查。 没有小写内在标记;词汇是 以下为资本化部分.

行为道具

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

• Button → onClick
• Select → onSelect
• Input → onSubmit

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

<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,两个通用 点击控件的值类型 :

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() 所以引擎坚持 小有效载荷明确与薄荷活性能代号相接:

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(中文(简体) ).