@c轨道/反应-ui

代理产品的回放组件:与推理的对话,工具调用和批准,运行状态,文物和图表,由一个Tailwind v4符号主题来作风格. 轨道的UI软件包:它使数据成为来自Interchange的主机网络应用负载,并在任何React 18或19应用中工作而无需Interchange.

为什么?

1. 推进,加注出局. 没有组件获取、订阅或持有客户端 。 你的数据层是属于你的,每个组件在故事,测试和制作上都是一样的.
2. 特工形状的构件. Message 转一转 Tool, (中文(简体) ), Reasoning 财务报告和审定财务报表 Activity 将其部分(文本、推理、工具调用), ToolApproval 在电话之前问一个人 GateBlock 财务报告和审定财务报表 StepList 掩护一个人的跑道.
3. 付你进口的东西. 一个根条目,包除了它的 CSS 外是无副作用的,还有重同位素(Radix 对话框,下放菜单,工具提示, sonner)是可选的.
4. 服务器组件准备 . 状态模块船 "use client"因此,一个 React Server 组件应用程序直接导入它们。 在RSC之外,指令是禁止的.

安装

bun add @corbits/react-ui react react-dom lucide-react @radix-ui/react-slot

需要节点 24 或以后。 在React 19上被测试;对等范围也接受React 18.2+.

只有导入它们的模块需要可选同伴。 这些模块不在根项中, 因此通过子路径导入 :

快速启动

在应用程序根导入样式表, 在您的 CSS 之前, 并挂载 ThemeProvider 靠近根 :

import "@corbits/react-ui/styles.css";

import {
  Activity,
  Conversation,
  ConversationContent,
  ConversationItem,
  ConversationScrollButton,
  Message,
  MessageContent,
  MessageHeader,
  ThemeProvider,
  groupActivity,
  type ConversationMessage,
  type ConversationParticipant,
} from "@corbits/react-ui";

const you: ConversationParticipant = { id: "u1", kind: "person", name: "You" };
const scout: ConversationParticipant = {
  id: "a1",
  kind: "agent",
  name: "Scout",
};

const messages: ConversationMessage[] = [
  {
    id: "m1",
    author: you,
    at: "2026-01-01T09:00:00Z",
    status: "sent",
    parts: [{ kind: "text", text: "What changed in the repo today?" }],
  },
  {
    id: "m2",
    author: scout,
    at: "2026-01-01T09:00:04Z",
    status: "sent",
    parts: [
      {
        kind: "reasoning",
        text: "Check the commit log first.",
        durationMs: 1200,
      },
      {
        kind: "tool-trace",
        toolCallId: "t1",
        name: "git__log",
        status: "output-available",
        output: "3 commits",
      },
      { kind: "text", text: "Three commits landed today, all in the docs." },
    ],
  },
];

function Turn({ message }: { message: ConversationMessage }) {
  const own = message.author.id === you.id;
  return (
    <Message
      from={own ? "own" : message.author.kind}
      status={message.status}
      aria-label={own ? "You" : undefined}
    >
      {own ? null : (
        <MessageHeader name={message.author.name} at={message.at} />
      )}
      {groupActivity(message.parts).map((group) => {
        if (group.kind === "activity")
          return <Activity key={group.key} steps={group.steps} />;
        if (group.part.kind === "text")
          return <MessageContent key={group.key} text={group.part.text} />;
        return null;
      })}
    </Message>
  );
}

export function App() {
  return (
    <ThemeProvider>
      <div style={{ display: "flex", flexDirection: "column", height: 480 }}>
        <Conversation>
          <ConversationContent>
            {messages.map((message) => (
              <ConversationItem key={message.id} itemId={message.id}>
                <Turn message={message} />
              </ConversationItem>
            ))}
          </ConversationContent>
          <ConversationScrollButton />
        </Conversation>
      </div>
    </ThemeProvider>
  );
}

这使得用户消息在泡沫中,代理商的思维和工具调用被折叠成一个活动行并打开到两者,代理商的回复. 所有其他部分(工具呼叫等待一个人、图像、来源、文件)都有自己的组件;见 聊天。 。 。 .

styles.css 包括Tailwind预飞和一基层,因此它重新塑造了页面. 如果您已经运行 Tailwind v4, 导入 @corbits/react-ui/theme.css 让你的建筑 产生公用事业。 导入其中之一,绝不是两者兼有;没有两者之一,组件就变得不具有样式.

合适的话

• 互换 管理AI代理作为主要负责人(拥有自己权限和资格的一等身份). 该枢纽是其多租户控制平面:租户、校长、赠款(授权持有本金)和证书。 侧车是便携式代理运行时间.
• 轨道 是一个将代理产品转化为产品的套件。 这个包是UI桶:它在主机网络应用中运行并插入主机的数据层,而不是插入中枢或侧车.
• 它与它所生成的数据的枢纽模块相配,例如: @corbits/artifacts, (中文(简体) ), @corbits/mailbox 财务报告和审定财务报表 @corbits/cron。 。 。 .

参考文献

从根部导入;它会树摇动到您使用的东西. 只有可选的对等模块有自己的子路径:

import { Button } from "@corbits/react-ui";
import { Toaster, toast } from "@corbits/react-ui/ui/toast";

export function SignOut() {
  return (
    <>
      <Button onClick={() => toast("Signed out.")}>Sign out</Button>
      <Toaster position="bottom-right" />
    </>
  );
}

他们

暗模式是一个 .dark 班级的祖先。 没有 .dark 也没有 .light 在根上,符号跟着 prefers-color-scheme 设置 color-scheme 当地控制; dark: 公用事业仍然需要 .dark 祖师相.

ThemeProvider 切换两个类并坚持选择 storageKey。管理类本身的主机添加 .light 自去除后 .dark 回到操作系统。 为避免黑暗OS上存储的光选择,添加 .light 仅当存储的选择是轻而易举时,在第一次油漆之前:

<script>
  if (localStorage.getItem("corbits-theme")?.includes('"light"'))
    document.documentElement.classList.add("light");
</script>

主题名称为"红色帽子"(Red Hat Display)和"空间单曲"(Space Mono),但没有将它们捆绑. 自己装入或堆栈倒回系统字体; 覆盖 --font-sans 财务报告和审定财务报表 --font-mono 以另一个名字装入的脸.

构成部分

所有从 @corbits/react-ui,但标记“可选对等点”的行除外,该行从显示的子路径导入;见 安装。 。 。 .

聊天

运行

艺术品

图表

版式

控件

编码代理

包裹载有一种代理技能:一个简短的指南、使用规则和每个部件的道具参考。 对准你的经纪人 node_modules/@corbits/react-ui/skills/react-ui (从 SKILL.md),或将该文件夹复制到您的代理技能目录中.

使用互换

主机应用程序拥有与枢纽的连接;组件仅取道具.

1. 装入运行状态 @intx/hub-client数字 : createRunSession 民意调查 工作流程记录 并披露以下顺序 WorkflowRunEvent 时间表.
2. 将时间线映射到道具: 代理输出到 ConversationMessage 提供部件 Message 内置 a Conversation一个工具呼叫等待一个人到 PartTool 携带 ToolApprovalRecord 页:1 ToolApproval,步骤事件 StepList ,并运行在一个人停 GateBlock。 。 。 .
3. 电线回调回枢纽. ToolApproval是因为 onDecide 呼叫您的中枢路线,以决定的结果和范围解决等待的批准;中枢检查呼叫者的赠款,而不是组件. 和解记录又回来了 ToolApproval 显示什么是决定.

从0.3升级

旧聊家取出. 对话家庭代替它:一个信息就是一个 ConversationMessage 谁 parts 为 a ConversationPart[] (歧视 kind),组件由您所编的部件构建,而不是每个屏幕的一个组件.

• Part, (中文(简体) ), PartText, (中文(简体) ), PartReasoning, (中文(简体) ), PartToolTrace, (中文(简体) ), PartBlock, (中文(简体) ), PartFile, (中文(简体) ), PartEvent 财务报告和审定财务报表 ToolTraceStatus 不变,仍从根导入.

删除了出口和替换出口的内容:

从0.1升级

• 从 npm 安装 。 Git 安装( E)github:corbitsdev/react-ui#<sha>不再建设 dist/。 。 。 .
• 每个模块子路径已消失: 从 @corbits/react-ui (单位:千美元)import { Button } from "@corbits/react-ui") (中文(简体) ).
• ui/dialog, (中文(简体) ), ui/command-palette, (中文(简体) ), ui/sidebar-search, (中文(简体) ), ui/mic-permission-dialog, (中文(简体) ), ui/menu, (中文(简体) ), ui/tooltip 财务报告和审定财务报表 ui/toast 只能是子路径,而他们的同伴是可选的: import { Toaster, toast } from "@corbits/react-ui/ui/toast"。为您保存的每个子路径安装对等点.
• lib/csv, (中文(简体) ), lib/url, (中文(简体) ), lib/utils, (中文(简体) ), lib/workflow-registry 财务报告和审定财务报表 ui/chat-dock-timing (去除于0.4)为内. 替换 cn 与 twMerge(clsx(...))。 。 。 .
• 国有部件船 "use client"客户端的包装纸你为它们写了,还可以去.
• 删除了84个未使用的模块, ui/command 被删除, ActivityBlock 重新命名为 ReasoningBlock (删除为0.4;使用) Reasoning,参见 从0.3升级),以及 AuthLayout 不再计算 DitherCanvas 默认.
• 没有 .dark 也没有 .light 在根上,主题遵循OS. 切换的主机 .dark 必须添加 .light 或挂载 ThemeProvider。 。 。 .

许可证

LGPL-2.1-仅限. 见 自由主义。 。 。 .