# ChatBot

## Overview

A generic chat button and chat window widget.

## Attributes

- `buttonText` - Text to show on a button that triggers the chat; default is `Ask us`.
- `headerText` - Text to show on the top bar of the chat window; default is `Chatbot`.
- `closeText` - Text to show on the close chat button; default is `Close window`.
- `sendText` - Label for send button; default is `Send`.
- `attachText` - Label for attachment button; default is `Attach`.
- `inputText` - Input placeholder; default is `Type your message`.
- `icon` - SVG icon to show on top on the button.
- `messages` - List of messages. Each message is an object with the following properties:
  - `children` - A list of Preact's `h` objects. Any arbitrary structure is supported.
  - `isBot` - Flag to mark if a message comes from a bot.
  - `timestamp` - Optional Date object. If present, it will be rendered at the top of each message with `toLocaleString()` method using the locale of the current site (or the browser if not present).
- `forceOpen` - When set to true, it will show the chat window. Showing the chat always triggers `onInit()`
- `isBusy` - When set to `true`, sending messages is blocked.
- `onInit` - Callback triggered when a user clicks on the button for the first time. When `forceShow` is set to true, it will be called automatically.
- `onSend` - Callback triggered when a user sends a message.
- `onAttach` - Callback triggered when attachment button is clicked. The attachment button only appears when the callback is provided.
- `onClose` - Callback triggered on `beforeunload`. Note that clicking the `x` button does not trigger it as it only minimises the chat window.

## Examples

```js
h(ChatBot, {
  buttonText: 'Ask us',
  headerText: 'My chatbot',
  closeText: 'Close window',
  sendText: 'Send',
  attachText: 'Attach',
  inputText: 'Type your message',
  icon: 'path/to/icon.svg'
  forceOpen: false,
  isBusy: false,
  onInit () {

  },
  onSend (text) {

  },
  onAttach (file) {

  },
  onClose () {

  },
  messages: [{
    children: [],           // Preact children
    timestamp: new Date()   // Optional
  }, {
    children: [],           // Preact children
    timestamp: new Date(),  // Optional
    isBot: true             // Mark if bot response, otherwise user input
  }]
})
```
