Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model DevExtreme.MVC.Demos.ViewModels.ChatViewModel
@{
var dayHeaderFormats = new[] { "dd/MM/yyyy", "dd.MM.yyyy", "MMMM dd, yyyy", "EEEE, MMMM dd" };
var messageTimestampFormats = new [] { "hh:mm a", "hh:mm:ss a", "HH:mm", "HH:mm:ss" };
}
<div class="chat-container">
@(Html.DevExtreme().Chat()
.ID("chat")
.Height(710)
.User(user => user
.Id(Model.CurrentUser.Id)
.Name(Model.CurrentUser.Name)
)
.DataSource(Model.Messages)
.ReloadOnChange(false)
.OnMessageEntered("onMessageEntered")
.DayHeaderFormat(dayHeaderFormats[0])
.MessageTimestampFormat(messageTimestampFormats[0])
.OnInitialized("chatInitialized")
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(true)
.Text("Avatar")
.OnValueChanged("showAvatarValueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(true)
.Text("User Name")
.OnValueChanged("showUserNameValueChanged")
)
</div>
<div class="option-separator"></div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(true)
.Text("Day Headers")
.OnValueChanged("showDayHeadersValueChanged")
)
</div>
<div class="option">
<span>Day Header Format:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(dayHeaderFormats)
.Value(dayHeaderFormats[0])
.InputAttr("aria-label", "Day Header Format")
.OnValueChanged("dayHeaderFormatValueChanged")
)
</div>
<div class="option-separator"></div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(true)
.Text("Message Timestamp")
.OnValueChanged("showMessageTimestampValueChanged")
)
</div>
<div class="option">
<span>Message Timestamp Format:</span>
@(Html.DevExtreme().SelectBox()
.DataSource(messageTimestampFormats)
.Value(messageTimestampFormats[0])
.InputAttr("aria-label", "Message Timestamp Format")
.OnValueChanged("messageTimestampFormatValueChanged")
)
</div>
<div class="option-separator"></div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(false)
.Text("Disable Chat")
.OnValueChanged("disabledValueChanged")
)
</div>
</div>
<script>
var userChat, supportChat;
function chatInitialized({ component }) {
chat = component;
}
function onMessageEntered({ message }) {
chat.renderMessage(message);
}
function showAvatarValueChanged(data) {
chat.option("showAvatar", data.value);
}
function showUserNameValueChanged(data) {
chat.option("showUserName", data.value);
}
function showDayHeadersValueChanged(data) {
chat.option("showDayHeaders", data.value);
}
function dayHeaderFormatValueChanged(data) {
chat.option("dayHeaderFormat", data.value);
}
function showMessageTimestampValueChanged(data) {
chat.option("showMessageTimestamp", data.value);
}
function messageTimestampFormatValueChanged(data) {
chat.option("messageTimestampFormat", data.value);
}
function disabledValueChanged(data) {
chat.option("disabled", data.value);
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChatController : Controller {
public ActionResult Customization() {
return View(new ChatViewModel {
CurrentUser = SampleData.CurrentUser,
SupportAgent = SampleData.SupportAgent,
Messages = SampleData.Messages,
});
}
}
}
using DevExtreme.MVC.Demos.Models.Chat;
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
private static readonly DateTime todayDate = DateTime.Now.Date;
private static DateTime GetTimestamp(DateTime date, int offsetMinutes = 0) {
DateTime adjustedDate = date.AddMinutes(offsetMinutes);
return adjustedDate;
}
public static ChatUser CurrentUser = new ChatUser {
Id = "c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3",
Name = "John Doe"
};
public static ChatUser SupportAgent = new ChatUser {
Id = "d16d1a4c-5c67-4e20-b70e-2991c22747c3",
Name = "Support Agent",
AvatarUrl = "../../Content/Images/petersmith.png"
};
public static readonly IEnumerable<Message> Messages = new[] {
new Message {
Timestamp = GetTimestamp(todayDate, -9),
Author = SupportAgent,
Text = "Hello, John!\nHow can I assist you today?",
},
new Message {
Timestamp = GetTimestamp(todayDate, -7),
Author = CurrentUser,
Text = "Hi, I'm having trouble accessing my account.",
},
new Message {
Timestamp = GetTimestamp(todayDate, -7),
Author = CurrentUser,
Text = "It says my password is incorrect."
},
new Message {
Timestamp = GetTimestamp(todayDate, -7),
Author = SupportAgent,
Text = "I can help you with that. Can you please confirm your UserID for security purposes?"
},
new Message {
Timestamp = GetTimestamp(todayDate, 1),
Author = CurrentUser,
Text = "john.doe1357"
},
new Message {
Timestamp = GetTimestamp(todayDate, 1),
Author = SupportAgent,
Text = "✅ Instructions to restore access have been sent to the email address associated with your account."
}
};
}
}
using DevExtreme.MVC.Demos.Models.Chat;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.ViewModels {
public class ChatViewModel {
public IEnumerable<Message> Messages { get; set; }
public ChatUser CurrentUser { get; set; }
public ChatUser SupportAgent { get; set; }
}
}
using System;
using System.Text.Json.Serialization;
namespace DevExtreme.MVC.Demos.Models.Chat
{
public class Message {
[JsonPropertyName("timestamp")]
public DateTime Timestamp { get; set; }
[JsonPropertyName("text")]
public string Text { get; set; }
[JsonPropertyName("author")]
public ChatUser Author { get; set; }
}
}
using System.Text.Json.Serialization;
namespace DevExtreme.MVC.Demos.Models.Chat
{
public class ChatUser {
[JsonPropertyName("id")]
public string Id { get; set; }
[JsonPropertyName("name")]
public string Name { get; set; }
[JsonPropertyName("avatarUrl")]
public string AvatarUrl { get; set; }
}
}
.demo-container {
min-width: 720px;
display: flex;
gap: 20px;
}
.chat-container {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
}
.options {
padding: 20px;
display: flex;
flex-direction: column;
min-width: 280px;
background-color: rgba(191, 191, 191, 0.15);
gap: 16px;
}
.dx-chat {
max-width: 480px;
}
.caption {
font-size: var(--dx-font-size-sm);
font-weight: 500;
}
.option-separator {
border-bottom: 1px solid var(--dx-color-border);
}
.dx-avatar {
border: 1px solid var(--dx-color-border);
}