All Components

Message Attachments

The Chat messages may contain attachments such as images, videos, or data.

Supported Attachment Types

The Chat provides built-in support for displaying:

  • Images—The contentType has to start with "image/". The content has to be a valid URL.
  • Plain-text attachments—The built-in Chat template displays any content other than images as text.

Defining Attachments

To define attachments for a message:

  1. Populate the attachments field of the message.
  2. Set the content and an optional contentType for each Attachment. Typically, the content type identifier for the attachment is MIME, but you can also use a string.

Display Modes

By default, message attachments are displayed as a carousel or card deck below the message. You can also display attachments in a list by setting the attachmentLayout of the message.

import { Component } from '@angular/core';
import { Message, User, Attachment } from '@progress/kendo-angular-conversational-ui';

const attachments: Attachment[] = [{
  content: 'Attachment One'
}, {
  content: 'Attachment Two'
}];

@Component({
  selector: 'my-app',
  template: `
    <kendo-chat [messages]="messages" [user]="user"></kendo-chat>
  `
})
export class AppComponent {
  public readonly user: User = {
    id: 1
  };

  public readonly bot: User = {
    id: 0
  };

  public messages: Message[] = [{
    author: this.bot,
    text: 'A message with attachments carousel',
    attachments: attachments
  }, {
    author: this.bot,
    text: 'A message with attachments list',
    attachmentLayout: 'list',
    attachments: attachments
  }];
}
import { NgModule } from '@angular/core';
import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChatModule } from '@progress/kendo-angular-conversational-ui';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, ChatModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Attachment Templates

To customize the attachments, define an AttachmentTemplate. To get the default appearance of the built-in attachment template, wrap the template content in a "k-card" container.

import { Component } from '@angular/core';
import { Message, User, Attachment } from '@progress/kendo-angular-conversational-ui';

const attachments: Attachment[] = [{
  content: 'Attachment One'
}, {
  content: 'Attachment Two'
}];

@Component({
  selector: 'my-app',
  template: `
    <kendo-chat [messages]="messages" [user]="user">
      <ng-template kendoChatAttachmentTemplate let-attachment>
        <div class="k-card">
          The attachment content is "{{ attachment.content }}"
        </div>
      </ng-template>
    </kendo-chat>
  `
})
export class AppComponent {
  public readonly user: User = {
    id: 1
  };

  public readonly bot: User = {
    id: 0
  };

  public messages: Message[] = [{
    author: this.bot,
    text: 'A message with attachments',
    attachments: attachments
  }];
}
import { NgModule } from '@angular/core';
import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChatModule } from '@progress/kendo-angular-conversational-ui';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, ChatModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article