ChatState

The chat session state class. $state + $derived under the hood — read the fields directly in your markup, no subscribe boilerplate.

Usage

src/lib/components/ChatHeader.svelte

<script>
  import { ChatState } from '@cstar.help/svelte';

  // Defaults to the nearest CStarChatProvider's client
  const chat = new ChatState();

  async function startIdentify() {
    const res = await fetch('/api/cstar-auth');
    const { signature, customer } = await res.json();
    await chat.identify(customer, signature);
  }
</script>

{#if chat.isIdentified}
  <span>Hi, {chat.customer.name}</span>
  <button onclick={() => chat.logout()}>Sign out</button>
{:else}
  <button onclick={startIdentify}>Sign in to chat</button>
{/if}

Reactive fields

chat.isIdentified — boolean.
chat.customer — identified customer payload, or null.
chat.identify(customer, signature) — Promise.
chat.logout() — clears the session.
chat.client — escape hatch to the underlying ChatClient when you need a method the state class doesn't expose.

Next up

TicketsState List + create tickets reactively. MessagesState Per-ticket message stream.