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 React from 'react';
import ReactDOM from 'react-dom';
import { Chat } from '@progress/kendo-react-conversational-ui';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.user = {
            id: 1,
            name: "John"
        };
        this.bot = {
            id: 0
        };
        this.attachments = [ {
            content: 'The Westin Copley Place, Boston',
            contentType: 'hotel'
        }, {
            content: 'Boston Park Plaza',
            contentType: 'hotel'
        }, {
            content: 'Sheraton Boston Hotel',
            contentType: 'hotel'
        }, {
            content: 'InterContinental Boston',
            contentType: 'hotel'
        } ];
        this.state = {
            messages: [ {
                author: this.bot,
                text: 'A message with attachments carousel',
                attachments: this.attachments
            }, {
                author: this.bot,
                text: 'A message with attachments list',
                attachmentLayout: 'list',
                attachments: this.attachments
            } ]
        };
    }

    render() {
        return (
            <div>
                <Chat user={this.user}
                    messages={this.state.messages}
                    width={400}>
                </Chat>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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 React from 'react';
import ReactDOM from 'react-dom';
import { conversation, user } from './conversation.jsx';
import { Chat } from '@progress/kendo-react-conversational-ui';

function AttachmentTemplate(props) {
    let attachment = props.item;
    if (attachment.contentType === 'hotel') {
        return <a href={attachment.site} target="_blank" draggable={false} tabIndex={-1}>
            <img style={{ width: 150 }}src={attachment.thumb} draggable={false} />
        </a>;
    } else if (attachment.contentType.match('^image/')) {
        return <img src={attachment.content} draggable={false} />;
    } else if (attachment.contentType === 'text/plain') {
        return attachment.content;
    } else {
        return null;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.user = user;
        this.state = {
            messages: conversation
        };
    }

    addNewMessage = (event) => {
        this.setState((prevState) => {
            return { messages: [ ...prevState.messages, event.message ] };
        });
    };

    render() {
        return (
            <div>
                <Chat user={this.user}
                    messages={this.state.messages}
                    onMessageSend={this.addNewMessage}
                    width={400}
                    attachmentTemplate={AttachmentTemplate}>
                </Chat>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /