WebBuild/wwwroot/platform/connect/components/chat.template.js

var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Connect;
        (function (Connect) {
            let Components;
            (function (Components) {
                class ChatTemplate {
                    getChatTemplate() {
                        const isFullScreen = Components.Chat.isFullScreen;
                        const _template = `<div class="chatapp" id="chatAppWrap">
    <div class="chatapp-body h-100 position-relative" id="chatAppBody">
        <section class="chats-contacts-wrap chat-flex-column" id="chatsContactsSection">
            <div id="chatHeaderNav" class="chat-header-nav d-flex chat-header">
                <a href="javascript:;" id="closeChatPanel" class="nav-link px-0 flex-center">
                    <i class="icon dripicons-chevron-right font-20 text-danger"></i>
                </a>
                <ul class="nav nav-tabs nav-light nav-line d-flex justify-content-between flex-grow-1 flex-shrink-0 text-center px-1 h-100 chat-header-nav-tabs"
                    role="tablist" id="chatHeaderNavTabs">
                    <li class="nav-item chat-tab w-50">
                        <a onclick="Unibase.Platform.Connect.Components.Chat.Instance().displayRecentChats()"
                            href="javascript:;" class="nav-link _btncomment active">
                            <i class="las la-sms font-24"></i><span>Chats</span>
                        </a>
                    </li>
                    <li class="nav-item contact-tab w-50">
                        <a onclick="Unibase.Platform.Connect.Components.Chat.Instance().Displaycontacts();"
                            href="javascript:;" class="nav-link _btnDisplayUser">
                            <i class="las la-address-book font-24"></i><span>Contacts</span>
                        </a>
                    </li>
                    <li class="nav-item w-20 d-none">
                        <a href="javascript:;"
                            onclick="Unibase.Platform.Connect.Components.Chat.Instance().makeACall();"
                            class="nav-link _btnmakeacall"><i class="las la-phone font-24"></i><span>Call</span></a>
                    </li>
                    <li class="nav-item d-none">
                        <a href="javascript:;" class="nav-link" id="drpdwn" data-toggle="dropdown" role="button"
                            aria-haspopup="false" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
                        <div class="dropdown-menu dropdown-menu-right font-12" id="drpdownmenu">
                            <a class="dropdown-item" href="javascript:;"
                                onclick=" Unibase.Platform.Connect.Components.Chat.Instance().createnewgroup()">
                                <i class="dropdown-icon zmdi zmdi-accounts-add"></i><span>New group</span></a>
                            <a class="dropdown-item" href="javascript:;">
                                <i class="dropdown-icon zmdi zmdi-settings"></i><span>Settings</span></a>
                            <a class="dropdown-item" href="javascript:;" onclick="_BizgazeNotify_Chats.refreshChat()">
                                <i class="dropdown-icon zmdi zmdi-refresh-sync"></i><span>Refresh</span></a>
                            <a class="dropdown-item" href="javascript:;" id="closeChatPanel"
                                onclick="Unibase.Platform.Connect.Components.Chat.Instance().closechatpanel();">
                                <i class="dropdown-icon icon dripicons-cross"></i><span>Exit chat</span></a>
                        </div>
                    </li>
                </ul>
                <div class="dropdown chat-header-dropdown flex-center">
                    <a class="nav-link dropdown-toggle no-caret btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30" href="javascript:;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="btn-icon-wrap"><i class="icon dripicons-dots-3 rotate-90d font-20 text-dark"></i></span>
                    </a>
                    <div class="dropdown-menu">
                    <a class="dropdown-item p-1 font-14 view-my-profile" href="javascript:;" id="viewMyProfile">My Info</a>
                    <a class="dropdown-item p-1 font-14 chat-fullscreen-btn d-none ${!isFullScreen ? 'd-md-flex' : ''}" href="javascript:;" id="chatFullScreenBtn" onclick="Unibase.Platform.Connect.Components.Chat.Instance().toggleChatFullScreen();">Fullscreen</a>
                    </div>
                </div>
            </div>
            <div class="chatapp-users-list chat-flex-column flex-grow-1 overflow-y-auto">
                <div class="div-chat-search c-gap-10 pa-10">
                    <div class="chatapp-search-div flex-grow-1">
                        <input type="text" id="txtSearchChats" name="txtSearchChats"
                            class="custom-chat-input chatAppSearch recentchatsearch search-input" placeholder="Search"
                            onkeyup="Unibase.Platform.Connect.Components.Chat.Instance().searchParticipants('recentchatsearch','recentchats','');">
                        <i class="fa fa-search chatappSearchIcon search-icon biz-highlight-bg-color"
                            id="search_contactlist"></i><i id="txt_chats_clearSearch"
                            class="icon dripicons-cross search-close hidden"></i>
                    </div>
                    <a href="javascript:;" class="avatar avatar-sm d-30 newlabel"
                        onclick="Unibase.Platform.Connect.Components.Chat.Instance().Displaycontacts();"
                        title="New Chat">
                        <div class="avatar-text avatar-text-primary rounded-circle"><span class="initial-wrap"><span><i class="las la-edit font-20"></i></span></span></div>
                    </a>
                </div>
                <div data-simplebar class="userlist simple-scroll-bar px-10 pb-10 flex-grow-1" id="chatGroupsWrap">
                    <ul class="list-groupchat list-group list-group-flush"></ul>
                </div>
            </div>
            <div class="div_ContactsList chat-flex-column flex-grow-1 overflow-y-auto hidden">
                <div class="div-chat-search c-gap-10 pa-10">
                    <div class="chatapp-search-div flex-grow-1">
                        <input id="txtSearchContacts" type="text" name="txtSearchContacts"
                            class="custom-chat-input pl-25 chatAppSearch search-input" placeholder="Search"
                            onkeyup="Unibase.Platform.Connect.Components.Chat.Instance().loadContacts(true);">
                        <i class="fa fa-search chatappSearchIcon biz-highlight-bg-color search-icon"
                            id="search_contactlist"></i>
                        <i class="icon dripicons-cross search-close hidden" id="clearContactsSearch"></i>
                    </div>
                    <a href="javascript:;" class="avatar avatar-sm d-30 newlabel"
                        onclick="Unibase.Platform.Connect.Components.Chat.Instance().createnewgroup();"
                        title="New Group">
                        <div class="avatar-text avatar-text-primary rounded-circle">
                            <span class="initial-wrap"><span><i class="las la-users font-24"></i></span></span>
                        </div>
                    </a>
                </div>
                <div data-simplebar class="userlist simple-scroll-bar px-10 pb-10" id="chatContactsWrap">
                    <ul class="list-group list-chat-contacts list-group-flush">
                    </ul>
                    <div class="contacts-morebtn mt-10 text-center">
                        <a class="btn btn-outline-primary btn-sm load-more-list-btn"
                            onclick="Unibase.Platform.Connect.Components.Chat.Instance().loadContacts()"><span
                                class="contacts_more mr-10 d-none">0</span>More</a>
                    </div>
                </div>
            </div>
        </section>
        ${!isFullScreen ? this.getChatMessagesBodyHtml() : ''}
        <section class="new-group chat-flex-column hidden" id="newGroupSection">
            <div id="createGroupHeader" class="chat-header d-flex align-items-center c-gap-10">
                <div class="btn_backChatWindow chatanchorhoverdark">
                    <a onclick="Unibase.Platform.Connect.Components.Chat.Instance().closechatgroup();"
                        href="javascript:;"
                        class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30">
                        <span class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span>
                    </a>
                </div>
                <div class="div-user-group-Name flex-between-center flex-grow-1 c-gap-10 r-gap-5 mnw-0">
                    <div class="Profile_name font-weight-500 text-dark font-15 text-truncate">Create New Group</div>
                </div>
            </div>
            <div class="CreateNewChatGroup chat-flex-column flex-grow-1 overflow-y-auto"></div>
        </section>
        <section class="profiledetails chat-flex-column h-100 hidden" id="profileDetailsSection"></section>
        <section class="starredmsgs-section chat-flex-column hidden">
         <div id="starMsgHeader">
              <div class="d-flex  align-items-center c-gap-5" style="height:60px;background-color:rgb(232, 238, 245)">
                <a href="javascript:;" class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30" id="closestarmsgswindow"><span class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span>
                </a>
                <div class="font-weight-500 text-dark font-15 text-truncate">Stared Messages</div>
               </div>
            <div class="starredmessages"></div>
            </div>
          <ul class="staredmsgs-list" style="display:inline-flex;flex-direction:column;margin:10px"></ul>
        </section>
        <section class="forward-contacts-section chat-flex-column hidden" id="forwardContactsSection"></section>
        <section class="message-info chat-flex-column h-100 hidden" id="messageInfoSection"></section>
    </div>${isFullScreen ? this.getChatFullScreenHtml() : ''}
    <div class="webcam hidden"></div>
    <div class="audio_controls hidden" style="position:absolute;top:85%;left:10%;"></div>
</div>`;
                        return _template;
                    }
                    getChatFullScreenHtml() {
                        return `<div class="chat-convo-section" id="chatConvoSection">
        <div class="chat-noconvomsg-wrap flex-grow-1 overflow-y-auto flex-center flex-column r-gap-25 biz-bg-hightlight-color_10 hidden" id="chatNoConvoMsgWrap">
            <i class="las la-comments noconvo-icon font-50"></i>
            <div class="noconvo-msg-text text-center">
                <h5 class="mb-15">No chats found!</h5>
                <p class="w-300p">Pick a person from contacts tab and start your conversation.</p>
            </div>
        </div>
        ${!$('#chatConvoBody').length ? this.getChatMessagesBodyHtml() : ''}</div>
    <div class="chat-fullscreen-modal-wrap">
        <div class="modal fade fullscreen-modal" id="fullScreenModal">
            <div class="modal-dialog h-100 modal-dialog-centered mt-0" role="document">
                <div class="modal-content" id="fullScreenModalContent"></div>
            </div>
        </div>
        <div class="modal-backdrop fade show hidden position-absolute" id="fullScreenModalBackdrop"></div>
    </div>`;
                    }
                    getChatMessagesBodyHtml() {
                        return `<section class="chat-convo-body chat-flex-column hidden" id="chatConvoBody"><input type="hidden" class="prevcontactname">
    <div id="chatMsgHeaderWrap" class="chat-header">
        <div id="chatMsgHeader" class="h-100"></div>
        <div id="selectedMsgsCountHeader" class="h-100 hidden">
            <div class="d-flex h-100 align-items-center c-gap-5">
                <a href="javascript:;" class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30"
                    id="closeMsgMultiActionBtn">
                    <span class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span>
                </a>
                <div class="font-weight-500 text-dark font-15 text-truncate d-flex align-items-center c-gap-5"><span class="selected-msgs-count">0</span><span>messages selected</span></div>
            </div>
        </div>
        <div id="starMsgHeader" class="h-100 hidden">
            <div class="d-flex h-100 align-items-center c-gap-5">
                <a href="javascript:;" class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30"
                    onclick="Unibase.Platform.Connect.Components.Chat.Instance().closeStarMessages();"><span
                        class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span>
                </a>
                <div class="font-weight-500 text-dark font-15 text-truncate">Stared Messages</div>
            </div>
        </div>
    </div>
    <div data-simplebar class="simple-scroll-bar pt-15 flex-grow-1 biz-bg-hightlight-color_5 msg-list-wrap" id="msgList">
        <ul class="grpdetails"></ul>
        <div class="more_msg d-none"><a href="javascript:;" class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30 morediv"
                onclick="Unibase.Platform.Connect.Components.Chat.Instance().LoadMessages()" data-moreindex='0' ;
                data-isfirst='true'><span class="btn-icon-wrap"><i class="fa fa-angle-double-up font-25"></i></span></a></div>
        <ul class="list-unstyled messageslist"></ul>
        <div class="mx-2 typing" id="chatTypingMsg"></div>
    </div>
<div class="remove_template text-danger text-center font-12 hidden">
        <hr style="margin:0px 0px 5px 0px">You can't send messages to this group because you're not a participant of this group
        <hr style="margin:5px 0px 0px 0px">
    </div>
    <div id="chatFooter" class="chat-footer biz-bg-hightlight-color_10">
        <div class="chat-emojis hidden" id="chatEmojis"></div>
        <ul class="list-group list-group-flush biz-bg-hightlight-color_10 pt-10 px-10 mentionable-contact-list biz-custom-scrollbar hidden"
            id="mentionableContactList"></ul>
        <div class="div_selected_files hidden c-gap-15"></div>
        <div id="quoteMsgWrap" class="quote-msg-wrap biz-bg-hightlight-color_20 hidden"></div>
        <div class="d-flex align-items-center c-gap-10 flex-grow-1 msg-input-wrap">
            <div class="flex-grow-1 chatapp-search-div">
                <textarea type="text" rows="1" id="input_msg_send_chatapp" name="send-msg"
                    class="input-msg-send custom-chat-input pl-35" placeholder="Type something" /></textarea>
                <a href="javascript:;"
                    class="btn btn-icon btn-rounded btn-soft-primary d-26 search-icon chat-emoji-icon"
                    id="chatEmojiIcon">
                    <span class="btn-icon-wrap"><i class="las la-smile font-25"></i></span>
                </a>
                <div class="hidden div_CLose search-close">
                    <a href="javascript:;" class="text-danger">
                        <i class="icon dripicons-cross empty_text"></i>
                    </a>
                </div>
            </div>
         <div class="record_div ml-6 hidden" style="position: absolute;background-color: #b5c9a6;width: 96%;height: 48px;border-radius: 10px;font-size: 20px;z-index: 1;display: flex;">
              <span class="ml-10 ">Recording.......</span>
              <span class="" style="width: 30px;">
                <ul style="display:flex;">
                  <li><span id="minutes"></span></li>
                  <p>:</p>
                  <li><span id="seconds"></span></li>
               </ul>
              </span>
              <a href="javascript:;" class="btn btn-icon btn-primary btn-rounded d-30 voicemsg-send-btn  cursor-pointer  mt-10 ml-120">
                <span class="btn-icon-wrap"><i class="las la-paper-plane msg-option font-20"></i></span></a>
            </div>
            <div class="msg-option-container d-flex align-items-center c-gap-15 font-20">
                <div class="msg-compose-options align-items-center c-gap-15">
                    <div class="btn-file msg-option attachments-btn cursor-pointer">
                        <label class="my-0" for="chat_attachments">
                            <i class="las la-paperclip font-22 biz-highlight-bg-color"></i></span>
                            <input type="file" id="chat_attachments" class="fileUpload hidden" multiple="multiple"
                                onchange="Unibase.Platform.Connect.Components.Chat.Instance().LoadAttachments(this)">
                    </div>
                    <div class="div_camera">
                        <div class="btn-file msg-option">
                            <a href="javascript:;" class="input_camera"
                                onclick="Unibase.Platform.Connect.Components.Chat.Instance().webcam();">
                                <i class="las la-camera biz-highlight-bg-color font-22"></i>
                            </a>
                        </div>
                    </div>
                    <div class="div_video hidden">
                        <div class="msg-option">
                            <a href="javascript:;" class="video btn-icon-wrap"
                                onclick="Unibase.Platform.Connect.Components.Chat.Instance().openvideo();">
                                <i class="las la-video biz-highlight-bg-color font-22"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="hidden" id="icon_send">
                    <a href="javascript:;" class="btn btn-icon btn-primary btn-rounded d-30 msg-send-btn">
                        <span class="btn-icon-wrap"> <i class="las la-paper-plane msg-option font-20"></i></span>
                    </a>
                </div>
               <div class="voicemsg_icon" id="recordaudio">
                   <a href="javascript:;" class="btn btn-icon btn-primary btn-rounded d-30 msg-send-btn"  onclick="Unibase.Platform.Connect.Components.Chat.Instance().voicemsg()">
                        <span class="btn-icon-wrap"><i class="fa fa-microphone msg-option font-20"></i></span>
                   </a>
                </div>
            </div>
        </div>
        <div class="msg-multiaction-btns hidden">
            <div class="d-flex justify-content-between c-gap-10">
                <a href="javascript:;"
                    class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover delete-icon footer-multiaction disabled"
                    data-item="Delete"><span class="btn-icon-wrap"><i
                            class="icon dripicons-trash font-18"></i></span></a>
                <a href="javascript:;"
                    class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover star-icon footer-multiaction disabled"
                    data-item="Star"><span class="btn-icon-wrap"><i class="icon dripicons-star font-18"></i></span></a>
                <a href="javascript:;"
                    class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover copy-icon footer-multiaction disabled"
                    data-item="Copy" id="copyicon"><span class="btn-icon-wrap"><i class="icon dripicons-copy font-18"></i></span></a>
                <a href="javascript:;"
                    class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover forward-icon footer-multiaction disabled"
                    data-item="Forward"><span class="btn-icon-wrap"><i class="icon dripicons-forward font-18"></i></span></a>
            </div>
        </div>
    </div>
    <div class="chat_down hidden" id="icon_down" style="display: block;position: absolute;bottom: 60px;">
          <a href="javascript:;" class="btn btn-icon btn-primary btn-rounded d-30 msg-send-btn" onclick="Unibase.Platform.Connect.Components.Chat.Instance().chatdown();">
                     <span class="btn-icon-wrap"><i class="fa fa-angle-down"></i></span></a>
              </div>
</section>`;
                    }
                    getMsgInfoBodyHtml() {
                        return ` <div id="msgInfoHeader" class="chat-header">
                <div class="d-flex h-100 align-items-center c-gap-5">
                    <a href="javascript:;" class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30" id="msgInfoBackBtn"
                        onclick="Unibase.Platform.Connect.Components.Chat.Instance().closeMsgInfo();">
                        <span class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span>
                    </a>
                    <div class="font-weight-500 text-dark font-15 text-truncate">Message info</div>
                </div>
            </div>
            <div class="msg-info-body chat-flex-column flex-grow-1" id="msfInfoBody">
                <div id="msgInfoTxt" class="msg-info-text text-right py-20 px-10 flex-shrink-0">
                    <span class="badge badge-primary font-14 rounded-20 msg-span"></span></div>
                <div data-simplebar class="simple-scroll-bar chat-scrollbar pb-20 px-10 flex-grow-1">
                    <div class="d-flex flex-column r-gap-10">
                        <div class="delivered-user-list-wrap biz-bg-hightlight-color_10 rounded-10 pa-10"
                            id="deliveredUserListWrap">
                            <div class="d-flex flex-column r-gap-10">
                                <div class="flex-between-center c-gap-10">
                                    <h6 class="deliver">Delivered To</h6>
                                    <i class="las la-check-double font-20"></i>
                                </div>
                                <ul class="list-group list-group-flush delivereduserslist hidden"></ul>
                            </div>
                        </div>
                        <div class="read-user-list-wrap biz-bg-hightlight-color_10 rounded-10 pa-10" id="readUserListWrap">
                            <div class="d-flex flex-column r-gap-10">
                                <div class="flex-between-center c-gap-10">
                                    <h6 class="read">Read by</h6>
                                    <i class="las la-check-double font-20" style="color:#00B0FF"></i>
                                </div>
                                <ul class="list-group list-group-flush readuserslist hidden"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
                    }
                    getContactsTemplate(contacts) {
                        const instance = this;
                        ChatTemplate.contacts = contacts;
                        let _template = "";
                        let photopath = [];
                        contacts.sort((a, b) => a.contactName.localeCompare(b.contactName));
                        let firstLetter = '';
                        if (!contacts.length) {
                            _template = "<li class='d-flex align-items-center justify-content-center mt-4'>No contacts found</li>";
                        }
                        else {
                            for (let i = 0; i < contacts.length; i++) {
                                if (contacts[i].contactId == Components.Chat.currentUser.userId) {
                                    continue;
                                }
                                var contactChatGroupId = 0;
                                var chatinfo = Components.Chat.recentChats.find(x => x.contactId == contacts[i].contactId);
                                if (chatinfo != undefined) {
                                    contactChatGroupId = chatinfo.chatGroupId;
                                }
                                const avatarHtml = instance.getUserAvatarHtml(contacts[i]);
                                photopath[0] = contacts[i].photoUrl ? contacts[i].photoUrl : '';
                                let contactFirstLetter = contacts[i].contactName[0].toLowerCase();
                                if (firstLetter == "") {
                                    firstLetter = contactFirstLetter;
                                    _template += `<li class="list-group-item py-2 first-letter-heading h5 text-capitalize">${firstLetter}</li>`;
                                }
                                else if (firstLetter != contactFirstLetter) {
                                    firstLetter = contactFirstLetter;
                                    _template += `<li class="list-group-item py-2 first-letter-heading h5 text-capitalize">${firstLetter.toUpperCase()}</li>`;
                                }
                                contacts[i].about = "";
                                _template += `<li class="contactuser${i} list-group-item border-0 px-1 py-1 flex-between-center c-gap-10">
                                    <a href="javascript:void(0);" data-contactId=${contacts[i].contactId} data-chatgroupid=${contacts[i].chatGroupId} data-isprivate=true class="media contactuser chatUserList flex-between-center c-gap-10 flex-grow-1 mnw-0" onclick="Unibase.Platform.Connect.Components.Chat.Instance().privatewindow(${contacts[i].contactId})" id="msgConvoItem_${contacts[i].contactId}">${avatarHtml}<div class="media-body mnw-0"><div class="username text-dark font-weight-500 font-15 text-truncate" title="${contacts[i].contactName}">${contacts[i].contactName}</div><div class="last-chat-msg" title="${contacts[i].about}">${contacts[i].about}</div></div></a><div class="chat-call-options d-none"></div></li>`;
                            }
                        }
                        return _template;
                    }
                    getPrivateWindowTemplate(chats) {
                        const avatarHtml = this.getUserAvatarHtml(chats, false, true);
                        var lastseen = (chats.lastSeen == null || chats.lastSeen == '' || chats.lastSeen == undefined || chats.lastSeen == "null") ? '' : Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocal(chats.lastSeen);
                        const _template = `<div class="media div_chatMediaHeader align-items-center chatanchorhoverdark h-100 c-gap-5">
                            <a href="javascript:;" class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover flex-shrink-0 d-30 ${Components.Chat.isFullScreen ? 'hidden' : ''}" onclick="Unibase.Platform.Connect.Components.Chat.Instance().closeprivatewindow();" id="closePrivateWindowBtn"><span class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span></a>
                            <input type="hidden" value="${chats.contactName}" id="hfChats_chatGroupName">
                            <input type="hidden" value='${chats.chatGroupId}' id="hfChats_chatGroupId">
                            <input type="hidden" value='${chats.contactId}' id="private_id">
                            <div class="d-flex imgchatUser_${chats.chatGroupId} align-items-center c-gap-10 flex-grow-1 mnw-0">${avatarHtml}
                            <div class="media-body text-truncate">
                            <a onclick="Unibase.Platform.Connect.Components.Chat.Instance().profileDetails();" href = "javascript:void(0);" class="user-name" title="${chats.contactName}"><span class="text-dark grpname_${chats.chatGroupId} font-weight-500 font-15">${chats.contactName}</span><div class="lastseen_${chats.contactId} text-light-60 font-11 text-truncate" data-lastseen='${chats.lastSeen}'>${lastseen}</div></div></a></div>
                            <div class="chat-options-wrap">
                            <ul class="navbar-nav hk-navbar-content div_chatMediaHeader">
                            <li class="nav-item dropdown dropdown-authentication">
                            <a class="nav-link dropdown-toggle no-caret btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30" href="javascript:;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             <span class="btn-icon-wrap"><i class="icon dripicons-dots-3 rotate-90d font-20 text-dark"></i></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" id="t1" style="position:absolute;font-size:12px">
                            <a class="dropdown-item d-none" href="javascript:;"><i class="dropdown-icon zmdi zmdi-star-outline biz-highlight-bg-color"></i>Stared Messages</a>
                            <a class="dropdown-item btnSearchChat p-1 font-14" href="javascript:;" onclick="Unibase.Platform.Connect.Components.Chat.Instance().searchdesign();">Search</a>
                            <a onclick="Unibase.Platform.Connect.Components.Chat.Instance().muteAlert();" class="dropdown-item p-1 font-14 mute-option Mute" data-mute="Mute" href="javascript:;">Mute</a>
                            <a onclick="Unibase.Platform.Connect.Components.Chat.Instance().clearChat();" class="dropdown-item p-1 font-14" href="javascript:;">Clear Chat</a>
                            </div></li></ul></div></div>`;
                        return _template;
                    }
                    getTypingTemplate(contactname) {
                        var contactid = Components.Chat.contacts.find(x => x.contactName == contactname).contactId;
                        const _template = '<span class="badge badge-light pull-left mt-3 typingspan_' + contactid + '"style="position:relative;">' + contactname + '' + "  " + 'is ' + "typing" + '<div class="dot_wave pt-5"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></span><br><br><br>';
                        return _template;
                    }
                    getNewGroupTemplate() {
                        const _template = `
                            <div class="chat-group-top-header flex-shrink-0 px-5">
                            <div class="divtxt_ContactsSearch">
                            <div class="chatapp-search-div">
                            <input id="txtSearchParticipants" type="text" class="custom-chat-input required txt_SearchNewParticipants search-input" value="" placeholder="Search Contacts..." onkeyup="Unibase.Platform.Connect.Components.Chat.Instance().searchParticipants('txt_SearchNewParticipants','grp_newparticipants');">
                                <i class="fa fa-search search-icon"></i>
                                <i class="icon dripicons-cross search-close hidden" id="clearGroupContactsSearch"></i>
                            </div></div>
                            <div class="div-ChatNewParticipants mt-10">
                            <div class="divtxt_chatGroupName flex-between-center c-gap-5">
                            <div class="group-pic-upload-btn position-relative">
                            <a href="javascript:;" class="btn btn-icon btn-icon-circle btn-primary btn-rounded btn-xs btn-file"><span class="btn-icon-wrap"><i class="las la-camera font-18"></i></span><input type="file" class="groupImgUpload" onclick="Unibase.Platform.Connect.Components.Chat.Instance().newGroupProfile(this);"></a></div>
                            <div class="input-group">
                            <input id="txt_GroupName" type="text" class="text-center custom-chat-input required rounded-20 txt_chatGroupName" onkeyup="Unibase.Platform.Connect.Components.Chat.Instance().groupname();" value="" placeholder="Enter Group Name">
                            </div>
                            <div class="participant_avatar avatar-group avatar-group-sm avatar-group-overlapped flex-center hidden"></div>
                            </div>
                            </div>
                            </div>
                            <div data-simplebar class="Chat-NewParticipants userlist simple-scroll-bar px-10 pb-10 flex-grow-1"><ul class="list-chatgroup list-group list-group-flush h-100" id="chatGroupList"></ul></div>
                            <div class="chat-group-footer btn_saveGroup hidden"><a href="javascript:;" class="btn btn-outline-smoke mr-10" onclick="Unibase.Platform.Connect.Components.Chat.Instance().closechatgroup();">Cancel</a><a href="javascript:;" class="btn btn-primary" id="btn_addtoGrpName" onclick="Unibase.Platform.Connect.Components.Chat.Instance().Savegroup();">Create</a></div>
                            </div>`;
                        return _template;
                    }
                    getGroupContactsTemplate(contacts) {
                        let _template = "";
                        let user = Unibase.Platform.Membership.Infos.Identity.currentUser;
                        let contactLength = contacts.length;
                        contacts.sort((a, b) => a.contactName.localeCompare(b.contactName));
                        let firstLetter = '';
                        for (let i = 0; i < contactLength; i++) {
                            const contactId = contacts[i].contactId;
                            const avatarHtml = this.getUserAvatarHtml(contacts[i]);
                            let contactFirstLetter = contacts[i].contactName[0].toLowerCase();
                            if (firstLetter == "") {
                                firstLetter = contactFirstLetter;
                                _template += `<li class="list-group-item py-2 first-letter-heading h5 text-capitalize hidden">${firstLetter.toUpperCase()}</li>`;
                            }
                            else if (firstLetter != contactFirstLetter) {
                                firstLetter = contactFirstLetter;
                                _template += `<li class="list-group-item py-2 first-letter-heading h5 text-capitalize hidden">${firstLetter.toUpperCase()}</li>`;
                            }
                            contacts[i].about = "";
                            _template += '<li class="groupuser grp_newparticipants list-group-item px-1 py-2" id="groupContactUser_' + contactId + '" data-contactname="' + contacts[i].contactName + '">' +
                                '<a href="javascript:void(0);" class="media flex-between-center flex-grow-1 c-gap-10 mnw-0">' +
                                avatarHtml + '<div class="media-body flex-grow-1 mnw-0"><div class="username text-dark font-weight-500 font-15 text-truncate" title="' + contacts[i].contactName + '">' + contacts[i].contactName + '</div><div class="last-chat-msg" title="' + contacts[i].about + '">' + contacts[i].about + '</div></div>' +
                                '<div class="chat-call-options justify-content-between">' +
                                '<div class="custom-control custom-checkbox checkbox-primary">' +
                                '<input type="checkbox" name="chatgroupuser" id="chkuser_' + contactId + '" value=' + contactId + ' class="custom-control-input groupusercheckbox chkuser_' + contactId + '">' +
                                '<label class="custom-control-label" for="chkuser_' + contactId + '"><span id="contactid_' + contactId + '" class="hidden">' + contactId + '</span></label>' +
                                '</div></div></div>' +
                                '</a>' +
                                '</li>';
                        }
                        return _template;
                    }
                    getProfileTemplate() {
                        return `<div id="profileHeaderWrap" class="chat-header">
                <div id="profileHeader" class="h-100"></div>
                <div id="mediaHeader" class="h-100 hidden">
                    <div class="d-flex h-100 align-items-center c-gap-5">
                        <a href="javascript:;"
                            class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30"
                            id="mediaBackBtn" onclick="Unibase.Platform.Connect.Components.Chat.Instance().closeMediaInfo();"><span class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span>
                        </a>
                        <div class="font-weight-500 text-dark font-15 text-truncate">Media,links,docs</div>
                    </div>
                </div>
            </div>
            <div class="Search_participants flex-shrink-0 mx-10 my-5 hidden">
                <div class="flex-between-center c-gap-5">
                    <div class="chatapp-search-div flex-grow-1"><input id="txtSearchParticipants" type="text"
                            class="custom-chat-input required txt_SearchChat oldgrp_newparticipanrsearch search-input" value="" placeholder="Search Contacts..."
                            onkeyup="Unibase.Platform.Connect.Components.Chat.Instance().searchParticipants('oldgrp_newparticipanrsearch','oldgrp_newparticipants');">
                        <i class="fa fa-search search-icon"></i><a href="javascript:;" class="search-close hidden"><i class="icon dripicons-cross"></i></a></div>
                    <div class="participant_avatar avatar-group avatar-group-sm avatar-group-overlapped flex-center hidden">
                    </div>
                </div>
            </div>
            <div data-simplebar class="simple-scroll-bar profilebody flex-grow-1 px-10 pb-20 pt-5 h-100">
                <div class="profileDetails"></div>
            </div>`;
                    }
                    getprofileheader() {
                        const _template = `<div class="group-info-header h-100">
                            <div class="d-flex h-100 align-items-center c-gap-10">
                            <div class="flex-grow-1 d-flex align-items-center c-gap-10"><a href="javascript:;" data-contactid=${Components.Chat.contactId} class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30" id="closeContactInfoBtn" onclick="Unibase.Platform.Connect.Components.Chat.Instance().closeContactInfo();"><span class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span></a><div class="profile-heading text-truncate text-dark font-weight-500 font-15">${Components.Chat.contactId != 0 ? 'Contact' : 'Group'} Info</div></div><a href="javascript:;" class="btn_AddChatParticipants btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30 hidden" onclick="Unibase.Platform.Connect.Components.Chat.Instance().AddParticipants();"><span class="btn-icon-wrap"><i class="las la-user-plus font-20 "></i></span></a></div></div></div><div class="add-participants-header h-100 hidden">
                             <div class="d-flex h-100 align-items-center c-gap-10">
                            <div class="flex-grow-1 d-flex align-items-center c-gap-10"><a href="javascript:;" class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30" id="closeAddParticipantsBtn" onclick="Unibase.Platform.Connect.Components.Chat.Instance().closeAddParticipants();"><span class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span></a><div class="profile-heading text-truncate text-dark font-weight-500 font-15">Add Participants</div></div><a href="javascript:;" onclick="Unibase.Platform.Connect.Components.Chat.Instance().Savegroup();" id="btn_addtoGrpName" class="btn_saveGroup hidden font-14 ml-auto"><span class="btn btn-xs btn-primary">Save</span></a></div>
                            </div></div>`;
                        return _template;
                    }
                    getprofilebody() {
                        var imginput = '';
                        var contact = Components.Chat.contacts.find(x => x.contactId == Components.Chat.contactId);
                        if (Components.Chat.contactId == 0) {
                            contact = Components.Chat.recentChats.find(x => x.chatGroupId == Components.Chat.chatGroupId);
                        }
                        var phoneNumber = '', emailId = '';
                        if (contact != undefined && Components.Chat.contactId != 0) {
                            phoneNumber = contact.phoneNumber;
                            emailId = contact.emailId;
                        }
                        var contactName = contact.contactName;
                        let avatarHtml = this.getUserAvatarHtml(contact, false, true);
                        avatarHtml = avatarHtml.replace('avatar-sm', 'avatar-xl d-100');
                        if (!Components.Chat.isPrivate) {
                            imginput = '<span class="btn btn-icon btn-icon-circle btn-primary btn-xs d-20" style="position:absolute;top:10%;z-index:1;left:56%;"><i class="fa fa-pencil"></i></span><input type="file" id="profileImageInput" class="Profile_image hidden" onchange="Unibase.Platform.Connect.Components.Chat.Instance().changeProfileImage(this);" accept="image/png,image/jpeg">';
                        }
                        const template = `<div class="profile-details-wrap" id="profileDetailsWrap"><div class="user-profile-info flex-center flex-column r-gap-10" id="userProfileInfo"><label class="profile-header-img flex-center flex-shrink-0 my-0 cursor-pointer" for="profileImageInput" imgchatUser_${Components.Chat.chatGroupId} title="Upload Image">${imginput}</label>${avatarHtml}
                            <div class="div-user-group-Name d-flex flex-column justify-content-center mnw-0 r-gap-5 w-100">
                            <div class="profile-name-wrap position-relative flex-center c-gap-10"><span class="Profile_name grpname_${Components.Chat.chatGroupId} font-weight-500 font-18 text-center text-dark">${contactName}</span><div class="edit-group-input-wrap position-relative mb-5 hidden" id="editGroupInputWrap"><input type="text" class="custom-chat-input text-dark font-weight-500 edit_groupdetailsInput pr-30" value="${contactName} " data-prevvalue="${contactName} "></a>
                            <a href="javascript:;" class="save_changes btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-26" onclick="Unibase.Platform.Connect.Components.Chat.Instance().changeGroupName();"><span class="btn-icon-wrap"><i class="icon dripicons-checkmark"></i></span></a></div><a href="javascript:;" class="edit_grpdetails btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-26 hidden" onclick="Unibase.Platform.Connect.Components.Chat.Instance().EditgroupDetails('${contactName}');"><span class="btn-icon-wrap"><i class="fa fa-pencil font-14"></i></span></a></div>
                            <div class="flex-center flex-column font-12 r-gap-3 text-center user-info-section hidden" id="userInfoSection"><span class="partipant-count hidden">
                            </span><span class="user-mobile-no">${phoneNumber}</span><span class="user-email">${emailId}</span></div></div>
                            </div>
                            <div class="profile-media-link flex-between-center c-gap-10 pa-10 biz-bg-hightlight-color_10 rounded-10 font-weight-500 text-dark cursor-pointer" id="profileMediaLink"><h6>Media, links and docs</h6><span class="badge badge-primary badge-sm rounded-10 font-10 media-links-count">0</span></div>
                            <div class="star-messages-link flex-between-center c-gap-10 pa-10 biz-bg-hightlight-color_10 rounded-10 font-weight-500 text-dark cursor-pointer" id="starMessagesLink" onclick="Unibase.Platform.Connect.Components.Chat.Instance().starmessages();"><span class="d-flex c-gap-10"><h6>Star messages</h6><a href="javascript:;" class="btn btn-icon btn-icon-circle btn-primary btn-xs d-20"><span class="btn-icon-wrap"><i class="icon dripicons-star"></i></span></a></span><span class="badge badge-primary badge-sm rounded-10 font-10 star-messages-count">0</span></div>
                            <div class="div-Chat-Groups biz-bg-hightlight-color_10 rounded-10 pa-10 hidden">
                            <div class="d-flex flex-column r-gap-10"><div class="groups-header flex-between-center c-gap-10">
                            <h6>Groups</h6>
                            <span class="badge badge-primary badge-sm rounded-10 font-10 countChatGroups">0</span>
                            </div>
                            <ul class="list-group list-group-flush Chat-Chat-Group hidden">
                            </ul>
                            </div></div>
                            <div class="div-Chat-Participants biz-bg-hightlight-color_10 rounded-10 pa-10 hidden">
                            <div class="d-flex flex-column r-gap-10"><div class="participants-header flex-between-center c-gap-10">
                            <h6>Participants</h6>
                            <span class="badge badge-primary badge-sm rounded-10 font-10 countChatParticipants">0</span>
                            </div>
                            <div class="chatapp-search-div"><i class="fa fa-search search-icon biz-highlight-bg-color"></i><input type="text" class="participants_search custom-chat-input search-input" placeholder="Search Participants" onkeyup="Unibase.Platform.Connect.Components.Chat.Instance().searchParticipants('participants_search','grp_participents');"></div>
                            <ul class="list-group list-group-flush Notify-Chat-Participants hidden">
                            </ul>
                            </div></div>
                            <div class="div-Chat-AddParticipants biz-bg-hightlight-color_10 rounded-10 pa-10 hidden">
                            <div class="d-flex flex-column r-gap-10"><div class="add-participants-header flex-between-center c-gap-10">
                            <h6>Add Participants</h6>
                            <span class="badge badge-primary badge-sm rounded-10 font-10 countChatAddParticipants">0</span>
                            </div>
                            <ul class="list-group list-group-flush Notify-Chat-AddParticipants hidden">
                            </ul>
                            </div></div>
                            <div class="profile-action-div div-Chat-Block text-center">
                            <a href="javascript:void(0);" class="btn btn-sm btn-outline-danger blockUser hidden"  onclick="Unibase.Platform.Connect.Components.Chat.Instance().BlockAlert()">
                            <span class="icon-label mr-5"><i class="fa fa-ban"></i></span>
                            <span class="blkbtn-text">Block User</span>
                            </a>
                            <a href="javascript:void(0);" onclick="Unibase.Platform.Connect.Components.Chat.Instance().exitGroup();" class="btn btn-sm btn-outline-danger ExitFromGroup hidden">
                            <span class="icon-label mr-5"><i class="fa fa-sign-out"></i></span>
                                <span class="btn-text">Exit Group</span>
                            </a>
                            </div>
                            </div>
                            <div id="profileMediaWrap" class="profile-media-wrap hidden"><ul class="nav nav-tabs nav-line profile-media-tabs px-10" role="tablist" id="profileMediaTabs">
                            <li class="nav-item"><a href="javascript:void(0);" onclick="Unibase.Platform.Connect.Components.Chat.Instance().mediaFiles();" class="nav-link div-Chat-Media">Media <span class="countMediaFiles hidden count-span badge badge-primary badge-sm rounded-10 font-10">0</span></a></li>
                            <li class="nav-item"><a href="javascript:void(0);"onclick=" Unibase.Platform.Connect.Components.Chat.Instance().links();" class="nav-link div-Chat-Links">Links<span class="linkCount hidden count-span badge badge-primary badge-sm rounded-10 font-10">0</span></a></li>
                            <li class="nav-item"><a href="javascript:void(0);"onclick=" Unibase.Platform.Connect.Components.Chat.Instance().documentFiles();" class="nav-link div-Chat-Docs">Documents <span class="countDocFiles hidden count-span badge badge-primary badge-sm rounded-10 font-10">0</span></a></li>
                            </ul>
                            <div class="tab-content mb-20" id="profileTabContent">
                            <div class="links-content-tab tab-pane fade" role="tabpanel" id="links_files">
                            <div id="Chat-Links" class="Chat-ListUrls d-flex flex-column r-gap-15">
                             <div class="text-center text-danger">No Links</div>
                            </div>
                            </div>
                            <div class="links-content-tab tab-pane fade" role="tabpanel" id="Chat-Mediafiles">
                            <div id="Chat-Media" class="chat-media d-flex flex-column r-gap-15">
                                <div class="text-center text-danger">No Media</div>
                            </div>
                            </div>
                            <div class="links-content-tab tab-pane fade" role="tabpanel" id="Chat-docfiles">
                            <div id="Chat-Docs" class="Chat-Chat-Docs d-flex flex-column r-gap-15">
                                <div class="text-center text-danger">No Documents</h6>
                            </div>
                            </div>
                            </div>
                            </div>`;
                        return template;
                    }
                    getAddParticipants(contactId, contactName) {
                        var contact = Components.Chat.contacts.find(x => x.contactId == contactId);
                        const avatarHtml = this.getUserAvatarHtml(contact);
                        const _template = `<li class="list-group-item groupuser oldgrp_newparticipants px-1 py-2" id="groupParticipant_${contactId}" data-contactname="${contactName}">
                            <a href ="javascript:;" class="flex-between-center c-gap-10 groupParticipant_${contactId}">
                            <div class="d-flex align-items-center c-gap-10 flex-grow-1 mnw-0">${avatarHtml}<div class="name text-dark font-15 font-weight-500 text-truncate" id="contactname_${contactId}">${contactName}</div></div>
                            <input type="checkbox" name="selected_participants" id="checkuser_${contactId}" value='${contactId}' class="checkuser_${contactId} transform-scale-1_1"></div>
                            <label id="contactid_${contactId}" class="hidden">${contactId}</label>
                            </a></li>`;
                        return _template;
                    }
                    getgroupsbycid(groupname) {
                        var chatGroupId = 0;
                        var chatinfo = Components.Chat.recentChats.find(x => x.contactName == groupname && !x.isPrivate);
                        if (chatinfo != undefined) {
                            chatGroupId = chatinfo.chatGroupId;
                        }
                        const avatarHtml = this.getUserAvatarHtml(chatinfo);
                        const _template = `<li class="list-group-item px-1 py-2 common-group-item" id="groupuser_${chatGroupId}"><a href="javascript:;" data-contactid="0" data-chatgroupid="${chatGroupId}" onclick="Unibase.Platform.Connect.Components.Chat.Instance().privatewindow(${chatGroupId});" class="media participent d-flex align-items-center c-gap-10 mnw-0" id="msgConvoItem_${chatGroupId}">${avatarHtml}
                            <div class="media-body mnw-0 flex-grow-1"><div class="username text-dark font-weight-500 font-15 text-truncate" title="${groupname}">${groupname}</div></div></a></li>`;
                        return _template;
                    }
                    getForwardContacts(contacts) {
                        var forwardcontactshtml = "";
                        let contactLength = contacts.length;
                        for (let i = 0; i < contactLength; i++) {
                            const avatarHtml = this.getUserAvatarHtml(contacts[i]);
                            var idclass = contacts[i].contactId == 0 ? contacts[i].chatGroupId : contacts[i].contactId;
                            idclass = "frdid_" + idclass;
                            forwardcontactshtml += '<li class="list-group-item forwardcontact px-1 py-2 ' + idclass + '  " id="Forwarduser_' + i + '" data-contactname="' + contacts[i].contactName + '">' +
                                '<a href ="javascript:;"class="d-flex align-items-center c-gap-10 groupuser_' + i + '"><label class="d-flex align-items-center c-gap-10 flex-grow-1 mnw-0" for="chkuser_' + i + '">' + avatarHtml + '<div class="name font-15 font-weight-500 text-dark text-truncate" id = "forwardcontactname_' + i + '" > ' + contacts[i].contactName + ' </div></label>' +
                                '<input type="checkbox" name="forwardcontact" id="chkuser_' + i + '" class=" chkforward_' + contacts[i].contactId + '" value=' + contacts[i].contactId + ' data-contactid=' + contacts[i].contactId + ' data-chatgroupid=' + contacts[i].chatGroupId + '>' +
                                '<lable id="forwardcontactid_' + i + '" class="hidden">' + contacts[i].contactId + '</lable>' +
                                '</a></li>';
                        }
                        return forwardcontactshtml;
                    }
                    getForwardTemplate() {
                        const html = `<div id="forwardContactsHeader" class="chat-header flex-between-center c-gap-10"><div class="d-flex align-items-center c-gap-10"><a onclick="Unibase.Platform.Connect.Components.Chat.Instance().closeForwardContacts();" href="javascript:;" class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30"><span class="btn-icon-wrap"><i class="text-dark" data-icon="l"></i></span></a><div class="div-user-group-Name flex-between-center flex-grow-1 c-gap-10 r-gap-5 mnw-0"><div class="Profile_name font-weight-500 text-dark font-15 text-truncate">Forward Contacts</div></div></div><a class="btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-30 _btnSendToMany hidden" href="javascript:;" id="forwardSendBtn"><span class="btn-icon-wrap"><i class="zmdi zmdi-mail-send zmdi-hc-lg"></i></span></a></div>
                        <div class="Forward_Contacts flex-grow-1 chat-flex-column overflow-y-auto">
                            <div class="div_forwardMessage chat-flex-column">
                            <div class="pt-1 pb-2 flex-shrink-0">
                            <div role ="search" class="chatapp-search-div chat-search mx-2">
                            <input type="text" id="search_forwardcontacts" name ="search_forwardcontacts" class="custom-chat-input search_forwardcontacts search-input" placeholder="Search" onkeyup="Unibase.Platform.Connect.Components.Chat.Instance().searchParticipants('search_forwardcontacts','forwardcontact');"><i class="fa fa-search search-icon"></i></div></div>
                            <div data-simplebar class="Forward_messaagecontacts simple-scroll-bar px-10 pb-10 flex-grow-1"><ul class="forwardcontacts_list list-group list-group-flush"></ul></div></div></div>`;
                        return html;
                    }
                    getselectedcontacts(name, i) {
                        const _template = '<li class="selected_groupcontaccts_' + i + '"><span class="badge badge-light">' + name + '</span></li>';
                        return _template;
                    }
                    getMediaFiles(path, imgshow) {
                        const _template = '<div class="preview_file"><a href="javascript:void(0);" onclick="Unibase.Platform.Connect.Components.Chat.Instance().filePreview(\'' + path + '\')" class="d-inline-block"><img src="' + imgshow + '" onerror="ReloadImage(event)" data-dynamic="1" class="d-50"></a></div>';
                        return _template;
                    }
                    getLinks(message) {
                        const _template = `<div class="text-truncate w-100"><span class="link-message text-truncate font-14"><a href='${message}' target="_blank" title="${message}">${message}</a></span></div>`;
                        return _template;
                    }
                    getProfileSettings(photourl, contactname) {
                        const html = '<div class="profilesettings"><span class="imageProfile"><center><img src=' + photourl + ' style="height:30%;width:30%" class="profile_image rounded-circle"><i class="fa fa-pencil"><input type="file" class="change_profile hidden"></i></center><span class="profile_contactname">' + contactname + '</span><span class="profile_contactid"></span></div>';
                        return html;
                    }
                    getMentionableContactTemplate(contact) {
                        const { contactId, contactName } = contact;
                        let avatarHtml = this.getUserAvatarHtml(contact);
                        avatarHtml = avatarHtml.replace('avatar-sm', 'avatar-xs d-30');
                        const _template = `<li class="list-group-item pa-5 flex-between-center mentionble-contact" id="mentionbleContact_${contactId}" data-contactname="@${contactName}">
                            <a href ="javascript:;" class="d-flex align-items-center c-gap-10 w-100 mnw-0">${avatarHtml}
                            <div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center">
                            <div class="flex-between-center c-gap-10 text-dark font-weight-500 font-13 text-truncate" title="${contactName}">${contactName}</div>
                            </div>
                            </a></li>`;
                        return _template;
                    }
                    getUserAvatarHtml(contactInfo, isOnlineVisible = false, isPrivateWindow = false) {
                        let avatarHtml = '<div class="media-img-wrap avatar ImagePng_' + contactInfo.chatGroupId + ' avatar-sm flex-shrink-0 cursor-pointer" onclick="Unibase.Platform.Connect.Components.Chat.Instance().showProfileImgPreview()" title="Preview Profile">';
                        if (!contactInfo.photoUrl) {
                            let avatarTxt = "";
                            let headingTxt = contactInfo.contactName;
                            if (headingTxt) {
                                let matches = headingTxt.match(/\b(\w)/g);
                                if (matches.length == 1) {
                                    avatarTxt = $.trim(headingTxt).substr(0, 2);
                                }
                                else {
                                    avatarTxt = matches.join('').slice(0, 2);
                                }
                                avatarHtml += `<div class="avatar-text avatar-text-${isPrivateWindow ? 'inv-' : ''}primary rounded-circle" data-text="${avatarTxt}"><span class="initial-wrap"><span>${avatarTxt}</span></span></div>`;
                            }
                            else {
                                avatarHtml = '';
                            }
                        }
                        else {
                            var photoUrl = Components.Chat.Instance().getFilePath(contactInfo.photoUrl);
                            avatarHtml += `<img src='${photoUrl}' data-dynamic="1" class="avatar-img chatuser-img" data-loaded="0">`;
                        }
                        avatarHtml += `${isOnlineVisible ? `<span class="badge ${contactInfo.isonline ? 'active' : ''} badge-green badge-indicator online-status-icon" id ="contact_badge_${contactInfo.contactId}"></span>` : ''}</div>`;
                        return avatarHtml;
                    }
                    getEmojiPattern() {
                        return /^(?:\uD83D(?:\uDD73\uFE0F?|\uDC41(?:(?:\uFE0F(?:\u200D\uD83D\uDDE8\uFE0F?)?|\u200D\uD83D\uDDE8\uFE0F?))?|[\uDDE8\uDDEF]\uFE0F?|\uDC4B(?:\uD83C[\uDFFB-\uDFFF])?|\uDD90(?:(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F))?|[\uDD96\uDC4C\uDC48\uDC49\uDC46\uDD95\uDC47\uDC4D\uDC4E\uDC4A\uDC4F\uDE4C\uDC50\uDE4F\uDC85\uDCAA\uDC42\uDC43\uDC76\uDC66\uDC67](?:\uD83C[\uDFFB-\uDFFF])?|\uDC71(?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2640\u2642]\uFE0F?))?)|\u200D(?:[\u2640\u2642]\uFE0F?)))?|\uDC68(?:(?:\uD83C(?:\uDFFB(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF]|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?|\uDFFC(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF]|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?|\uDFFD(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?|\uDFFE(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF]|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?|\uDFFF(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE]|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?)|\u200D(?:\uD83E[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD]|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D(?:\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uDC68\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92])|\u2708\uFE0F?|\u2764(?:\uFE0F\u200D\uD83D(?:\uDC8B\u200D\uD83D\uDC68|\uDC68)|\u200D\uD83D(?:\uDC8B\u200D\uD83D\uDC68|\uDC68)))))?|\uDC69(?:(?:\uD83C(?:\uDFFB(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D(?:\uDC69\uD83C[\uDFFC-\uDFFF]|\uDC68\uD83C[\uDFFC-\uDFFF])|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?|\uDFFC(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D(?:\uDC69\uD83C[\uDFFB\uDFFD-\uDFFF]|\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?|\uDFFD(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D(?:\uDC69\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?|\uDFFE(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D(?:\uDC69\uD83C[\uDFFB-\uDFFD\uDFFF]|\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?|\uDFFF(?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83D(?:\uDC69\uD83C[\uDFFB-\uDFFE]|\uDC68\uD83C[\uDFFB-\uDFFE])|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?)|\u200D(?:\uD83E[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD]|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D(?:\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92])|\u2708\uFE0F?|\u2764(?:\uFE0F\u200D\uD83D(?:\uDC8B\u200D\uD83D[\uDC68\uDC69]|[\uDC68\uDC69])|\u200D\uD83D(?:\uDC8B\u200D\uD83D[\uDC68\uDC69]|[\uDC68\uDC69])))))?|[\uDC74\uDC75](?:\uD83C[\uDFFB-\uDFFF])?|[\uDE4D\uDE4E\uDE45\uDE46\uDC81\uDE4B\uDE47\uDC6E](?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|\uDD75(?:(?:\uFE0F(?:\u200D(?:[\u2642\u2640]\uFE0F?))?|\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDC82\uDC77](?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|\uDC78(?:\uD83C[\uDFFB-\uDFFF])?|\uDC73(?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDC72\uDC70\uDC7C](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC86\uDC87\uDEB6](?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDC83\uDD7A](?:\uD83C[\uDFFB-\uDFFF])?|\uDD74(?:(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F))?|\uDC6F(?:\u200D(?:[\u2642\u2640]\uFE0F?))?|[\uDEA3\uDEB4\uDEB5](?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDEC0\uDECC\uDC6D\uDC6B\uDC6C](?:\uD83C[\uDFFB-\uDFFF])?|\uDDE3\uFE0F?|\uDC15(?:\u200D\uD83E\uDDBA)?|[\uDC3F\uDD4A\uDD77\uDD78\uDDFA\uDEE3\uDEE4\uDEE2\uDEF3\uDEE5\uDEE9\uDEF0\uDECE\uDD70\uDD79\uDDBC\uDD76\uDECD\uDDA5\uDDA8\uDDB1\uDDB2\uDCFD\uDD6F\uDDDE\uDDF3\uDD8B\uDD8A\uDD8C\uDD8D\uDDC2\uDDD2\uDDD3\uDD87\uDDC3\uDDC4\uDDD1\uDDDD\uDEE0\uDDE1\uDEE1\uDDDC\uDECF\uDECB\uDD49]\uFE0F?|[\uDE00\uDE03\uDE04\uDE01\uDE06\uDE05\uDE02\uDE42\uDE43\uDE09\uDE0A\uDE07\uDE0D\uDE18\uDE17\uDE1A\uDE19\uDE0B\uDE1B-\uDE1D\uDE10\uDE11\uDE36\uDE0F\uDE12\uDE44\uDE2C\uDE0C\uDE14\uDE2A\uDE34\uDE37\uDE35\uDE0E\uDE15\uDE1F\uDE41\uDE2E\uDE2F\uDE32\uDE33\uDE26-\uDE28\uDE30\uDE25\uDE22\uDE2D\uDE31\uDE16\uDE23\uDE1E\uDE13\uDE29\uDE2B\uDE24\uDE21\uDE20\uDE08\uDC7F\uDC80\uDCA9\uDC79-\uDC7B\uDC7D\uDC7E\uDE3A\uDE38\uDE39\uDE3B-\uDE3D\uDE40\uDE3F\uDE3E\uDE48-\uDE4A\uDC8B\uDC8C\uDC98\uDC9D\uDC96\uDC97\uDC93\uDC9E\uDC95\uDC9F\uDC94\uDC9B\uDC9A\uDC99\uDC9C\uDDA4\uDCAF\uDCA2\uDCA5\uDCAB\uDCA6\uDCA8\uDCA3\uDCAC\uDCAD\uDCA4\uDC40\uDC45\uDC44\uDC8F\uDC91\uDC6A\uDC64\uDC65\uDC63\uDC35\uDC12\uDC36\uDC29\uDC3A\uDC31\uDC08\uDC2F\uDC05\uDC06\uDC34\uDC0E\uDC2E\uDC02-\uDC04\uDC37\uDC16\uDC17\uDC3D\uDC0F\uDC11\uDC10\uDC2A\uDC2B\uDC18\uDC2D\uDC01\uDC00\uDC39\uDC30\uDC07\uDC3B\uDC28\uDC3C\uDC3E\uDC14\uDC13\uDC23-\uDC27\uDC38\uDC0A\uDC22\uDC0D\uDC32\uDC09\uDC33\uDC0B\uDC2C\uDC1F-\uDC21\uDC19\uDC1A\uDC0C\uDC1B-\uDC1E\uDC90\uDCAE\uDD2A\uDDFE\uDDFB\uDC92\uDDFC\uDDFD\uDD4C\uDED5\uDD4D\uDD4B\uDC88\uDE82-\uDE8A\uDE9D\uDE9E\uDE8B-\uDE8E\uDE90-\uDE9C\uDEF5\uDEFA\uDEB2\uDEF4\uDEF9\uDE8F\uDEA8\uDEA5\uDEA6\uDED1\uDEA7\uDEF6\uDEA4\uDEA2\uDEEB\uDEEC\uDCBA\uDE81\uDE9F-\uDEA1\uDE80\uDEF8\uDD5B\uDD67\uDD50\uDD5C\uDD51\uDD5D\uDD52\uDD5E\uDD53\uDD5F\uDD54\uDD60\uDD55\uDD61\uDD56\uDD62\uDD57\uDD63\uDD58\uDD64\uDD59\uDD65\uDD5A\uDD66\uDD25\uDCA7\uDEF7\uDD2E\uDC53-\uDC62\uDC51\uDC52\uDCFF\uDC84\uDC8D\uDC8E\uDD07-\uDD0A\uDCE2\uDCE3\uDCEF\uDD14\uDD15\uDCFB\uDCF1\uDCF2\uDCDE-\uDCE0\uDD0B\uDD0C\uDCBB\uDCBD-\uDCC0\uDCFA\uDCF7-\uDCF9\uDCFC\uDD0D\uDD0E\uDCA1\uDD26\uDCD4-\uDCDA\uDCD3\uDCD2\uDCC3\uDCDC\uDCC4\uDCF0\uDCD1\uDD16\uDCB0\uDCB4-\uDCB8\uDCB3\uDCB9\uDCB1\uDCB2\uDCE7-\uDCE9\uDCE4-\uDCE6\uDCEB\uDCEA\uDCEC-\uDCEE\uDCDD\uDCBC\uDCC1\uDCC2\uDCC5-\uDCD0\uDD12\uDD13\uDD0F-\uDD11\uDD28\uDD2B\uDD27\uDD29\uDD17\uDD2C\uDD2D\uDCE1\uDC89\uDC8A\uDEAA\uDEBD\uDEBF\uDEC1\uDED2\uDEAC\uDDFF\uDEAE\uDEB0\uDEB9-\uDEBC\uDEBE\uDEC2-\uDEC5\uDEB8\uDEAB\uDEB3\uDEAD\uDEAF\uDEB1\uDEB7\uDCF5\uDD1E\uDD03\uDD04\uDD19-\uDD1D\uDED0\uDD4E\uDD2F\uDD00-\uDD02\uDD3C\uDD3D\uDD05\uDD06\uDCF6\uDCF3\uDCF4\uDD31\uDCDB\uDD30\uDD1F-\uDD24\uDD34\uDFE0-\uDFE2\uDD35\uDFE3-\uDFE5\uDFE7-\uDFE9\uDFE6\uDFEA\uDFEB\uDD36-\uDD3B\uDCA0\uDD18\uDD33\uDD32\uDEA9])|\uD83E(?:[\uDD1A\uDD0F\uDD1E\uDD1F\uDD18\uDD19\uDD1B\uDD1C\uDD32\uDD33\uDDB5\uDDB6\uDDBB\uDDD2](?:\uD83C[\uDFFB-\uDFFF])?|\uDDD1(?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:\uD83E(?:\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF]|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?))?)|\u200D(?:\uD83E(?:\uDD1D\u200D\uD83E\uDDD1|[\uDDB0\uDDB1\uDDB3\uDDB2\uDDAF\uDDBC\uDDBD])|\u2695\uFE0F?|\uD83C[\uDF93\uDFEB\uDF3E\uDF73\uDFED\uDFA4\uDFA8]|\u2696\uFE0F?|\uD83D[\uDD27\uDCBC\uDD2C\uDCBB\uDE80\uDE92]|\u2708\uFE0F?)))?|[\uDDD4\uDDD3](?:\uD83C[\uDFFB-\uDFFF])?|[\uDDCF\uDD26\uDD37](?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDD34\uDDD5\uDD35\uDD30\uDD31\uDD36](?:\uD83C[\uDFFB-\uDFFF])?|[\uDDB8\uDDB9\uDDD9-\uDDDD](?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDDDE\uDDDF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?|[\uDDCD\uDDCE\uDDD6\uDDD7\uDD38](?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|\uDD3C(?:\u200D(?:[\u2642\u2640]\uFE0F?))?|[\uDD3D\uDD3E\uDD39\uDDD8](?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDD23\uDD70\uDD29\uDD2A\uDD11\uDD17\uDD2D\uDD2B\uDD14\uDD10\uDD28\uDD25\uDD24\uDD12\uDD15\uDD22\uDD2E\uDD27\uDD75\uDD76\uDD74\uDD2F\uDD20\uDD73\uDD13\uDDD0\uDD7A\uDD71\uDD2C\uDD21\uDD16\uDDE1\uDD0E\uDD0D\uDD1D\uDDBE\uDDBF\uDDE0\uDDB7\uDDB4\uDD3A\uDDB0\uDDB1\uDDB3\uDDB2\uDD8D\uDDA7\uDDAE\uDD8A\uDD9D\uDD81\uDD84\uDD93\uDD8C\uDD99\uDD92\uDD8F\uDD9B\uDD94\uDD87\uDDA5\uDDA6\uDDA8\uDD98\uDDA1\uDD83\uDD85\uDD86\uDDA2\uDD89\uDDA9\uDD9A\uDD9C\uDD8E\uDD95\uDD96\uDD88\uDD8B\uDD97\uDD82\uDD9F\uDDA0\uDD40\uDD6D\uDD5D\uDD65\uDD51\uDD54\uDD55\uDD52\uDD6C\uDD66\uDDC4\uDDC5\uDD5C\uDD50\uDD56\uDD68\uDD6F\uDD5E\uDDC7\uDDC0\uDD69\uDD53\uDD6A\uDD59\uDDC6\uDD5A\uDD58\uDD63\uDD57\uDDC8\uDDC2\uDD6B\uDD6E\uDD5F-\uDD61\uDD80\uDD9E\uDD90\uDD91\uDDAA\uDDC1\uDD67\uDD5B\uDD42\uDD43\uDD64\uDDC3\uDDC9\uDDCA\uDD62\uDD44\uDDED\uDDF1\uDDBD\uDDBC\uDE82\uDDF3\uDE90\uDDE8\uDDE7\uDD47-\uDD49\uDD4E\uDD4F\uDD4D\uDD4A\uDD4B\uDD45\uDD3F\uDD4C\uDE80\uDE81\uDDFF\uDDE9\uDDF8\uDDF5\uDDF6\uDD7D\uDD7C\uDDBA\uDDE3-\uDDE6\uDD7B\uDE71-\uDE73\uDD7E\uDD7F\uDE70\uDDE2\uDE95\uDD41\uDDEE\uDE94\uDDFE\uDE93\uDDAF\uDDF0\uDDF2\uDDEA-\uDDEC\uDE78-\uDE7A\uDE91\uDE92\uDDF4\uDDF7\uDDF9-\uDDFD\uDDEF])|[\u263A\u2639\u2620\u2763\u2764]\uFE0F?|\u270B(?:\uD83C[\uDFFB-\uDFFF])?|[\u270C\u261D](?:(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F))?|\u270A(?:\uD83C[\uDFFB-\uDFFF])?|\u270D(?:(?:\uD83C[\uDFFB-\uDFFF]|\uFE0F))?|\uD83C(?:\uDF85(?:\uD83C[\uDFFB-\uDFFF])?|\uDFC3(?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDFC7\uDFC2](?:\uD83C[\uDFFB-\uDFFF])?|\uDFCC(?:(?:\uFE0F(?:\u200D(?:[\u2642\u2640]\uFE0F?))?|\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDFC4\uDFCA](?:(?:\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|\uDFCB(?:(?:\uFE0F(?:\u200D(?:[\u2642\u2640]\uFE0F?))?|\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\uDFF5\uDF36\uDF7D\uDFD4-\uDFD6\uDFDC-\uDFDF\uDFDB\uDFD7\uDFD8\uDFDA\uDFD9\uDFCE\uDFCD\uDF21\uDF24-\uDF2C\uDF97\uDF9F\uDF96\uDF99-\uDF9B\uDF9E\uDFF7\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37]\uFE0F?|\uDFF4(?:(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67\uDB40\uDC7F|\uDC73\uDB40\uDC63\uDB40\uDC74\uDB40\uDC7F|\uDC77\uDB40\uDC6C\uDB40\uDC73\uDB40\uDC7F)))?|\uDFF3(?:(?:\uFE0F(?:\u200D\uD83C\uDF08)?|\u200D\uD83C\uDF08))?|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|[\uDFFB-\uDFFF\uDF38-\uDF3C\uDF37\uDF31-\uDF35\uDF3E-\uDF43\uDF47-\uDF53\uDF45\uDF46\uDF3D\uDF44\uDF30\uDF5E\uDF56\uDF57\uDF54\uDF5F\uDF55\uDF2D-\uDF2F\uDF73\uDF72\uDF7F\uDF71\uDF58-\uDF5D\uDF60\uDF62-\uDF65\uDF61\uDF66-\uDF6A\uDF82\uDF70\uDF6B-\uDF6F\uDF7C\uDF75\uDF76\uDF7E\uDF77-\uDF7B\uDF74\uDFFA\uDF0D-\uDF10\uDF0B\uDFE0-\uDFE6\uDFE8-\uDFED\uDFEF\uDFF0\uDF01\uDF03-\uDF07\uDF09\uDFA0-\uDFA2\uDFAA\uDF11-\uDF20\uDF0C\uDF00\uDF08\uDF02\uDF0A\uDF83\uDF84\uDF86-\uDF8B\uDF8D-\uDF91\uDF80\uDF81\uDFAB\uDFC6\uDFC5\uDFC0\uDFD0\uDFC8\uDFC9\uDFBE\uDFB3\uDFCF\uDFD1-\uDFD3\uDFF8\uDFA3\uDFBD\uDFBF\uDFAF\uDFB1\uDFAE\uDFB0\uDFB2\uDCCF\uDC04\uDFB4\uDFAD\uDFA8\uDF92\uDFA9\uDF93\uDFBC\uDFB5\uDFB6\uDFA4\uDFA7\uDFB7-\uDFBB\uDFA5\uDFAC\uDFEE\uDFF9\uDFE7\uDFA6\uDD8E\uDD91-\uDD9A\uDE01\uDE36\uDE2F\uDE50\uDE39\uDE1A\uDE32\uDE51\uDE38\uDE34\uDE33\uDE3A\uDE35\uDFC1\uDF8C])|\u26F7\uFE0F?|\u26F9(?:(?:\uFE0F(?:\u200D(?:[\u2642\u2640]\uFE0F?))?|\uD83C(?:[\uDFFB-\uDFFF](?:\u200D(?:[\u2642\u2640]\uFE0F?))?)|\u200D(?:[\u2642\u2640]\uFE0F?)))?|[\u2618\u26F0\u26E9\u2668\u26F4\u2708\u23F1\u23F2\u2600\u2601\u26C8\u2602\u26F1\u2744\u2603\u2604\u26F8\u2660\u2665\u2666\u2663\u265F\u26D1\u260E\u2328\u2709\u270F\u2712\u2702\u26CF\u2692\u2694\u2699\u2696\u26D3\u2697\u26B0\u26B1\u26A0\u2622\u2623\u2B06\u2197\u27A1\u2198\u2B07\u2199\u2B05\u2196\u2195\u2194\u21A9\u21AA\u2934\u2935\u269B\u2721\u2638\u262F\u271D\u2626\u262A\u262E\u25B6\u23ED\u23EF\u25C0\u23EE\u23F8-\u23FA\u23CF\u2640\u2642\u2695\u267E\u267B\u269C\u2611\u2714\u2716\u303D\u2733\u2734\u2747\u203C\u2049\u3030\u00A9\u00AE\u2122]\uFE0F?|[\u0023\u002A\u0030-\u0039](?:\uFE0F\u20E3|\u20E3)|[\u2139\u24C2\u3297\u3299\u25FC\u25FB\u25AA\u25AB]\uFE0F?|[\u2615\u26EA\u26F2\u26FA\u26FD\u2693\u26F5\u231B\u23F3\u231A\u23F0\u2B50\u26C5\u2614\u26A1\u26C4\u2728\u26BD\u26BE\u26F3\u267F\u26D4\u2648-\u2653\u26CE\u23E9-\u23EC\u2B55\u2705\u274C\u274E\u2795-\u2797\u27B0\u27BF\u2753-\u2755\u2757\u26AB\u26AA\u2B1B\u2B1C\u25FE\u25FD])$/;
                    }
                    getGroupParticipants(participants) {
                        var adminbadge = '';
                        var style = "";
                        var contactInfo = Components.Chat.contacts.find(x => x.contactId == participants.recipientId);
                        var options = '<a href="javascript:;" onclick="Unibase.Platform.Connect.Components.Chat.Instance().adminOptions()" data-isadmin=' + participants.isAdmin + ' data-contactid=' + contactInfo.contactId + ' data-chatGroupId=' + contactInfo.chatGroupId + ' class="dotsicon btn btn-flush-biz-theme btn-icon btn-rounded flush-soft-hover d-26 flex-shrink-0 fromParticipant_' + contactInfo.contactId + '"  data-toggle="dropdown" role = "button" aria-haspopup="false" aria-expanded="false" > ' +
                            '<span class="btn-icon-wrap"><i class="icon dripicons-dots-3 rotate-90d font-20 text-dark"></i></span>' +
                            '<div class="dropdown-menu-right dropdown-menu grpoptionshtml" id ="drpdownmenu"></div></a>';
                        if (participants.recipientId == Components.Chat.currentUser.userId) {
                            contactInfo.contactName = "You";
                            options = "";
                            participants.isAdmin ? $('.btn_AddChatParticipants').removeClass('hidden') : "";
                        }
                        if (participants.isAdmin) {
                            style = 'style="position:absolute;right:26px"';
                            adminbadge = '<span class="badge badge-sm badge-soft-primary font-10 recipientbadge" ' + style + '>Admin</span>';
                        }
                        const avatarHtml = this.getUserAvatarHtml(contactInfo);
                        const _template = `<li class="list-group-item px-1 py-2 flex-between-center position-relative grp_participents isadmin_${participants.isAdmin} participant_${participants.recipientId}" data-contactname='${contactInfo.contactName}' data-isAdmin=${participants.isAdmin}  id="groupParticipantUser_${contactInfo.contactId}">
                            <a href ="javascript:;" class="d-flex align-items-center c-gap-10 participent w-100 mnw-0">${avatarHtml}
                            <div class="media-body flex-grow-1 mnw-0 d-flex flex-column justify-content-center">
                            <label id="contactid" class="hidden">${contactInfo.contactId}</label>
                            <input type="hidden" class="contactname_hidden_${contactInfo.contactName}" value="${contactInfo.contactId}"><div class="name flex-between-center c-gap-10 text-dark font-weight-500 font-15" id="contactName_${contactInfo.contactId}" title="${contactInfo.contactName}"><span class="text-truncate">${contactInfo.contactName}</span> ${adminbadge}</div>
                            <div class="user-about hidden"></div>
                            </div>
                            </a>${options}</li>`;
                        return _template;
                    }
                    getRecentChatsTemplate(chatInfo) {
                        var instance = this;
                        var { chatGroupId, contactName, isPrivate, contactId, lastMessage, messageLastUpdatedDate, unReadMessagesCount, isMute } = chatInfo;
                        var msg = lastMessage;
                        const avatarHtml = instance.getUserAvatarHtml(chatInfo, true);
                        msg == '' ? messageLastUpdatedDate = '' : messageLastUpdatedDate = messageLastUpdatedDate;
                        if (chatInfo.lastMessage == null) {
                            msg = '';
                        }
                        if (chatGroupId == 0) {
                            chatGroupId = contactId;
                        }
                        var unreadbadge = "";
                        if (unReadMessagesCount > 0) {
                            unreadbadge = `<span class="badge badge-sm badge-primary unread_messages_${chatGroupId} rounded-10 font-10">${unReadMessagesCount}</span>`;
                        }
                        var msgdate = "";
                        if (messageLastUpdatedDate != undefined && messageLastUpdatedDate != '') {
                            msgdate = Components.Chat.Instance().timeAnddateFormat(messageLastUpdatedDate);
                            msgdate = (msgdate == "Invalid date") ? messageLastUpdatedDate : msgdate;
                        }
                        var _template = `<li class="userChat_${chatGroupId} recentchats list-group-item chat-group-item pa-0" data-contactname=${contactName}>
                                    <a href="javascript:void(0);" data-isprivate=${isPrivate} data-chatgroupid=${chatGroupId} data-contactId=${contactId} class="media contactuser d-flex px-1 py-2 c-gap-10 chatUserList" onclick="Unibase.Platform.Connect.Components.Chat.Instance().privatewindow(${chatGroupId})" id="msgConvoItem_${chatGroupId}"><div class="d-flex align-items-center c-gap-10 flex-grow-1 mnw-0">${avatarHtml}
                                    <div class="media-body mnw-0 flex-grow-1"><div class="username text-dark grpname_${chatGroupId} font-weight-500 font-15 text-truncate" title="${contactName}">${contactName}</div><div class="user-last-chat_${chatGroupId} last-chat-msg" title="${msg}">${msg}</div><div class="text-green font-12 text-truncate w-80p typing_active_${chatGroupId} hidden" data-typingcontacts=''><strong>typing...</strong></div></div></div>
                              <div class="chat-details flex-shrink-0 d-flex flex-column justify-content-between align-items-end r-gap-5"><div class="last-chat-time font-11 ${!msgdate ? 'hidden' : ''}">${msgdate}</div><div class="d-flex align-items-end c-gap-10"><i class="zmdi zmdi-volume-off mute-status-icon font-16 ${!isMute ? 'hidden' : ''}"></i> ${unreadbadge}</div></div></a></li>`;
                        return _template;
                    }
                    getWebCamHtml() {
                        return `<div class="web_cam position-relative biz-bg-hightlight-color_10 h-100"><span class="back_btn position-absolute r-0 bg-trans-dark-50 d-26 z-index-1 flex-center"><a href="javascript:;" onclick="Unibase.Platform.Connect.Components.Chat.Instance().closecam();" title="Close"><i class="icon dripicons-cross text-white font-18"></i></a></span><div class="cam_hidden flex-center h-100"><video id="cam_pic" autoplay="true" class="w-100 h-100" style="object-fit: fill"></video><div id="camErrMsg" class="hidden text-danger text-center"></div></div><center class="camera-controls bg-trans-dark-50" id="camerControls"><a class="back_cam d-none" href="javascript:;" onclick="Unibase.Platform.Connect.Components.Chat.Instance().back_tocam();"><i class="las la-arrow-left"></i></a><a href="javascript:;" class="btn-file" onclick="Unibase.Platform.Connect.Components.Chat.Instance().webcampicture();"><i class="las la-camera"></i></a><a href="javascript:;" class="send_pic d-none" onclick="Unibase.Platform.Connect.Components.Chat.Instance().webcamimage();"><i class="las la-caret-right"></i></a></center><div class="canvas_hidden w-100 h-100 hidden"><canvas id="chat_size" class="hidden border w-100 h-100"></canvas><img id="cam_image" class="cam_data w-100 h-100"></div></div>`;
                    }
                    static Instance() {
                        if (this.instance === undefined)
                            this.instance = new ChatTemplate();
                        return this.instance;
                    }
                }
                Components.ChatTemplate = ChatTemplate;
            })(Components = Connect.Components || (Connect.Components = {}));
        })(Connect = Platform.Connect || (Platform.Connect = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));