@ copilotkit/ web- 组件
框架不可知、阴影-DOM 升 copilotKit 的自定义元素.
目前这包船 <copilotkit-threads-drawer> ——公众自成一体,
控制线条抽屉。 这是纯洁的 视频: 域数据以
属性和用户意图作为 DOM 流出 CustomEvents. 它不进口反应,
角质,或 @copilotkit/core 代码,并在任何主机页面中正确编译,
幸存的敌对宿主CSS(all: unset尾风预飞 !important) (中文(简体) ).
安装
npm install @copilotkit/web-components lit
lit 是一个对等/运行时间的依赖,所以主机取消了一个Lit运行时间.
使用量
import { defineCopilotKitThreadsDrawer } from "@copilotkit/web-components/threads-drawer";
defineCopilotKitThreadsDrawer(); // registers <copilotkit-threads-drawer> (idempotent)
<copilotkit-threads-drawer active-thread-id="t-123"></copilotkit-threads-drawer>
<script>
const drawer = document.querySelector("copilotkit-threads-drawer");
drawer.threads = [
{
id: "t-123",
name: "My thread",
archived: false,
createdAt: "...",
updatedAt: "...",
},
];
drawer.addEventListener("thread-selected", (e) => open(e.detail.threadId));
drawer.addEventListener("new-thread", () => createThread());
</script>
入境财产(DOMAIN状态——消费者拥有)
| 属性 | 类型 | 说明 |
|---|---|---|
threads | DrawerThread[] | + 权威过滤器 |
loading | boolean | 初始加载 |
error | string | null | 初始比对出错 → 可操作重试 |
activeThreadId | string | null | 驱动选择突出显示 |
licensed | boolean | false ——上市取代名单 |
fetchingMore | boolean | 飞行中标记 |
fetchMoreError | string | null | 内置“ 不能再装入了 —— 重试 ” |
open | boolean | 外部可控(机动协调) |
collapsed | boolean | 桌面倒塌到铁路 |
外部活动(INTENT-bubling + 组成) CustomEvent(c) 财务、财务和预算
thread-selected, (中文(简体) ), archive, (中文(简体) ), unarchive, (中文(简体) ), delete (在内容确认后),
new-thread, (中文(简体) ), filter-change, (中文(简体) ), open-change, (中文(简体) ), retry (单位:千美元){ scope }, (中文(简体) ), upsell。 。 。 .
元素拥有 VIEW 状态: 打开/ 缩合, 活动/ 全部过滤器 确认删除对话框,以及每行条目/视频动画.
瑟明 (赞美)
- CSS 变量 穿透阴影边界——设定
--cpk-drawer-*(单位:千美元)-bg, (中文(简体) ),-fg, (中文(简体) ),-surface, (中文(简体) ),-accent, (中文(简体) ),-primary, (中文(简体) ),-danger, (中文(简体) ),-border, (中文(简体) ),-ring, (中文(简体) ),-radius, (中文(简体) ),-width, (中文(简体) ),-font-family,.)来自主持人. ::part()结构节点上的钩子( t)root, (中文(简体) ),header, (中文(简体) ),list, (中文(简体) ),row, (中文(简体) ),row-name, (中文(简体) ),confirm-dialog, (中文(简体) ),backdrop(中文(简体) ).- 已命名槽数字 :
header, (中文(简体) ),footer, (中文(简体) ),empty, (中文(简体) ),upsell, (中文(简体) ),memories外加一个 每行槽数row:{id}用于在 元素将选择/存档/活化铬置于其周围.
内置默认皮肤的符号值是 在构建时生成 从
反应-core的克诺克主题(packages/react-core/src/v2/styles/globals.css(中文(简体) )
以 scripts/generate-tokens.ts,它会写进报到
src/threads-drawer/generated-tokens.ts运行 pnpm run gen:tokens 重新生化;
generated-tokens.test.ts 如果检查的值从反应核心漂移,则失败.
移动 + a11y
时/下 768px 抽屉是一张有背景背景的空地,
Escape 关闭, 滚动锁, 以及运行于此的焦点陷阱( 仅移动)
包含由编组/平面树组成的分档行。 在桌面上是一个
发生塌陷的流入区 没有 模式( 无焦点陷阱, 无)
滚动锁).