useChat

The useChat hook provides chat functionality for a LiveKit room.

Import

import { useChat } from "@livekit/components-react";

Remarks

Message history is not persisted and will be lost if the component is refreshed. You may want to persist message history in the browser, a cache or a database.

Usage

function ChatComponent() {
  const { chatMessages, send, isSending } = useChat();

  return (
    <div>
      {chatMessages.map((msg) => (
        <div key={msg.timestamp}>
          {msg.from?.identity}: {msg.message}
        </div>
      ))}
      <button disabled={isSending} onClick={() => send("Hello!")}>
        Send Message
      </button>
    </div>
  );
}

Returns

An object containing: - chatMessages - Array of received chat messages - send - Function to send a new message - isSending - Boolean indicating if a message is currently being sent

{
    send: (message: string, options?: import('livekit-client').SendTextOptions) => Promise<ReceivedChatMessage>;
    chatMessages: ReceivedChatMessage[];
    isSending: boolean;
}