Data Binding
The Chat enables you to bind its message list to streaming data.
Data Model
The Chat component defines interfaces for the following entities:
User
—A unique participant in the conversation.Message
—The metadata and content of each message.Attachment
—The multimedia or additional information which is associated with a chat message.Action
—A suggested quick action in reply to a message. For example, a text reply, external link, or phone call.
As a minimum data-binding configuration for the Chat, provide a list of messages and a user instance which identify the local participant.
User Identity
The user
entity identifies the local user. The messages that are authored by the user appear on the right-hand side of the message list.
import { User } from '@progress/kendo-angular-conversational-ui';
@Component({
selector: 'my-app',
template: `
<kendo-chat [user]="user"></kendo-chat>
`
})
export class AppComponent {
public user: User = {
id: 1, // Required field
name: 'Jane', // Optional
avatarUrl: '/profile.png' // Optional
};
}
Binding to Message Data
Typically, Chat messages stream from a remote service. To bind the Chat to the stream, utilize the built-in async pipe.
Posting Messages
When you set up the messages stream, add the locally posted messages:
- Publish the local messages on an observable stream.
- Merge the messages with the service responses.
The following example demonstrates how to accept the local messages in the sendMessage
event and merge them with the incoming messages.