ChatPanelMixin

Configs

The path to an avatar to display at the top of the chat bubble area

An array of DomConfig items to show tool icons associated with each remote speech bubble. Each tool can be clicked by the user to perform an action. Upon clicking a tool, the chat panel will trigger a {#event-bubbleToolClick} event with details.

intro: String | DomConfigAlso a property

An introductory text (or DomConfig) shown at the top of the chat bubble area

messages: ChatMessageModelConfigAlso a property

The initial messages to display in the chat bubble area (e.g. a bot greeting message "Hello, how may I help you?"

showTimestamp: BooleanAlso a property

Set to true to show a timestamp below each chat bubble

Properties

Class hierarchy

isChatPanelMixin: Boolean= truereadonly

Identifies an object as an instance of ChatPanelMixin class, or subclass thereof.

isChatPanelMixin: Boolean= truereadonlystatic

Identifies an object as an instance of ChatPanelMixin class, or subclass thereof.

Other

avatar: StringAlso a config

The path to an avatar to display at the top of the chat bubble area

bubbleTools: DomConfigAlso a config

intro: String | DomConfigAlso a config

An introductory text (or DomConfig) shown at the top of the chat bubble area

messages: ChatMessageModelConfigAlso a config

The initial messages to display in the chat bubble area (e.g. a bot greeting message "Hello, how may I help you?"

showTimestamp: BooleanAlso a config

Set to true to show a timestamp below each chat bubble

store: Store

A reference to the data store storing all the chat messages.

Functions

addMessage

Add a message bubble to the chat log. Accepts data for the ChatMessageModel, or a Promise that later resolves to such data. When passed a promise, the bubble will show a loading indicator until resolved.

Parameter	Type	Description
`message`	Promise \| ChatMessageModelConfig	A message config object, or a Promise resolving a string with the text

Events

bubbleToolClick

Fired when chat bubble tool icon is clicked.

// Adding a listener using the "on" method
chatPanelMixin.on('bubbleToolClick', ({ source, tool, message }) => {

});

Parameter	Type	Description
`source`	ChatPanel	This panel
`tool`	String	The tool identifier
`message`	ChatMessageModelConfig	The message data for the associated chat bubble

localMessage

Fired when a client side message is added via the text input field (or by picking a predefined option bubble).

// Adding a listener using the "on" method
chatPanelMixin.on('localMessage', ({ source, text, id }) => {

});

Parameter	Type	Description
`source`	ChatPanel	This panel
`text`	String	The text
`id`	String	The message id

Event handlers

onBubbleToolClick

Called when chat bubble tool icon is clicked.

new ChatPanelMixin({
    onBubbleToolClick({ source, tool, message }) {

    }
});

Parameter	Type	Description
`source`	ChatPanel	This panel
`tool`	String	The tool identifier
`message`	ChatMessageModelConfig	The message data for the associated chat bubble

onLocalMessage

Called when a client side message is added via the text input field (or by picking a predefined option bubble).

new ChatPanelMixin({
    onLocalMessage({ source, text, id }) {

    }
});

Parameter	Type	Description
`source`	ChatPanel	This panel
`text`	String	The text
`id`	String	The message id