# @cossistant/react 中文文档

规范地址：https://npmcn.com/package/%40cossistant/react/

版本：0\.3\.0
npm 元数据更新时间：2026-08-04T16:21:42.294Z
中文译文更新时间：2026-11-10T20:28:33.315Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：563 kB，266 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：react \>=18 \<20，react-dom \>=18 \<20，@types/react ，tailwindcss \*
- 首次发布：2025-10-21T17:37:00.385Z
- 最新版本发布：2026-08-04T16:21:42.122Z
- 近 30 天下载量：12113（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：34（近 12 个月 17 个）

## 中文简介

无头反应 SDK用于构建AI-动力支持/聊天部件. Hooks + 原始人,由 WS 驱动, TypeScript 第一. 接下来是Js准备 尾风可选.

## 安装

```sh
npm install @cossistant/react
```

也可以使用：`pnpm add @cossistant/react`、`yarn add @cossistant/react`、`bun add @cossistant/react`

## README

# 相距反应 SDK

在 React 中构建一个随时可用的支持部件, 包含良好的默认, 快速的样式 , 当你需要更进一步的时候,一个可调和的API.

## 安装

```bash
bun add @cossistant/react
```

## 导入样式

在您的应用根使用一个样式表 :

```tsx
import "@cossistant/react/styles.css";
```

或者,如果你的应用程序已经使用 Tailwind CSS v4 :

```tsx
import "@cossistant/react/support.css";
```

## 快速启动

如果您想要 Cossistant 拥有运行时间, 请使用下拉部件: 客户端 使用寿命周期、访问者背景、网络保护状态、路线、开放状态、槽和 本地化.

```tsx
import { LazySupport } from "@cossistant/react/lazy-support";
import { SupportProvider } from "@cossistant/react/provider";
import "@cossistant/react/styles.css";
import { Suspense } from "react";

export function App() {
  return (
    <SupportProvider publicKey="pk_live_...">
      <Suspense fallback={null}>
        <LazySupport />
      </Suspense>
    </SupportProvider>
  );
}
```

`LazySupport` 密码分割电池组件。 它与飞船 默认触发器、路由器、主页、对话页、时间表、作曲器 在初始应用程序块中保留 UI 时设置了样式钩 。 使用 `Support` 从 `@cossistant/react/support` 当有急切的部件或化合物时 子组件, 如 `Support.Trigger` 需要这样做.

## 无头初级

在您想要拥有UI状态并通过时直接使用钩子和原始字 明确的客户端。 这不需要将子树包入 `SupportProvider`。 。 。 .

```tsx
import { CossistantClient } from "@cossistant/core";
import { SupportTrigger } from "@cossistant/react/primitives/trigger";
import { useSubmitFeedback } from "@cossistant/react/hooks/use-submit-feedback";
import { useState } from "react";

const client = new CossistantClient({ publicKey: "pk_live_..." });

export function CustomFeedbackButton() {
  const [open, setOpen] = useState(false);
  const feedback = useSubmitFeedback({ client });

  return (
    <div>
      <SupportTrigger
        className="rounded-md bg-black px-3 py-2 text-white"
        isOpen={open}
        onToggleOpen={() => setOpen((value) => !value)}
        unreadCount={0}
      >
        {({ isOpen }) => (isOpen ? "Close" : "Send feedback")}
      </SupportTrigger>

      {open ? (
        <button
          onClick={() =>
            feedback.mutate({
              rating: 5,
              source: "headless",
              visitorId: "visitor_123",
            })
          }
          type="button"
        >
          Send rating
        </button>
      ) : null}
    </div>
  );
}
```

提供者- 选项钩包括 `useSubmitFeedback`, (中文(简体) ), `useSendMessage`, (中文(简体) ), `useCreateConversation`, (中文(简体) ), `useFileUpload`,以及 `useFeedbackForm`如果 `client` 实值 省去它们返回到 `SupportProvider`; 如果没有客户端, 则失败 带有明显的缺失客户端错误.

## 反馈快速启动

使用 `Feedback` 当您想要轻量级/ 评论部件时, 需要以 同样的访客背景.

```tsx
import { Feedback, SupportProvider } from "@cossistant/react";
import "@cossistant/react/styles.css";

export function App() {
  return (
    <SupportProvider publicKey="pk_live_...">
      <Feedback topics={["Bug", "Feature request", "UX", "Other"]} />
    </SupportProvider>
  );
}
```

`Feedback` 支持与支持部件相同的受控开放模式 :

```tsx
import { Feedback } from "@cossistant/react/feedback";
import { useState } from "react";

export function ControlledFeedback() {
  const [open, setOpen] = useState(false);

  return (
    <Feedback.Root open={open} onOpenChange={setOpen}>
      <Feedback.Trigger asChild>
        <button type="button">Feedback?</button>
      </Feedback.Trigger>

      <Feedback.Content side="bottom" align="end">
        <div className="p-4">Build any feedback UI here.</div>
      </Feedback.Content>
    </Feedback.Root>
  );
}
```

## 支持打字钩

以 :

-   `classNames.trigger`
-   `classNames.content`
-   `slotProps`

默认支持部件也暴露出稳定的 DOM 钩:

-   `data-slot`
-   `data-state`
-   `data-page`
-   `data-support-mode`

## 反馈型钩

以 :

-   `classNames.trigger`
-   `classNames.content`

默认反馈部件也暴露出稳定的 DOM 钩:

-   `data-slot`
-   `data-state`
-   `data-feedback-*`

常见时间段包括: `feedback-root`, (中文(简体) ), `feedback-trigger`, (中文(简体) ), `feedback-content`, (中文(简体) ), `feedback-panel`, (中文(简体) ), `feedback-form`, (中文(简体) ), `feedback-rating-field`,以及 `feedback-submit`。 。 。 .

## 将第一部分交换到 `slots`

使用 `slots` 当你想要比重建整个部件树更好的DX时.

```tsx
import {
  Support,
  type SupportHomePageSlotProps,
  type SupportTriggerSlotProps,
} from "@cossistant/react";
import * as React from "react";

function mergeClassNames(...classes: Array<string | undefined>) {
  return classes.filter(Boolean).join(" ");
}

const CustomBubble = React.forwardRef<
  HTMLButtonElement,
  SupportTriggerSlotProps
>(function CustomBubble({ isOpen, unreadCount, toggle, className, ...props }, ref) {
  return (
    <button
      {...props}
      className={mergeClassNames("fixed right-4 bottom-4 z-[9999]", className)}
      onClick={toggle}
      ref={ref}
      type="button"
    >
      {isOpen ? "Close" : "Need help?"} ({unreadCount})
    </button>
  );
});

function CustomHomePage({
  quickOptions,
  startConversation,
}: SupportHomePageSlotProps) {
  return (
    <div className="flex h-full flex-col gap-3 p-6">
      <h2 className="text-2xl font-semibold">Real support, instantly.</h2>
      {quickOptions.map((option) => (
        <button
          key={option}
          onClick={() => startConversation(option)}
          type="button"
        >
          {option}
        </button>
      ))}
    </div>
  );
}

<Support
  slots={{
    trigger: CustomBubble,
    homePage: CustomHomePage,
  }}
  slotProps={{
    content: {
      className: "rounded-3xl border shadow-2xl",
    },
  }}
/>;
```

## 完全组成 `Support.Root`

使用 `Support.Root` 需要自定义外壳、 明确页注册或 内置 在这个模式下,您拥有触发布局类.

```tsx
import { Support } from "@cossistant/react";

function LaunchChecklistPage() {
  return <div className="p-6">Your custom home page</div>;
}

export function App() {
  return (
    <Support.Root open>
      <Support.Trigger asChild>
        <button className="fixed right-4 bottom-4 z-[9999]" type="button">
          Compose support
        </button>
      </Support.Trigger>

      <Support.Content className="rounded-3xl border shadow-2xl">
        <Support.Router>
          <Support.Page component={LaunchChecklistPage} name="HOME" />
        </Support.Router>
      </Support.Content>
    </Support.Root>
  );
}
```

## 更多文档

-   [反应支持文件](https://cossistant.com/docs/support-component)
-   [自定义指南](https://cossistant.com/docs/support-component/customization)
-   [路线指南](https://cossistant.com/docs/support-component/routing)

## 常见问题

### @cossistant/react 是什么？

无头反应 SDK用于构建AI-动力支持/聊天部件\. Hooks \+ 原始人,由 WS 驱动, TypeScript 第一\. 接下来是Js准备 尾风可选\.

### 如何安装 @cossistant/react？

在项目目录运行 npm install @cossistant/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18 \<20）、react-dom（\>=18 \<20）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cossistant/react 支持 TypeScript 吗？

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

### @cossistant/react 支持 ESM 还是 CommonJS？

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

### @cossistant/react 可以商用吗？

@cossistant/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cossistant/react 的下载量有多少？

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

### @cossistant/react 还在维护吗？

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