useChat

The chat session hook. Reads identity state, exposes the underlying client when you need to call something the hooks don't cover.

Usage

ChatHeader.tsx

import { useChat } from '@cstar.help/react';

export function ChatHeader() {
  const { isIdentified, customer, identify, logout } = useChat();

  if (!isIdentified) {
    return <button onClick={() => startIdentify()}>Sign in to chat</button>;
  }
  return (
    <div>
      <span>Hi, {customer.name}</span>
      <button onClick={logout}>Sign out</button>
    </div>
  );
}

async function startIdentify() {
  // Get the HMAC signature from your server
  const res = await fetch('/api/cstar-auth');
  const { signature, customer } = await res.json();
  await identify(customer, signature);
}

What it returns

isIdentified — boolean. True after a successful identify().
customer — the identified customer payload, or null.
identify(customer, signature) — Promise. Throws on bad signature.
logout() — clears the session.
client — escape hatch to the underlying ChatClient.

Next up

useTickets List + create tickets reactively. useMessages Per-ticket message stream. ChatClient The vanilla JS client this hook wraps.