@chainlit/react-client

概览

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

安装

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

npm install @chainlit/react-client

此软件包的使用 后坐力 来管理国家 这意味着您必须在后座力提供者中包装您的应用程序 :

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: 设置聊天配置状态.

示例

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:用户的第一个消息.

示例

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: 一系列任务列表元素.

示例

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: 更新聊天设置.

示例

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