npm package: @saytv/chat-vue
Description: Vue 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-vue

Vue 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-vue
```

## Usage

```vue
<script setup lang="ts">
import { SayTVChat, useSayTVChat } from '@saytv/chat-vue';

const { chatRef, setToken, setTheme } = useSayTVChat();
</script>

<template>
  <SayTVChat
    ref="chatRef"
    app-id="your-app-id"
    theme="light"
    :height="700"
    width="100%"
    @message-sent="(e) => console.log('Sent:', e.detail)"
    @error="(e) => console.error('Error:', e.detail)"
  />
</template>
```

## 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"`) |

Props use camelCase in script and kebab-case in templates.

## Events

| Event | Description |
|---|---|
| `@ready` | Widget initialized and ready |
| `@user-login` | User logged in |
| `@user-logout` | User logged out |
| `@message-sent` | Current user sent a message |
| `@message-received` | New message received from another user |
| `@navigation` | Page changed within the widget |
| `@episode-changed` | User selected an episode |
| `@room-joined` | User entered a chat room |
| `@theme-changed` | Color theme switched |
| `@page-chat-ready` | Page chat episode created or reconnected |
| `@error` | SDK error occurred |

All events receive a `CustomEvent` with relevant data in `event.detail`.

## Composable

```ts
const { chatRef, getElement, setToken, setTheme } = useSayTVChat();
```

| Return | Description |
|---|---|
| `chatRef` | Template ref to bind to `<SayTVChat>` 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:

```vue
<SayTVChat
  app-id="your-app-id"
  :style="{ '--stv-color-primary': '#4f46e5' }"
/>
```

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.