Events

Events can be observed in two ways, either by assigning a function to a property or by listening to custom events fired from the component element.

onNewMessage

• Function: (newMessage: Body) => void
• Event: new-message
• Body: {message: MessageContent, isInitial: boolean}

Triggered when a message is sent from the user and recieved from the target service.
message encompasses all of the message contents.
isInitial is used to determine whether if the message is from the prepopulated initialMessages property.

Example

Latest events:

>

Function

chatElementRef.onNewMessage = (message) => { console.log(message); };

Event

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

chatElementRef.addEventListener('new-message', (event) => { console.log(event.detail); });

onClearMessages

• Function: () => void
• Event: clear-messages

Triggered when the clearMessages method has been executed. The core purpose of this is to help track messages state.

Example

Latest events:

>

Function

chatElementRef.onClearMessages = () => { console.log("Messages cleared"); };

Event

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

chatElementRef.addEventListener('messages-cleared', () => { console.log("Messages cleared"); });

onComponentRender

• Function: (chatElementRef: DeepChat) => void
• Event: render

Triggered when the component has finished rendering on the browser's window.

Example

Latest events:

> "Finished rendering"

Function

chatElementRef.onComponentRender = () => { console.log("Finished rendering"); };

Event

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

chatElementRef.addEventListener('render', () => { console.log("Finished rendering"); });

note

Setting a property's value on the DeepChat element when this event is triggered can cause infinite recursion as the component will re-render every time a property value is set. Use a flag variable to prevent this - example.

onError

• Function: (error: string) => void
• Event: error

Triggered when an error message appears in the chat.

Example

Latest events:

>

Function

chatElementRef.onError = (error) => { console.log(error); };

Event

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

chatElementRef.addEventListener('error', (event) => { console.log(event.detail); });