Chat component example

ChatConfig options

{{ config | json }}
@if (showComponent) {
@if (showInitialMessage) { You can also use content projection to add any dynamic content to the chat bubble.
} @for (message of displayMessages; track message; let i = $index) { @if (message.role === 'user') {
} @else { } @if (message.role === 'assistant') { } @if (message.role === 'assistant') { } @if (message.role === 'assistant') { } @if (message.role === 'user') { } @if (message.role === 'user') { }
} @if (isLoading) { }
You can also project custom content into the welcome area of the chat component.
@if (showInitialMessage) {
You can also project custom content before all messages.
} @if (showInitialMessage) {
You can also project custom content after all messages.
} @if (showInitialMessage) {
This is content that is projected by default and always shown.
}
}

Show timestamps on chat messages

The option controls the AIMessage objects passed to the component, it's not part of the configuration.