# @corbits/react-ui 中文文档

规范地址：https://npmcn.com/package/%40corbits/react-ui/

版本：0\.5\.1
npm 元数据更新时间：2026-11-02T04:24:47.118Z
中文译文更新时间：2026-11-10T18:45:54.888Z
软件包许可：LGPL-2\.1-only

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40corbits/react-ui
原文对照：https://npmcn.com/package/%40corbits/react-ui/?lang=original
项目主页：https://github.com/corbitsdev/react-ui#readme
源码仓库：https://github.com/corbitsdev/react-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.5 MB，384 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=24
- 运行依赖：3 个
- peer 依赖：react ^18\.2\.0 \|\| ^19\.0\.0，sonner ^2\.0\.7，react-dom ^18\.2\.0 \|\| ^19\.0\.0，lucide-react ^0\.545\.0 \|\| ^1\.0\.0，@radix-ui/react-slot ^1\.2\.3，@radix-ui/react-dialog ^1\.1\.15，@radix-ui/react-tooltip ^1\.2\.8，@radix-ui/react-dropdown-menu ^2\.1\.16
- 首次发布：2026-09-25T05:13:42.281Z
- 最新版本发布：2026-11-02T04:24:46.906Z
- 近 30 天下载量：4681（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

反应组件用于代理和工作流程表面.

## 安装

```sh
npm install @corbits/react-ui
```

也可以使用：`pnpm add @corbits/react-ui`、`yarn add @corbits/react-ui`、`bun add @corbits/react-ui`

## README

# @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之外,指令是禁止的.

## 安装

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

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

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

| 端点 | 子路径 |
| --- | --- |
| `@radix-ui/react-dialog` | `ui/dialog`, (中文(简体) ), `ui/command-palette`, (中文(简体) ), `ui/sidebar-search`, (中文(简体) ), `ui/mic-permission-dialog` |
| `@radix-ui/react-dropdown-menu` | `ui/menu` |
| `@radix-ui/react-tooltip` | `ui/tooltip` |
| `sonner` | `ui/toast` |

## 快速启动

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

```tsx
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>
  );
}
```

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

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

## 合适的话

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

## 参考文献

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

```tsx
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` 仅当存储的选择是轻而易举时,在第一次油漆之前:

```html
<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`,但标记“可选对等点”的行除外,该行从显示的子路径导入;见 [安装](https://npmcn.com/package/%40corbits/react-ui/#readme-install)。 。 。 .

#### 聊天

| 构成部分 | 这是什么 |
| --- | --- |
| `Conversation` | 整理或跟踪新消息的对话; `useConversation` |
| `ConversationContent` | 滚动日志; a `ConversationItem` 覆盖每个条目 |
| `ConversationScrollButton` | 跳回到最近的消息中 |
| `ConversationEmptyState` | 还没有消息 |
| `ConversationDivider` | 有可选标签的规则,例如一天; `ConversationNotice` 系统行 |
| `ConversationEarlier` | 在阅读器滚动时装入旧信件; `useHistoryWindow` |
| `ConversationMap` | 每转一圈,一圈一圈; `useReadingPosition` |
| `ConversationThread` | 以父信件为首的回覆线索 |
| `Message` | 一个消息,从 `MessageAvatar`, (中文(简体) ), `MessageHeader`, (中文(简体) ), `MessageContent`, (中文(简体) ), `MessageSendStatus` 财务报告和审定财务报表 `MessageFooter` |
| `MessageFold` | 粉碎一个很长的答案 打开它 |
| `MessageParts` | 信件的部件作为其组件, 任何类型的可替换; 当决定的调用折叠时保持焦点 |
| `MessageActions` | 消息下的行行动 : `MessageAction`, (中文(简体) ), `MessageActionMenu` |
| `MessageReactions` | Emoji对数的反应 |
| `MessageReplies` | 回覆数和打开线程的时间 |
| `Activity` | 一系列思维和工具呼叫折叠成一行; `groupActivity` |
| `Reasoning` | 一个特工的想法,折叠 |
| `Tool` | 一个打开输入和输出的工具呼叫 |
| `ToolGroup` | 工具调用同时运行 |
| `ToolApproval` | 批准、批准或拒绝工具召唤等待某人 |
| `GeneratedImages` | 生成时带有占位符的代理图像 |
| `Sources` | 答案的编号引用 |
| `MediaViewer` | 图片、视频、音频、PDF和全文; `useMediaViewer` |
| `Attachments` | 文件为堆栈、平板或列表; `useAttachments` |
| `AttachmentDropZone` | 取掉的文件和文件夹的区域; `useFileDrop` |
| `PromptInput` | 信息框: `PromptInputTextarea`, (中文(简体) ), `PromptInputSubmit`, (中文(简体) ), `PromptInputSuggestions`· ; `usePromptInput` |
| `PromptInputToolbar` | 文本下的控件: 添加菜单、 模式和模式选择、 注释 |
| `ToolPicker` | 浏览、搜索和选择工具 |
| `TypingIndicator` | 代理脚印点 |
| `ThinkingIndicator` | 带有状态标签的动画轨道标记 |
| `ThinkingMark` | 装饰动画轨道标记 |
| `ThinkingLabel` | 旋转动词状态标签 |
| `ShimmerText` | 闪光扫描文本 |
| `MicButton` | 允许的麦克风切换 |
| `VoiceWaveform` | 直播音频关卡栏 |
| `DictationStatusLine` | 作曲者拼写状态行 |
| `MicPermissionDialog` | 麦克风权限提示( 可选的对等点, `ui/mic-permission-dialog`(中文(简体) ) |
| `Panel` | 侧面板从边缘调整大小; 隐藏面板保持状态 |
| `PanelTabs` | 面板的标签行: 选择、 关闭、 拖放或键盘重排 ; `useTabs` |

#### 运行

| 构成部分 | 这是什么 |
| --- | --- |
| `LiveRunBanner` | 运行中的状况 |
| `LiveStatusLine` | 单行"现在发生什么" |
| `GateBlock` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}要是有人决定就停在车站 |
| `StepList` | 运行步骤及其状态的垂直列表 |
| `HorizontalStepper` | 横向步骤进展 |
| `ProgressChecklist` | 长期行动的步骤和进展有多远 |
| `TraceWaterfall` | 运行跟踪时间表, 每段一行 |
| `IntakeForm` | 运行前输入工作流程要求 |
| `RunNowButton` | 立即运行一些东西 |
| `ConfirmButton` | 需要第二次点击的按钮 |
| `NowCards` | 需要采取行动的项目的注意范围 |
| `NotificationsBell` | 有计数和面板槽的铃声 |

#### 艺术品

| 构成部分 | 这是什么 |
| --- | --- |
| `ArtifactBody` | 一件艺术品,画的就是它的意思 |
| `ArtifactNotice` | "这里没什么可画"给文物观众的留言 |
| `BlockCard` | 基因- UI 块框 |
| `ResearchBody` | 研究简报和报告 |
| `CompareBody` | 逐一比较 |
| `EmbedBody` | 嵌入了沙盒的第三方 |
| `CsvTable` | CSV 文本的封面预览 |
| `QuoteCard` | 旋转引用 |
| `ProfileCard` | 身份、地位、行动和渠道 |

#### 图表

| 构成部分 | 这是什么 |
| --- | --- |
| `ChartFrame` | 说明、传说、图案和与表格相同的数据 |
| `TimeSeriesChart` | 随时间演变的数值 |
| `BarChart` | 垂直条 |
| `CategoryBars` | 水平等级 |
| `Sparkline` | 内在趋势线 |
| `TokenMosaic` | 整体份额为一叠条 |
| `StatGrid` | 标题编号网格 |
| `AnimatedNumber` | 算入新值的数字 |

#### 版式

| 构成部分 | 这是什么 |
| --- | --- |
| `PageShell` | 页面边距和滚动属性 |
| `PagePanel` | 相邻的页面内容框架 |
| `TopBar` | 标题、面包屑和动作行 |
| `Sidebar` | 可折叠的导航侧边栏 |
| `SidebarSearch` | 搜索已标注为 Cmd+K (可选的对等点, `ui/sidebar-search`(中文(简体) ) |
| `SidebarPanel` | 有针头、身体和脚的边栏 |
| `SidebarItemRow` | 一个侧行 |
| `ListDetail` | 左边索引,右边打开的项目 |
| `InspectorShell` | 副巡视员铁路 |
| `Section` | 标题内容块 |
| `SettingsPanel` | 可选保存的设置框架 |
| `LibraryPageHeader` | 库页的标题、数和控制 |
| `Card` | 边框内容卡 |
| `EmptyState` | 标题、说明、图标和行动 |
| `RichEmptyState` | 带有建议下一步行动的空状态 |
| `BootScreen` | 应用程序加载前显示的屏幕 |
| `DitherCanvas` | 动画抖动背景 |
| `CorbitsMark` | 轨道标志 |
| `AuthLayout` | 签名页面布局 |
| `LoginForm` | 签名和注册表,可选 SSO |

#### 控件

| 构成部分 | 这是什么 |
| --- | --- |
| `Button` | 有变体和大小的按钮 |
| `Input` | 文本输入 |
| `Textarea` | 多行输入 |
| `Select` | 本地选择 |
| `Checkbox` | 复选框 |
| `SelectionCheckbox` | 行选择复选框 |
| `Switch` | 打开/关闭切换 |
| `FileInput` | 文件拾取器 |
| `Tabs` | 标签条 |
| `ViewToggle` | 网格或行分割控制 |
| `FilterBar` | 带有活动过滤摘要的过滤行 |
| `FilterChip` | 一个可切换的过滤器 |
| `KindCardGrid` | 可选择的牌网格 |
| `ActionBar` | 组合视图控件, 内置或浮动 |
| `BulkActionBar` | 多行选择动作 |
| `Table` | 原始表格 |
| `SortableTable` | 可排序列的表格 |
| `Badge` | 状态标签 |
| `StatusDot` | 有色状态点 |
| `Avatar` | 缩写或图像化 |
| `ProviderMark` | 动作要经过哪些服务 |
| `Skeleton` | 正在装入占位符 |
| `Dialog` | Modal 对话框( 可选对等点 , `ui/dialog`(中文(简体) ) |
| `CommandPalette` | 全局搜索覆盖( 可选的对等者, `ui/command-palette`(中文(简体) ) |
| `Menu` | 下放菜单( 可选的对等点, `ui/menu`(中文(简体) ) |
| `Tooltip`, (中文(简体) ), `InfoTooltip` | 任何触发器周围的通用工具提示,以及徘徊信息glyph(可选对等点, `ui/tooltip`(中文(简体) ) |
| `Toaster` | 烤面包主机; 调用 `toast()` 任何地方(可选对等点, `ui/toast`(中文(简体) ) |
| `ThemeProvider` | 持久光线、 黑暗或系统模式和预设 |
| `ThemeToggle` | 光、暗或系统开关 |

## 编码代理

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

## 使用互换

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

1.  装入运行状态 [`@intx/hub-client`](https://github.com/faremeter/interchange/tree/main/packages/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` 不变,仍从根导入.

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

| 删除 | 改为使用 |
| --- | --- |
| `ChatThread`, (中文(简体) ), `ChatThreadProps` | `Conversation` 与 `ConversationContent`页:1 `ConversationItem` 每个消息和 `ConversationScrollButton` |
| `AgentTurn`, (中文(简体) ), `AgentTurnProps` | `Message` 与 `from="agent"`, (中文(简体) ), `MessageAvatar`, (中文(简体) ), `MessageHeader` 财务报告和审定财务报表 `MessageContent`,与 `MessageParts` 各编 |
| `MessageBubble`, (中文(简体) ), `MessageBubbleProps` | `Message` 与 `MessageContent`· ; `from="own"` 画出气泡 |
| `PartsRenderer`, (中文(简体) ), `PartsRendererProps` | `MessageParts` 内置 a `Message`· ; `renderBlock` 页:1 `block` 组件 |
| `toolTraceToBlockState` | 无替换 : `Tool` 读取 `ToolTraceStatus` 和直接批准记录 |
| `ReasoningBlock`, (中文(简体) ), `ReasoningBlockProps` | `Reasoning` (单位:千美元)`ReasoningTrigger`, (中文(简体) ), `ReasoningContent`在一个 `PartReasoning` |
| `ToolBlock`, (中文(简体) ), `ToolBlockProps`, (中文(简体) ), `ToolBlockState` | `Tool` (单位:千美元)`ToolHeader`, (中文(简体) ), `ToolInput`, (中文(简体) ), `ToolOutput`在一个 `PartTool`国家是它的 `ToolTraceStatus` |
| `ToolNarrative`, (中文(简体) ), `ToolNarrativeProps` | `Tool`,或 `ToolGroup` {\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}因为电话是一起打来的 |
| `ApprovalCard`, (中文(简体) ), `ApprovalCardProps` | `ToolApproval` 编号 `PartTool` 带有 `ToolApprovalRecord`· ; `onApprove`, (中文(简体) ), `onReject` 财务报告和审定财务报表 `onAllowAlways` 变成 `onDecide(ToolApprovalDecision)`,还有忙碌 `state` 变成 `disabled` |
| `ApprovalRequest`, (中文(简体) ), `ApprovalDetail` | 这个 `PartTool` 本身: `name` 财务报告和审定财务报表 `input`,以主机本身对动作的描述为 `ToolApproval`孩子们 |
| `ApprovalState` | `ToolApprovalRecord`是因为 `status` 成果, `ToolApproval`是因为 `disabled` 当决定被记录时 |
| `ChatInput`, (中文(简体) ), `ChatInputProps` | `PromptInput` 与 `PromptInputTextarea` 财务报告和审定财务报表 `PromptInputSubmit`· ; `PromptInputToolbar` 用于文本下的控件 |
| `ChatAttachment` | `AttachmentData` 页:1 `Attachments`, (中文(简体) ), `AttachmentItem` 从 `useAttachments` |
| `ChatComposer`, (中文(简体) ), `ChatComposerProps` | `PromptInput`,与 `ConversationEmptyState` 空话 |
| `QuickReplyChips`, (中文(简体) ), `QuickReply` | 没有替换 : 建议的回复是主机自己的按钮, 例如内部 `ConversationEmptyState` |
| `ChatPanel`, (中文(简体) ), `ChatPanelHeader`, (中文(简体) ), `ChatPanelFooter` | `Panel`, (中文(简体) ), `PanelHeader` 财务报告和审定财务报表 `PanelContent` 用于侧面板; 置入 `Conversation` 财务报告和审定财务报表 `PromptInput` 在自己的画框中 |
| `ChatMessage` | `ConversationMessage`数字 : `role` 变成 `author` (单位:千美元)`ConversationParticipant`, (中文(简体) ), `createdAt` 变成 `at`, (中文(简体) ), `status` 需要时间 |
| `ChatRole` | `ConversationParticipant`是因为 `kind` (单位:千美元)`person` 或者说 `agent`);系统行是 `PartEvent`,显示为 `ConversationNotice` |
| `MessageStatus` | `ConversationMessageStatus`,则添加 `streaming` |
| `MessagePart` | `ConversationPart`歧视 `kind` 改为 `type` |
| `TextPart`, (中文(简体) ), `ReasoningPart`, (中文(简体) ), `FilePart` | `PartText`, (中文(简体) ), `PartReasoning`, (中文(简体) ), `PartFile` |
| `ToolPart` | `PartTool`数字 : `toolName` 变成 `name`, (中文(简体) ), `state` 变成 `status`,以及 `label` 移动到 `ToolHeader`是因为 `label` |
| `ToolPartState` | `ToolTraceStatus`数字 : `done` 变成 `output-available` |
| `AgentIdentity` | `ConversationParticipant` 与 `kind: "agent"`· ; `tagline` 变成 `role`,以及 `MessageAvatar` 带 `initials` |
| `agentInitials` | `MessageAvatar`的缩写 `name` |
| `SubagentRun`, (中文(简体) ), `SubagentState` | 没有替换: 对话模式没有子代理类型; 显示助手的呼叫为 `PartTool`s或 a 类型 `PartToolBatch` |
| `ChatThreadSummary` | 没有替换: 对话列表是主机自己的数据 |
| `messageText`, (中文(简体) ), `reasoningText`, (中文(简体) ), `toolParts` | 无替换:过滤器 `message.parts` 以 `kind` |
| `isTurnWorking` | `parts.some((p) => p.kind === "tool-trace" && p.status === "running")` (任何仍在运行的工具; `message.status === "streaming"` 是整个消息) |
| `toolLabel` | 无替换 : `ToolHeader` 显示原始工具名称,在 `label` 你通过 |
| `ToolProviderMark` | `ProviderMark` 由提供者读取工具代号(`name.split("__")[0]`,用于标识形状 `provider__operation`(中文(简体) ) |
| `useDelayedAutofocus` | 无替换: 元素进入完成后从效果中聚焦 |

## 从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升级](https://npmcn.com/package/%40corbits/react-ui/#readme-upgrading-from-03)),以及 `AuthLayout` 不再计算 `DitherCanvas` 默认.
-   没有 `.dark` 也没有 `.light` 在根上,主题遵循OS. 切换的主机 `.dark` 必须添加 `.light` 或挂载 `ThemeProvider`。 。 。 .

## 许可证

LGPL-2.1-仅限. 见 [自由主义](https://github.com/corbitsdev/react-ui/blob/main/LICENSE)。 。 。 .

## 常见问题

### @corbits/react-ui 是什么？

反应组件用于代理和工作流程表面\.

### 如何安装 @corbits/react-ui？

在项目目录运行 npm install @corbits/react-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.2\.0 \|\| ^19\.0\.0）、react-dom（^18\.2\.0 \|\| ^19\.0\.0）、lucide-react（^0\.545\.0 \|\| ^1\.0\.0）、@radix-ui/react-slot（^1\.2\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @corbits/react-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @corbits/react-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @corbits/react-ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @corbits/react-ui 可以商用吗？

@corbits/react-ui 使用 LGPL-2\.1-only 许可。弱 Copyleft：作为库被调用时通常不要求开源你自己的代码，但修改库本身需以 LGPL 开源；前端打包合并后的适用边界存在不同理解。以上为概括，不构成法律意见，请以许可原文为准。

### @corbits/react-ui 的下载量有多少？

根据 npm 官方下载统计，@corbits/react-ui 在 2026/10/11 – 2026/11/09 这 30 天内被下载 4,681 次，日均约 156 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @corbits/react-ui 还在维护吗？

最新版本 0\.5\.1 发布于 2026/11/02（8 天前）；至今共发布 8 个版本，其中过去 12 个月发布了 8 个；首次发布于 2026/09/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。