In Vanilla JavaScript, the `on` method is used to register event callbacks.<br />
Here is an example of how to use it to listen to the `messageReceived`:

You can either call `on` via the `AiChat` instance **before** mounting, when it's being created:

```tsx
import {createAiChat, MessageReceivedCallback} from '@nlux/core';

const messageReceivedCallback: MessageReceivedCallback = (ev) => {
    console.log('Message received:', ev.message);
};

const aiChat = createAiChat()
    .withAdapter(adapter)
    .on('messageReceived', messageReceivedCallback);
```

You can also add event callbacks anytime **after** it's mounted:

```tsx
const aiChat = createAiChat().withAdapter(adapter);
aiChat.mount(rootElement);

// ...

aiChat.on('messageReceived', callback);
```

In Vanilla JavaScript, **multiple event callbacks** can be registered for the same event:

```tsx
aiChat.on('messageReceived', callback1);
aiChat.on('messageReceived', callback2);
```

You cannot call `on`  **after unmouting** the `AiChat` component. You can use the `status` property to ensure that the
component has not been unmounted.
