npm package: @saytv/chat-react
Description: React wrapper for the [SayTV Chat SDK](https://www.npmjs.com/package/@saytv/chat-sdk) — a fully featured, themeable chat widget.
Latest version: 2.1.6

# @saytv/chat-react

React wrapper for the [SayTV Chat SDK](https://www.npmjs.com/package/@saytv/chat-sdk) — a fully featured, themeable chat widget.

## Installation

```bash
npm install @saytv/chat-react
```

## Usage

```tsx
import { SayTVChat, useSayTVChat } from '@saytv/chat-react';

function App() {
  const { chatRef, setToken, setTheme } = useSayTVChat();

  return (
    <SayTVChat
      ref={chatRef}
      appId="your-app-id"
      theme="light"
      height={700}
      width="100%"
      onMessageSent={(e) => console.log('Sent:', e.detail)}
      onError={(e) => console.error('Error:', e.detail)}
    />
  );
}
```

## Props

| Prop | Type | Required | Description |
|---|---|---|---|
| `appId` | `string` | No | App identifier (resolves API URL) |
| `env` | `'production' \| 'staging'` | No | Environment (default: `'production'`) |
| `apiUrl` | `string` | No | API base URL (overrides appId/env) |
| `authToken` | `string` | No | User access token |
| `builtInAuth` | `boolean` | No | Enable built-in login UI (default: `true`) |
| `fanzone` | `boolean` | No | Enable fanzone features (default: `false`) |
| `height` | `number` | No | Height in pixels (default: `850`) |
| `width` | `string` | No | CSS width (default: `'450px'`) |
| `theme` | `'light' \| 'dark'` | No | Color theme (default: `'light'`) |
| `mode` | `'page-chat'` | No | Widget mode |
| `pageId` | `string` | No | Page identifier (used with `mode="page-chat"`) |
| `pageName` | `string` | No | Page display name (used with `mode="page-chat"`) |
| `className` | `string` | No | CSS class on wrapper div |
| `style` | `CSSProperties` | No | Inline styles on wrapper div |

### Event Callbacks

| Prop | Description |
|---|---|
| `onReady` | Widget initialized and ready |
| `onUserLogin` | User logged in |
| `onUserLogout` | User logged out |
| `onMessageSent` | Current user sent a message |
| `onMessageReceived` | New message received from another user |
| `onNavigation` | Page changed within the widget |
| `onEpisodeChanged` | User selected an episode |
| `onRoomJoined` | User entered a chat room |
| `onThemeChanged` | Color theme switched |
| `onPageChatReady` | Page chat episode created or reconnected |
| `onError` | SDK error occurred |

All event callbacks receive a `CustomEvent` with relevant data in `event.detail`.

## Hook

```ts
const { chatRef, getElement, setToken, setTheme } = useSayTVChat();
```

| Return | Description |
|---|---|
| `chatRef` | Pass to `<SayTVChat ref={chatRef}>` for imperative access |
| `getElement()` | Returns the underlying `<saytv-chat>` HTMLElement |
| `setToken(token)` | Update the access token |
| `setTheme(theme)` | Switch between `'light'` and `'dark'` |

## Theming

Override CSS custom properties via inline styles:

```tsx
<SayTVChat
  appId="your-app-id"
  style={{ '--stv-color-primary': '#4f46e5' } as React.CSSProperties}
/>
```

See the [@saytv/chat-sdk docs](https://www.npmjs.com/package/@saytv/chat-sdk) for the full list of CSS custom properties.

## License

Proprietary. All rights reserved.