# Netwatch

## Usage

### Bubble

Below is the example for how a bubble would be added to your netwatch instance:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Netwatch</title>
  </head>
  <body>
    <script type="module">
      import NetwatchBot from "https://cdn.jsdelivr.net/npm/netwatch-chat-js@latest/lib/web.js";

      NetwatchBot.initBubble({
         clientId: "random-client-id",
         apiHost: 'https://netwatch-api.host.com/api/chat',
         autoShowDelay: undefined,
         brandColor: undefined,
         isPreview: undefined,
         netwatchBot: undefined,
         onAnswer: undefined,
         onClose: undefined,
         onEnd: undefined,
         onInit: undefined,
         onNewInputBlock: undefined,
         onOpen: undefined,
         onPreviewMessageClick: undefined,
         prefilledVariables: undefined,
         previewMessage: undefined,
         resultId: undefined,
         theme: {
            button: {
               backgroundColor: undefined,
               customCloseIconSrc: undefined,
               customIconSrc: undefined,
               iconColor: undefined,
               size: undefined,
            },
            chatWindow: {
               backgroundColor: undefined,
               maxHeight: undefined,
               maxWidth: undefined,
            },
            placement: undefined,
            previewMessage: {
               backgroundColor: undefined,
               closeButtonBackgroundColor: undefined,
               closeButtonIconColor: undefined,
               textColor: undefined,
            },
         },
      });
    </script>
  </body>
</html>
```

This code is creating a bubble button at the bottom of your page.

## Development

- To run the project in dev mode:

```bash
  pnpm dev # Test chat is on localhost:3000/test make sure you have the 'netwatch-server' runing
```

- Currently dont build the project

- The widget is on npm as `netwatch-chat-js`.

## Versioning & Publishing

### Stable Release (Latest)
- Use `@latest` tag for production environments
- Published via: `pnpm release` or `pnpm release:detect`

### Beta Release
- Use `@beta` tag for testing new features
- Published via: `pnpm release:beta` or `pnpm release:beta:detect`

### Usage Examples

**Stable version:**
```html
<script type="module">
  import NetwatchBot from "https://cdn.jsdelivr.net/npm/netwatch-chat-js@latest/lib/web.js";
</script>
```

**Beta version:**
```html
<script type="module">
  import NetwatchBot from "https://cdn.jsdelivr.net/npm/netwatch-chat-js@beta/lib/web.js";
</script>
```

### Available Scripts

- `pnpm release:beta` - Build and publish beta version
- `pnpm release:beta:detect` - Cross-platform beta release
- `pnpm safe-release:beta` - Build standalone and publish beta
- `pnpm push:beta` - Version bump and publish beta (without build)
