@kedge-agentic/context-layer-react

React 组件 — Context Layer @-mention picker。

类型: 框架绑定 (React) · 状态: public · v0.1.0

用途

在 @kedge-agentic/context-layer-core 之上的 React UI:

• AtPicker — 用户输入 @ 时弹出的下拉,用来从注册的 entity provider 里 browse / search / 选 entity
• AtPickerProvider + useAtPickerContext — React context,供深嵌的 component 用
• RefPill — 选中 entity 的彩色 chip 渲染

主要导出

import {
  AtPicker,
  AtPickerProvider,
  useAtPickerContext,
  RefPill,
} from '@kedge-agentic/context-layer-react'

import type {
  EntityRef,
  AtPickerProps,
  ContextEntityRef,
  RefPillProps,
  RefPillColor,
} from '@kedge-agentic/context-layer-react'

用法

<AtPickerProvider client={contextLayerClient}>
  <textarea
    onInput={(e) => {
      // 检测 @,显示 picker
    }}
  />
  <AtPicker
    onSelect={(ref) => insertReference(ref)}
  />
</AtPickerProvider>

依赖

• Peer: @kedge-agentic/context-layer-core, react, react-dom

关联包

• @kedge-agentic/context-layer-core — 框架无关核心 (data layer + HTTP 客户端)
• @kedge-agentic/context-layer-nest — solution backend 暴露 entity 用的 NestJS Module

构建 / 测试

npm run build -w @kedge-agentic/context-layer-react
npm test -w @kedge-agentic/context-layer-react