​
React Hook

@chainlit/react-client 包提供了几个 React Hook，用于无缝管理聊天应用程序的各个方面。

  • useChatSession：管理聊天会话与 WebSocket 服务器的连接。
  • useChatMessages：管理聊天消息的检索和渲染。
  • useChatData：访问与聊天相关的数据和状态。
  • useChatInteract：提供与聊天系统交互的方法。
  • useAuth：处理认证过程。
  • useApi：使用内置的数据获取和错误处理支持简化 API 交互。

​
useChatSession Hook

此 Hook 负责管理聊天会话与 WebSocket 服务器的连接。

​
方法

  • connect：建立与 WebSocket 服务器的连接。
  • disconnect：断开与 WebSocket 服务器的连接。
  • setChatProfile：设置聊天配置文件状态。

​
示例

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 */
      },
      accessToken: 'Bearer YOUR ACCESS TOKEN', // Optional Chainlit auth token
    });

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

  // Rest of your component logic
};

​
useChatMessages Hook

useChatMessages Hook 提供对当前聊天消息、首次用户交互以及 React 应用程序中活动线程 ID 的访问。它利用 Recoil 进行状态管理，确保组件响应状态变化进行响应式更新。

​
返回值

  • threadId (string | undefined)
    当前聊天线程的标识符。
  • messages (IStep[])
    聊天消息数组。
  • firstInteraction (string | undefined)
    首次用户发起交互的内容。

​
示例

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

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

  return (
    <div>
      <h2>Thread ID: {threadId}</h2>
      {firstInteraction && <p>First Interaction: {firstInteraction}</p>}
      {messages.map((message) => (
        <p key={message.id}>{message.content}</p>
      ))}
    </div>
  );
};

​
useChatData Hook

useChatData Hook 提供对 React 应用程序中各种与聊天相关的状态和数据的全面访问。

​
返回属性

  • actions (IAction[])
  • askUser (IAsk | undefined)
  • chatSettingsValue (any)
  • connected (boolean)
  • disabled (boolean)
  • error (boolean | undefined)
  • loading (boolean)
  • tasklists (ITasklistElement[])

​
示例

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

const ChatStatusComponent = () => {
  const { connected, loading, error, actions, askUser, chatSettingsValue } = useChatData();

  return (
    <div>
      <h2>Chat Status</h2>
      {loading && <p>Loading chat...</p>}
      {error && <p>There was an error with the chat session.</p>}
      <p>{connected ? 'Connected to chat.' : 'Disconnected from chat.'}</p>

      <h3>Available Actions</h3>
      <ul>
        {actions.map((action) => (
          <li key={action.id}>{action.name}</li>
        ))}
      </ul>

      {askUser && (
        <div>
          <h3>User Prompt</h3>
          <p>{askUser.message}</p>
        </div>
      )}

      <h3>Chat Settings</h3>
      <pre>{JSON.stringify(chatSettingsValue, null, 2)}</pre>
    </div>
  );
};

​
useChatInteract Hook

useChatInteract Hook 提供一组全面的方法，用于在 React 应用程序中与聊天系统交互。

​
方法

  • sendMessage
  • replyMessage
  • clear
  • uploadFile
  • callAction
  • startAudioStream
  • sendAudioChunk
  • stopTask

​
示例

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

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

  return (
    <div>
      <button onClick={() => sendMessage({ content: 'Hello!' })}>Send</button>
      <button onClick={() => replyMessage({ content: 'Reply!' })}>Reply</button>
      <button onClick={clear}>Clear</button>
    </div>
  );
};

​
useAuth Hook

useAuth Hook 管理 React 应用程序中的认证，提供用户会话和令牌管理等功能。

​
属性与方法

  • authConfig
  • user
  • accessToken
  • isLoading
  • logout

​
示例

import { useAuth } from '@chainlit/react-client';

const UserProfile = () => {
  const { user, logout } = useAuth();

  if (!user) return <p>No user logged in.</p>;

  return (
    <div>
      <p>Username: {user.username}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

​
useApi Hook

useApi Hook 使用 SWR 简化数据获取和错误处理。

​
示例

import { useApi } from '@chainlit/react-client';

const Settings = () => {
  const { data, error, isLoading } = useApi('/project/settings');

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};