React Chat - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

Chat is a UI component that allows users to send and receive messages in real time.

This tutorial shows how to add Chat to the page and configure the component's core settings.

Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository:

View on GitHub

Create a Chat

Add DevExtreme to your Angular application and use the following code to create a Chat component:

app.component.html
app.component.ts
app.module.ts
  • <dx-chat></dx-chat>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  •  
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxChatModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxChatModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

To limit the Chat size, use the width and height properties:

app.component.html
  • <dx-chat
  • [width]="400"
  • [height]="450"
  • >
  • </dx-chat>

Render Sent Messages

When a user enters a message in the Chat, the messageEntered event is raised. You can use this event handler to render the message you entered.

In React, the primary way to render a new message is updating your items array or dataSource. This tutorial uses the items array:

app.component.html
app.component.ts
  • <dx-chat ...
  • [items]="messages"
  • (onMessageEntered)="onMessageEntered($event)"
  • >
  • </dx-chat>
  • import { DxChatTypes } from "devextreme-angular/ui/chat";
  • // ...
  • export class AppComponent {
  • messages: DxChatTypes.Message[] = [];
  •  
  • onMessageEntered({ message }) {
  • this.messages = [...this.messages, message];
  • }
  • }

Manage Users

Assign chat users:

  • Specify the user's ID.
  • Specify the user's name. If the name is not specified, it becomes "Unknown User".
  • Define avatars with a URL and alt text. If the URL is not specified, the avatar becomes the user's name initials.
  • Assign a user to the user property to define the chat owner.
app.component.html
app.component.ts
  • <dx-chat ...
  • [user]="firstUser"
  • >
  • </dx-chat>
  • import { DxChatTypes } from "devextreme-angular/ui/chat";
  • // ...
  • export class AppComponent {
  • firstUser: DxChatTypes.User = {
  • id: "1",
  • name: "User",
  • };
  • secondUser: DxChatTypes.User = {
  • id: "2",
  • name: "Feedback Bot",
  • avatarUrl: "./images/Chat/bot.png"
  • };
  • }

Set Initial Messages

If you want to specify initial messages in the Chat, use the items array.

app.component.html
app.component.ts
  • <dx-chat ...
  • [items]="messages"
  • >
  • </dx-chat>
  • import { DxChatTypes } from "devextreme-angular/ui/chat";
  • // ...
  • export class AppComponent {
  • messages: DxChatTypes.Message[] = [{
  • timestamp: Date.now(),
  • author: secondUser,
  • text: "Hello! We'd love to hear your feedback. Please share your thoughts below!"
  • }];
  • }

Post-Processing

Use onMessageEntered to perform message post processing (like sending the message to the server for storage). This tutorial simulates sending a message to a backend:

  1. The Feedback Bot user is added to the typingUsers array to show them typing.
  2. After one second, the typingUsers array is emptied, and Chat displays the answer message.
  3. After that, an alert is displayed, and Chat is disabled.
app.component.html
app.component.ts
  • <dx-chat ...
  • [(alerts)]="alerts"
  • [(disabled)]="disabled"
  • >
  • </dx-chat>
  • import { DxChatTypes } from "devextreme-angular/ui/chat";
  • // ...
  • export class AppComponent {
  • messages: DxChatTypes.Message[] = [...];
  • alerts: DxChatTypes.Alert[] = [];
  • disabled: boolean = false;
  •  
  • onMessageEntered({ message }) {
  • // ...
  • this.typingUsers = [this.secondUser];
  • this.sendToBackend();
  • }
  •  
  • sendToBackend() {
  • setTimeout(() => {
  • this.typingUsers = [];
  • this.messages = [
  • ...this.messages,
  • {
  • text: "Thanks for helping us improve!",
  • author: this.secondUser,
  • timestamp: Date.now(),
  • },
  • ];
  • this.alerts = [
  • ...this.alerts,
  • {
  • id: 1,
  • message: "Session expired",
  • },
  • ];
  • this.disabled = true;
  • }, 1000);
  • }
  • }