Getting Started with KendoReact Conversational UI

The KendoReact Conversational UI bridges the gap between the Web and the next-generation natural language applications and delivers the Chat component which allows the user to participate in chat sessions with other users or with chat bots.

The KendoReact Chat component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-conversational-ui package.

Basic Usage

The following example demonstrates the Chat Component in action.

Example

View Source

Edit In Stackblitz  

Change Theme:Material theme

Functionality and Features

• Integration with Chat Bot services
  • Using with Google DialogFlow
  • Using with Microsoft Bot Framework
• Component usage
  • Data binding
  • Suggested actions
  • Message Attachments
  • Message Templates
  • Customization
  • Globalization
  • Keyboard navigation
  • Accessibility

Installation

1. Download and install the package. Use Node.js v5.0.0 or later.

   Copy Code   npm install --save @progress/kendo-react-conversational-ui @progress/kendo-react-buttons @progress/kendo-react-intl

2. Once installed, import the package module.

   Copy Code// ES2015 module syntax
   import { Chat } from '@progress/kendo-react-conversational-ui';

   Copy Code// CommonJS format
   const { Chat } = require('@progress/kendo-react-conversational-ui');

3. You are required to install one of the KendoReact themes to style your components. For more information on how to add the styles, refer to the article on getting started.

Dependencies

The Conversational UI package requires you to install the following peer dependencies in your application:

• react 16.8.2*
• react-dom
• @progress/kendo-react-buttons
• @progress/kendo-react-intl

Suggested Links

• API Reference of the Chat