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

安装

pnpm add @copilotkit/bot-ui

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

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

这个包裹船 @copilotkit/bot-ui/jsx-runtime (和 /jsx-dev-runtime出口 jsx 编号 : jsxs 编号 : Fragment。作者组件 文件为 .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 网格数 Fields (双栏键/值布局). | | 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,两个通用 点击控件的值类型 :

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

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