# @hostwebhook/chat-widget

Framework-agnostic chat widget for HostWebhook chat triggers. Works in any
frontend framework via a single Web Component, plus a thin React wrapper
for teams that want typed JSX and native event handlers.

```bash
npm install @hostwebhook/chat-widget
```

## Plain HTML / Vue / Svelte / Angular

```html
<script type="module">
  import '@hostwebhook/chat-widget';
</script>

<hw-chat chat-id="abc123"></hw-chat>
```

## React / Next.js

```tsx
import { HwChat } from '@hostwebhook/chat-widget/react';

export default function Page() {
  return <HwChat chatId="abc123" />;
}
```

## Signed triggers (authenticated embeds)

When the trigger is in `signed` mode, provide a callback that fetches an
HMAC signature from your backend. The widget caches the token and refreshes
it automatically before the 5-minute window expires.

```tsx
<HwChat
  chatId="abc123"
  authProvider={async () => {
    const r = await fetch('/api/my-chat-auth', { credentials: 'include' });
    return r.json(); // { sig, ts }
  }}
/>
```

Or declaratively (no JS):

```html
<hw-chat chat-id="abc123" auth-endpoint="/api/my-chat-auth"></hw-chat>
```

Your backend computes:

```js
const sig = crypto.createHmac('sha256', process.env.HW_CHAT_SECRET)
  .update(`${sessionId}:${ts}`)
  .digest('hex');
```

## Theming

Every customisable token is a CSS variable on the host element:

```css
hw-chat {
  --hw-primary: #7c3aed;
  --hw-bg: #09090b;
  --hw-text: #fafafa;
  --hw-muted: #71717a;
  --hw-radius: 16px;
}
```

## Status

v0.1 — API plumbing + Web Component registration. Full ChatView UI port
ships next. Existing `<script src=".../widget.js">` embed still works and
will be switched to this package under the hood in a later phase.