Skip to main content
Version: v1.x

Events

NLUX emits events when the user interacts with the UI, when server sends a message, or when errors occur. You can register event listeners to listen to these events.

Event Listeners​

You can register event listeners to listen to events emitted by the AI chat UI component.

Events are emitted when the user interacts with the UI, when server sends a message, or when errors occur.

Listen To An Event​

You can listen to an event by using the events property when defining your <AiChat /> component.

The events property is an object where the key is the event name and the value is a function that will be called when the event is triggered. Here is an example of how to listen to the messageSent and messageReceived events:

<AiChat
    adapter={myAdapter}
    events={{
        messageSent: (message: string) => console.log(message),
        messageReceived: (message: string) => console.log(message),
    }}
/>

Remove An Event Listener​

In order to remove an event listener, you can simply update the object passed to events property of <AiChat /> component. For example, if you want to remove the messageReceived event listener, you can pass a new object that does not contain the messageReceived key:

<AiChat
    adapter={myAdapter}
    events={{
        messageSent: (message: string) => console.log(message),
    }}
/>

Whenever the events property is updated, <AiChat /> component will automatically remove the previous event listeners and add the new ones.

If you want to remove all event listeners, you can simply remove the events property:

<AiChat adapter={myAdapter} />

Events​

Below is a list of events emitted by the AI chat UI component.

Ready​

  • Event Name: ready

This event is emitted when the AI chat UI component is mounted and ready to use.

  • Callback Type:
type ReadyEventDetails = {
    // Props used to initialize the AiChat component
    aiChatProps: AiChatProps;
};

type ReadyCallback = (readyDetails: ReadyEventDetails) => void;
  • Example:
import {AiChat, ReadyCallback, ReadyEventDetails} from '@nlux/react';

export default () => {
    const callback = useCallback<ReadyCallback>(
        (readyDetails: ReadyEventDetails) => {
            // Do something
        }, []
    );

    return (
        <AiChat
            adapter={adapter}
            events={{
                ready: callback,
            }}
        />
    );
};

Pre-Destroy​

  • Event Name: preDestroy

This event is emitted when the AI chat UI component is about to be destroyed. It allows access to the component's state and props before it is destroyed.

  • Callback Type:
type PreDestroyEventDetails = {
    aiChatProps: AiChatProps;
    conversationHistory: Readonly<ConversationItem[]>;
};

type PreDestroyCallback = (preDestroyDetails: PreDestroyEventDetails) => void;
  • Example:
import {AiChat, PreDestroyCallback, PreDestroyEventDetails} from '@nlux/react';

export default () => {
    const callback = useCallback<ReadyCallback>(
        (preDestroyDetails: PreDestroyEventDetails) => {
            if (preDestroyDetails.conversationHistory > 0) {
                // Do something with the conversation history before it is destroyed
            }
        }, []
    );

    return (
        <AiChat
            adapter={adapter}
            events={{
                ready: callback,
            }}
        />
    );
};

Message Sent​

  • Event Name: messageSent

This event is emitted when the user sends a message. The event only gets triggered when the adapter method responsible for sending the message to the backend executes successfully. For standard adapters, this means that the message was successfully sent to the backend.

  • Callback Type:
type MessageSentCallback = (message: string) => void;
  • Example:
import {AiChat, MessageSentCallback} from '@nlux/react';

export default () => {
    const messageSentCallback = useCallback<MessageSentCallback>(
        (message: string) => console.log(message), []
    );

    return (
        <AiChat
            adapter={adapter}
            events={{
                messageSent: messageSentCallback,
            }}
        />
    );
};

Message Received​

  • Event Name: messageReceived

This event is emitted when a message is received from the server. The event listener receives the message as a parameter.

| For Promise Adapters ― The event listener receives when the promise is resolved.
| For Streaming Adapters ― The event listener receives the message when the streaming is complete and the message is fully received.

Please note that messageReceived does not mean that the message has fully rendered on the screen. NLUX renders the messages in a character-by-character animation, so the message may still being rendered when this event is emitted.

  • Callback Type:
type MessageReceivedCallback = (message: string) => void;
  • Example:
import {AiChat, MessageSentCallback} from '@nlux/react';

export default () => {
    const messageReceivedCallback = useCallback<MessageSentCallback>(
        (message: string) => console.log(message), []
    );

    return (
        <AiChat
            adapter={adapter}
            events={{
                messageReceived: messageReceivedCallback,
            }}
        />
    );
};

Error​

  • Event Name: error

This event is emitted when an exception occurs. The event listener receives the ErrorEventDetails object as a parameter.

  • Callback Type:
type ErrorEventDetails = {
    errorId: string;
    message: string;
};

type ErrorCallback = (error: ErrorEventDetails) => void;
  • Example:
import {AiChat, ErrorCallback, ErrorEventDetails} from '@nlux/react';

export default () => {
    const errorCallback = useCallback<ErrorCallback>(
        (details: ErrorEventDetails) => {
            console.log(details.errorId);
            console.log(details.message);
        }, []
    );

    return (
        <AiChat
            adapter={adapter}
            events={{
                error: errorCallback,
            }}
        />
    );
};