<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8" />
  <title>Chat | Chatvia - Nodejs Socket.io Chat App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="Node js Socket.io real time working Chat App with Bootstrap 5 and responsive" name="description" />
  <meta content="Themesbrand" name="author" />
  <!-- App favicon -->
  <link rel="shortcut icon" href="assets/images/favicon.ico">
   <!-- magnific-popup css -->
   <link href="assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
   <!-- owl.carousel css -->
   <link rel="stylesheet" href="assets/libs/owl.carousel/assets/owl.carousel.min.css">
   <link rel="stylesheet" href="assets/libs/owl.carousel/assets/owl.theme.default.min.css">
   <!-- Bootstrap Css -->
   <link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
   <!-- Icons Css -->
   <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
   <!-- App Css-->
   <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
   <!-- Style Css -->
  <link href="assets/css/style.css" id="app-style" rel="stylesheet" type="text/css" />
  <!-- Toastr Css -->
  <link href="./assets/css/toastr.min.css" rel="stylesheet" />

</head>

<body>
  <div class="layout-wrapper d-lg-flex">
    <!-- Start left sidebar-menu -->
    <div class="side-menu flex-lg-column me-lg-1 ms-lg-0">
      <!-- LOGO -->
      <div class="navbar-brand-box">
        <a href="/" class="logo logo-dark">
          <span class="logo-sm">
            <img src="assets/images/logo.svg" alt="" height="30">
          </span>
        </a>

        <a href="/" class="logo logo-light">
          <span class="logo-sm">
            <img src="assets/images/logo.svg" alt="" height="30">
          </span>
        </a>
      </div>
      <!-- end navbar-brand-box -->

      <!-- Start side-menu nav -->
      <div class="flex-lg-column my-auto">
        <ul class="nav nav-pills side-menu-nav justify-content-center" role="tablist">
          <li class="nav-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="true"
            data-bs-placement="top" title="Profile">
            <a class="nav-link" id="pills-user-tab" data-bs-toggle="pill" href="#pills-user" role="tab">
              <i class="ri-user-2-line"></i>
            </a>
          </li>
          <li class="nav-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Chats">
            <a class="nav-link active" id="pills-chat-tab" data-bs-toggle="pill" href="#pills-chat" role="tab">
              <i class="ri-message-3-line"></i>
            </a>
          </li>
          <li class="nav-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Groups">
            <a class="nav-link" id="pills-groups-tab" data-bs-toggle="pill" href="#pills-groups" role="tab">
              <i class="ri-group-line"></i>
            </a>
          </li>
          <li class="nav-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top"
            title="Contacts">
            <a class="nav-link" id="pills-contacts-tab" data-bs-toggle="pill" href="#pills-contacts" role="tab">
              <i class="ri-contacts-line"></i>
            </a>
          </li>
          <li class="nav-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top"
            title="Settings">
            <a class="nav-link" id="pills-setting-tab" data-bs-toggle="pill" href="#pills-setting" role="tab">
              <i class="ri-settings-2-line"></i>
            </a>
          </li>
          <li class="nav-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Logout">
            <a class="nav-link nav-logout" id="pills-setting-tab" data-bs-toggle="pill" href="javascript:void(0);" role="tab">
              <i class="ri-logout-circle-r-line"></i>
            </a>
          </li>
          <li class="nav-item dropdown profile-user-dropdown d-inline-block d-lg-none">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">
              <img src="assets/images/users/default_image.jpg" alt="" class="profile-user rounded-circle">
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Profile <i class="ri-profile-line float-end text-muted"></i></a>
              <a class="dropdown-item" href="#">Setting <i class="ri-settings-3-line float-end text-muted"></i></a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Log out <i class="ri-logout-circle-r-line float-end text-muted"></i></a>
            </div>
          </li>
        </ul>
      </div>
      <!-- end side-menu nav -->

      <div class="flex-lg-column d-none d-lg-block">
        <ul class="nav side-menu-nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link" id="light-dark" href="#" data-bs-toggle="tooltip" data-bs-trigger="hover"
              data-bs-placement="right" title="Dark / Light Mode">
              <i class="ri-sun-line theme-mode-icon"></i>
            </a>
          </li>

          <li class="nav-item btn-group dropup profile-user-dropdown ">
            <a class="nav-link dropdown-toggle userProfile" href="#" role="button" data-bs-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              <img src="assets/images/users/default_image.jpg" alt=""
                class="profile-user rounded-circle user-profile-image">
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="javascript:document.getElementById('pills-user-tab').click()">Profile <i
                  class="ri-profile-line float-end text-muted"></i></a>
              <a class="dropdown-item" href="javascript:document.getElementById('pills-setting-tab').click()">Setting <i
                  class="ri-settings-3-line float-end text-muted"></i></a>
            </div>
          </li>
        </ul>
      </div>
      <!-- Side menu user -->
    </div>
    <!-- end left sidebar-menu -->

    <!-- start chat-leftsidebar -->
    <div class="chat-leftsidebar me-lg-1 ms-lg-0">

      <div class="tab-content">
        <!-- Start Profile tab-pane -->
        <div class="tab-pane" id="pills-user" role="tabpanel" aria-labelledby="pills-user-tab">
          <!-- Start profile content -->
          <div>
            <div class="px-4 pt-4">
              <div class="user-chat-nav float-end">
                <div class="dropdown">
                  <a href="#" class="font-size-18 text-muted dropdown-toggle" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="ri-more-2-fill"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item"
                      href="javascript:document.getElementById('pills-setting-tab').click()">Edit</a>
                  </div>
                </div>
              </div>
              <h4 class="mb-0">My Profile</h4>
            </div>

            <div class="text-center p-4 border-bottom">
              <div class="mb-4 userProfile">
                <img src="assets/images/users/default_image.jpg"
                  class="rounded-circle avatar-lg img-thumbnail user-profile-image" alt="">
              </div>

              <h5 class="font-size-16 mb-1 text-truncate user_name" id="current-username">Chatvia User</h5>
              <p class="text-muted text-truncate mb-1"><i
                  class="ri-record-circle-fill font-size-10 text-success me-1 ms-0 d-inline-block"></i> Active</p>
            </div>
            <!-- End profile user -->

            <!-- Start user-profile-desc -->
            <div class="p-4 user-profile-desc" data-simplebar>
              <div class="text-muted">
                <p class="mb-4">If several languages coalesce, the grammar of the resulting language is more simple and
                  regular than that of the individual.</p>
              </div>


              <div id="tabprofile" class="accordion">
                <div class="accordion-item card border mb-2">
                  <div class="accordion-header" id="about2">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#about"
                      aria-expanded="true" aria-controls="about">
                      <h5 class="font-size-14 m-0">
                        <i class="ri-user-2-line me-2 ms-0 ms-0 align-middle d-inline-block"></i> About
                      </h5>
                    </button>
                  </div>
                  <div id="about" class="accordion-collapse collapse show" aria-labelledby="about2"
                    data-bs-parent="#tabprofile">
                    <div class="accordion-body">
                      <div>
                        <p class="text-muted mb-1">Name</p>
                        <h5 class="font-size-14 user_name">Chatvia User</h5>
                      </div>

                      <div class="mt-4">
                        <p class="text-muted mb-1">Email</p>
                        <h5 class="font-size-14 user_email">adc@123.com</h5>
                      </div>

                      <div class="mt-4">
                        <p class="text-muted mb-1">Date/Time</p>
                        <h5 class="font-size-14 user_time">11:40 AM</h5>
                      </div>

                      <div class="mt-4">
                        <p class="text-muted mb-1">Location</p>
                        <h5 class="font-size-14 mb-0 user_location">California, USA</h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- end profile-user-accordion -->

            </div>
            <!-- end user-profile-desc -->
          </div>
          <!-- End profile content -->
        </div>
        <!-- End Profile tab-pane -->

        <!-- Start chats tab-pane -->
        <div class="tab-pane fade show active" id="pills-chat" role="tabpanel" aria-labelledby="pills-chat-tab">
          <!-- Start chats content -->
          <div>
            <div class="px-4 pt-4">
              <h4 class="mb-4">Chats</h4>
              <div class="search-box chat-search-box">
                <div class="input-group mb-3 rounded-3">
                  <span class="input-group-text text-muted bg-light pe-1 ps-3" id="basic-addon1">
                    <i class="ri-search-line search-icon font-size-18"></i>
                  </span>
                  <input type="text" class="form-control bg-light" id="search" placeholder="Search messages or users"
                    aria-label="Search messages or users" aria-describedby="basic-addon1">
                </div>
              </div> <!-- Search Box-->
            </div> <!-- .p-4 -->

            <!-- Start chat-message-list -->
            <div class="px-2">
              <h5 class="mb-3 px-3 font-size-16">Recent</h5>
              <div class="chat-message-list" data-simplebar>
                <ul class="list-unstyled chat-list chat-user-list">
                  <div id="users">
                    <div class="loader_bg" style="display: block; background-color: #f5f7fb;">
                      <div class="text-center">
                        <div class="loader">
                          <span></span>
                          <span></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </ul>
              </div>
            </div>
            <!-- End chat-message-list -->
          </div>
          <!-- Start chats content -->
        </div>
        <!-- End chats tab-pane -->

        <!-- Start groups tab-pane -->
        <div class="tab-pane" id="pills-groups" role="tabpanel" aria-labelledby="pills-groups-tab">
          <!-- Start Groups content -->
          <div>
            <div class="p-4">
              <div class="user-chat-nav float-end">
                <div data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create group">
                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn-link text-decoration-none text-muted font-size-18 py-0"
                    data-bs-toggle="modal" data-bs-target="#addgroup-exampleModal">
                    <i class="ri-group-line me-1 ms-0"></i>
                  </button>
                </div>
              </div>
              <h4 class="mb-4">Groups</h4>

              <!-- Start add group Modal -->
              <div class="modal fade" id="addgroup-exampleModal" tabindex="-1" role="dialog"
                aria-labelledby="addgroup-exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                  <div class="modal-content">
                    <form class="groups_form">
                      <div class="modal-header">
                        <h5 class="modal-title font-size-16" id="addgroup-exampleModalLabel">Create New Group</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                      </div>
                      <div class="modal-body p-4">
                        <div class="mb-4">
                          <label for="addgroupname-input" class="form-label">Group Name</label>
                          <input type="text" class="form-control" id="group_name" placeholder="Enter Group Name">
                        </div>
                        <div class="mb-4">
                          <label class="form-label">Group Members</label>
                          <div class="mb-3">
                            <button class="btn btn-light btn-sm" type="button" data-bs-toggle="collapse"
                              data-bs-target="#groupmembercollapse" aria-expanded="false"
                              aria-controls="groupmembercollapse">
                              Select Members
                            </button>
                          </div>
                          <div class="collapse" id="groupmembercollapse">
                            <div class="card border">
                              <div class="card-header">
                                <h5 class="font-size-15 mb-0">Contacts</h5>
                              </div>
                              <div class="card-body p-2">
                                <div data-simplebar style="max-height: 150px;">
                                  <div>
                                    <ul class="list-unstyled contact-list contactGroup">
                                    </ul>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="mb-3">
                          <label for="addgroupdescription-input" class="form-label">Description</label>
                          <textarea class="form-control" id="group_description" rows="3"
                            placeholder="Enter Description"></textarea>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal"
                          id="close_model1">Close</button>
                        <button type="submit" class="btn btn-primary">Create Groups</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
              <!-- End add group Modal -->

              <div class="search-box chat-search-box">
                <div class="input-group rounded-3">
                  <span class="input-group-text text-muted bg-light pe-1 ps-3" id="basic-addon1">
                    <i class="ri-search-line search-icon font-size-18"></i>
                  </span>
                  <input type="text" class="form-control bg-light" id="search_group" placeholder="Search groups..."
                    aria-label="Search groups..." aria-describedby="basic-addon1">
                </div>
              </div> <!-- Search Box-->
            </div>
            <!-- Start chat-group-list -->
            <div class="p-4 chat-message-list chat-group-list" data-simplebar>
              <ul class="list-unstyled chat-list group_list"></ul>
            </div>
            <!-- End chat-group-list -->
          </div>
          <!-- End Groups content -->
        </div>
        <!-- End groups tab-pane -->

        <!-- Start contacts tab-pane -->
        <div class="tab-pane" id="pills-contacts" role="tabpanel" aria-labelledby="pills-contacts-tab">
          <!-- Start Contact content -->
          <div>
            <div class="p-4">
              <div class="user-chat-nav float-end">
                <div data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add Contact">
                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn-link text-decoration-none text-muted font-size-18 py-0"
                    data-bs-toggle="modal" data-bs-target="#addContact-exampleModal">
                    <i class="ri-user-add-line"></i>
                  </button>
                </div>
              </div>
              <h4 class="mb-4">Contacts</h4>
              <!-- Start Add contact Modal -->
              <div class="modal fade" id="addContact-exampleModal" tabindex="-1" role="dialog"
                aria-labelledby="addContact-exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                  <div class="modal-content">
                    <form class="contact_form">
                      <div class="modal-header">
                        <h5 class="modal-title font-size-16" id="addContact-exampleModalLabel">Add Contact</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                          id="hide_modal">
                        </button>
                      </div>
                      <div class="modal-body p-4">
                        <div class="mb-3">
                          <label for="addcontactemail-input" class="form-label">Name</label>
                          <input type="text" name="name" class="form-control contact_form__input" id="contact_name"
                            placeholder="Enter Name">
                        </div>
                        <div class="mb-3">
                          <label for="addcontactemail-input" class="form-label">Email</label>
                          <input type="email" name="email" class="form-control contact_form__input" id="contact_email"
                            placeholder="Enter Email">
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="add_contact">Invite Contact</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
              <!-- End Add contact Modal -->

              <div class="search-box chat-search-box">
                <div class="input-group bg-light  input-group-lg rounded-3">
                  <div class="input-group-prepend">
                    <button class="btn btn-link text-decoration-none text-muted pe-1 ps-3" type="button">
                      <i class="ri-search-line search-icon font-size-18"></i>
                    </button>
                  </div>
                  <input type="text" class="form-control bg-light " id="contact_search" placeholder="Search users..">
                </div>
              </div>
              <!-- End search-box -->
            </div>
            <!-- end p-4 -->

            <!-- Start contact lists -->
            <div class="p-4 chat-message-list chat-group-list" data-simplebar>
              <div class="sort-contact"></div>
              <div>
                <ul class="list-unstyled contact-list contactList"></ul>
              </div>
              <!-- end contact list S -->
            </div>
            <!-- end contact lists -->
          </div>
          <!-- Start Contact content -->
        </div>
        <!-- End contacts tab-pane -->

        <!-- Start settings tab-pane -->
        <div class="tab-pane" id="pills-setting" role="tabpanel" aria-labelledby="pills-setting-tab">
          <!-- Start Settings content -->
          <div>
            <div class="px-4 pt-4">
              <h4 class="mb-0">Settings</h4>
            </div>

            <div class="text-center border-bottom p-4">
              <div class="mb-3 profile-user">
                <img src="assets/images/users/default_image.jpg"
                  class="rounded-circle avatar-lg img-thumbnail user-profile-image" id="userProfile"
                  alt="user-profile-image">
                <div class="avatar-xs p-0 rounded-circle profile-photo-edit">
                  <input id="profile-img-file-input" type="file" class="profile-img-file-input" style="display: none;">
                  <label for="profile-img-file-input" class="profile-photo-edit avatar-xs">
                    <span class="avatar-title rounded-circle bg-light text-body">
                      <i class="ri-pencil-fill"></i>
                    </span>
                  </label>
                </div>
              </div>

              <h5 class="font-size-16 mb-1 text-truncate user_name" id="setting-main-username">Chatvia User</h5>
              <div class="dropdown d-inline-block mb-1">
                <a class="text-muted dropdown-toggle pb-1 d-block" href="#" role="button" data-bs-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  Available <i class="mdi mdi-chevron-down"></i>
                </a>

                <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Available</a>
                  <a class="dropdown-item" href="#">Busy</a>
                </div>
              </div>
            </div>
            <!-- End profile user -->

            <!-- Start User profile description -->
            <div class="p-4 user-profile-desc" data-simplebar>
              <div id="settingprofile" class="accordion">
                <div class="accordion-item card border mb-2">
                  <div class="accordion-header" id="personalinfo1">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                      data-bs-target="#personalinfo" aria-expanded="true" aria-controls="personalinfo">
                      <h5 class="font-size-14 m-0">Personal Info</h5>
                    </button>
                  </div>
                  <div id="personalinfo" class="accordion-collapse collapse show" aria-labelledby="personalinfo1"
                    data-bs-parent="#settingprofile">
                    <div class="accordion-body">
                      <div class="float-end">
                        <button type="button" class="btn btn-light btn-sm" id="user_edit"><i class="ri-edit-fill me-1 ms-0 align-middle"></i> Edit</button>
                      </div>

                      <div>
                        <p class="text-muted mb-1">Name</p>
                        <h5 class="font-size-14 user_name" id="setting_user_name">Chatvia User</h5>
                        <div id="edit-name" class="visually-hidden d-flex justify-content-between">
                          <input type="text" name="name" id="usrname" value=""
                            class="form-control bg-soft-light border-light" maxlength="20" />
                          <div class="float-right">
                            <button type="submit" id="btnSave"
                              class="btn btn-primary btn-block waves-effect waves-light" style="display: block;">
                              Save</button>
                          </div>
                        </div>
                      </div>

                      <div class="mt-4">
                        <p class="text-muted mb-1">Email</p>
                        <h5 class="font-size-14 user_email">adc@123.com</h5>
                      </div>

                      <div class="mt-4">
                        <p class="text-muted mb-1">Time</p>
                        <h5 class="font-size-14 user_time">11:40 AM</h5>
                      </div>

                      <div class="mt-4">
                        <p class="text-muted mb-1">Location</p>
                        <h5 class="font-size-14 mb-0 user_location">California, USA</h5>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- end personal info card -->

                <div class="accordion-item card border mb-2">
                  <div class="accordion-header" id="security1">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                      data-bs-target="#security" aria-expanded="false" aria-controls="security">
                      <h5 class="font-size-14 m-0"></i> Security</h5>
                    </button>
                  </div>
                  <div id="security" class="accordion-collapse collapse" aria-labelledby="security1"
                    data-bs-parent="#settingprofile">
                    <div class="accordion-body">
                      <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                          <h5 class="font-size-13 mb-0 text-truncate">Show security notification</h5>
                        </div>
                        <div class="ms-2 me-0">
                          <div class="form-check form-switch">
                            <input type="checkbox" class="form-check-input" id="security-notificationswitch"
                              onchange="notification_switch(this);">
                            <label class="form-check-label" for="security-notificationswitch"></label>
                          </div>
                        </div>
                      </div>
                      <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                          <h5 class="font-size-13 mb-0 text-truncate">Notification Sound</h5>
                        </div>
                        <div class="ms-2 me-0">
                          <div class="form-check form-switch">
                            <input type="checkbox" class="form-check-input" id="notification_muted_switch"
                              onchange="notification_muted_switch(this);">
                            <label class="form-check-label" for="notification_muted_switch"></label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- end security card -->
              </div>
              <!-- end profile-setting-accordion -->
            </div>
            <!-- End User profile description -->
          </div>
          <!-- Start Settings content -->
        </div>
        <!-- End settings tab-pane -->
      </div>
      <!-- end tab content -->
    </div>
    <!-- end chat-leftsidebar -->

    <!-- Start User chat -->
    <div class="user-chat w-100 overflow-hidden">
      <div class="d-lg-flex">
        <!-- start chat conversation section -->
        <div class="w-100 overflow-hidden position-relative user-chats1">
          <div class="px-3 px-lg-4 border-bottom" id="userProfileBar">
            <div class="row align-items-center w-100">
              <div class="col-sm-4 col-8">
                <div class="d-flex align-items-center user_detail">
                  <div class="d-block d-lg-none me-2 ms-0">
                    <a href="javascript: void(0);" class="user-chat-remove text-muted font-size-16 p-2"><i class="ri-arrow-left-s-line"></i></a>
                  </div>
                  <div class="me-3 ms-0">
                    <img src="assets/images/users/default_image.jpg" class="rounded-circle avatar-xs" alt="">
                  </div>
                  <div class="flex-grow-1 overflow-hidden">
                    <h5 class="font-size-16 mb-0 text-truncate"><a href="#" class="text-reset user-profile-show"></a> <i
                        class="ri-record-circle-fill font-size-10 text-success d-inline-block ms-1"></i>
                    </h5>
                  </div>
                </div>
              </div>
              <div class="col-sm-8 col-4">
                <ul class="list-inline user-chat-nav text-end mb-0">
                  <li class="list-inline-item">
                    <div class="dropdown">
                      <button class="btn nav-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="ri-search-line"></i>
                      </button>
                      <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-md">
                        <div class="search-box p-2">
                          <input type="text" id="message_search" class="form-control bg-light border-0"
                            placeholder="Search..">
                        </div>
                      </div>
                    </div>
                  </li>

                  <li class="list-inline-item me-2 ms-0 audiocallicon">
                    <button type="button" class="btn nav-btn" data-bs-toggle="modal" data-bs-target="#audiocallModal">
                      <i class="ri-phone-line"></i>
                    </button>
                  </li>

                  <li class="list-inline-item me-2 ms-0 videocallicon">
                    <button type="button" class="btn nav-btn" data-bs-toggle="modal" data-bs-target="#videocallModal">
                      <i class="ri-vidicon-line"></i>
                    </button>
                  </li>

                  <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                    <button type="button" class="btn nav-btn user-profile-show">
                      <i class="ri-user-2-line"></i>
                    </button>
                  </li>

                  <li class="list-inline-item">
                    <div class="dropdown">
                      <button class="btn nav-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="ri-more-fill"></i>
                      </button>
                      <div class="dropdown-menu dropdown-menu-end">
                        <a class="dropdown-item d-block d-lg-none user-profile-show" href="#">View profile <i class="ri-user-2-line float-end text-muted"></i></a>
                        <a class="dropdown-item d-block d-lg-none" href="#" data-bs-toggle="modal" data-bs-target="#audiocallModal">Audio <i class="ri-phone-line float-end text-muted"></i></a>
                        <a class="dropdown-item d-block d-lg-none" href="#" data-bs-toggle="modal" data-bs-target="#videocallModal">Video <i class="ri-vidicon-line float-end text-muted"></i></a>
                        <a class="dropdown-item receiver_data" id="" onclick="deleteAllMessage(this)" href="javascript:void(0);">Clear Chat <i class="ri-delete-bin-line float-end text-muted"></i></a>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- end chat user head -->

          <!-- start chat conversation -->
          <div class="chat-conversation p-3 p-lg-4" id="messageBody" data-simplebar="init">
            <div id="" class="messageList">
              <ul class="list-unstyled mb-0 messages__history" id=""></ul>
            </div>
            <div class="fallback"></div>
          </div>
          <!-- end chat conversation end -->

          <div class="chat-welcome-section">
            <div class="row w-100 justify-content-center">
              <div class="col-xxl-5 col-md-7">
                <div class="p-4 text-center">
                  <div class="avatar-xl mx-auto mb-4">
                    <div class="avatar-title bg-secondary rounded-circle"> <svg data-v-5e8ea5c2="" xmlns="http://www.w3.org/2000/svg" width="70px" height="65px" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-message-square">
                        <path data-v-5e8ea5c2="" d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
                        </path>
                      </svg></div>
                  </div>
                  <h4 class="d-inline px-3 py-2 rounded-pill bg-secondary text-white fs-4"> Start Conversation </h4>
                </div>
              </div>
            </div>
          </div>

          <div class="chat-loader-section" style="display: none;">
            <div class="loader_bg" style="display: block; background-color: #f5f7fb;">
              <div class="text-center">
                <div class="loader">
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>
          </div>
          <!-- start chat input section -->
          <div class="chat-input-section p-3 p-lg-4 border-top mb-0">

            <form class="message_form" id="chat_add" method="post" enctype="multipart/form-data" action="/fileUploads" autocomplete="off">
              <div class="row g-0">
                <div class="file_Upload position-absolute" style="bottom: 114px;left: 24px;"></div>
                <div id='cmdiv' class="text-center camera-img" style="display: none;">
                  <canvas id="canvas" style="display: none;" width="350" height="270"></canvas>
                  <video id="view_video" class="ms-auto me-4 rounded border border-light" width="350" height="270" autoplay style="display: none;">
                    <i class="ri-close-line text-danger image-remove" onclick="deleteImage(this)"></i>
                  </video>
                  <div class="hstack gap-2 justify-content-center position-relative"style="margin-top:-58px; z-index: 1;">
                    <button type="button" class="btn btn-primary rounded-circle" id="click-photo" style="display: none;"><i class="ri-camera-2-line align-bottom"></i></button>
                    <button type="button" class="btn btn-danger rounded-circle" id="close-photo" style="display: none;"><i class="ri-close-line align-bottom"></i></button>
                  </div>

                </div>
                <div class="col">
                  <input type="hidden" name="id" value="" class="form-control form-control-lg bg-light border-light message_id" />
                  <input type="text" id="message" class="form-control form-control-lg bg-light border-light message_form__input" value="" placeholder="Enter Message...">
                  <input type="file" onchange="return fileValidation()" id="upload_input" class="upload_input" name="file" style="display: none;" />
                  <input type="file" id="upload_inputxyz" class="upload_input" name="file" style="display: none;" />
                  <span id="singleMessage" class="text-danger font-weight-bold"></span>
                </div>
                <div class="col-auto">
                  <div class="chat-input-links ms-md-2 me-md-0">
                    <ul class="list-inline mb-0">
                      <li class="list-inline-item " data-bs-toggle="tooltip" data-bs-placement="top" title="Remove">
                        <div class="remove_value"></div>
                      </li>
                      <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-placement="top" title="camera">
                        <button type="button" id="start-camera" class="btn btn-link text-decoration-none font-size-16 btn-lg px-2 px-lg-3 waves-effect">
                          <i class="ri-camera-line"></i>
                        </button>
                      </li>
                      <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Emoji">
                        <button type="button" class="btn btn-link text-decoration-none font-size-16 btn-lg waves-effect px-2 px-lg-3 emojis_btn">
                          <i class="ri-emotion-happy-line"></i>
                        </button>
                      </li>
                      <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Attached File">
                        <label for="upload_input" class="btn btn-link text-decoration-none font-size-16 btn-lg px-2 px-lg-3 waves-effect" id="OpenImgUpload">
                          <i class="ri-attachment-line"></i>
                        </label>
                      </li>
                      <li class="list-inline-item">
                        <button type="submit" class="btn btn-primary font-size-16 btn-lg chat-send waves-effect waves-light">
                          <i class="ri-send-plane-2-fill"></i>
                        </button>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <!-- end chat input section -->
        </div>
        <!-- end chat conversation section -->

        <div class="w-100 overflow-hidden position-relative user-chats2" style="display: none;">
          <div class="chat-welcome-section">
            <div class="row w-100 justify-content-center">
              <div class="col-xxl-5 col-md-7">
                <div class="p-4 text-center">
                  <div class="avatar-xl mx-auto mb-4">
                    <div class="avatar-title bg-secondary rounded-circle"> <svg data-v-5e8ea5c2=""
                        xmlns="http://www.w3.org/2000/svg" width="70px" height="65px" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-message-square">
                        <path data-v-5e8ea5c2="" d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
                        </path>
                      </svg></div>
                  </div>
                  <h4 class="d-inline px-3 py-2 rounded-pill bg-secondary text-white fs-4"> Start Conversation </h4>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- start User profile detail sidebar -->
        <div class="user-profile-sidebar">
          <div class="px-3 px-lg-4 pt-3 pt-lg-4">
            <div class="user-chat-nav text-end">
              <button type="button" class="btn nav-btn" id="user-profile-hide">
                <i class="ri-close-line"></i>
              </button>
            </div>
          </div>

          <div class="text-center p-4 border-bottom">
            <div class="mb-4 receiver_img"></div>
            <h5 class="font-size-16 mb-1 text-truncate receiver_name">Doris Brown1</h5>
            <p class="text-muted text-truncate mb-1 receiver_status"><i class="ri-record-circle-fill font-size-10 me-1 ms-0"></i> Active</p>
          </div>
          <!-- End profile user -->

          <!-- Start user-profile-desc -->
          <div class="p-4 user-profile-desc" data-simplebar>
            <div class="text-muted">
              <p class="mb-4">If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual.</p>
            </div>

            <div class="accordion" id="myprofile">
              <div class="accordion-item card border mb-2">
                <div class="accordion-header" id="about3">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse"
                    data-bs-target="#aboutprofile" aria-expanded="true" aria-controls="aboutprofile">
                    <h5 class="font-size-14 m-0">
                      <i class="ri-user-2-line me-2 ms-0 align-middle d-inline-block"></i> About
                    </h5>
                  </button>
                </div>
                <div id="aboutprofile" class="accordion-collapse collapse show" aria-labelledby="about3"
                  data-bs-parent="#myprofile">
                  <div class="accordion-body group_receiverData">
                    <div>
                      <p class="text-muted mb-1">Name</p>
                      <h5 class="font-size-14">Doris Brown</h5>
                      <div id="edit-receiver-name" class="visually-hidden d-flex justify-content-between">
                        <input type="text" name="name" id="receivername" value="" class="form-control bg-soft-light border-light" />
                        <div class="float-right">
                          <button type="submit" id="receiverSave" class="btn btn-primary btn-block waves-effect waves-light" style="display: block;">Save</button>
                        </div>
                      </div>
                    </div>
                    <div class="mt-4">
                      <p class="text-muted mb-1">Email</p>
                      <h5 class="font-size-14 receiver_email">adc@123.com</h5>
                    </div>
                    <div class="mt-4">
                      <p class="text-muted mb-1">Time</p>
                      <h5 class="font-size-14 receiver_time">11:40 AM</h5>
                    </div>
                    <div class="mt-4">
                      <p class="text-muted mb-1">Location</p>
                      <h5 class="font-size-14 mb-0 receiver_location">California, USA</h5>
                    </div>
                  </div>
                </div>
              </div>
              <div class="accordion-item card border">
                <div class="accordion-header" id="attachfile3">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#attachprofile" aria-expanded="false" aria-controls="attachprofile">
                    <h5 class="font-size-14 m-0">
                      <i class="ri-attachment-line me-2 ms-0 align-middle d-inline-block"></i> Attached Files
                    </h5>
                  </button>
                </div>
                <div id="attachprofile" class="accordion-collapse collapse" aria-labelledby="attachfile3" data-bs-parent="#myprofile">
                  <div class="accordion-body receiver_messageData"></div>
                </div>
              </div>
              <div class="accordion-item card border ContactList d-none">
                <div class="accordion-header" id="attachfile3">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#contactLists" aria-expanded="false" aria-controls="contactLists">
                    <h5 class="font-size-14 m-0">
                      <i class="ri-group-line me-2 ms-0 align-middle d-inline-block"></i> Contact Lists
                    </h5>
                  </button>
                </div>
                <div id="contactLists" class="accordion-collapse collapse" aria-labelledby="attachfile3" data-bs-parent="#myprofile">
                  <div class="accordion-body">
                    <ul class="list-unstyled chat-list online_contact_list">
                      <li>
                        <a href="javascript:void(0);" class="add_contact" id="" data-bs-toggle="modal" data-bs-target="#addGroupContactModal">
                          <div class="d-flex align-items-center">
                            <div class="chat-user-img me-3 ms-0">
                              <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                  +
                                </span>
                              </div>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                              <h5 class="text-truncate font-size-14 mb-0">Add New Member</h5>
                            </div>
                          </div>
                        </a>
                      </li>
                    </ul>
                    <ul class="list-unstyled chat-list group_list online_contactList"></ul>
                  </div>
                </div>
              </div>
              <!-- end profile-user-accordion -->
            </div>
            <!-- end user-profile-desc -->
          </div>
          <!-- end User profile detail sidebar -->
        </div>
        <!-- end User profile detail sidebar -->
      </div>
      <!-- End User chat -->
    </div>
    <!-- end  layout wrapper -->

    <!-- Full screen modal -->
    <button type="button" data-bs-toggle="modal" data-bs-target="#videosModal"
      class="btn btn-success avatar-sm rounded-circle" id="opencallvideomodel" hidden>
      <span class="avatar-title bg-transparent font-size-20">
        <i class="ri-vidicon-fill"></i>
      </span>
    </button>
    <div class="modal" id="videosModal">
      <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header">
            <img src="assets/images/users/default_image.jpg" id="headerimg" class="rounded-circle avatar-xs">&nbsp;
            <h4 class="modal-title vcname" id="samename"></h4>
            <h4 class="modal-title" id="sameid" hidden></h4>
            <button id="closevideomodel" type="button" class="btn-close" data-bs-dismiss="modal" hidden></button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            <div>
              <input placeholder="Enter username..." type="hidden" id="vausername-input" /><br>
              <input placeholder="Enter username..." type="hidden" id="varecusername-input" /><br>
            </div>
            <div id="audio-call-div" style="text-align: center;">
              <div id="callimg">
                <img src="assets/images/users/default_image.jpg" style="width: 500px; border-radius: 50%;">
              </div>
              <hr>
              <div class="audio-call-action-div">
                <button class="btn btn-danger avatar-sm rounded-circle " id="cutaudiocall"><i class="ri-phone-fill"></i></button>
                <button class="btn btn-primary avatar-sm rounded-circle" id="audio" onclick="muteAudio()"><i class="ri-mic-fill"></i></button>
              </div>
            </div>
            <div id="video-call-div" style="display: none;">
              <video muted id="local-video" autoplay></video>
              <video id="remote-video" autoplay></video>
              <div class="call-action-div">
                <button class="btn btn-danger avatar-sm rounded-circle vabtn" id="cutcall"><i class="ri-phone-fill"></i></button>
                <button class="btn btn-success avatar-sm rounded-circle vabtn" id="video" onclick="muteVideo()"><i class="ri-camera-fill"></i></button>
                <button class="btn btn-primary avatar-sm rounded-circle vabtn" id="audio" onclick="muteAudio()"><i class="ri-mic-fill"></i></button>
              </div>
            </div>
          </div>
          <!-- Modal footer -->
        </div>
      </div>
    </div>
    <!-- end full Model -->

    <!-- videocall Modal -->
    <div class="modal fade" id="videocallModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-body">
            <div class="text-center p-4">
              <div class="avatar-lg mx-auto mb-4" id="vcimg">
                <img src="assets/images/users/default_image.jpg" alt="" class="img-thumbnail rounded-circle">
              </div>
              <h5 class="text-truncate vcname">Doris Brown</h5>
              <p class="text-muted mb-0 groupcall">Start Video Call</p>
              <hr>
              <p class="text-muted mb-0" id="calltext" style="display: none;"><strong>Calling....</strong></p>
              <p id="type" style="display: none;"></p>

              <div class="mt-5">
                <ul class="list-inline mb-1">
                  <li class="list-inline-item px-2 me-2 ms-0">
                    <button type="button" id="cutphone" class="btn btn-danger avatar-sm rounded-circle" data-bs-dismiss="modal" onclick="cutphones()">
                      <span class="avatar-title bg-transparent font-size-20">
                        <i class="ri-close-fill"></i>
                      </span>
                    </button>
                    <button type="button" id="closevcmodel" class="btn btn-danger avatar-sm rounded-circle" data-bs-dismiss="modal" hidden></button>
                  </li>
                  <li class="list-inline-item px-2">

                    <button type="button" class="btn btn-success avatar-sm rounded-circle" id="callvideomodel">
                      <span class="avatar-title bg-transparent font-size-20">
                        <i class="ri-vidicon-fill"></i>
                      </span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end videocall Model -->

    <!-- audiocall Modal -->
    <div class="modal fade" id="audiocallModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-body">
            <div class="text-center p-4">
              <div class="avatar-lg mx-auto mb-4" id="acimg">
                <img src="assets/images/users/default_image.jpg" alt="" class="img-thumbnail rounded-circle">
              </div>
              <h5 class="text-truncate vcname">Doris Brown</h5>
              <p class="text-muted">Start Audio Call</p>
              <hr>
              <p class="text-muted" id="audiotext" style="display: none;">Calling...</p>
              <div class="mt-5">
                <ul class="list-inline mb-1">
                  <li class="list-inline-item px-2 me-2 ms-0">
                    <button type="button" id="cutmiscall" class="btn btn-danger avatar-sm rounded-circle" onclick="cutphones()" data-bs-dismiss="modal">
                      <span class="avatar-title bg-transparent font-size-20">
                        <i class="ri-close-fill"></i>
                      </span>
                    </button>
                    <button type="button" class="btn btn-danger avatar-sm rounded-circle" id="closeaudiomodel" data-bs-dismiss="modal" hidden></button>
                  </li>
                  <li class="list-inline-item px-2">
                    <button type="button" class="btn btn-success avatar-sm rounded-circle" id="callaudiomodel">
                      <span class="avatar-title bg-transparent font-size-20">
                        <i class="ri-phone-fill"></i>
                      </span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- audiocall Modal -->

    <!-- Start add contact to group Modal -->
    <div class="modal fade" id="addGroupContactModal" tabindex="-1" role="dialog"
      aria-labelledby="addgroup-exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <form class="add_contact_form">
            <div class="modal-header">
              <h5 class="modal-title font-size-16" id="addgroup-exampleModalLabel">Add New Member</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
              <div class="mb-4">
                <div class="card border">
                  <div class="card-header">
                    <h5 class="font-size-15 mb-0">Contacts</h5>
                  </div>
                  <div class="card-body p-2">
                    <div data-simplebar style="max-height: 150px;">
                      <div>
                        <ul class="list-unstyled contact-list addcontactGroup">
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-link" data-bs-dismiss="modal" id="close_contact_model">Close</button>
              <button type="submit" class="btn btn-primary">Add Member</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- End add contact to group  Modal -->

    <!-- START forward contacts Model -->
    <div class="modal fade" id="forwardContact-Modal" tabindex="-1" role="dialog"
      aria-labelledby="addgroup-exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <form class="forward_form">
            <div class="modal-header">
              <h5 class="modal-title font-size-16" id="addgroup-exampleModalLabel">Contact Lists</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
              <div class="mb-4">
                <div class="card border">
                  <div class="card-body p-2">
                    <div data-simplebar style="max-height: 150px;">
                      <div>
                        <ul class="list-unstyled contact-list contactListGroup"></ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-link" data-bs-dismiss="modal" id="close_model">Close</button>
              <button type="submit" class="btn btn-primary">Forward Message</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- End forward contacts Model -->

    <!-- Start incomingcall Modal -->
    <button type="button" data-bs-toggle="modal" data-bs-target="#incomingvideo" class="btn btn-success avatar-sm rounded-circle openincomingclass" hidden></button>
    <div class="modal fade" id="incomingvideo" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-body">
            <div class="text-center p-4">
              <div class="avatar-lg mx-auto mb-4" id="incomingimg">
                <img src="assets/images/users/default_image.jpg" alt="" class="img-thumbnail rounded-circle">
              </div>
              <h5 class="text-truncate" id="icmname"></h5>
              <h5 class="text-truncate" id="icvid" hidden></h5>
              <h5 class="text-truncate" id="calltype" hidden>video</h5>
              <p class="text-muted" id="calltypetext">Incoming Video Call</p>

              <div class="mt-5">
                <ul class="list-inline mb-1">
                  <li class="list-inline-item px-2 me-2 ms-0">
                    <button type="button" id="cutincomingmodel" class="btn btn-danger avatar-sm rounded-circle" data-bs-dismiss="modal" hidden></button>
                    <button type="button" id="closeincomingmodel" class="btn btn-danger avatar-sm rounded-circle" data-bs-dismiss="modal">
                      <span class="avatar-title bg-transparent font-size-20">
                        <i class="ri-close-fill"></i>
                      </span>
                    </button>
                  </li>
                  <li class="list-inline-item px-2">
                    <button type="button" id="receivevcall" class="btn btn-success avatar-sm rounded-circle">
                      <span class="avatar-title bg-transparent font-size-20" id="callicon">
                        <i class="ri-vidicon-fill"></i>
                      </span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end incomingcall Modal -->

  <!-- JAVASCRIPT -->
  <script src="assets/libs/jquery/jquery.min.js"></script>
  <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/libs/simplebar/simplebar.min.js"></script>
  <script src="assets/libs/node-waves/waves.min.js"></script>
  <!-- Magnific Popup-->
  <script src="assets/libs/magnific-popup/jquery.magnific-popup.min.js"></script>
  <!-- owl.carousel js -->
  <script src="assets/libs/owl.carousel/owl.carousel.min.js"></script>
  <!-- page init -->
  <script src="assets/js/pages/index.init.js"></script>
  <script src="assets/js/app.js"></script>
  <!-- owl.carousel js -->
  <script src="assets/libs/owl.carousel/owl.carousel.min.js"></script>
  <script src="assets/js/sweetalert.min.js"></script>

    <!-- page init -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="./assets/js/toastr.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="./js/login.js"></script>
    <script src="./js/chat.js"></script>
    <script src="./js/SimpleImage.js"></script>
    <script src="./js/fgEmojiPicker.js"></script>
    <script src="assets/js/pages/index.init.js"></script>
    <script>
      const emojiPicker = new FgEmojiPicker({
        trigger: ['.emojis_btn'],
        removeOnSelection: false,
        closeButton: true,
        position: ['top', 'left'],
        preFetch: true,
        insertInto: document.querySelector('.message_form__input'),
        emit(obj, triggerElement) {}
      });
  </script>
</body>

</html>