@getuserfeedback/chat-react

Headless React hooks for @getuserfeedback/chat.

The package is UI-free and avoids DOM APIs, so the same hooks can be used in React DOM and React Native apps. Realtime requires a WebSocket implementation.

Install

npm install @getuserfeedback/chat-react

Before rendering the provider against the default Chat API, fetch a JWT from your own backend or auth provider. The token must be minted for your getuserfeedback.com app:

protected alg: the asymmetric signing algorithm selected in Widget settings
protected typ: gx-widget+jwt
aud: copy the Audience shown in Widget settings
sub: the stable identity for this user in your app
exp: the token expiration time as a Unix timestamp

See the identity verification guide for the issuer, JWKS, claim, and rollout contract.

With a custom baseUrl, pass the bearer credential your backend expects. Your backend authenticates it, then calls getuserfeedback.com with a JWT that follows the profile above.

import {
  GetUserFeedbackChatProvider,
  useConversation,
  useCreateConversation,
  useConversations,
} from "@getuserfeedback/chat-react";

function Inbox() {
  const { conversations, loadMore, refresh, status } = useConversations();
  const newConversation = useCreateConversation();

  async function handleStart() {
    const { conversation } = await newConversation.create({
      text: newConversation.text,
    });
    // Select conversation.id in your app state.
  }

  // Loads on mount by default; render your own UI.
}

function Thread({ conversationId }: { conversationId: string }) {
  const { messages, send } = useConversation({ conversationId });
  // Loads messages on mount by default; render your own UI.
}

export function App() {
  return (
    <GetUserFeedbackChatProvider
      clientOptions={{
        auth: {
          jwt: {
            token,
          },
        },
        realtime: true,
      }}
    >
      {/* ... */}
    </GetUserFeedbackChatProvider>
  );
}