Chat ▸ Customization

@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 System;
using System.Linq;
using System.Collections.Generic;
using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.Chat;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;

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("id")]
        public string Id { get; set; }

        [JsonPropertyName("timestamp")]
        public DateTime Timestamp { get; set; }

        [JsonPropertyName("author")]
        public ChatUser Author { get; set; }

        [JsonPropertyName("text")]
        public string Text { get; set; }

        [JsonPropertyName("isDeleted")]
        public Boolean IsDeleted { get; set; }

        [JsonPropertyName("isEdited")]
        public Boolean IsEdited { 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);
}