Templates in ASP.NET MVC Chat UI control

16 Dec 202423 minutes to read

The Chat UI control provides several templates for customizing the appearance of the empty conversation area, messages, typing indicator, and more. These templates provide flexibility for users to create a unique, personalized chat experience.

Empty chat template

You can use the EmptyChatTemplate property to customize the chat interface when no messages are displayed. Personalized content, such as welcome messages or images, can be added to create an engaging and inviting experience for users starting a conversation.

CSHTML
EmptyChatTemplate.cs
@using Syncfusion.EJ2.InteractiveChat;

<div class="chatui-container" style="height:380px; width:450px">
    @Html.EJS().ChatUI("chatUser").EmptyChatTemplate("#emptyChatContent").Render()
</div>

<script id="emptyChatContent" type="text/x-jsrender">
    <div class="empty-chat-text">
        <h4><span class="e-icons e-comment-show"></span></h4>
        <h4>No Messages Yet</h4>
        <p>Start a conversation to see your messages here.</p>
    </div>
</script>

<style>

    .empty-chat-text {
        font-size: 15px;
        text-align: center;
        margin-top: 90px;
    }

</style>
public ActionResult EmptyChatTemplate()
{
    return View();
}

EmptyChatTemplate

Message template

You can use the MessageTemplate property to customize the appearance and styling of each chat message. Modify text styling, layout, and other design elements to ensure a personalized chat experience. The template context includes Message and Index items.

CSHTML
MessageTemplate.cs
@using Syncfusion.EJ2.InteractiveChat

<div class="chatui-container" style="height:380px; width:450px">
    @Html.EJS().ChatUI("messageTemplate").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).MessageTemplate("#messagesContent").Render()
</div>

<script id="messagesContent" type="text/x-jsrender">
    <div class="message-items e-card">
        <div class="message-text">${message.text}</div>
    </div>
</script>

<style>

    #messageTemplate .e-right .message-items {
        border-radius: 16px 16px 2px 16px;
        background-color: #c5ffbf;
    }

    #messageTemplate .e-left .message-items {
        border-radius: 16px 16px 16px 2px;
        background-color: #f5f5f5;
    }

    #messageTemplate .message-items {
        padding: 5px;
    }
</style>
using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };

public ActionResult Default()
{
    CurrentUser = CurrentUserModel;
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Hi Michale, are we on track for the deadline?",
        Author = CurrentUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Yes, the design phase is complete.",
        Author = MichaleUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "I’ll review it and send feedback by today.",
        Author = CurrentUserModel
    });
    ViewBag.ChatMessagesData = ChatMessagesData;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

MessageTemplate

Time break template

You can use the TimeBreakTemplate property to customize the template, such as showing “Today,” “Yesterday,” or specific dates. This enhances conversation organization by clearly separating messages based on time, improving readability for the user. The template context includes MessageDate.

CSHTML
TimebreakTemplate.cs
@using Syncfusion.EJ2.InteractiveChat;
@using Newtonsoft.Json;

<div class="chatui-container" style="height:380px; width:450px">
    @Html.EJS().ChatUI("timeBreakTemplate").User(ViewBag.CurrentUser).ShowTimeBreak(true).TimeBreakTemplate("#timebreakContent").Created("onCreated").Render()
</div>

<script id="timebreakContent" type="text/x-jsrender">
    <div class="timebreak-wrapper">${getFormattedTime(messageDate)}</div>
</script>

<style>
    #timeBreakTemplate .timebreak-wrapper {
        background-color: #6495ed;
        color: #ffffff;
        border-radius: 5px;
        padding: 2px;
    }
</style>

<script>
    var chatUIObj;
    var chatMessages = @Html.Raw(JsonConvert.SerializeObject(ViewBag.ChatMessagesData));
    chatMessages.forEach(message => {
        message.timeStamp = new Date(message.timeStamp);
    });

    function onCreated() {
        var chatUiEle = document.getElementById('timeBreakTemplate');
        chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
        chatUIObj.messages = chatMessages;
        chatUIObj.dataBind();
    }

    function getFormattedTime(messageDate) {
        var date = new Date(messageDate);
        var day = String(date.getDate()).padStart(2, '0');
        var month = String(date.getMonth() + 1).padStart(2, '0');
        var year = date.getFullYear();
        var hours = date.getHours();
        var minutes = String(date.getMinutes()).padStart(2, '0');
        var ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12 || 12;
        return `${day}/${month}/${year} ${hours}:${minutes} ${ampm}`;
    }
</script>
using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };

public ActionResult Default()
{
    CurrentUser = CurrentUserModel;
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Hi Michale, are we on track for the deadline?",
        Author = CurrentUserModel,
        TimeStamp = new DateTime(2024,12,25,7,30,0)
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Yes, the design phase is complete.",
        Author = MichaleUserModel,
        TimeStamp = new DateTime(2024,12,25,8,0,0)
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "I’ll review it and send feedback by today.",
        Author = CurrentUserModel,
        TimeStamp = new DateTime(2024,12,25,11,0,0)
    });
    ViewBag.ChatMessagesData = ChatMessagesData;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

TimebreakTemplate

Typing indicator template

You can use the TypingUsersTemplate property to customize the display of users currently typing in the chat. It allows for styling and positioning of the typing indicator, enhancing the user experience. The template context includes Users.

CSHTML
TypingUsersTemplate.cs
@using Syncfusion.EJ2.InteractiveChat;
@using Newtonsoft.Json;

<div class="chatui-container" style="height:380px; width:450px">
    @Html.EJS().ChatUI("typingUsersTemplate").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).TypingUsersTemplate("#typingUsersContent").Created("onCreated").Render()
</div>

<script id="typingUsersContent" type="text/x-jsrender">
    <div class="typing-wrapper">${getTypingUsersList(users) + ` are typing...`}</div>
</script>

<style>

    #typingUsersTemplate .typing-wrapper {
        display: flex;
        gap: 4px;
        align-items: center;
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #555;
        margin: 5px 0;
    }

    .typing-user {
        font-weight: bold;
        color: #0078d4;
    }

</style>

<script>
    var chatUIObj;
    var typingUsers = @Html.Raw(JsonConvert.SerializeObject(ViewBag.TypingUsers));
    function onCreated() {
        var chatUiEle = document.getElementById('typingUsersTemplate');
        chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
        chatUIObj.typingUsers = typingUsers;
        chatUIObj.dataBind();
    }
    function getTypingUsersList(users) {
        if (!users || users.length === 0) {
            return '';
        }

        let usersList = users.map((user, i) => {
            let isLastUser = i === users.length - 1;
            return `${isLastUser && i > 0 ? 'and ' : ''}<span class="typing-user">${user.user}</span>`;
        }).join(' ');
        return usersList
    }
</script>
using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };
public ChatUIUser ReenaUserModel { get; set; } = new ChatUIUser() { Id = "user3", User = "Reena" };
public List<ChatUIUser> TypingUsers { get; set; }

public ActionResult Default()
{
    CurrentUser = CurrentUserModel;
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Hi Michale, are we on track for the deadline?",
        Author = CurrentUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Yes, the design phase is complete.",
        Author = MichaleUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "I’ll review it and send feedback by today.",
        Author = CurrentUserModel
    });
    ViewBag.TypingUsers = new List<ChatUIUser>() { MichaleUserModel, ReenaUserModel };
    ViewBag.ChatMessagesData = ChatMessagesData;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

TypingUsersTemplate

Suggestion template

You can use the SuggestionTemplate property to customize the quick reply suggestions that appear above the input field. Templates here can help create visually appealing and functional suggestion layouts. The template context includes Suggestions and Index items.

CSHTML
SuggestionTemplate.cs
@using Syncfusion.EJ2.InteractiveChat

<div class="chatui-container" style="height:380px; width:450px">
    @Html.EJS().ChatUI("suggestionTemplate").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Created("onCreated").SuggestionTemplate("#suggestionContent").Render()
</div>

<script id="suggestionContent" type="text/x-jsrender">
    <div class='suggestion-item active'>
        <div class="content">${suggestion}</div>
    </div>
</script>

<style>
    #suggestionTemplate .e-suggestion-list li {
        padding: 0;
        border: none;
        box-shadow: none;
    }

    #suggestionTemplate .suggestion-item {
        display: flex;
        align-items: center;
        background-color: #87b6fb;
        color: black;
        padding: 4px;
        gap: 5px;
        height: 30px;
        border-radius: 5px;
    }

    #suggestionTemplate .suggestion-item .content {
        padding: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }


</style>

<script>
    var chatUIObj;
    const suggestions = ["Okay will check it", "Sounds good!"];
    function onCreated() {
        var chatUiEle = document.getElementById('suggestionTemplate');
        chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
        chatUIObj.suggestions = suggestions;
        chatUIObj.dataBind();
    }
</script>
using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };

public ActionResult Default()
{
    CurrentUser = CurrentUserModel;
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Hi Michale, are we on track for the deadline?",
        Author = CurrentUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Yes, the design phase is complete.",
        Author = MichaleUserModel
    });
    ViewBag.ChatMessagesData = ChatMessagesData;
    ViewBag.CurrentUser = CurrentUser;
    return View();
}

SuggestionTemplate

Footer template

You can use the FooterTemplate property to customize the default footer area and manage message send actions with a personalized design. This flexibility allows users to create unique footers that meet their specific needs.

CSHTML
FooterTemplate.cs
@using Syncfusion.EJ2.InteractiveChat;
@using Newtonsoft.Json;

<div class="chatui-container" style="height:380px; width:450px">
    @Html.EJS().ChatUI("footerTemplate").Created("onCreated").FooterTemplate("#footerContent").Messages(ViewBag.ChatMessagesData).User(ViewBag.CurrentUser).Render()
</div>

<script id="footerContent" type="text/x-jsrender">
    <div class="custom-footer">
        <input id="chatTextArea" class="e-input" placeholder="Type your message...">
        <button id="sendMessage" class="e-btn e-primary e-icons e-send"></button>
    </div>
</script>

<style>

    #footerTemplate.e-chat-ui .e-footer {
        margin: unset;
        align-self: auto;
    }

    .custom-footer {
        display: flex;
        gap: 10px;
        padding: 10px;
        background-color: transparent;
    }

    #chatTextArea {
        width: 100%;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin-bottom: 0;
        padding: 5px;
    }
</style>

<script>
    var chatUIObj;
    function onCreated() {
        var chatUiEle = document.getElementById('footerTemplate');
        chatUIObj = ej.base.getInstance(chatUiEle, ejs.interactivechat.ChatUI);
    }
    document.addEventListener('click', function (event) {
        if (event.target && event.target.id === 'sendMessage') {
            const textArea = document.getElementById('chatTextArea');
            if (textArea && textArea?.value.length > 0) {
                let value = textArea.value;
                textArea.value = '';
                chatUIObj.addMessage(
                    {
                        author: @Html.Raw(JsonConvert.SerializeObject(ViewBag.MichaleUser)),
                        text: value
                    }
                );
            }
        }
    });
</script>
using Syncfusion.EJ2.InteractiveChat;

public ChatUIUser CurrentUser { get; set; }
public List<ChatUIMessage> ChatMessagesData { get; set; } = new List<ChatUIMessage>();
public ChatUIUser CurrentUserModel { get; set; } = new ChatUIUser() { Id = "user1", User = "Albert" };
public ChatUIUser MichaleUserModel { get; set; } = new ChatUIUser() { Id = "user2", User = "Michale Suyama" };

public ActionResult Default()
{
    CurrentUser = CurrentUserModel;
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Hi Michale, are we on track for the deadline?",
        Author = CurrentUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "Yes, the design phase is complete.",
        Author = MichaleUserModel
    });
    ChatMessagesData.Add(new ChatUIMessage()
    {
        Text = "I’ll review it and send feedback by today.",
        Author = CurrentUserModel
    });
    ViewBag.ChatMessagesData = ChatMessagesData;
    ViewBag.CurrentUser = CurrentUser;
    ViewBag.MichaleUser = MichaleUserModel;
    return View();
}

FooterTemplate