Spaces:
Sleeping
Sleeping
| <html lang="en" data-bs-theme="light" style="--bs-primary-rgb: #2E8B57 ;"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>LegalMind</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta | |
| content="Chaton - Responsive Chat App Template in HTML. A fully featured HTML chat messenger template in Bootstrap 5" | |
| name="description" /> | |
| <meta name="keywords" | |
| content="Chaton chat template, chat, web chat template, chat status, chat template, communication, discussion, group chat, message, messenger template, status" /> | |
| <meta content="Themesdesign" name="author" /> | |
| <!-- App favicon --> | |
| <link rel="shortcut icon" href="https://themesdesign.in/chaton/layouts/assets/images/favicon.ico" id="tabIcon"> | |
| <!-- glightbox css --> | |
| <link rel="stylesheet" href="https://themesdesign.in/chaton/layouts/assets/libs/glightbox/css/glightbox.min.css"> | |
| <!-- Nano scroll --> | |
| <link rel="stylesheet" | |
| href="https://themesdesign.in/chaton/layouts/assets/libs/@simonwep/pickr/themes/nano.min.css" /> | |
| <!-- swiper css --> | |
| <link rel="stylesheet" href="https://themesdesign.in/chaton/layouts/assets/libs/swiper/swiper-bundle.min.css"> | |
| <!-- Bootstrap Css --> | |
| <link href="https://themesdesign.in/chaton/layouts/assets/css/bootstrap.min.css" id="bootstrap-style" | |
| rel="stylesheet" type="text/css" /> | |
| <!-- Icons Css --> | |
| <link href="https://themesdesign.in/chaton/layouts/assets/css/icons.min.css" rel="stylesheet" type="text/css" /> | |
| <!-- App Css--> | |
| <link href="https://themesdesign.in/chaton/layouts/assets/css/app.min.css" id="app-style" rel="stylesheet" | |
| type="text/css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> | |
| <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> | |
| <style> | |
| .related-question a:hover { | |
| text-decoration: underline; | |
| color: #0056b3; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="layout-wrapper d-lg-flex" style="background-color: #2E8B57 ;"> | |
| <!-- Start left sidebar-menu --> | |
| <div class="side-menu flex-lg-column" style="background-color: #2E8B57 ;"> | |
| <!-- LOGO --> | |
| <div class="navbar-brand-box" style="background-color: #2E8B57 ;"> | |
| <a href="index.html" class="logo logo-dark"> | |
| <span class="logo-sm"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| alt="logo" height="30"> | |
| </span> | |
| </a> | |
| <a href="index.html" class="logo logo-light"> | |
| <span class="logo-sm"> | |
| <span class="logo-sm"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| alt="logo" height="30"> | |
| </span> | |
| </span> | |
| </a> | |
| </div> | |
| <!-- end navbar-brand-box --> | |
| <!-- Start side-menu nav --> | |
| <div class="flex-lg-column my-0 sidemenu-navigation"> | |
| <ul class="nav nav-pills side-menu-nav" role="tablist"> | |
| <li class="nav-item d-none d-lg-block"> | |
| <a class="nav-link" id="pills-user-tab" data-bs-toggle="pill" href="#pills-user" role="tab"> | |
| <i class="fa-solid fa-user"></i> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link active" id="pills-chat-tab" data-bs-toggle="pill" href="#pills-chat" | |
| role="tab"> | |
| <i class="fa-regular fa-comments"></i> | |
| <span class="badge bg-danger fs-11 rounded-pill sidenav-item-badge">6</span> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" id="pills-contacts-tab" data-bs-toggle="pill" href="#pills-contacts" | |
| role="tab"> | |
| <i class="fa-solid fa-book"></i> | |
| </a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" id="pills-bookmark-tab" data-bs-toggle="pill" href="#pills-bookmark" | |
| role="tab"> | |
| <i class="fa-regular fa-bookmark"></i> | |
| </a> | |
| </li> | |
| <li class="nav-item d-none d-lg-block"> | |
| <a class="nav-link" id="pills-setting-tab" data-bs-toggle="pill" href="#pills-setting" | |
| role="tab"> | |
| <i class="fa-solid fa-gear"></i> | |
| </a> | |
| </li> | |
| <li class="nav-item mt-lg-auto"> | |
| <a class="nav-link light-dark-mode" href="#"> | |
| <i class="fa-regular fa-moon"></i> | |
| </a> | |
| </li> | |
| <li class="nav-item dropdown profile-user-dropdown"> | |
| <a class="nav-link dropdown-toggle bg-light" href="#" role="button" data-bs-toggle="dropdown" | |
| aria-haspopup="true" aria-expanded="false"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| alt="" class="profile-user rounded-circle"> | |
| </a> | |
| <div class="dropdown-menu"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| id="pills-user-tab" data-bs-toggle="pill" href="#pills-user" role="tab">Profile <i | |
| class="fa fa-user-circle text-muted ms-1"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| id="pills-setting-tab" data-bs-toggle="pill" href="#pills-setting" role="tab">Setting <i | |
| class="fa fa-cog text-muted ms-1"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="auth-changepassword.html">Change Password <i | |
| class="fa fa-lock-open text-muted ms-1"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="auth-logout.html">Log out <i class="fa fa-log-out-circle text-muted ms-1"></i></a> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end side-menu nav --> | |
| </div> | |
| <!-- end left sidebar-menu --> | |
| <!-- start chat-leftsidebar --> | |
| <div class="chat-leftsidebar"> | |
| <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="user-profile-img"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/4902908.jpg" | |
| class="profile-img" style="height: 160px;" alt=""> | |
| <div class="overlay-content"> | |
| <div> | |
| <div class="user-chat-nav p-2 ps-3"> | |
| <div class="d-flex w-100 align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="text-white mb-0">My Profile</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div class="dropdown"> | |
| <button class="btn nav-btn text-white dropdown-toggle" type="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class='fa-solid fa-ellipsis-vertical'></i> | |
| </button> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Info <i | |
| class="fa fa-info-circle ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Setting <i | |
| class="fa fa-cog text-muted ms-2"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Help <i | |
| class="fa fa-help-circle ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center border-bottom border-bottom-dashed pt-2 pb-4 mt-n5 position-relative"> | |
| <div class="mb-lg-3 mb-2"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| class="rounded-circle avatar-lg img-thumbnail" alt=""> | |
| </div> | |
| <h5 class="fs-17 mb-1 text-truncate">Dushane Daniel</h5> | |
| <p class="text-muted fs-14 text-truncate mb-0">Front end Developer</p> | |
| </div> | |
| <!-- End profile user --> | |
| <!-- Start user-profile-desc --> | |
| <div class="p-4 profile-desc" data-simplebar> | |
| <div class="text-muted"> | |
| <p class="mb-3">A professional profile is an introductory section on your resume that | |
| highlights your | |
| relevant qualifications and skills.</p> | |
| </div> | |
| <div class="border-bottom border-bottom-dashed mb-4 pb-2"> | |
| <div class="d-flex py-2 align-items-center"> | |
| <div class="flex-shrink-0 me-3"> | |
| <i class="fa fa-user align-middle text-muted fs-19"></i> | |
| </div> | |
| <div class="flex-grow-1"> | |
| <p class="mb-0">Dushane Daniel</p> | |
| </div> | |
| </div> | |
| <div class="d-flex py-2 align-items-center"> | |
| <div class="flex-shrink-0 me-3"> | |
| <i class="ri-phone-line align-middle text-muted fs-19"></i> | |
| </div> | |
| <div class="flex-grow-1"> | |
| <p class="mb-0">+(365) 1456 12584</p> | |
| </div> | |
| </div> | |
| <div class="d-flex py-2 align-items-center"> | |
| <div class="flex-shrink-0 me-3"> | |
| <i class="ri-message-2-line align-middle text-muted fs-19"></i> | |
| </div> | |
| <div class="flex-grow-1"> | |
| <p class="fw-medium mb-0">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="d-flex py-2 align-items-center"> | |
| <div class="flex-shrink-0 me-3"> | |
| <i class="ri-map-pin-2-line align-middle text-muted fs-19"></i> | |
| </div> | |
| <div class="flex-grow-1"> | |
| <p class="mb-0">California, USA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-bottom border-bottom-dashed mb-4 pb-4"> | |
| <div class="d-flex align-items-center mb-3"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-12 text-muted text-uppercase mb-0">Media</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <a href="#" class="fw-medium fs-12 d-block">Show all</a> | |
| </div> | |
| </div> | |
| <div class="profile-media-img"> | |
| <div class="media-img-list"> | |
| <a href="#"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-1.jpg" | |
| alt="media img" class="img-fluid"> | |
| </a> | |
| </div> | |
| <div class="media-img-list"> | |
| <a href="#"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-2.jpg" | |
| alt="media img" class="img-fluid"> | |
| </a> | |
| </div> | |
| <div class="media-img-list"> | |
| <a href="#"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-4.jpg" | |
| alt="media img" class="img-fluid"> | |
| <div class="bg-overlay">+ 15</div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="d-flex align-items-center mb-3"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-12 text-muted text-uppercase mb-0">Attached Files</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <a href="#" class="fw-medium fs-12 d-block">Show all</a> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="card p-2 border border-dashed mb-2"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/pdf-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1">design-phase-1-approved.pdf</h5> | |
| <p class="text-muted fs-13 mb-0">12.5 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="d-flex gap-2"> | |
| <div> | |
| <a href="#" class="text-muted px-1"> | |
| <i class="fa fas-download"></i> | |
| </a> | |
| </div> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle text-muted px-1" href="#" | |
| role="button" data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Share <i | |
| class="fa fa-share-alt ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Bookmark <i | |
| class="fa-regular fa-bookmark text-muted ms-2"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i | |
| class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-2 border border-dashed mb-2"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1">Image-1.jpg</h5> | |
| <p class="text-muted fs-13 mb-0">4.2 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="d-flex gap-2"> | |
| <div> | |
| <a href="#" class="text-muted px-1"> | |
| <i class="fa fas-download"></i> | |
| </a> | |
| </div> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle text-muted px-1" href="#" | |
| role="button" data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Share <i | |
| class="fa fa-share-alt ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Bookmark <i | |
| class="fa-regular fa-bookmark text-muted ms-2"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i | |
| class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-2 border border-dashed mb-2"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1">Image-2.jpg</h5> | |
| <p class="text-muted fs-13 mb-0">3.1 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="d-flex gap-2"> | |
| <div> | |
| <a href="#" class="text-muted px-1"> | |
| <i class="fa fas-download"></i> | |
| </a> | |
| </div> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle text-muted px-1" href="#" | |
| role="button" data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Share <i | |
| class="fa fa-share-alt ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Bookmark <i | |
| class="fa-regular fa-bookmark text-muted ms-2"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i | |
| class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-2 border border-dashed mb-0"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/zip-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1">Landing-A.zip</h5> | |
| <p class="text-muted fs-13 mb-0">6.7 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="d-flex gap-2"> | |
| <div> | |
| <a href="#" class="text-muted px-1"> | |
| <i class="fa fas-download"></i> | |
| </a> | |
| </div> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle text-muted px-1" href="#" | |
| role="button" data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Share <i | |
| class="fa fa-share-alt ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Bookmark <i | |
| class="fa-regular fa-bookmark text-muted ms-2"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i | |
| class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end user-profile-desc --> | |
| </div> | |
| <!-- End profile content --> | |
| </div> | |
| <!-- End Profile tab-pane --> | |
| <!-- Start chats tab-pane --> | |
| <div class="tab-pane show active" id="pills-chat" role="tabpanel" aria-labelledby="pills-chat-tab"> | |
| <!-- Start chats content --> | |
| <div> | |
| <div class="px-4 pt-4"> | |
| <div class="d-flex align-items-start"> | |
| <div class="flex-grow-1"> | |
| <h4 class="mb-4">Messages <span class="text-primary fs-13">(128)</span></h4> | |
| </div> | |
| </div> | |
| <form> | |
| <div class="input-group search-panel mb-3"> | |
| <input type="text" class="form-control" id="searchChatUser" onkeyup="searchUser()" | |
| placeholder="Search here..." aria-label="Example text with button addon" | |
| aria-describedby="searchbtn-addon" autocomplete="off"> | |
| <button class="btn p-0" type="button" id="searchbtn-addon"><i | |
| class='fa fa-search align-middle'></i></button> | |
| </div> | |
| </form> | |
| </div> <!-- .p-4 --> | |
| <div class="chat-room-list" data-simplebar> | |
| <!-- Start chat-message-list --> | |
| <h5 class="mb-3 px-4 mt-4 fs-11 text-muted text-uppercase">Favourites</h5> | |
| <div class="chat-message-list"> | |
| <ul class="list-unstyled chat-list chat-user-list" id="favourite-users"> | |
| <li id="contact-id-1" data-name="favorite" class="active"> <a href="" | |
| class="unread-msg-user"> | |
| <div class="d-flex align-items-center"> | |
| <div class="chat-user-img online align-self-center me-2 ms-0"> <img | |
| src="https://res.cloudinary.com/dz9j1pqvk/image/upload/v1737823658/ITZONE2023/devices/Thi%E1%BA%BFt_k%E1%BA%BF_ch%C6%B0a_c%C3%B3_t%C3%AAn_4_jy6kt6.png" | |
| class="rounded-circle avatar-xs" alt=""><span | |
| class="user-status"></span> </div> | |
| <div class="overflow-hidden me-2"> | |
| <p class="text-truncate chat-username mb-0" | |
| style="text-align: left">Hành chính</p> | |
| <p class="text-truncate text-muted fs-13 mb-0">Về quyết định hành | |
| chính là đối tượng khởi kiện vụ án hành chính | |
| </p> | |
| </div> | |
| <!-- <div class="ms-auto"><span | |
| class="badge badge-soft-danger rounded p-1 fs-10">18</span> | |
| </div> --> | |
| </div> | |
| </a> </li> | |
| <li id="contact-id-2" data-name="favorite" class=""> <a href=""> | |
| <div class="d-flex align-items-center"> | |
| <div class="chat-user-img online align-self-center me-2 ms-0"> <img | |
| src="https://res.cloudinary.com/dz9j1pqvk/image/upload/v1737823658/ITZONE2023/devices/Thi%E1%BA%BFt_k%E1%BA%BF_ch%C6%B0a_c%C3%B3_t%C3%AAn_4_jy6kt6.png" | |
| class="rounded-circle avatar-xs" alt=""><span | |
| class="user-status"></span> </div> | |
| <div class="overflow-hidden me-2"> | |
| <p class="text-truncate chat-username mb-0" | |
| style="text-align: left">Dân sự</p> | |
| <p class="text-truncate text-muted fs-13 mb-0">Về xác định di sản | |
| thừa kế là quyền sử dụng đất trong trường hợp di chúc không thể | |
| hiện diện tích đất cụ thể | |
| </p> | |
| </div> | |
| </div> | |
| </a> </li> | |
| <li id="contact-id-3" data-name="favorite" class=""> <a href=""> | |
| <div class="d-flex align-items-center"> | |
| <div class="chat-user-img online align-self-center me-2 ms-0"> <img | |
| src="https://res.cloudinary.com/dz9j1pqvk/image/upload/v1737823658/ITZONE2023/devices/Thi%E1%BA%BFt_k%E1%BA%BF_ch%C6%B0a_c%C3%B3_t%C3%AAn_4_jy6kt6.png" | |
| class="rounded-circle avatar-xs" alt=""><span | |
| class="user-status"></span> </div> | |
| <div class="overflow-hidden me-2"> | |
| <p class="text-truncate chat-username mb-0" | |
| style="text-align: left">Kinh doanh, thương mại | |
| </p> | |
| <p class="text-truncate text-muted fs-13 mb-0">Về hiệu lực của hợp | |
| đồng thế chấp trong trường hợp tài sản thế chấp là nhà đất do | |
| bên thế chấp nhận chuyển nhượng của người khác nhưng chưa thanh | |
| toán đủ tiền cho bên bán | |
| </p> | |
| </div> | |
| </div> | |
| </a> </li> | |
| <li id="contact-id-4" data-name="favorite" class=""> | |
| <a href=""> | |
| <div class="d-flex align-items-center"> | |
| <div class="chat-user-img online align-self-center me-2 ms-0"> <img | |
| src="https://res.cloudinary.com/dz9j1pqvk/image/upload/v1737823658/ITZONE2023/devices/Thi%E1%BA%BFt_k%E1%BA%BF_ch%C6%B0a_c%C3%B3_t%C3%AAn_4_jy6kt6.png" | |
| class="rounded-circle avatar-xs" alt=""><span | |
| class="user-status"></span> </div> | |
| <div class="overflow-hidden me-2"> | |
| <p class="text-truncate chat-username mb-0" | |
| style="text-align: left">Hình sự </p> | |
| <p class="text-truncate text-muted fs-13 mb-0">Về hành vi gian dối | |
| nhằm tiếp cận tài sản trong tội “Cướp giật tài sản” | |
| </p> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li id="contact-id-5" data-name="favorite" class=""> <a href=""> | |
| <div class="d-flex align-items-center"> | |
| <div class="chat-user-img online align-self-center me-2 ms-0"> <img | |
| src="https://res.cloudinary.com/dz9j1pqvk/image/upload/v1737823658/ITZONE2023/devices/Thi%E1%BA%BFt_k%E1%BA%BF_ch%C6%B0a_c%C3%B3_t%C3%AAn_4_jy6kt6.png" | |
| class="rounded-circle avatar-xs" alt=""><span | |
| class="user-status"></span> </div> | |
| <div class="overflow-hidden me-2"> | |
| <p class="text-truncate chat-username mb-0" | |
| style="text-align: left">Dân sự</p> | |
| <p class="text-truncate text-muted fs-13 mb-0">Về định khung hình | |
| phạt và tình tiết định khung tăng nặng “có tổ chức” trong tội | |
| “Bắt cóc nhằm chiếm đoạt tài sản” | |
| </p> | |
| </div> | |
| </div> | |
| </a> </li> | |
| <li id="contact-id-6" data-name="favorite" class=""> <a href=""> | |
| <div class="d-flex align-items-center"> | |
| <div class="chat-user-img online align-self-center me-2 ms-0"> <img | |
| src="https://res.cloudinary.com/dz9j1pqvk/image/upload/v1737823658/ITZONE2023/devices/Thi%E1%BA%BFt_k%E1%BA%BF_ch%C6%B0a_c%C3%B3_t%C3%AAn_4_jy6kt6.png" | |
| class="rounded-circle avatar-xs" alt=""><span | |
| class="user-status"></span> </div> | |
| <div class="overflow-hidden me-2"> | |
| <p class="text-truncate chat-username mb-0" | |
| style="text-align: left">Hôn nhân và gia đình</p> | |
| <p class="text-truncate text-muted fs-13 mb-0">Quyết định giám đốc | |
| thẩm số 04/2021/HNGĐ-GĐT ngày 07/7/2021 của Hội đồng Thẩm phán | |
| Toà án nhân dân tối cao về việc dân sự “Yêu cầu hủy việc kết hôn | |
| trái pháp luật”; người yêu cầu là bà Nguyễn Thị S, người có | |
| quyền lợi, nghĩa vụ liên quan gồm 03 người | |
| </p> | |
| </div> | |
| </div> | |
| </a> </li> | |
| </ul> | |
| </div> | |
| <!-- End chat-message-list --> | |
| </div> | |
| </div> | |
| <!-- Start chats content --> | |
| </div> | |
| <!-- End chats 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="px-4 pt-4"> | |
| <div class="d-flex align-items-start"> | |
| <div class="flex-grow-1"> | |
| <h4 class="mb-4">Contacts</h4> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div> | |
| <!-- Button trigger modal --> | |
| <button type="button" class="btn btn-soft-success btn-sm" data-bs-toggle="modal" | |
| data-bs-target="#addContact-exampleModal"> | |
| <i class="fa fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <form> | |
| <div class="input-group search-panel mb-4"> | |
| <input type="text" class="form-control bg-light border-0" id="searchContact" | |
| onkeyup="searchContacts()" placeholder="Search contacts..." | |
| aria-label="Search Contacts..." aria-describedby="button-searchcontactsaddon" | |
| autocomplete="off"> | |
| <button class="btn btn-light p-0" type="button" id="button-searchcontactsaddon"><i | |
| class='fa fa-search align-middle'></i></button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- end p-4 --> | |
| <div class="chat-message-list chat-group-list" data-simplebar> | |
| <div class="sort-contact"> | |
| </div> | |
| </div> | |
| <!-- end contact lists --> | |
| </div> | |
| <!-- Start Contact content --> | |
| </div> | |
| <!-- End contacts tab-pane --> | |
| <!-- Start calls tab-pane --> | |
| <div class="tab-pane" id="pills-calls" role="tabpanel" aria-labelledby="pills-calls-tab"> | |
| <!-- Start Contact content --> | |
| <div> | |
| <div class="px-4 pt-4"> | |
| <div class="d-flex align-items-start"> | |
| <div class="flex-grow-1"> | |
| <h4 class="mb-3">Calls</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end p-4 --> | |
| <!-- Start contact lists --> | |
| <div class="chat-message-list chat-call-list" data-simplebar> | |
| <ul class="list-unstyled chat-list" id="callList"> | |
| </ul> | |
| </div> | |
| <!-- end contact lists --> | |
| </div> | |
| <!-- Start Contact content --> | |
| </div> | |
| <!-- End calls tab-pane --> | |
| <!-- Start bookmark tab-pane --> | |
| <div class="tab-pane" id="pills-bookmark" role="tabpanel" aria-labelledby="pills-bookmark-tab"> | |
| <!-- Start Contact content --> | |
| <div> | |
| <div class="px-4 pt-4"> | |
| <div class="d-flex align-items-start"> | |
| <div class="flex-grow-1"> | |
| <h4 class="mb-3">Bookmark</h4> | |
| </div> | |
| </div> | |
| <form> | |
| <div class="input-group search-panel mb-3"> | |
| <input type="text" class="form-control bg-light border-0" id="searchbookmark" | |
| onkeyup="searchBookmark()" placeholder="Search here..." | |
| aria-label="Example text with button addon" | |
| aria-describedby="searchbookmark-addon" autocomplete="off"> | |
| <button class="btn btn-light p-0" type="button" id="searchbookmark-addon"><i | |
| class='fa fa-search align-middle'></i></button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- end p-4 --> | |
| <!-- Start contact lists --> | |
| <div class="chat-message-list chat-bookmark-list" id="chat-bookmark-list" data-simplebar> | |
| <ul class="list-unstyled chat-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/pdf-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" | |
| class="text-truncate p-0">design-phase-1-approved.pdf</a> | |
| </h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">12.5 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/link-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Bg Pattern</a> | |
| </h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">https://bgpattern.com/</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" | |
| class="text-truncate p-0">Image-001.jpg</a></h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">4.2 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/link-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Images</a></h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">https://images123.com/</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/link-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Bg Gradient</a> | |
| </h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">https://bggradient.com/</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" | |
| class="text-truncate p-0">Image-012.jpg</a></h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">3.1 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/zip-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">analytics | |
| dashboard.zip</a></h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">6.7 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" | |
| class="text-truncate p-0">Image-031.jpg</a></h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">4.2 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/txt-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" | |
| class="text-truncate p-0">Changelog.txt</a></h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">6.7 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/zip-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Widgets.zip</a> | |
| </h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">6.7 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" | |
| class="text-truncate p-0">logo-light.png</a></h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">4.2 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">Image-2.jpg</a> | |
| </h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">3.1 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/zip-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" | |
| class="text-truncate p-0">Landing-A.zip</a></h5> | |
| <p class="text-muted text-truncate fs-13 mb-0">6.7 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-16 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open | |
| <i class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit | |
| <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact lists --> | |
| </div> | |
| <!-- Start Contact content --> | |
| </div> | |
| <!-- End bookmark 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="user-profile-img"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-4.jpg" | |
| class="profile-img profile-foreground-img" style="height: 160px;" alt=""> | |
| <div class="overlay-content"> | |
| <div> | |
| <div class="user-chat-nav p-3"> | |
| <div class="d-flex w-100 align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="text-white mb-0">Settings</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div class="avatar-xs p-0 rounded-circle profile-photo-edit" | |
| data-bs-toggle="tooltip" data-bs-trigger="hover" | |
| data-bs-placement="bottom" title="Change Background"> | |
| <input id="profile-foreground-img-file-input" type="file" | |
| class="profile-foreground-img-file-input"> | |
| <label for="profile-foreground-img-file-input" | |
| class="profile-photo-edit avatar-xs"> | |
| <span class="avatar-title rounded-circle bg-light text-body"> | |
| <i class="fa fas-pencil"></i> | |
| </span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center p-3 p-lg-4 border-bottom pt-2 pt-lg-2 mt-n5 position-relative"> | |
| <div class="mb-3 profile-user"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| class="rounded-circle avatar-lg img-thumbnail user-profile-image" | |
| 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"> | |
| <label for="profile-img-file-input" class="profile-photo-edit avatar-xs"> | |
| <span class="avatar-title rounded-circle bg-light text-body"> | |
| <i class="fa fas-camera"></i> | |
| </span> | |
| </label> | |
| </div> | |
| </div> | |
| <h5 class="fs-16 mb-1 text-truncate"></h5> | |
| <div class="dropdown d-inline-block"> | |
| <a class="text-muted dropdown-toggle d-block" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
| <i class="fa fas-circle text-success fs-10 align-middle"></i> Active <i | |
| class="mdi mdi-chevron-down"></i> | |
| </a> | |
| <div class="dropdown-menu"> | |
| <a class="dropdown-item" href="#"><i | |
| class="fa fas-circle text-success fs-10 me-1 align-middle"></i> | |
| Active</a> | |
| <a class="dropdown-item" href="#"><i | |
| class="fa fas-circle text-warning fs-10 me-1 align-middle"></i> | |
| Away</a> | |
| <a class="dropdown-item" href="#"><i | |
| class="fa fas-circle text-danger fs-10 me-1 align-middle"></i> Do | |
| not disturb</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End profile user --> | |
| <!-- Start User profile description --> | |
| <div class="user-setting" data-simplebar> | |
| <div id="settingprofile" class="accordion accordion-flush"> | |
| <div class="accordion-item"> | |
| <div class="accordion-header" id="headerpersonalinfo"> | |
| <a class="accordion-button fs-14 fw-medium" data-bs-toggle="collapse" | |
| href="#personalinfo" aria-expanded="true" aria-controls="personalinfo"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 me-3 avatar-xs"> | |
| <div class="avatar-title bg-info-subtle | |
| text-info text-info rounded"> | |
| <i class="fa fas-user"></i> | |
| </div> | |
| </div> | |
| Personal Info | |
| </div> | |
| </a> | |
| </div> | |
| <div id="personalinfo" class="accordion-collapse collapse show" | |
| aria-labelledby="headerpersonalinfo" data-bs-parent="#settingprofile"> | |
| <div class="accordion-body edit-input"> | |
| <div class="float-end"> | |
| <a href="#" class="badge bg-light text-muted" | |
| id="user-profile-edit-btn"> <i class="fa fas-pencil align-middle" | |
| id="edit-icon"></i> | |
| </a> | |
| </div> | |
| <div> | |
| <label for="exampleInputPassword1" | |
| class="form-label text-muted fs-13">Name</label> | |
| <input type="text" class="form-control" id="exampleInputPassword1" | |
| value="Dushane Daniel" placeholder="Enter name" disabled> | |
| </div> | |
| <div> | |
| <label for="exampleInputPassword1" | |
| class="form-label text-muted fs-13">Email</label> | |
| <input type="email" class="form-control" id="exampleInputPassword1" | |
| value="[email protected]" placeholder="Enter email" disabled> | |
| </div> | |
| <div class="mt-3"> | |
| <label for="exampleInputPassword1" | |
| class="form-label text-muted fs-13">Phone No</label> | |
| <input type="text" class="form-control" id="exampleInputPassword1" | |
| value="+(245) 4577 14523" placeholder="Enter phone no" disabled> | |
| </div> | |
| <div class="mt-3"> | |
| <label for="exampleInputPassword1" | |
| class="form-label text-muted fs-13">Location</label> | |
| <input type="text" class="form-control" id="exampleInputPassword1" | |
| value="California, USA" placeholder="Location" disabled> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end personal info card --> | |
| <div class="accordion-item"> | |
| <div class="accordion-header" id="privacy1"> | |
| <a class="accordion-button fs-14 fw-medium collapsed" data-bs-toggle="collapse" | |
| href="#privacy" aria-expanded="false" aria-controls="privacy"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 me-3 avatar-xs"> | |
| <div class="avatar-title bg-info-subtle | |
| text-info text-info rounded"> | |
| <i class="fa fas-lock"></i> | |
| </div> | |
| </div> | |
| Privacy | |
| </div> | |
| </a> | |
| </div> | |
| <div id="privacy" class="accordion-collapse collapse" aria-labelledby="privacy1" | |
| data-bs-parent="#settingprofile"> | |
| <div class="accordion-body"> | |
| <h6 class="mb-3">Who can see my personal info</h6> | |
| <ul class="list-unstyled vstack gap-4 mb-0"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-13 mb-0 text-truncate">Profile photo</h5> | |
| </div> | |
| <div class="flex-shrink-0 ms-2"> | |
| <select class="form-select form-select-sm"> | |
| <option value="Everyone" selected>Everyone</option> | |
| <option value="Selected">Selected</option> | |
| <option value="Nobody">Nobody</option> | |
| </select> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-13 mb-0 text-truncate">Status</h5> | |
| </div> | |
| <div class="flex-shrink-0 ms-2"> | |
| <select class="form-select form-select-sm"> | |
| <option value="Everyone" selected>Everyone</option> | |
| <option value="Selected">Selected</option> | |
| <option value="Nobody">Nobody</option> | |
| </select> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-13 mb-0 text-truncate">Groups</h5> | |
| </div> | |
| <div class="flex-shrink-0 ms-2"> | |
| <select class="form-select form-select-sm"> | |
| <option value="Everyone" selected>Everyone</option> | |
| <option value="Selected">Selected</option> | |
| <option value="Nobody">Nobody</option> | |
| </select> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-13 mb-0 text-truncate">Last seen</h5> | |
| </div> | |
| <div class="flex-shrink-0 ms-2"> | |
| <div class="form-check form-switch"> | |
| <input type="checkbox" class="form-check-input" | |
| id="privacy-lastseenSwitch" checked> | |
| <label class="form-check-label" | |
| for="privacy-lastseenSwitch"></label> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-13 mb-0 text-truncate">Read receipts</h5> | |
| </div> | |
| <div class="flex-shrink-0 ms-2"> | |
| <div class="form-check form-switch"> | |
| <input type="checkbox" class="form-check-input" | |
| id="privacy-readreceiptSwitch" checked> | |
| <label class="form-check-label" | |
| for="privacy-readreceiptSwitch"></label> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end privacy card --> | |
| <div class="accordion-item"> | |
| <div class="accordion-header" id="headersecurity"> | |
| <a class="accordion-button fs-14 fw-medium collapsed" data-bs-toggle="collapse" | |
| href="#collapsesecurity" aria-expanded="false" | |
| aria-controls="collapsesecurity"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 me-3 avatar-xs"> | |
| <div class="avatar-title bg-info-subtle | |
| text-info text-info rounded"> | |
| <i class="fa fas-check-shield"></i> | |
| </div> | |
| </div> | |
| Security | |
| </div> | |
| </a> | |
| </div> | |
| <div id="collapsesecurity" class="accordion-collapse collapse" | |
| aria-labelledby="headersecurity" data-bs-parent="#settingprofile"> | |
| <div class="accordion-body"> | |
| <ul class="list-group list-group-flush"> | |
| <li class="list-group-item p-0"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-13 mb-0 text-truncate">Show security | |
| notification</h5> | |
| </div> | |
| <div class="flex-shrink-0 ms-2"> | |
| <div class="form-check form-switch"> | |
| <input type="checkbox" class="form-check-input" | |
| id="security-notificationswitch"> | |
| <label class="form-check-label" | |
| for="security-notificationswitch"></label> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end security card --> | |
| <div class="accordion-item"> | |
| <div class="accordion-header" id="headerhelp"> | |
| <button class="accordion-button fs-14 fw-medium collapsed" type="button" | |
| data-bs-toggle="collapse" data-bs-target="#collapsehelp" | |
| aria-expanded="false" aria-controls="collapsehelp"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 me-3 avatar-xs"> | |
| <div class="avatar-title bg-info-subtle | |
| text-info text-info rounded"> | |
| <i class="fa fas-help-circle"></i> | |
| </div> | |
| </div> | |
| Help | |
| </div> | |
| </button> | |
| </div> | |
| <div id="collapsehelp" class="accordion-collapse collapse" | |
| aria-labelledby="headerhelp" data-bs-parent="#settingprofile"> | |
| <div class="accordion-body"> | |
| <ul class="list-unstyled vstack gap-4 mb-0"> | |
| <li> | |
| <h5 class="fs-13 mb-0"><a href="#" | |
| class="text-body d-block">FAQs</a></h5> | |
| </li> | |
| <li> | |
| <h5 class="fs-13 mb-0"><a href="#" | |
| class="text-body d-block">Contact</a></h5> | |
| </li> | |
| <li> | |
| <h5 class="fs-13 mb-0"><a href="#" class="text-body d-block">Terms & | |
| Privacy policy</a> | |
| </h5> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </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="chat-content d-lg-flex"> | |
| <!-- start chat conversation section --> | |
| <div class="w-100 overflow-hidden position-relative"> | |
| <!-- conversation user --> | |
| <div id="users-chat" class="position-relative"> | |
| <div class="py-3 user-chat-topbar"> | |
| <div class="row align-items-center"> | |
| <div class="col-sm-4 col-8"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 d-block d-lg-none me-3"> | |
| <a href="" class="btn btn-primary user-chat-remove fs-18 p-1"><i | |
| class="fa fa-chevron-left align-middle"></i></a> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <div class="d-flex align-items-center"> | |
| <div | |
| class="flex-shrink-0 chat-user-img online user-own-img align-self-center me-3 ms-0"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| class="rounded-circle avatar-sm" alt=""> | |
| <span class="user-status"></span> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h6 class="text-truncate mb-0 fs-18"><a href="#" | |
| class="user-profile-show text-reset">LegalMind</a></h6> | |
| <p class="text-truncate text-muted mb-0"><small>Online</small></p> | |
| </div> | |
| </div> | |
| </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='fa fa-search'></i> | |
| </button> | |
| <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg"> | |
| <div class="search-box p-2"> | |
| <input type="text" class="form-control" placeholder="Search.." | |
| id="searchChatMessage"> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- | |
| <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0"> | |
| <button type="button" class="btn nav-btn" data-bs-toggle="modal" | |
| data-bs-target=".audiocallModal"> | |
| <i class='fa-solid fa-phone'></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" data-bs-toggle="modal" | |
| data-bs-target=".videocallModal"> | |
| <i class='fa fa-video'></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" data-bs-toggle="modal" | |
| data-bs-target=".pinnedtabModal"> | |
| <i class='fa fa-bookmark'></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='fa-solid fa-circle-info'></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='fa-solid fa-ellipsis-vertical'></i> | |
| </button> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none user-profile-show" | |
| href="#">View Profile <i class="fa fa-user text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" | |
| href="#" data-bs-toggle="modal" | |
| data-bs-target=".audiocallModal">Audio <i | |
| class="fa-solid fa-phone text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" | |
| href="#" data-bs-toggle="modal" | |
| data-bs-target=".videocallModal">Video <i | |
| class="fa fa-video text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Archive <i class="fa fa-archive text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Muted <i | |
| class="fa-solid fa-microphone-slash text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Delete <i class="fa fa-trash text-muted"></i></a> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0"> | |
| <a data-bs-toggle="offcanvas" href="#theme-settings-offcanvas" | |
| class="settings text-primary rounded fs-5 btn nav-btn"><i | |
| class="fa-solid fa-gear fa-gear1"></i></a> | |
| </li> --> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end chat user head --> | |
| <!-- start chat conversation --> | |
| <div class="chat-conversation p-3 p-lg-4 " id="chat-conversation" data-simplebar="init"> | |
| <div class="simplebar-wrapper" style="margin: -16px;"> | |
| <div class="simplebar-height-auto-observer-wrapper"> | |
| <div class="simplebar-height-auto-observer"></div> | |
| </div> | |
| <div class="simplebar-mask"> | |
| <div class="simplebar-offset" style="right: 0px; bottom: 0px;"> | |
| <div class="simplebar-content-wrapper" | |
| style="height: 100%; overflow: hidden scroll;"> | |
| <div class="simplebar-content" style="padding: 16px;"> | |
| <ul class="list-unstyled chat-conversation-list messages" | |
| id="users-conversation"> | |
| <li class="chat-list left" id="1"> | |
| <div class="conversation-list"> | |
| <div class="chat-avatar"><img | |
| src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| alt=""></div> | |
| <div class="user-chat-content"> | |
| <div class="ctext-wrap"> | |
| <div class="ctext-wrap-content" id="1"> | |
| <p class="mb-0 ctext-content">Xin chào! Tôi là | |
| chuyên gia tư vấn pháp luật, sẵn sàng phân | |
| tích | |
| án lệ và cung cấp lập luận pháp lý chính | |
| xác, dễ hiểu, tuân thủ | |
| quy định pháp luật Việt Nam. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="conversation-name"><small | |
| class="text-muted time">{{time}}</small> <span | |
| class="text-success check-message-icon"><i | |
| class="fa-solid fa-check-double"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| <!-- <div class="chat-list left" id="10"> | |
| <div class="conversation-list"> | |
| <div class="chat-avatar"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" alt=""> | |
| </div> | |
| <div class="user-chat-content"> | |
| <div class="ctext-wrap"> | |
| <div class="message-img mb-0"> | |
| <div class="message-img-list"> | |
| <div> | |
| <iframe src="https://www.youtube.com/embed/PHcgN1GTjdU" title="YouTube video" | |
| class="w-100 rounded" autoplay allowfullscreen></iframe> | |
| </div> | |
| <div class="message-img-link"> | |
| <ul class="list-inline mb-0"> | |
| <li class="list-inline-item dropdown"> | |
| <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" | |
| aria-haspopup="true" aria-expanded="false"> | |
| <i class="bx bx-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="https://themesdesign.in/chaton/layouts/assets/images/small/img-1.jpg" download=""> | |
| Download <i class="bx bx-download ms-2 text-muted"></i> | |
| </a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#" data-bs-toggle="collapse" data-bs-target=".replyCollapse"> | |
| Reply <i class="bx bx-share ms-2 text-muted"></i> | |
| </a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#" data-bs-toggle="modal" data-bs-target=".forwardModal"> | |
| Forward <i class="bx bx-share-alt ms-2 text-muted"></i> | |
| </a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#"> | |
| Bookmark <i class="bx bx-bookmarks text-muted ms-2"></i> | |
| </a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between delete-image" | |
| href="#"> | |
| Delete <i class="bx bx-trash ms-2 text-muted"></i> | |
| </a> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="conversation-name"> | |
| <small class="text-muted time">11:45 am</small> | |
| <span class="text-success check-message-icon"><i class="fa-solid fa-check-double"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-list left" id="11"> | |
| <div class="conversation-list"> | |
| <div class="chat-avatar"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" alt=""> | |
| </div> | |
| <div class="user-chat-content"> | |
| <div class="ctext-wrap"> | |
| <div class="message-img mb-0"> | |
| <div class="message-img-list"> | |
| <audio controls> | |
| <source src="http://w3codegenerator.com/audio/audio.mp3" type="audio/mpeg"> | |
| </audio> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="conversation-name"> | |
| <small class="text-muted time">11:45 am</small> | |
| <span class="text-success check-message-icon"><i class="fa-solid fa-check-double"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="simplebar-placeholder" style="width: auto; height: 1367px;"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;"> | |
| <div class="simplebar-scrollbar" | |
| style="width: 0px; display: none; transform: translate3d(0px, 0px, 0px);"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-vertical" style="visibility: visible;"> | |
| <div class="simplebar-scrollbar" | |
| style="height: 252px; display: block; transform: translate3d(0px, 0px, 0px);"></div> | |
| </div> | |
| </div> | |
| <div class="alert alert-warning alert-dismissible copyclipboard-alert px-4 fade show" | |
| id="copyClipBoard" role="alert"> | |
| Message copied | |
| </div> | |
| <!-- end chat conversation end --> | |
| </div> | |
| <!-- conversation group --> | |
| <div id="channel-chat" class="position-relative"> | |
| <div class="py-3 user-chat-topbar"> | |
| <div class="row align-items-center"> | |
| <div class="col-sm-4 col-8"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 d-block d-lg-none me-3"> | |
| <a href="" class="btn btn-primary user-chat-remove fs-18 p-1"><i | |
| class="fa fa-chevron-left align-middle"></i></a> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <div class="d-flex align-items-center"> | |
| <div | |
| class="flex-shrink-0 chat-user-img online user-own-img align-self-center me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/user-dummy-img.jpg" | |
| class="rounded-circle avatar-sm" alt=""> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h6 class="text-truncate mb-0 fs-18"><a href="#" | |
| class="user-profile-show text-reset">Design Phase 2</a></h6> | |
| <p class="text-truncate text-muted mb-0"><small>24 Members</small> | |
| </p> | |
| </div> | |
| </div> | |
| </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='fa fa-search'></i> | |
| </button> | |
| <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg"> | |
| <div class="search-box p-2"> | |
| <input type="text" class="form-control" placeholder="Search.."> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0"> | |
| <button type="button" class="btn nav-btn" data-bs-toggle="modal" | |
| data-bs-target=".groupvideocallModal"> | |
| <i class='fa fa-video'></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='fa-solid fa-circle-info'></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='fa-solid fa-ellipsis-vertical'></i> | |
| </button> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none user-profile-show" | |
| href="#">View Profile <i class="fa fa-user text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" | |
| href="#" data-bs-toggle="modal" | |
| data-bs-target=".audiocallModal">Audio <i | |
| class="fa-solid fa-phone text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" | |
| href="#" data-bs-toggle="modal" | |
| data-bs-target=".videocallModal">Video <i | |
| class="fa fa-video text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Archive <i class="fa fa-archive text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Muted <i | |
| class="fa-solid fa-microphone-slash text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Delete <i class="fa fa-trash 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="chat-conversation" data-simplebar> | |
| <ul class="list-unstyled chat-conversation-list" id="channel-conversation"> | |
| </ul> | |
| </div> | |
| <div class="alert alert-warning alert-dismissible copyclipboard-alert px-4 fade show " | |
| id="copyClipBoardChannel" role="alert"> | |
| message copied | |
| </div> | |
| <!-- end chat conversation end --> | |
| </div> | |
| <!-- start chat input section --> | |
| <div class="position-relative"> | |
| <div class="chat-input-section p-4 border-top"> | |
| <form id="chatinput-form" enctype="multipart/form-data"> | |
| <div class="row g-0 align-items-center"> | |
| <div class="file_Upload"></div> | |
| <div class="col-auto"> | |
| <div class="chat-input-links me-md-2"> | |
| <div class="links-list-item" data-bs-toggle="tooltip" | |
| data-bs-trigger="hover" data-bs-placement="top" title="More"> | |
| <button type="button" | |
| class="btn btn-link text-decoration-none btn-lg waves-effect" | |
| data-bs-toggle="collapse" data-bs-target="#chatinputmorecollapse" | |
| aria-expanded="false" aria-controls="chatinputmorecollapse"> | |
| <i class="fa-solid fa-ellipsis align-middle"></i> | |
| </button> | |
| </div> | |
| <div class="links-list-item" data-bs-toggle="tooltip" | |
| data-bs-trigger="hover" data-bs-placement="top" | |
| title="Soạn thảo bản án"> | |
| <button type="button" | |
| class="btn btn-link text-decoration-none btn-lg waves-effect emoji-btn" | |
| id="emoji-btn" onclick="submitJudgment()"> | |
| <i class="fa fa-book align-middle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="position-relative"> | |
| <div class="chat-input-feedback"> | |
| Please Enter a Message | |
| </div> | |
| <input autocomplete="off" type="text" | |
| class="form-control bg-light border-0 chat-input message_input" | |
| autofocus="" id="chat-input" placeholder="Type your message..."> | |
| <div style="display: none;" class="chat-input-typing"> | |
| <span class="typing-user d-flex">LegalMind | |
| is searching, thinking and | |
| typing | |
| <span class="typing ms-2"> | |
| <span class="dot"></span> | |
| <span class="dot"></span> | |
| <span class="dot"></span> | |
| </span> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-auto"> | |
| <div class="chat-input-links ms-2 gap-md-1"> | |
| <div class="links-list-item d-none d-sm-block" | |
| data-bs-container=".chat-input-links" data-bs-toggle="popover" | |
| data-bs-trigger="focus" data-bs-html="true" data-bs-placement="top" | |
| data-bs-content="<div class='loader-line'><div class='line'></div><div class='line'></div><div class='line'></div><div class='line'></div><div class='line'></div></div>"> | |
| <button type="button" | |
| class="btn btn-link text-decoration-none btn-lg waves-effect" | |
| onclick="audioPermission()"> | |
| <i class="fa fa-microphone align-middle"></i> | |
| </button> | |
| </div> | |
| <div class="links-list-item"> | |
| <button style="background-color: #2E8B57; color: white" type="submit" | |
| class="btn btn-soft-primary btn-lg chat-send waves-effect waves-light send_message" | |
| data-bs-toggle="collapse" | |
| data-bs-target=".chat-input-collapse1.show"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" | |
| viewBox="0 0 24 24" fill="none" stroke="currentColor" | |
| stroke-width="2" stroke-linecap="round" stroke-linejoin="round" | |
| class="feather feather-send"> | |
| <line x1="22" y1="2" x2="11" y2="13"></line> | |
| <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| <div class="chat-input-collapse chat-input-collapse1 collapse" id="chatinputmorecollapse"> | |
| <div class="card mb-0"> | |
| <div class="card-body py-3"> | |
| <!-- Swiper --> | |
| <div class="swiper chatinput-links"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide"> | |
| <div class="text-center px-2 position-relative"> | |
| <div> | |
| <input id="attachedfile-input" type="file" class="d-none" | |
| accept=".zip,.rar,.7zip,.pdf" multiple> | |
| <label for="attachedfile-input" | |
| class="avatar-sm mx-auto stretched-link"> | |
| <span | |
| class="avatar-title fs-18 bg-primary-subtle text-primary text-primary rounded-circle"> | |
| <i class="fa fa-paperclip"></i> | |
| </span> | |
| </label> | |
| </div> | |
| <h5 | |
| class="fs-11 text-uppercase mt-3 mb-0 text-body text-truncate"> | |
| Attached</h5> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <div class="text-center px-2"> | |
| <div class="avatar-sm mx-auto"> | |
| <div class="avatar-title fs-18 bg-primary-subtle | |
| text-primary text-primary rounded-circle"> | |
| <i class="fa-solid fa-camera"></i> | |
| </div> | |
| </div> | |
| <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0"><a | |
| href="#" class="text-body stretched-link" | |
| onclick="cameraPermission()">Camera</a></h5> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <div class="text-center px-2 position-relative"> | |
| <div> | |
| <input id="galleryfile-input" type="file" class="d-none" | |
| accept="image/png, image/gif, image/jpeg" multiple> | |
| <label for="galleryfile-input" | |
| class="avatar-sm mx-auto stretched-link"> | |
| <span class="avatar-title fs-18 bg-primary-subtle | |
| text-primary text-primary rounded-circle"> | |
| <i class="fa fa-images"></i> | |
| </span> | |
| </label> | |
| </div> | |
| <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0">Gallery | |
| </h5> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <div class="text-center px-2"> | |
| <div> | |
| <input id="audiofile-input" type="file" class="d-none" | |
| accept="audio/*" multiple> | |
| <label for="audiofile-input" | |
| class="avatar-sm mx-auto stretched-link"> | |
| <span class="avatar-title fs-18 bg-primary-subtle | |
| text-primary text-primary rounded-circle"> | |
| <i class="fa-solid fa-headphones"></i> | |
| </span> | |
| </label> | |
| </div> | |
| <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0">Audio | |
| </h5> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <div class="text-center px-2"> | |
| <div class="avatar-sm mx-auto"> | |
| <div class="avatar-title fs-18 bg-primary-subtle | |
| text-primary text-primary rounded-circle"> | |
| <i class="fa-solid fa-location-pin"></i> | |
| </div> | |
| </div> | |
| <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0"><a | |
| href="#" class="text-body stretched-link" | |
| onclick="getLocation()">Location</a></h5> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <div class="text-center px-2"> | |
| <div class="avatar-sm mx-auto"> | |
| <div class="avatar-title fs-18 bg-primary-subtle | |
| text-primary text-primary rounded-circle"> | |
| <i class="fa-solid fa-address-book"></i> | |
| </div> | |
| </div> | |
| <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0"><a | |
| href="#" class="text-body stretched-link" | |
| data-bs-toggle="modal" | |
| data-bs-target=".contactModal">Contacts</a></h5> | |
| </div> | |
| </div> | |
| <div class="swiper-slide d-block d-sm-none"> | |
| <div class="text-center px-2"> | |
| <div class="avatar-sm mx-auto"> | |
| <div class="avatar-title fs-18 bg-primary-subtle | |
| text-primary text-primary rounded-circle"> | |
| <i class="fa fa-microphone"></i> | |
| </div> | |
| </div> | |
| <h5 class="fs-11 text-uppercase text-truncate mt-3 mb-0"><a | |
| href="#" class="text-body stretched-link">Audio</a></h5> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="replyCard"> | |
| <div class="card mb-0"> | |
| <div class="card-body py-3"> | |
| <div class="replymessage-block mb-0 d-flex align-items-start"> | |
| <div class="flex-grow-1"> | |
| <h5 class="conversation-name"></h5> | |
| <p class="mb-0"></p> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" id="close_toggle" | |
| class="btn btn-sm btn-link mt-n2 me-n3 fs-18"> | |
| <i class="fa fa-x align-middle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end chat input section --> | |
| </div> | |
| <!-- end chat conversation section --> | |
| <!-- start User profile detail sidebar --> | |
| <div class="user-profile-sidebar"> | |
| <div class="p-3 border-bottom"> | |
| <div class="user-profile-img"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| class="profile-img rounded" alt=""> | |
| <div class="overlay-content rounded"> | |
| <div class="user-chat-nav p-2"> | |
| <div class="d-flex w-100"> | |
| <div class="flex-grow-1"> | |
| <button type="button" | |
| class="btn nav-btn text-white user-profile-show d-none d-lg-block"> | |
| <i class="fa fa-x"></i> | |
| </button> | |
| <button type="button" | |
| class="btn nav-btn text-white user-profile-show d-block d-lg-none"> | |
| <i class="fa fa-left-arrow-alt"></i> | |
| </button> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div class="dropdown"> | |
| <button class="btn nav-btn text-white dropdown-toggle" type="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class='fa-solid fa-ellipsis-vertical'></i> | |
| </button> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none user-profile-show" | |
| href="#">View Profile <i class="fa fa-user text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" | |
| href="#" data-bs-toggle="modal" | |
| data-bs-target=".audiocallModal">Audio <i | |
| class="fa-solid fa-phone text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center d-lg-none" | |
| href="#" data-bs-toggle="modal" | |
| data-bs-target=".videocallModal">Video <i | |
| class="fa fa-video text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Archive <i class="fa fa-archive text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Muted <i | |
| class="fa-solid fa-microphone-slash text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Delete <i class="fa fa-trash text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-auto p-3"> | |
| <h5 class="user-name mb-0 text-truncate">LegalMind</h5> | |
| <p class="fs-14 text-truncate user-profile-status mt-1 mb-0"><i | |
| class="fa fas-circle fs-10 text-success me-1 ms-0"></i> | |
| Online</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End profile user --> | |
| <!-- Start user-profile-desc --> | |
| <div class="p-4 user-profile-desc" data-simplebar> | |
| <div class="text-center border-bottom border-bottom-dashed"> | |
| <div class="d-flex gap-2 justify-content-center mb-4"> | |
| <button type="button" class="btn avatar-sm p-0"> | |
| <span class="avatar-title rounded bg-info-subtle | |
| text-info text-info"> | |
| <i class="fa-solid fa-comment"></i> | |
| </span> | |
| </button> | |
| <button type="button" class="btn avatar-sm p-0 favourite-btn"> | |
| <span class="avatar-title rounded bg-danger-subtle | |
| text-danger text-body"> | |
| <i class="fa fa-heart"></i> | |
| </span> | |
| </button> | |
| <button type="button" class="btn avatar-sm p-0" data-bs-toggle="modal" | |
| data-bs-target=".audiocallModal"> | |
| <span class="avatar-title rounded bg-success-subtle text-success"> | |
| <i class="fa-solid fa-phone"></i> | |
| </span> | |
| </button> | |
| <button type="button" class="btn avatar-sm p-0" data-bs-toggle="modal" | |
| data-bs-target=".videocallModal"> | |
| <span class="avatar-title rounded bg-warning-subtle | |
| text-warning text-warning"> | |
| <i class="fa fa-video"></i> | |
| </span> | |
| </button> | |
| <div class="dropdown"> | |
| <button class="btn avatar-sm p-0 dropdown-toggle" type="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | |
| <span class="avatar-title bg-primary-subtle | |
| text-primary text-primary rounded"> | |
| <i class="fa-solid fa-ellipsis-vertical"></i> | |
| </span> | |
| </button> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Archive <i class="fa fa-archive text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Muted <i class="fa-solid fa-microphone-slash text-muted"></i></a> | |
| <a class="dropdown-item d-flex justify-content-between align-items-center" | |
| href="#">Delete <i class="fa fa-trash text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-muted pt-4"> | |
| <h5 class="fs-12 text-muted text-uppercase">Status :</h5> | |
| <p class="mb-4">A professional profile is a brief summary of your skills, strengths, and key | |
| experiences. | |
| </p> | |
| </div> | |
| <div class="pb-4 border-bottom border-bottom-dashed mb-4"> | |
| <h5 class="fs-12 text-muted text-uppercase mb-2">Info :</h5> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fa fa-user align-middle fs-15 text-muted"></i> | |
| </div> | |
| <div class="flex-grow-1 ms-3"> | |
| <h5 class="fs-14 text-truncate mb-0"> LegalMind</h5> | |
| </div> | |
| </div> | |
| <div class="d-flex align-items-center mt-3"> | |
| <div class="flex-shrink-0"> | |
| <i class="fa-solid fa-envelope align-middle fs-15 text-muted"></i> | |
| </div> | |
| <div class="flex-grow-1 ms-3"> | |
| <h5 class="fs-14 text-truncate mb-0">[email protected]</h5> | |
| </div> | |
| </div> | |
| <div class="d-flex align-items-center mt-3"> | |
| <div class="flex-shrink-0"> | |
| <i class="fa-solid fa-phone align-middle fs-15 text-muted"></i> | |
| </div> | |
| <div class="flex-grow-1 ms-3"> | |
| <h5 class="fs-14 text-truncate mb-0">+(345) 3216 48751</h5> | |
| </div> | |
| </div> | |
| <div class="d-flex align-items-center mt-3"> | |
| <div class="flex-shrink-0"> | |
| <i class="fa-solid fa-location-pin align-middle fs-15 text-muted"></i> | |
| </div> | |
| <div class="flex-grow-1 ms-3"> | |
| <h5 class="fs-14 text-truncate mb-0">California, USA</h5> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pb-4 border-bottom border-bottom-dashed mb-4"> | |
| <div class="d-flex"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-12 text-muted text-uppercase">Group in common</h5> | |
| </div> | |
| </div> | |
| <ul class="list-unstyled chat-list mx-n4"> | |
| <li> | |
| <a href=""> | |
| <div class="d-flex align-items-center"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/group-img.jpg" | |
| alt="" class="avatar-sm rounded-circle me-3"> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h6 class="text-truncate mb-0">Landing Design</h6> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a href=""> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm me-3"> | |
| <span class="avatar-title rounded-circle bg-light text-reset"> | |
| SM | |
| </span> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h6 class="text-truncate mb-0">Sales & Marketing</h6> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="pb-4 border-bottom border-bottom-dashed mb-4"> | |
| <div class="d-flex align-items-center mb-3"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-12 text-muted text-uppercase mb-0">Shared Images</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <a href="#" class="fs-12 fw-medium d-block">Show all</a> | |
| </div> | |
| </div> | |
| <div class="profile-media-img"> | |
| <div class="row g-1"> | |
| <div class="col-lg-4 col-6"> | |
| <a href="#"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-1.jpg" | |
| alt="media img" class="img-fluid rounded"> | |
| </a> | |
| </div> | |
| <div class="col-lg-4 col-6"> | |
| <a href="#"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-2.jpg" | |
| alt="media img" class="img-fluid rounded"> | |
| </a> | |
| </div> | |
| <div class="col-lg-4 col-6"> | |
| <a href="#"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-3.jpg" | |
| alt="media img" class="img-fluid rounded"> | |
| </a> | |
| </div> | |
| <div class="col-lg-4 col-6"> | |
| <a href="#"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-4.jpg" | |
| alt="media img" class="img-fluid rounded"> | |
| </a> | |
| </div> | |
| <div class="col-lg-4 col-6"> | |
| <a href="#"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-5.jpg" | |
| alt="media img" class="img-fluid rounded"> | |
| </a> | |
| </div> | |
| <div class="col-lg-4 col-6"> | |
| <div class="position-relative rounded overflow-hidden"> | |
| <a href="javascript:void(0);" class="d-block"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/small/img-6.jpg" | |
| alt="media img" class="img-fluid rounded"> | |
| <div class="bg-overlay"></div> | |
| <div | |
| class="position-absolute top-50 start-50 text-white translate-middle fs-16"> | |
| +10 | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div> | |
| <h5 class="fs-11 text-muted text-uppercase mb-3">Attached Files</h5> | |
| </div> | |
| <div> | |
| <div class="card mb-2 border border-dashed"> | |
| <div class="card-body p-2"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/pdf-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1">design-phase-1-approved.pdf</h5> | |
| <p class="text-muted fs-13 mb-0">12.5 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="d-flex gap-2"> | |
| <div> | |
| <a href="#" class="text-muted px-1"> | |
| <i class="fa fas-download"></i> | |
| </a> | |
| </div> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle text-muted px-1" href="#" | |
| role="button" data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Share <i | |
| class="fa fa-share-alt ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Bookmark <i | |
| class="fa-regular fa-bookmark text-muted ms-2"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i | |
| class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card border border-dashed mb-2"> | |
| <div class="card-body p-2"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1">Image-1.jpg</h5> | |
| <p class="text-muted fs-13 mb-0">4.2 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="d-flex gap-2"> | |
| <div> | |
| <a href="#" class="text-muted px-1"> | |
| <i class="fa fas-download"></i> | |
| </a> | |
| </div> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle text-muted px-1" href="#" | |
| role="button" data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Share <i | |
| class="fa fa-share-alt ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Bookmark <i | |
| class="fa-regular fa-bookmark text-muted ms-2"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i | |
| class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-2 border border-dashed mb-2"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1">Image-2.jpg</h5> | |
| <p class="text-muted fs-13 mb-0">3.1 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="d-flex gap-2"> | |
| <div> | |
| <a href="#" class="text-muted px-1"> | |
| <i class="fa fas-download"></i> | |
| </a> | |
| </div> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Share <i | |
| class="fa fa-share-alt ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Bookmark <i | |
| class="fa-regular fa-bookmark text-muted ms-2"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i | |
| class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-2 border border-dashed mb-0"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/zip-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1">Landing-A.zip</h5> | |
| <p class="text-muted fs-13 mb-0">6.7 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="d-flex gap-2"> | |
| <div> | |
| <a href="#" class="text-muted px-1"> | |
| <i class="fa fas-download"></i> | |
| </a> | |
| </div> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Share <i | |
| class="fa fa-share-alt ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Bookmark <i | |
| class="fa-regular fa-bookmark text-muted ms-2"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i | |
| class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end user-profile-desc --> | |
| </div> | |
| <!-- end User profile detail sidebar --> | |
| </div> | |
| <!-- end user chat content --> | |
| </div> | |
| <!-- End User chat --> | |
| <!-- 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 modal-header-colored shadow-lg border-0"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title text-white fs-16" id="addContact-exampleModalLabel">Create Contact</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" | |
| aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body p-4"> | |
| <form> | |
| <div class="mb-3"> | |
| <label for="addcontactemail-input" class="form-label">Email</label> | |
| <input type="email" class="form-control" id="addcontactemail-input" | |
| placeholder="Enter Email"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="addcontactname-input" class="form-label">Name</label> | |
| <input type="text" class="form-control" id="addcontactname-input" | |
| placeholder="Enter Name"> | |
| </div> | |
| <div class="mb-0"> | |
| <label for="addcontact-invitemessage-input" class="form-label">Invatation | |
| Message</label> | |
| <textarea class="form-control" id="addcontact-invitemessage-input" rows="3" | |
| placeholder="Enter Message"></textarea> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-primary">Invite</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End Add contact Modal --> | |
| <!-- audiocall Modal --> | |
| <div class="modal fade audiocallModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered"> | |
| <div class="modal-content border border-0 overflow-hidden"> | |
| <div class="modal-body p-0"> | |
| <div class="text-center p-4 pb-0"> | |
| <div class="avatar-xl mx-auto mb-4"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-7.jpg" | |
| alt="" class="img-thumbnail rounded-circle"> | |
| </div> | |
| <div> | |
| <h5 class="fs-22 text-truncate mb-0">LegalMind</h5> | |
| <p class="text-muted">05:45</p> | |
| </div> | |
| <div class="d-flex justify-content-center align-items-center gap-3 mt-4"> | |
| <a href="" class="avatar-sm"> | |
| <div class="avatar-title bg-danger-subtle | |
| text-danger text-danger fs-20 rounded-circle"> | |
| <i class="fa fa-video-recording"></i> | |
| </div> | |
| </a> | |
| <a href="" class="avatar-sm"> | |
| <div class="avatar-title bg-success-subtle text-success fs-20 rounded-circle"> | |
| <i class="fa fa-volume-full"></i> | |
| </div> | |
| </a> | |
| <a href="javascript:void(0)" class="avatar-sm"> | |
| <div class="avatar-title bg-info-subtle text-info text-info fs-20 rounded-circle"> | |
| <i class="fa fa-user-plus"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="mt-4"> | |
| <button type="button" class="btn btn-danger avatar-md call-close-btn rounded-circle" | |
| data-bs-dismiss="modal"> | |
| <span class="avatar-title bg-transparent fs-24"> | |
| <i class="mdi mdi-phone-hangup"></i> | |
| </span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-primary-gradient mt-n4"> | |
| <div class="d-flex audio-call-menu"> | |
| <div class="flex-grow-1"> | |
| <button type="button" class="btn btn-light avatar-sm"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="ri-question-answer-line"></i> | |
| </span> | |
| </button> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-light avatar-sm"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="fa-solid fa-microphone-slash"></i> | |
| </span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- audiocall Modal --> | |
| <!-- videocall Modal --> | |
| <div class="modal fade videocallModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered"> | |
| <div class="modal-content border-0"> | |
| <div class="modal-body p-0"> | |
| <div class="videocall-overlay"></div> | |
| <div | |
| class="video-call-title position-absolute top-0 start-50 translate-middle-x mt-3 text-center"> | |
| <h5 class="fs-22 text-truncate text-white">LegalMind</h5> | |
| <span class="badge text-white fs-12">05:27</span> | |
| </div> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| alt="" class="videocallModal-bg"> | |
| <div> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" | |
| alt="" class="avatar-lg video-call-profile rounded"> | |
| </div> | |
| <div class="position-absolute start-0 end-0 bottom-0"> | |
| <div class="text-center"> | |
| <button type="button" class="btn btn-danger avatar-md call-close-btn rounded-circle" | |
| data-bs-dismiss="modal"> | |
| <span class="avatar-title bg-transparent fs-24"> | |
| <i class="mdi mdi-phone-hangup"></i> | |
| </span> | |
| </button> | |
| </div> | |
| <div class="p-4 bg-primary-gradient mt-n4"> | |
| <div class="d-flex gap-4 justify-content-center video-call-menu mt-2"> | |
| <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="fa-solid fa-microphone-slash"></i> | |
| </span> | |
| </a> | |
| <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle me-4"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="fa fa-video-off"></i> | |
| </span> | |
| </a> | |
| <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle ms-5"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="fa fa-volume-full"></i> | |
| </span> | |
| </a> | |
| <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="fa fa-refresh"></i> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end modal --> | |
| <!-- groupvideocall Modal --> | |
| <div class="modal fade groupvideocallModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered"> | |
| <div class="modal-content border-0"> | |
| <div class="modal-body p-0 overflow-hidden"> | |
| <div class="videocall-overlay"></div> | |
| <div class="video-call-title position-absolute top-0 start-0 mt-3 ms-3"> | |
| <h5 class="user-profile-show fs-22 text-truncate text-white">Reporting</h5> | |
| <span class="badge text-white fs-11">05:27</span> | |
| </div> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-7.jpg" alt="" | |
| class="videocallModal-bg rounded" /> | |
| <ul class="list-unstyled groud-call-user vstack gap-3 position-absolute end-0 top-0 p-3"> | |
| <li> | |
| <a href="javascript:void(0);"><img | |
| src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-11.jpg" | |
| alt="" class="avatar-lg rounded"></a> | |
| </li> | |
| <li> | |
| <a href="javascript:void(0);"><img | |
| src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-6.jpg" | |
| alt="" class="avatar-lg rounded" /></a> | |
| </li> | |
| <li> | |
| <a href="javascript:void(0);"><img | |
| src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-3.jpg" | |
| alt="" class="avatar-lg rounded" /></a> | |
| </li> | |
| </ul> | |
| <div class="position-absolute video-call-menu start-0 end-0 bottom-0 mb-3"> | |
| <div class="hstack justify-content-center gap-3"> | |
| <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="fa-solid fa-microphone-slash"></i> | |
| </span> | |
| </a> | |
| <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle me-4"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="fa fa-video-off"></i> | |
| </span> | |
| </a> | |
| <button type="button" | |
| class="btn btn-danger avatar-sm call-close-btn shadow-none rounded-circle" | |
| data-bs-dismiss="modal"> | |
| <span class="avatar-title bg-transparent fs-24"> | |
| <i class="mdi mdi-phone-hangup"></i> | |
| </span> | |
| </button> | |
| <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle ms-4"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="fa fa-volume-full"></i> | |
| </span> | |
| </a> | |
| <a href="javascript:void(0);" class="btn btn-light avatar-sm rounded-circle"> | |
| <span class="avatar-title bg-transparent fs-20"> | |
| <i class="fa fa-refresh"></i> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end modal --> | |
| <!-- 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 modal-header-colored border-0"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title text-white fs-16" id="addgroup-exampleModalLabel">Create New Group</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" | |
| aria-label="Close"> | |
| </button> | |
| </div> | |
| <div class="modal-body p-4"> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="addgroupname-input" class="form-label">Group Name</label> | |
| <input type="text" class="form-control" id="addgroupname-input" | |
| 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="fs-15 mb-0">Contacts</h5> | |
| </div> | |
| <div class="card-body py-2 px-0"> | |
| <div data-simplebar style="max-height: 180px;"> | |
| <div> | |
| <div class="contact-list-title"> | |
| A | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck1" checked> | |
| <label class="form-check-label" | |
| for="memberCheck1">Albert | |
| Rodarte</label> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck2"> | |
| <label class="form-check-label" | |
| for="memberCheck2">Allison | |
| Etter</label> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="contact-list-title"> | |
| C | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck3"> | |
| <label class="form-check-label" for="memberCheck3">Craig | |
| Smiley</label> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="contact-list-title"> | |
| D | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck4"> | |
| <label class="form-check-label" | |
| for="memberCheck4">Daniel | |
| Clay</label> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="contact-list-title"> | |
| I | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck5"> | |
| <label class="form-check-label" for="memberCheck5">Iris | |
| Wells</label> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="contact-list-title"> | |
| J | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck6"> | |
| <label class="form-check-label" for="memberCheck6">Juan | |
| Flakes</label> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck7"> | |
| <label class="form-check-label" for="memberCheck7">John | |
| Hall</label> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck8"> | |
| <label class="form-check-label" for="memberCheck8">Joy | |
| Southern</label> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="contact-list-title"> | |
| M | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck9"> | |
| <label class="form-check-label" | |
| for="memberCheck9">Michael | |
| Hinton</label> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck10"> | |
| <label class="form-check-label" for="memberCheck10">Mary | |
| Farmer</label> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="contact-list-title"> | |
| P | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck11"> | |
| <label class="form-check-label" | |
| for="memberCheck11">Phillis | |
| Griffin</label> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="contact-list-title"> | |
| R | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck12"> | |
| <label class="form-check-label" | |
| for="memberCheck12">Rocky | |
| Jackson</label> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="contact-list-title"> | |
| S | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" | |
| id="memberCheck13"> | |
| <label class="form-check-label" | |
| for="memberCheck13">Simon | |
| Velez</label> | |
| </div> | |
| </li> | |
| </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="addgroupdescription-input" rows="3" | |
| placeholder="Enter Description"></textarea> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer border-top-dashed"> | |
| <button type="button" class="btn btn-link link-danger m-0" data-bs-dismiss="modal"><i | |
| class="ri-close-line"></i> Close</button> | |
| <button type="button" class="btn btn-primary m-0">Create Groups</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End add group Modal --> | |
| <!-- Start Add pinned tab Modal --> | |
| <div class="modal fade pinnedtabModal" tabindex="-1" role="dialog" aria-labelledby="pinnedtabModalLabel" | |
| aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> | |
| <div class="modal-content modal-header-colored border-0"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title text-white fs-16" id="pinnedtabModalLabel">Bookmark</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" | |
| aria-label="Close"> | |
| </button> | |
| </div> | |
| <div class="modal-body p-4"> | |
| <div class="d-flex align-items-center mb-3"> | |
| <div class="flex-grow-1"> | |
| <div> | |
| <h5 class="fs-16 mb-0">10 Pinned tabs</h5> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div> | |
| <button type="button" class="btn btn-sm btn-warning"><i | |
| class="fa fa-plus align-middle"></i> Pin</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-bookmark-list mx-n4" data-simplebar style="max-height: 299px;"> | |
| <ul class="list-unstyled chat-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/pdf-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1"><a href="#" | |
| class="p-0">design-phase-1-approved.pdf</a></h5> | |
| <p class="text-muted fs-13 mb-0">12.5 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open <i | |
| class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/link-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">Bg Pattern</a> | |
| </h5> | |
| <p class="text-muted fs-13 mb-0">https://bgpattern.com/</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open <i | |
| class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1"><a href="#" | |
| class="p-0">Image-001.jpg</a> | |
| </h5> | |
| <p class="text-muted fs-13 mb-0">4.2 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open <i | |
| class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/link-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">Images</a></h5> | |
| <p class="text-muted fs-13 mb-0">https://images123.com/</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open <i | |
| class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/link-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">Bg Gradient</a> | |
| </h5> | |
| <p class="text-muted fs-13 mb-0">https://bggradient.com/</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open <i | |
| class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/image-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1"><a href="#" | |
| class="p-0">Image-012.jpg</a> | |
| </h5> | |
| <p class="text-muted fs-13 mb-0">3.1 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open <i | |
| class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/zip-file.png" | |
| alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 text-truncate mb-1"><a href="#" class="p-0">analytics | |
| dashboard.zip</a></h5> | |
| <p class="text-muted fs-13 mb-0">6.7 MB</p> | |
| </div> | |
| <div class="flex-shrink-0 ms-3"> | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle fs-18 text-muted px-1" href="#" role="button" | |
| data-bs-toggle="dropdown" aria-haspopup="true" | |
| aria-expanded="false"> | |
| <i class="fa fa-dots-horizontal-rounded"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end"> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Open <i | |
| class="fa fa-folder-open ms-2 text-muted"></i></a> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Edit <i class="fa fa-pencil ms-2 text-muted"></i></a> | |
| <div class="dropdown-divider"></div> | |
| <a class="dropdown-item d-flex align-items-center justify-content-between" | |
| href="#">Delete <i class="fa fa-trash ms-2 text-muted"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| <div class="text-center"> | |
| <a href="#pills-bookmark" class="link-success">View All <i | |
| class="ri-arrow-right-line ms-2 align-bottom"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End Add pinned tab Modal --> | |
| <!-- forward Modal --> | |
| <div class="modal fade forwardModal" tabindex="-1" role="dialog" aria-labelledby="forwardModalModalLabel" | |
| aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> | |
| <div class="modal-content modal-header-colored border-0"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title text-white fs-16">Share this Message</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" | |
| aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body p-4"> | |
| <div> | |
| <div class="replymessage-block mb-2"> | |
| <h5 class="conversation-name">Jean Berwick</h5> | |
| <p class="mb-0">Yeah everything is fine. Our next meeting tomorrow at 10.00 AM</p> | |
| </div> | |
| <textarea class="form-control" placeholder="Type your message..." rows="2"></textarea> | |
| </div> | |
| <hr class="my-4"> | |
| <div class="input-group mb-3"> | |
| <input type="text" class="form-control bg-light border-0 pe-0" placeholder="Search here.."> | |
| <button class="btn btn-light" type="button" id="forwardSearchbtn-addon"><i | |
| class='fa fa-search align-middle'></i></button> | |
| </div> | |
| <div class="d-flex align-items-center px-1"> | |
| <div class="flex-grow-1"> | |
| <h4 class="mb-0 fs-11 text-muted text-uppercase">Contacts</h4> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Share All</button> | |
| </div> | |
| </div> | |
| <div data-simplebar style="max-height: 150px;" class="mx-n4 px-1"> | |
| <div> | |
| <div class="contact-list-title"> | |
| A | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Albert Rodarte</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Allison Etter</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list A --> | |
| <div class="mt-3"> | |
| <div class="contact-list-title"> | |
| C | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Craig Smiley</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list C --> | |
| <div class="mt-3"> | |
| <div class="contact-list-title"> | |
| D | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Daniel Clay</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Doris Brown</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list D --> | |
| <div class="mt-3"> | |
| <div class="contact-list-title"> | |
| I | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Iris Wells</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list I --> | |
| <div class="mt-3"> | |
| <div class="contact-list-title"> | |
| J | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Juan Flakes</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">John Hall</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Joy Southern</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list J --> | |
| <div class="mt-3"> | |
| <div class="contact-list-title"> | |
| M | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Mary Farmer</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Mark Messer</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Michael Hinton</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list M --> | |
| <div class="mt-3"> | |
| <div class="contact-list-title"> | |
| O | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Ossie Wilson</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list O --> | |
| <div class="mt-3"> | |
| <div class="contact-list-title"> | |
| P | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Phillis Griffin</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Paul Haynes</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list P --> | |
| <div class="mt-3"> | |
| <div class="contact-list-title"> | |
| R | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Rocky Jackson</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list R --> | |
| <div class="mt-3"> | |
| <div class="contact-list-title"> | |
| S | |
| </div> | |
| <ul class="list-unstyled contact-list mb-0"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Sara Muller</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Simon Velez</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-grow-1"> | |
| <h5 class="fs-14 m-0">Steve Walker</h5> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button type="button" class="btn btn-sm btn-primary">Send</button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list S --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- forward Modal --> | |
| <!-- contactModal --> | |
| <div class="modal fade contactModal" tabindex="-1" role="dialog" aria-labelledby="pinnedtabModalLabel" | |
| aria-hidden="true"> | |
| <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> | |
| <div class="modal-content modal-header-colored border-0"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title text-white fs-16" id="pinnedtabModalLabel">Contacts</h5> | |
| <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" | |
| aria-label="Close"> | |
| </button> | |
| </div> | |
| <div class="modal-body p-4"> | |
| <div class="input-group mb-4"> | |
| <input type="text" class="form-control" placeholder="Search here.." id="searchContactModal" | |
| onkeyup="searchContactOnModal()" aria-label="Example text with button" | |
| aria-describedby="contactSearchbtn-addon"> | |
| <button class="btn btn-danger" type="button" id="contactSearchbtn-addon"><i | |
| class='fa fa-search align-middle'></i></button> | |
| </div> | |
| <div class="d-flex align-items-center px-1"> | |
| <div class="flex-grow-1"> | |
| <h4 class=" fs-12 text-muted text-uppercase">Contacts</h4> | |
| </div> | |
| </div> | |
| <div class="contact-modal-list px-1" data-simplebar style="max-height: 258px;"> | |
| <div> | |
| <div class="contact-list-title"> | |
| A | |
| </div> | |
| <ul class="list-unstyled contact-list mb-0"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-info rounded-circle"> | |
| A | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Albert Rodarte</h5> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-10.jpg" | |
| alt="" class="avatar-sm rounded-circle"> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Allison Etter</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list A --> | |
| <div class="mt-2"> | |
| <div class="contact-list-title"> | |
| C | |
| </div> | |
| <ul class="list-unstyled contact-list mb-0"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-danger rounded-circle"> | |
| C | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Craig Smiley</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list C --> | |
| <div class="mt-2"> | |
| <div class="contact-list-title"> | |
| D | |
| </div> | |
| <ul class="list-unstyled contact-list mb-0"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-4.jpg" | |
| alt="" class="avatar-sm rounded-circle"> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Daniel Clay</h5> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-8.jpg" | |
| alt="" class="avatar-sm rounded-circle"> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Doris Brown</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list D --> | |
| <div class="mt-2"> | |
| <div class="contact-list-title"> | |
| I | |
| </div> | |
| <ul class="list-unstyled contact-list mb-0"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-12.jpg" | |
| alt="" class="avatar-sm rounded-circle"> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Iris Wells</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list I --> | |
| <div class="mt-2"> | |
| <div class="contact-list-title"> | |
| J | |
| </div> | |
| <ul class="list-unstyled contact-list mb-0"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-success rounded-circle"> | |
| J | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Juan Flakes</h5> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-info rounded-circle"> | |
| J | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">John Hall</h5> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-3.jpg" | |
| alt="" class="avatar-sm rounded-circle"> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Joy Southern</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list J --> | |
| <div class="mt-2"> | |
| <div class="contact-list-title"> | |
| M | |
| </div> | |
| <ul class="list-unstyled contact-list mb-0"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-primary rounded-circle"> | |
| M | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Mary Farmer</h5> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-dark rounded-circle"> | |
| M | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Mark Messer</h5> | |
| </div> | |
| <div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-warning rounded-circle"> | |
| M | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Michael Hinton</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list M --> | |
| <div class="mt-2"> | |
| <div class="contact-list-title"> | |
| O | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-6.jpg" | |
| alt="" class="avatar-sm rounded-circle"> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Ossie Wilson</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list O --> | |
| <div class="mt-2"> | |
| <div class="contact-list-title mb-0"> | |
| P | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-10.jpg" | |
| alt="" class="avatar-sm rounded-circle"> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Phillis Griffin</h5> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-info rounded-circle"> | |
| P | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Paul Haynes</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list P --> | |
| <div class="mt-2"> | |
| <div class="contact-list-title mb-0"> | |
| R | |
| </div> | |
| <ul class="list-unstyled contact-list"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-success rounded-circle"> | |
| R | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Rocky Jackson</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list R --> | |
| <div class="mt-2"> | |
| <div class="contact-list-title"> | |
| S | |
| </div> | |
| <ul class="list-unstyled contact-list mb-0"> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://themesdesign.in/chaton/layouts/assets/images/users/avatar-11.jpg" | |
| alt="" class="avatar-sm rounded-circle"> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Sara Muller</h5> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-warning rounded-circle"> | |
| S | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Simon Velez</h5> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 avatar-sm"> | |
| <div class="avatar-title bg-danger rounded-circle"> | |
| S | |
| </div> | |
| </div> | |
| <h5 class="fs-14 mb-0 ms-2">Steve Walker</h5> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- end contact list S --> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <a href="javascript:void(0);" class="btn btn-link" data-bs-dismiss="modal"><i | |
| class="ri-close-fill align-bottom"></i> Cancel</a> | |
| <button type="button" class="btn btn-primary"><i class="fa fas-send align-middle"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- contactModal --> | |
| </div> | |
| <!-- end layout wrapper --> | |
| <!-- JAVASCRIPT --> | |
| <script src="https://themesdesign.in/chaton/layouts/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://themesdesign.in/chaton/layouts/assets/libs/simplebar/simplebar.min.js"></script> | |
| <script src="https://themesdesign.in/chaton/layouts/assets/libs/node-waves/waves.min.js"></script> | |
| <!-- Modern colorpicker bundle --> | |
| <script src="https://themesdesign.in/chaton/layouts/assets/libs/@simonwep/pickr/pickr.min.js"></script> | |
| <!-- glightbox js --> | |
| <script src="https://themesdesign.in/chaton/layouts/assets/libs/glightbox/js/glightbox.min.js"></script> | |
| <!-- Swiper JS --> | |
| <script src="https://themesdesign.in/chaton/layouts/assets/libs/swiper/swiper-bundle.min.js"></script> | |
| <!-- fg-emoji-picker JS --> | |
| <script src="https://themesdesign.in/chaton/layouts/assets/libs/fg-emoji-picker/fgEmojiPicker.js"></script> | |
| <!-- page init --> | |
| <script src="https://themesdesign.in/chaton/layouts/assets/js/pages/index.init.js"></script> | |
| <script src="https://themesdesign.in/chaton/layouts/assets/js/app.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" | |
| integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" | |
| crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <!-- <script> | |
| $(document).ready(function () { | |
| function scrollToBottom() { | |
| window.scrollTo({ | |
| top: document.body.scrollHeight, | |
| behavior: "smooth" | |
| }); | |
| } | |
| // Khi người dùng nhấn nút gửi | |
| $('.send_message').click(function () { | |
| sendMessage(); | |
| }); | |
| // Sự kiện khi nhấn Enter trong ô nhập liệu | |
| $('.message_input').keypress(function (e) { | |
| if (e.which === 13) { // Kiểm tra nếu phím nhấn là Enter | |
| sendMessage(); | |
| } | |
| }); | |
| function sendMessage() { | |
| var message = $('.message_input').val().trim(); | |
| if (message !== '') { | |
| $('.chat-input-typing').show(); // Hiển thị "đang nhập..." | |
| $('.send_message').prop('disabled', true); // Vô hiệu hóa nút gửi | |
| var messageId = 'user-message-' + Date.now(); | |
| var messageHtml = ` | |
| <li class="chat-list right" id="${messageId}"> | |
| <div class="conversation-list"> | |
| <div class="user-chat-content"> | |
| <div class="ctext-wrap"> | |
| <div class="ctext-wrap-content" style="background-color: #2E8B57;"> | |
| <p class="mb-0 ctext-content">${message}</p> | |
| </div> | |
| </div> | |
| <div class="conversation-name"> | |
| <small class="text-muted time">${new Date().toLocaleTimeString()}</small> | |
| <span class="text-success check-message-icon"> | |
| <i class="fa-solid fa-check-double"></i> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </li>`; | |
| $('#users-conversation').append(messageHtml); | |
| $('#users-conversation').scrollTop($('#users-conversation')[0].scrollHeight); | |
| $('.message_input').val(''); | |
| sendMessageToBackend(message); | |
| } | |
| } | |
| function sendMessageToBackend(message) { | |
| $.ajax({ | |
| url: 'http://127.0.0.1:5000/api/query', | |
| type: 'POST', | |
| contentType: 'application/json', | |
| data: JSON.stringify({ question: message }), | |
| success: function (response) { | |
| $('.chat-input-typing').hide(); // Ẩn chỉ báo đang nhập | |
| scrollToBottom(); | |
| $('.send_message').prop('disabled', false); // Kích hoạt lại nút gửi | |
| var responseId = 'assistant-response-' + Date.now(); | |
| var formattedResponse = formatResponse(response.final_response); | |
| // Format top matching documents (bản án) | |
| var bananDocumentsHtml = (response.top_banan_documents || []).map(doc => ` | |
| <div class="ctext-wrap-content col-sm-6"> | |
| <div class="card"> | |
| <h6 class="card-header"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://www.pngmart.com/files/23/Pdf-Icon-PNG-Image.png" alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.source}</a></h5> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.distance == null ? 'Không có giá trị tham khảo' : doc.distance}</a></h5> | |
| </div> | |
| </div> | |
| </h6> | |
| <div class="card-body"> | |
| <p class="card-text">${doc.text.substring(0, 200)}...</p> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| // Format top matching án lệ documents | |
| var anleDocumentsHtml = (response.top_anle_documents || []).map(doc => ` | |
| <div class="ctext-wrap-content col-sm-6"> | |
| <div class="card"> | |
| <h6 class="card-header"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://www.pngmart.com/files/23/Pdf-Icon-PNG-Image.png" alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.source}</a></h5> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.distance == null ? 'Không có giá trị tham khảo' : doc.distance}</a></h5> | |
| </div> | |
| </div> | |
| </h6> | |
| <div class="card-body"> | |
| <p class="card-text">${doc.text.substring(0, 200)}...</p> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| // Format related questions with clickable links | |
| var relatedQuestionsHtml = (response.related_questions || []).map((q, index) => { | |
| // Escape quotes in question text to prevent JS syntax errors | |
| const escapedQuestion = q.question.replace(/'/g, "\\'").replace(/"/g, "\\\""); | |
| return ` | |
| <div class="ctext-wrap-content col-md-12"> | |
| <div class="card mb-2"> | |
| <div class="card-body"> | |
| <p class="card-text mb-0"> | |
| <strong>${index + 1}. </strong> | |
| <a href="#" onclick="sendMessageToBackend('${escapedQuestion}'); return false;" class="text-primary">${q.question}</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }).join(''); | |
| // Kết hợp cả bản án, án lệ, và câu hỏi liên quan | |
| var documentsHtml = bananDocumentsHtml + anleDocumentsHtml; | |
| var relatedQuestionsSection = relatedQuestionsHtml ? ` | |
| <div class="ctext-wrap"> | |
| <div class="row" id="related-questions-${responseId}" style="display: none; width: 100%; padding-left: 5px"> | |
| <h6 class="text-muted mb-2">Câu hỏi liên quan</h6> | |
| ${relatedQuestionsHtml} | |
| </div> | |
| </div> | |
| ` : ''; | |
| var responseHtml = ` | |
| <li class="chat-list left" id="${responseId}"> | |
| <div class="conversation-list"> | |
| <div class="chat-avatar"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%E1%BA%BFt_k%E1%BA%BF_ch%C6%B0a_c%C3%B3_t%C3%AAn_4_jy6kt6.png" alt=""> | |
| </div> | |
| <div class="user-chat-content" style="width: 100%"> | |
| <div class="ctext-wrap"> | |
| <div class="ctext-wrap-content"> | |
| <p class="mb-0 ctext-content" id="response-text-${responseId}"></p> | |
| </div> | |
| </div> | |
| <div class="conversation-name"> | |
| <small class="text-muted time" id="trich-dan-${responseId}" style="display: none;">Nguồn tham khảo</small> | |
| <span class="text-success check-message-icon"> | |
| <i class="bx bx-check-double"></i> | |
| </span> | |
| </div> | |
| <div class="ctext-wrap"> | |
| <div class="row" id="response-text-document-${responseId}" style="display: none; width: 100%; padding-left: 5px"> | |
| ${documentsHtml} | |
| </div> | |
| </div> | |
| ${relatedQuestionsSection} | |
| <div class="conversation-name"> | |
| <small class="text-muted time">${new Date().toLocaleTimeString()}</small> | |
| <span class="text-success check-message-icon"> | |
| <i class="fa-solid fa-check-double"></i> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </li>`; | |
| $('#users-conversation').append(responseHtml); | |
| $('#users-conversation').scrollTop($('#users-conversation')[0].scrollHeight); | |
| // Gõ văn bản phản hồi chính | |
| typeResponse(formattedResponse, `response-text-${responseId}`, () => { | |
| // Sau khi gõ xong phản hồi, hiển thị Nguồn tham khảo, tài liệu, và câu hỏi liên quan | |
| $(`#trich-dan-${responseId}`).css('display', 'block'); | |
| $(`#response-text-document-${responseId}`).fadeIn(400); | |
| $(`#related-questions-${responseId}`).fadeIn(400); | |
| }); | |
| }, | |
| error: function () { | |
| $('.chat-input-typing').hide(); | |
| scrollToBottom(); | |
| $('.send_message').prop('disabled', false); | |
| alert('Lỗi khi gửi tin nhắn, vui lòng thử lại.'); | |
| } | |
| }); | |
| } | |
| // function sendMessageToBackend(message) { | |
| // $.ajax({ | |
| // url: 'http://127.0.0.1:5000/api/query', | |
| // type: 'POST', | |
| // contentType: 'application/json', | |
| // data: JSON.stringify({ question: message }), | |
| // success: function (response) { | |
| // $('.chat-input-typing').hide(); // Ẩn chỉ báo đang nhập | |
| // scrollToBottom(); | |
| // $('.send_message').prop('disabled', false); // Kích hoạt lại nút gửi | |
| // var responseId = 'assistant-response-' + Date.now(); | |
| // var formattedResponse = formatResponse(response.final_response); | |
| // // Format top matching documents (bản án) | |
| // var bananDocumentsHtml = (response.top_banan_documents || []).map(doc => ` | |
| // <div class="ctext-wrap-content col-sm-6"> | |
| // <div class="card"> | |
| // <h6 class="card-header"> | |
| // <div class="d-flex align-items-center"> | |
| // <div class="flex-shrink-0 ms-1 me-3"> | |
| // <img src="https://www.pngmart.com/files/23/Pdf-Icon-PNG-Image.png" alt="" class="avatar-xs"> | |
| // </div> | |
| // <div class="flex-grow-1 overflow-hidden"> | |
| // <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.source}</a></h5> | |
| // <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0"> ${doc.distance == null ? 'Không có giá trị tham khảo' : doc.distance}</a></h5> | |
| // </div> | |
| // </div> | |
| // </h6> | |
| // <div class="card-body"> | |
| // <p class="card-text">${doc.text.substring(0, 200)}...</p> | |
| // </div> | |
| // </div> | |
| // </div> | |
| // `).join(''); | |
| // // Format top matching án lệ documents | |
| // var anleDocumentsHtml = (response.top_anle_documents || []).map(doc => ` | |
| // <div class="ctext-wrap-content col-sm-6"> | |
| // <div class="card"> | |
| // <h6 class="card-header"> | |
| // <div class="d-flex align-items-center"> | |
| // <div class="flex-shrink-0 ms-1 me-3"> | |
| // <img src="https://www.pngmart.com/files/23/Pdf-Icon-PNG-Image.png" alt="" class="avatar-xs"> | |
| // </div> | |
| // <div class="flex-grow-1 overflow-hidden"> | |
| // <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.source}</a></h5> | |
| // <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0"> ${doc.distance == null ? 'Không có giá trị tham khảo' : doc.distance}</a></h5> | |
| // </div> | |
| // </div> | |
| // </h6> | |
| // <div class="card-body"> | |
| // <p class="card-text">${doc.text.substring(0, 200)}...</p> | |
| // </div> | |
| // </div> | |
| // </div> | |
| // `).join(''); | |
| // // Kết hợp cả bản án và án lệ | |
| // var documentsHtml = bananDocumentsHtml + anleDocumentsHtml; | |
| // var responseHtml = ` | |
| // <li class="chat-list left" id="${responseId}"> | |
| // <div class="conversation-list"> | |
| // <div class="chat-avatar"> | |
| // <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%E1%BA%BFt_k%E1%BA%BF_ch%C6%B0a_c%C3%B3_t%C3%AAn_4_jy6kt6.png" alt=""> | |
| // </div> | |
| // <div class="user-chat-content" style="width: 100%"> | |
| // <div class="ctext-wrap"> | |
| // <div class="ctext-wrap-content"> | |
| // <p class="mb-0 ctext-content" id="response-text-${responseId}"></p> | |
| // </div> | |
| // </div> | |
| // <div class="conversation-name"> | |
| // <small class="text-muted time" id="trich-dan-${responseId}" style="display: none;">Nguồn tham khảo</small> | |
| // <span class="text-success check-message-icon"> | |
| // <i class="bx bx-check-double"></i> | |
| // </span> | |
| // </div> | |
| // <div class="ctext-wrap"> | |
| // <div class="row" id="response-text-document-${responseId}" style="display: none; width: 100%; padding-left: 5px"> | |
| // ${documentsHtml} | |
| // </div> | |
| // </div> | |
| // <div class="conversation-name"> | |
| // <small class="text-muted time">${new Date().toLocaleTimeString()}</small> | |
| // <span class="text-success check-message-icon"> | |
| // <i class="fa-solid fa-check-double"></i> | |
| // </span> | |
| // </div> | |
| // </div> | |
| // </div> | |
| // </li>`; | |
| // $('#users-conversation').append(responseHtml); | |
| // $('#users-conversation').scrollTop($('#users-conversation')[0].scrollHeight); | |
| // // Gõ văn bản phản hồi chính | |
| // typeResponse(formattedResponse, `response-text-${responseId}`, () => { | |
| // // Sau khi gõ xong phản hồi, hiển thị Nguồn tham khảo và tài liệu | |
| // $(`#trich-dan-${responseId}`).css('display', 'block'); | |
| // $(`#response-text-document-${responseId}`).fadeIn(400); | |
| // }); | |
| // }, | |
| // error: function () { | |
| // $('.chat-input-typing').hide(); | |
| // scrollToBottom(); | |
| // $('.send_message').prop('disabled', false); | |
| // alert('Lỗi khi gửi tin nhắn, vui lòng thử lại.'); | |
| // } | |
| // }); | |
| // } | |
| // // function formatResponse(responseText) { | |
| // var formattedResponse = responseText | |
| // .replace(/\n\n/g, '<br>') | |
| // .replace(/\-/g, '<b>-</b>') | |
| // .replace(/\n/g, '<br>') | |
| // .replace(/```text/g, '') | |
| // .replace(/```/g, '') | |
| // .replace(/_/g, '') | |
| // .replace(/([A-Z]\.\s)/g, (match) => `<b>${match}</b>`) | |
| // .replace(/(\d+\.\s)/g, (match) => `<b>${match}</b>`) // Xử lý số thứ tự | |
| // .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') // Chuyển **text** thành in đậm | |
| // .replace(/\*(.*?)\*/g, '<i>$1</i>'); // Chuyển *text* thành nghiêng | |
| // return formattedResponse | |
| // .replace(/I\. Giới thiệu:/g, '<br><b>I. Giới thiệu:</b>') | |
| // .replace(/II\. Nội dung án lệ tìm được:/g, '<br><b>II. Nội dung án lệ tìm được:</b>') | |
| // .replace(/III\. Phân tích tình huống:/g, '<br><b>III. Phân tích tình huống:</b>') | |
| // .replace(/IV\. Lập luận pháp lý:/g, '<br><b>IV. Lập luận pháp lý:</b>') | |
| // .replace(/V\. Kết luận:/g, '<br><b>V. Kết luận:</b>'); | |
| // } | |
| // function sendMessageToBackend(message) { | |
| // $.ajax({ | |
| // url: 'http://127.0.0.1:5000/api/query', | |
| // type: 'POST', | |
| // contentType: 'application/json', | |
| // data: JSON.stringify({ question: message }), | |
| // success: function (response) { | |
| // $('.chat-input-typing').hide(); // Ẩn chỉ báo đang nhập | |
| // scrollToBottom(); | |
| // $('.send_message').prop('disabled', false); // Kích hoạt lại nút gửi | |
| // var responseId = 'assistant-response-' + Date.now(); | |
| // var formattedResponse = formatResponse(response.final_response); | |
| // // Format top matching documents (bản án) | |
| // var bananDocumentsHtml = (response.top_banan_documents || []).map(doc => ` | |
| // <div class="ctext-wrap-content col-sm-6"> | |
| // <div class="card"> | |
| // <h6 class="card-header"> | |
| // <div class="d-flex align-items-center"> | |
| // <div class="flex-shrink-0 ms-1 me-3"> | |
| // <img src="https://www.pngmart.com/files/23/Pdf-Icon-PNG-Image.png" alt="" class="avatar-xs"> | |
| // </div> | |
| // <div class="flex-grow-1 overflow-hidden"> | |
| // <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.source}</a></h5> | |
| // <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.distance == null ? 'Không có giá trị tham khảo' : doc.distance}</a></h5> | |
| // </div> | |
| // </div> | |
| // </h6> | |
| // <div class="card-body"> | |
| // <p class="card-text">${doc.text.substring(0, 200)}...</p> | |
| // </div> | |
| // </div> | |
| // </div> | |
| // `).join(''); | |
| // // Format top matching án lệ documents | |
| // var anleDocumentsHtml = (response.top_anle_documents || []).map(doc => ` | |
| // <div class="ctext-wrap-content col-sm-6"> | |
| // <div class="card"> | |
| // <h6 class="card-header"> | |
| // <div class="d-flex align-items-center"> | |
| // <div class="flex-shrink-0 ms-1 me-3"> | |
| // <img src="https://www.pngmart.com/files/23/Pdf-Icon-PNG-Image.png" alt="" class="avatar-xs"> | |
| // </div> | |
| // <div class="flex-grow-1 overflow-hidden"> | |
| // <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.source}</a></h5> | |
| // <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${doc.distance == null ? 'Không có giá trị tham khảo' : doc.distance}</a></h5> | |
| // </div> | |
| // </div> | |
| // </h6> | |
| // <div class="card-body"> | |
| // <p class="card-text">${doc.text.substring(0, 200)}...</p> | |
| // </div> | |
| // </div> | |
| // </div> | |
| // `).join(''); | |
| // // Format related questions | |
| // var relatedQuestionsHtml = (response.related_questions || []).map((q, index) => ` | |
| // <div class="ctext-wrap-content col-sm-12"> | |
| // <div class="card mb-2"> | |
| // <div class="card-body"> | |
| // <p class="card-text mb-0"><strong>${index + 1}. </strong>${q.question}</p> | |
| // </div> | |
| // </div> | |
| // </div> | |
| // `).join(''); | |
| // // Kết hợp cả bản án, án lệ, và câu hỏi liên quan | |
| // var documentsHtml = bananDocumentsHtml + anleDocumentsHtml; | |
| // var relatedQuestionsSection = relatedQuestionsHtml ? ` | |
| // <div class="ctext-wrap"> | |
| // <div class="row" id="related-questions-${responseId}" style="display: none; width: 100%; padding-left: 5px"> | |
| // <h6 class="text-muted mb-2">Câu hỏi liên quan</h6> | |
| // ${relatedQuestionsHtml} | |
| // </div> | |
| // </div> | |
| // ` : ''; | |
| // var responseHtml = ` | |
| // <li class="chat-list left" id="${responseId}"> | |
| // <div class="conversation-list"> | |
| // <div class="chat-avatar"> | |
| // <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%E1%BA%BFt_k%E1%BA%BF_ch%C6%B0a_c%C3%B3_t%C3%AAn_4_jy6kt6.png" alt=""> | |
| // </div> | |
| // <div class="user-chat-content" style="width: 100%"> | |
| // <div class="ctext-wrap"> | |
| // <div class="ctext-wrap-content"> | |
| // <p class="mb-0 ctext-content" id="response-text-${responseId}"></p> | |
| // </div> | |
| // </div> | |
| // <div class="conversation-name"> | |
| // <small class="text-muted time" id="trich-dan-${responseId}" style="display: none;">Nguồn tham khảo</small> | |
| // <span class="text-success check-message-icon"> | |
| // <i class="bx bx-check-double"></i> | |
| // </span> | |
| // </div> | |
| // <div class="ctext-wrap"> | |
| // <div class="row" id="response-text-document-${responseId}" style="display: none; width: 100%; padding-left: 5px"> | |
| // ${documentsHtml} | |
| // </div> | |
| // </div> | |
| // ${relatedQuestionsSection} | |
| // <div class="conversation-name"> | |
| // <small class="text-muted time">${new Date().toLocaleTimeString()}</small> | |
| // <span class="text-success check-message-icon"> | |
| // <i class="fa-solid fa-check-double"></i> | |
| // </span> | |
| // </div> | |
| // </div> | |
| // </div> | |
| // </li>`; | |
| // $('#users-conversation').append(responseHtml); | |
| // $('#users-conversation').scrollTop($('#users-conversation')[0].scrollHeight); | |
| // // Gõ văn bản phản hồi chính | |
| // typeResponse(formattedResponse, `response-text-${responseId}`, () => { | |
| // // Sau khi gõ xong phản hồi, hiển thị Nguồn tham khảo, tài liệu, và câu hỏi liên quan | |
| // $(`#trich-dan-${responseId}`).css('display', 'block'); | |
| // $(`#response-text-document-${responseId}`).fadeIn(400); | |
| // $(`#related-questions-${responseId}`).fadeIn(400); | |
| // }); | |
| // }, | |
| // error: function () { | |
| // $('.chat-input-typing').hide(); | |
| // scrollToBottom(); | |
| // $('.send_message').prop('disabled', false); | |
| // alert('Lỗi khi gửi tin nhắn, vui lòng thử lại.'); | |
| // } | |
| // }); | |
| // } | |
| function formatResponse(responseText) { | |
| var formattedResponse = responseText | |
| .replace(/\n\n/g, '<br>') | |
| .replace(/\n/g, '<br>') | |
| .replace(/```text/g, '') | |
| .replace(/```/g, '') | |
| .replace(/([A-Z]\.\s)/g, (match) => `<b>${match}</b>`) | |
| .replace(/(\d+\.\s)/g, (match) => `<b>${match}</b>`) // Xử lý số thứ tự | |
| .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>') // Chuyển **text** thành in đậm | |
| .replace(/\*(.*?)\*/g, '<i>$1</i>'); // Chuyển *text* thành nghiêng | |
| return formattedResponse | |
| .replace(/I\. Giới thiệu:/g, '<br><b>I. Giới thiệu:</b>') | |
| .replace(/II\. Nội dung án lệ tìm được:/g, '<br><b>II. Nội dung án lệ tìm được:</b>') | |
| .replace(/III\. Phân tích tình huống:/g, '<br><b>III. Phân tích tình huống:</b>') | |
| .replace(/IV\. Lập luận pháp lý:/g, '<br><b>IV. Lập luận pháp lý:</b>') | |
| .replace(/V\. Kết luận:/g, '<br><b>V. Kết luận:</b>'); | |
| } | |
| function typeResponse(response, elementId, callback) { | |
| var index = 0; | |
| var responseElement = $(`#${elementId}`); | |
| var interval = setInterval(function () { | |
| if (index < response.length) { | |
| responseElement.html(response.substring(0, index + 1)); | |
| index++; | |
| } else { | |
| clearInterval(interval); | |
| if (callback) callback(); // Gọi callback sau khi gõ xong | |
| } | |
| }, 5); // Tốc độ gõ | |
| } | |
| }); | |
| function sanitizeAndFormatJudgment(rawText) { | |
| if (typeof rawText !== 'string') return ''; | |
| let text = rawText.trim(); | |
| // 1. Normalize Unicode | |
| text = text.normalize('NFC'); | |
| // 2. Remove unwanted escape characters | |
| text = text.replace(/\\n/g, ''); // Xóa \n thừa | |
| text = text.replace(/\\\"/g, '"'); // Fix dấu \" | |
| text = text.replace(/\\"/g, '"'); // (thêm redundancy safe) | |
| text = text.replace(/\\'/g, "'"); // Fix dấu \' | |
| // 3. Remove any triple backticks or markdown | |
| text = text.replace(/```/g, ''); | |
| // 4. Decode if HTML entities accidentally escaped | |
| const textarea = document.createElement('textarea'); | |
| textarea.innerHTML = text; | |
| text = textarea.value; | |
| // 5. Final check: nếu còn ký tự lạ hoặc markdown thì làm sạch tiếp | |
| text = text.replace(/[*_`~]/g, ''); | |
| return text; | |
| } | |
| // Helper để escape text HTML an toàn | |
| function encodeHtml(str) { | |
| if (typeof str !== 'string') return ''; | |
| return str | |
| .replace(/&/g, "&") | |
| .replace(/</g, "<") | |
| .replace(/>/g, ">") | |
| .replace(/"/g, """) | |
| .replace(/'/g, "'"); | |
| } | |
| async function submitJudgment() { | |
| // Get and sanitize input | |
| const messageInput = document.querySelector('.message_input'); | |
| const message = messageInput.value.trim(); | |
| // Validate input | |
| if (!message) { | |
| showError('Vui lòng nhập thông tin vụ án!'); | |
| return; | |
| } | |
| if (message.length > 20000) { | |
| showError('Thông tin vụ án quá dài! Vui lòng rút ngắn dưới 5000 ký tự.'); | |
| return; | |
| } | |
| // Generate unique response ID | |
| const responseId = `response-${Date.now()}`; | |
| if (message !== '') { | |
| $('.chat-input-typing').show(); // Show typing indicator | |
| $('.send_message').prop('disabled', true); // Disable send button | |
| const messageId = 'user-message-' + Date.now(); | |
| const messageHtml = ` | |
| <li class="chat-list right" id="${messageId}"> | |
| <div class="conversation-list"> | |
| <div class="user-chat-content"> | |
| <div class="ctext-wrap"> | |
| <div class="ctext-wrap-content" style="background-color: #2E8B57;"> | |
| <p class="mb-0 ctext-content">${encodeHtml(message)}</p> | |
| </div> | |
| </div> | |
| <div class="conversation-name"> | |
| <small class="text-muted time">${new Date().toLocaleTimeString()}</small> | |
| <span class="text-success check-message-icon"> | |
| <i class="fa-solid fa-check-double"></i> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </li>`; | |
| $('#users-conversation').append(messageHtml); | |
| $('#users-conversation').scrollTop($('#users-conversation')[0].scrollHeight); | |
| $('.message_input').val(''); | |
| } | |
| // Show loading state | |
| const loadingHtml = ` | |
| <li class="chat-list left" id="loading-${responseId}"> | |
| <div class="conversation-list"> | |
| <div class="chat-avatar"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" alt="avatar"> | |
| </div> | |
| <div class="user-chat-content" style="width: 100%"> | |
| <div class="ctext-wrap"> | |
| <div class="ctext-wrap-content"> | |
| <p class="mb-0 ctext-content">Đang xử lý...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li>`; | |
| const conversation = document.querySelector('#users-conversation'); | |
| conversation.insertAdjacentHTML('beforeend', loadingHtml); | |
| scrollToBottom(conversation); | |
| try { | |
| // Make API call | |
| const apiUrl = window.location.hostname === 'localhost' ? 'http://127.0.0.1:5000/api/draft_judgment' : 'api/draft_judgment'; | |
| const response = await fetch(apiUrl, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ case_details: message }), | |
| }); | |
| // Check if response is JSON | |
| const contentType = response.headers.get('content-type'); | |
| if (!contentType || !contentType.includes('application/json')) { | |
| throw new Error('Phản hồi từ server không phải JSON'); | |
| } | |
| const data = await response.json(); | |
| document.querySelector(`#loading-${responseId}`)?.remove(); | |
| if (response.ok) { | |
| const formattedResponse = data.judgment || 'Không có phản hồi từ hệ thống.'; | |
| const documents = [ | |
| ...(Array.isArray(data.top_banan_documents) ? data.top_banan_documents : []), | |
| ...(Array.isArray(data.top_anle_documents) ? data.top_anle_documents : []), | |
| ]; | |
| // Generate documents HTML | |
| const documentsHtml = documents.map(doc => ` | |
| <div class="ctext-wrap-content col-sm-6"> | |
| <div class="card"> | |
| <h6 class="card-header"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0 ms-1 me-3"> | |
| <img src="https://www.pngmart.com/files/23/Pdf-Icon-PNG-Image.png" alt="" class="avatar-xs"> | |
| </div> | |
| <div class="flex-grow-1 overflow-hidden"> | |
| <h5 class="fs-14 mb-1"><a href="#" class="text-truncate p-0">${encodeHtml(doc.source || 'Tài liệu tham khảo')}</a></h5> | |
| <div class="d-flex align-items-center"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/5519/5519863.png" alt="" class="avatar-xs me-2" style="width: 15px; height: 15px"> | |
| <p class="text-muted text-truncate fs-13 mb-0">${Number(doc.distance).toFixed(2)}</p> | |
| </div> | |
| </div> | |
| </h6> | |
| <div class="card-body"> | |
| <p class="card-text">${encodeHtml(doc.case_summary || 'Không có tóm tắt')}...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| // Sanitize and format the API response | |
| const apiResponse = data.judgment; | |
| const cleanHtml = sanitizeAndFormatJudgment(apiResponse); | |
| // Create chat HTML with cleanHtml in data-html attribute | |
| const responseHtml = ` | |
| <li class="chat-list left" id="${responseId}"> | |
| <div class="conversation-list"> | |
| <div class="chat-avatar"> | |
| <img src="https://res.cloudinary.com/dz9j1pqvk/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/v1737823658/itzone2023/devices/thi%e1%ba%bft_k%e1%ba%bf_ch%c6%b0a_c%c3%b3_t%c3%aan_4_jy6kt6.png" alt="avatar"> | |
| </div> | |
| <div class="user-chat-content" style="width: 100%"> | |
| <div class="ctext-wrap"> | |
| <div class="ctext-wrap-content"> | |
| <p class="mb proportionally-spaced-text ctext-content" id="response-text-${responseId}"></p> | |
| </div> | |
| </div> | |
| <div class="align-self-start d-flex"> | |
| <button type="button" class="btn btn-link text-decoration-none btn-lg waves-effect viewchitiet" id="viewchitiet" data-html="${encodeHtml(cleanHtml)}"> | |
| <i class="fa fa-book align-middle"></i> | |
| </button> | |
| </div> | |
| <div class="conversation-name"> | |
| <small class="text-muted time">${new Date().toLocaleTimeString()}</small> | |
| <span class="text-success check-message-icon"> | |
| <i class="fa-solid fa-check-double"></i> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </li>`; | |
| // Append response to conversation | |
| conversation.insertAdjacentHTML('beforeend', responseHtml); | |
| $('.chat-input-typing').hide(); // Hide typing indicator | |
| $('.send_message').prop('disabled', false); // Enable send button | |
| scrollToBottom(conversation); | |
| // Type the response | |
| typeResponse(cleanHtml, `response-text-${responseId}`, () => { | |
| // Show documents after typing | |
| $(`#response-text-document-${responseId}`).fadeIn(400); | |
| }); | |
| } else { | |
| showError(`Lỗi: ${data.error || 'Không thể xử lý yêu cầu'}`); | |
| } | |
| } catch (error) { | |
| document.querySelector(`#loading-${responseId}`)?.remove(); | |
| showError(`Lỗi kết nối: ${error.message}`); | |
| } | |
| } | |
| // Event listener for viewchitiet button | |
| $(document).on('click', '.viewchitiet', function () { | |
| const cleanHtml = $(this).attr('data-html'); // Get cleanHtml from data attribute | |
| if (!cleanHtml) { | |
| alert('Không có nội dung để hiển thị.'); | |
| return; | |
| } | |
| // Open a new window | |
| const newWindow = window.open('', '_blank'); | |
| if (newWindow) { | |
| // Write the HTML content to the new window | |
| newWindow.document.write(wrapFullHtmlV2(cleanHtml)); | |
| newWindow.document.close(); // Close the document to ensure rendering | |
| } else { | |
| alert('Không thể mở cửa sổ mới. Vui lòng kiểm tra cài đặt trình duyệt.'); | |
| } | |
| }); | |
| // Updated wrapFullHtml function with justified text alignment | |
| function wrapFullHtmlV2(contentHtml) { | |
| return ` | |
| <!DOCTYPE html> | |
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Bản án</title> | |
| <style> | |
| body { | |
| font-family: Times New Roman, serif; | |
| font-size: 12pt; | |
| line-height: 1.5; | |
| max-width: 800px !important; | |
| margin: 0 auto !important; | |
| padding: 20px !important; | |
| } | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 20px; | |
| } | |
| .header-left { | |
| text-align: left; | |
| } | |
| .header-right { | |
| text-align: center; | |
| } | |
| .header p{ | |
| margin: 0; | |
| } | |
| .indented { | |
| margin-left: 20px; | |
| } | |
| .center-bold { | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| .italic { | |
| font-style: italic; | |
| } | |
| / Print-specific styles / | |
| @media print { | |
| @page { | |
| size: A4; | |
| margin: 15mm; / Standard margins for A4 printing / | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-size: 12pt; / Standard for printed documents / | |
| line-height: 1.5; | |
| text-align: justify; | |
| color: #000; | |
| } | |
| .header{ | |
| display: block; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="judgment-body" id="judgmentBody" contenteditable="false"> | |
| ${contentHtml} | |
| </div> | |
| </body> | |
| </html> | |
| `.trim(); | |
| } | |
| // Helper function to show errors | |
| function showError(message) { | |
| const errorHtml = ` | |
| <li class="chat-list left"> | |
| <div class="conversation-list"> | |
| <div class="user-chat-content" style="width: 100%"> | |
| <div class="ctext-wrap"> | |
| <div class="ctext-wrap-content"> | |
| <p class="mb-0 ctext-content text-danger">${encodeHtml(message)}</p> | |
| </div> | |
| </div> | |
| <div class="conversation-name"> | |
| <small class="text-muted time">${new Date().toLocaleTimeString()}</small> | |
| </div> | |
| </div> | |
| </div> | |
| </li>`; | |
| const conversation = document.querySelector('#users-conversation'); | |
| conversation.insertAdjacentHTML('beforeend', errorHtml); | |
| scrollToBottom(conversation); | |
| } | |
| function encodeHtml(str) { | |
| // Return empty string for non-string inputs or null/undefined | |
| if (str == null || typeof str !== 'string') { | |
| return ''; | |
| } | |
| // Map of characters to their HTML entities | |
| const htmlEntities = { | |
| '&': '&', | |
| '<': '<', | |
| '>': '>', | |
| '"': '"', | |
| 'html': '', | |
| "'": ''' | |
| }; | |
| // Replace special characters with their HTML entities | |
| return str.replace(/[&<>"']/g, char => htmlEntities[char]); | |
| } | |
| // Optimized typing function for plain text, or render HTML instantly | |
| function typeResponse(content, elementId, callback = () => { }) { | |
| const element = document.getElementById(elementId); | |
| if (!element) { | |
| callback(); | |
| return; | |
| } | |
| // Nếu nội dung đã có thẻ HTML (<p>, <h2>...) thì chèn thẳng | |
| if (/<[a-z][\s\S]*>/i.test(content)) { | |
| element.innerHTML = content; | |
| callback(); | |
| } else { | |
| // Nếu chỉ là plain text thì typing từng ký tự | |
| let i = 0; | |
| const chunkSize = 10; | |
| function type() { | |
| if (i < content.length) { | |
| const end = Math.min(i + chunkSize, content.length); | |
| element.innerHTML += content.slice(i, end); | |
| i = end; | |
| requestAnimationFrame(type); | |
| } else { | |
| callback(); | |
| } | |
| } | |
| type(); | |
| } | |
| } | |
| // Helper function to scroll to bottom conditionally | |
| function scrollToBottom(conversation) { | |
| const isNearBottom = conversation.scrollHeight - conversation.scrollTop <= conversation.clientHeight + 100; | |
| if (isNearBottom) { | |
| conversation.scrollTop = conversation.scrollHeight; | |
| } | |
| } | |
| </script> --> | |
| <script> | |
| </script> | |
| </body> | |
| </html> |