# @chainlit/react-client 中文文档

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

版本：0\.5\.0
npm 元数据更新时间：2026-08-25T17:00:14.806Z
中文译文更新时间：2026-11-09T09:33:30.583Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：487 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：@types/react ^18\.3\.1，react ^18\.3\.1，react-dom ^18\.3\.1，recoil ^0\.7\.7
- 首次发布：2023-11-16T14:22:10.320Z
- 最新版本发布：2026-08-25T17:00:14.424Z
- 近 30 天下载量：4664（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 5 个）

## 中文简介

Websocket 客户端可以连接到您的连锁应用程序.

## 安装

```sh
npm install @chainlit/react-client
```

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

## README

## 概览

这个 `@chainlit/react-client` 软件包提供了一组反应钩子以及连接到您的API客户端 [链条](https://github.com/Chainlit/chainlit) 应用程序来自任何反应应用程序。 该套件包括用于管理聊天会话的钩子,消息,数据和交互.

## 安装

要安装软件包,请在项目目录中运行以下命令:

```sh
npm install @chainlit/react-client
```

此软件包的使用 [后坐力](https://github.com/facebookexperimental/Recoil) 来管理国家 这意味着您必须在后座力提供者中包装您的应用程序 :

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';

import { ChainlitAPI, ChainlitContext } from '@chainlit/react-client';

const CHAINLIT_SERVER_URL = 'http://localhost:8000';

const apiClient = new ChainlitAPI(CHAINLIT_SERVER_URL, 'webapp');

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ChainlitContext.Provider value={apiClient}>
      <RecoilRoot>
        <MyApp />
      </RecoilRoot>
    </ChainlitContext.Provider>
  </React.StrictMode>
);
```

## 使用量

### `useChatSession`

此钩子负责管理聊天会话与WebSocket服务器的连接.

#### 方法

-   `connect`: 建立与 WebSocket 服务器的连接.
-   `disconnect`: 从 WebSocket 服务器上断开连接.
-   `setChatProfile`: 设置聊天配置状态.

#### 示例

```jsx
import { useChatSession } from '@chainlit/react-client';

const ChatComponent = () => {
  const { connect, disconnect, chatProfile, setChatProfile } = useChatSession();

  // Connect to the WebSocket server
  useEffect(() => {
    connect({
      userEnv: {
        /* user environment variables */
      }
    });

    return () => {
      disconnect();
    };
  }, []);

  // Rest of your component logic
};
```

### `useChatMessages`

这个钩子提供了聊天消息和第一个用户消息的访问权限.

#### 属性

-   `messages`: 一系列聊天信息.
-   `firstUserMessage`:用户的第一个消息.

#### 示例

```jsx
import { useChatMessages } from '@chainlit/react-client';

const MessagesComponent = () => {
  const { messages, firstUserMessage } = useChatMessages();

  // Render your messages
  return (
    <div>
      {messages.map((message) => (
        <p key={message.id}>{message.output}</p>
      ))}
    </div>
  );
};
```

### `useChatData`

这个钩子提供各种聊天相关数据和状态的访问.

#### 属性

-   `actions`:一系列动作.
-   `askUser`:当前询问用户状态.
-   `avatars`: 一系列相声元素.
-   `chatSettingsDefaultValue`:聊天设置的默认值.
-   `chatSettingsInputs`: 当前聊天设置输入 .
-   `chatSettingsValue`: 聊天设置的当前值.
-   `connected`: 一个布尔表示是否建立了 WebSocket 连接 .
-   `disabled`: 一个布尔表示聊天是否被禁用 .
-   `elements`: 一系列聊天元素.
-   `error`:布尔表示会话中是否有出错.
-   `loading`:布尔表示聊天是否处于装入状态.
-   `tasklists`: 一系列任务列表元素.

#### 示例

```jsx
import { useChatData } from '@chainlit/react-client';

const ChatDataComponent = () => {
  const { loading, connected, error } = useChatData();

  // Use the data to render your component
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error connecting to chat...</p>;
  if (!connected) return <p>Disconnected...</p>;

  // Rest of your component logic
};
```

### `useChatInteract`

此钩子提供了与聊天交互的方法,例如发送消息,回复,以及更新设置等.

#### 方法

-   `callAction`:要求采取行动.
-   `clear`: 清除聊天会话.
-   `replyMessage`: 对消息的答复.
-   `sendMessage`:发送消息.
-   `stopTask`: 停止当前的任务.
-   `setIdToResume`: 设置ID以恢复一条线程 .
-   `updateChatSettings`: 更新聊天设置.

#### 示例

```jsx
import { useChatInteract } from '@chainlit/react-client';

const InteractionComponent = () => {
  const { sendMessage, replyMessage } = useChatInteract();

  const handleSendMessage = () => {
    const message = { output: 'Hello, World!', id: 'message-id' };
    sendMessage(message);
  };

  const handleReplyMessage = () => {
    const message = { output: 'Replying to your message', id: 'reply-id' };
    replyMessage(message);
  };

  // Render your interaction component
  return (
    <div>
      <button onClick={handleSendMessage}>Send Message</button>
      <button onClick={handleReplyMessage}>Reply to Message</button>
    </div>
  );
};
```

## 常见问题

### @chainlit/react-client 是什么？

Websocket 客户端可以连接到您的连锁应用程序\.

### 如何安装 @chainlit/react-client？

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

### @chainlit/react-client 支持 TypeScript 吗？

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

### @chainlit/react-client 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @chainlit/react-client 可以商用吗？

@chainlit/react-client 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @chainlit/react-client 的下载量有多少？

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

### @chainlit/react-client 还在维护吗？

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