767 lines
30 KiB
Vue
767 lines
30 KiB
Vue
|
<script>
|
||
|
|
import simplebar from "simplebar-vue";
|
||
|
|
|
||
|
|
import Layout from "../../layouts/main";
|
||
|
|
import PageHeader from "../../components/page-header";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Layout,
|
||
|
|
PageHeader,
|
||
|
|
simplebar,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "Chat",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
text: "Skote",
|
||
|
|
href: "javascript:void(0)",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Chat",
|
||
|
|
active: true,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
var container = document.querySelector(
|
||
|
|
"#my-element .simplebar-content-wrapper"
|
||
|
|
);
|
||
|
|
container.scrollTo({ top: 500, behavior: "smooth" });
|
||
|
|
|
||
|
|
var container2 = document.querySelector(
|
||
|
|
"#containerElement .simplebar-content-wrapper"
|
||
|
|
);
|
||
|
|
container2.scrollTo({ top: 500, behavior: "smooth" });
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
<div class="d-lg-flex">
|
||
|
|
<div class="chat-leftsidebar me-lg-4">
|
||
|
|
<div class="">
|
||
|
|
<div class="py-4 border-bottom">
|
||
|
|
<div class="media">
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<img
|
||
|
|
src="/images/users/avatar-1.jpg"
|
||
|
|
class="avatar-xs rounded-circle"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-15 mt-0 mb-1">Henry Wells</h5>
|
||
|
|
<p class="text-muted mb-0">
|
||
|
|
<i class="mdi mdi-circle text-success align-middle me-1"></i>
|
||
|
|
Active
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<b-dropdown
|
||
|
|
menu-class="dropdown-menu-end"
|
||
|
|
class="chat-noti-dropdown active"
|
||
|
|
right
|
||
|
|
variant="white"
|
||
|
|
>
|
||
|
|
<template v-slot:button-content>
|
||
|
|
<i class="bx bx-bell bx-tada"></i>
|
||
|
|
</template>
|
||
|
|
<b-dropdown-item>Action</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Another action</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Something else here</b-dropdown-item>
|
||
|
|
</b-dropdown>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="search-box chat-search-box py-4">
|
||
|
|
<div class="position-relative">
|
||
|
|
<input type="text" class="form-control" placeholder="Search..." />
|
||
|
|
<i class="bx bx-search-alt search-icon"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chat-leftsidebar-nav">
|
||
|
|
<b-tabs pills fill content-class="py-4">
|
||
|
|
<b-tab title="Tab 1" active>
|
||
|
|
<template v-slot:title>
|
||
|
|
<i class="bx bx-chat font-size-20 d-sm-none"></i>
|
||
|
|
<span class="d-none d-sm-block">Chat</span>
|
||
|
|
</template>
|
||
|
|
<b-card-text>
|
||
|
|
<div>
|
||
|
|
<h5 class="font-size-14 mb-3">Recent</h5>
|
||
|
|
<simplebar style="max-height: 410px" id="my-element">
|
||
|
|
<ul class="list-unstyled chat-list">
|
||
|
|
<li class="active">
|
||
|
|
<a href="#">
|
||
|
|
<div class="media">
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<i class="mdi mdi-circle font-size-10"></i>
|
||
|
|
</div>
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<img
|
||
|
|
src="/images/users/avatar-2.jpg"
|
||
|
|
class="rounded-circle avatar-xs"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="text-truncate font-size-14 mb-1">
|
||
|
|
Steven Franklin
|
||
|
|
</h5>
|
||
|
|
<p class="text-truncate mb-0">
|
||
|
|
Hey! there I'm available
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="font-size-11">05 min</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media">
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<i
|
||
|
|
class="mdi mdi-circle text-success font-size-10"
|
||
|
|
></i>
|
||
|
|
</div>
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<img
|
||
|
|
src="/images/users/avatar-3.jpg"
|
||
|
|
class="rounded-circle avatar-xs"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="text-truncate font-size-14 mb-1">
|
||
|
|
Adam Miller
|
||
|
|
</h5>
|
||
|
|
<p class="text-truncate mb-0">
|
||
|
|
I've finished it! See you so
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="font-size-11">12 min</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media">
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<i
|
||
|
|
class="mdi mdi-circle text-success font-size-10"
|
||
|
|
></i>
|
||
|
|
</div>
|
||
|
|
<div class="avatar-xs align-self-center me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>
|
||
|
|
K
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="text-truncate font-size-14 mb-1">
|
||
|
|
Keith Gonzales
|
||
|
|
</h5>
|
||
|
|
<p class="text-truncate mb-0">
|
||
|
|
This theme is awesome!
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="font-size-11">24 min</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media">
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<i
|
||
|
|
class="mdi mdi-circle text-warning font-size-10"
|
||
|
|
></i>
|
||
|
|
</div>
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<img
|
||
|
|
src="/images/users/avatar-4.jpg"
|
||
|
|
class="rounded-circle avatar-xs"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="text-truncate font-size-14 mb-1">
|
||
|
|
Jose Vickery
|
||
|
|
</h5>
|
||
|
|
<p class="text-truncate mb-0">Nice to meet you</p>
|
||
|
|
</div>
|
||
|
|
<div class="font-size-11">1 hr</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media">
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<i class="mdi mdi-circle font-size-10"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="avatar-xs align-self-center me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>
|
||
|
|
M
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="text-truncate font-size-14 mb-1">
|
||
|
|
Mitchel Givens
|
||
|
|
</h5>
|
||
|
|
<p class="text-truncate mb-0">
|
||
|
|
Hey! there I'm available
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="font-size-11">3 hrs</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media">
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<i
|
||
|
|
class="mdi mdi-circle text-success font-size-10"
|
||
|
|
></i>
|
||
|
|
</div>
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<img
|
||
|
|
src="/images/users/avatar-6.jpg"
|
||
|
|
class="rounded-circle avatar-xs"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="text-truncate font-size-14 mb-1">
|
||
|
|
Stephen Hadley
|
||
|
|
</h5>
|
||
|
|
<p class="text-truncate mb-0">
|
||
|
|
I've finished it! See you so
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="font-size-11">5hrs</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media">
|
||
|
|
<div class="align-self-center me-3">
|
||
|
|
<i
|
||
|
|
class="mdi mdi-circle text-success font-size-10"
|
||
|
|
></i>
|
||
|
|
</div>
|
||
|
|
<div class="avatar-xs align-self-center me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>
|
||
|
|
K
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="media-body overflow-hidden">
|
||
|
|
<h5 class="text-truncate font-size-14 mb-1">
|
||
|
|
Keith Gonzales
|
||
|
|
</h5>
|
||
|
|
<p class="text-truncate mb-0">
|
||
|
|
This theme is awesome!
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="font-size-11">24 min</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</simplebar>
|
||
|
|
</div>
|
||
|
|
</b-card-text>
|
||
|
|
</b-tab>
|
||
|
|
<b-tab>
|
||
|
|
<template v-slot:title>
|
||
|
|
<i class="bx bx-group font-size-20 d-sm-none"></i>
|
||
|
|
<span class="d-none d-sm-block">Groups</span>
|
||
|
|
</template>
|
||
|
|
<b-card-text>
|
||
|
|
<h5 class="font-size-14 mb-3">Groups</h5>
|
||
|
|
<ul class="list-unstyled chat-list">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media align-items-center">
|
||
|
|
<div class="avatar-xs me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>G</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-14 mb-0">General</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media align-items-center">
|
||
|
|
<div class="avatar-xs me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>R</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-14 mb-0">Reporting</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media align-items-center">
|
||
|
|
<div class="avatar-xs me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>M</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-14 mb-0">Meeting</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media align-items-center">
|
||
|
|
<div class="avatar-xs me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>A</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-14 mb-0">Project A</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="media align-items-center">
|
||
|
|
<div class="avatar-xs me-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>B</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="media-body">
|
||
|
|
<h5 class="font-size-14 mb-0">Project B</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</b-card-text>
|
||
|
|
</b-tab>
|
||
|
|
<b-tab>
|
||
|
|
<template v-slot:title>
|
||
|
|
<i class="bx bx-book-content font-size-20 d-sm-none"></i>
|
||
|
|
<span class="d-none d-sm-block">Contacts</span>
|
||
|
|
</template>
|
||
|
|
<b-card-text>
|
||
|
|
<h5 class="font-size-14 mb-3">Contacts</h5>
|
||
|
|
<simplebar style="height: 410px">
|
||
|
|
<div>
|
||
|
|
<div class="avatar-xs mb-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>A</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="list-unstyled chat-list">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<h5 class="font-size-14 mb-0">Adam Miller</h5>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<h5 class="font-size-14 mb-0">Alfonso Fisher</h5>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-4">
|
||
|
|
<div class="avatar-xs mb-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>B</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="list-unstyled chat-list">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<h5 class="font-size-14 mb-0">Bonnie Harney</h5>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-4">
|
||
|
|
<div class="avatar-xs mb-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>C</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="list-unstyled chat-list">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<h5 class="font-size-14 mb-0">Charles Brown</h5>
|
||
|
|
</a>
|
||
|
|
<a href="#">
|
||
|
|
<h5 class="font-size-14 mb-0">Carmella Jones</h5>
|
||
|
|
</a>
|
||
|
|
<a href="#">
|
||
|
|
<h5 class="font-size-14 mb-0">Carrie Williams</h5>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-4">
|
||
|
|
<div class="avatar-xs mb-3">
|
||
|
|
<span
|
||
|
|
class="avatar-title rounded-circle bg-soft bg-primary text-primary"
|
||
|
|
>D</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="list-unstyled chat-list">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<h5 class="font-size-14 mb-0">Dolores Minter</h5>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</simplebar>
|
||
|
|
</b-card-text>
|
||
|
|
</b-tab>
|
||
|
|
</b-tabs>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w-100 user-chat">
|
||
|
|
<div class="card">
|
||
|
|
<div class="p-4 border-bottom">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4 col-9">
|
||
|
|
<h5 class="font-size-15 mb-1">Steven Franklin</h5>
|
||
|
|
<p class="text-muted mb-0">
|
||
|
|
<i class="mdi mdi-circle text-success align-middle me-1"></i>
|
||
|
|
Active now
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-8 col-3">
|
||
|
|
<ul class="list-inline user-chat-nav text-end mb-0">
|
||
|
|
<li class="list-inline-item d-none d-sm-inline-block">
|
||
|
|
<b-dropdown
|
||
|
|
menu-class="dropdown-menu-md dropdown-menu-end"
|
||
|
|
variant="white"
|
||
|
|
right
|
||
|
|
toggle-class="nav-btn"
|
||
|
|
>
|
||
|
|
<template v-slot:button-content>
|
||
|
|
<i class="bx bx-search-alt-2"></i>
|
||
|
|
</template>
|
||
|
|
<form class="p-3">
|
||
|
|
<div class="form-group m-0">
|
||
|
|
<div class="input-group">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
class="form-control"
|
||
|
|
placeholder="Search ..."
|
||
|
|
aria-label="Recipient's username"
|
||
|
|
/>
|
||
|
|
<div class="input-group-append">
|
||
|
|
<button class="btn btn-primary" type="submit">
|
||
|
|
<i class="mdi mdi-magnify"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</b-dropdown>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item d-none d-sm-inline-block">
|
||
|
|
<b-dropdown
|
||
|
|
toggle-class="nav-btn"
|
||
|
|
menu-class="dropdown-menu-end"
|
||
|
|
right
|
||
|
|
variant="white"
|
||
|
|
>
|
||
|
|
<template v-slot:button-content>
|
||
|
|
<i class="bx bx-cog"></i>
|
||
|
|
</template>
|
||
|
|
<b-dropdown-item>View Profile</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Clear chat</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Muted</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Delete</b-dropdown-item>
|
||
|
|
</b-dropdown>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<b-dropdown
|
||
|
|
toggle-class="nav-btn"
|
||
|
|
menu-class="dropdown-menu-end"
|
||
|
|
right
|
||
|
|
variant="white"
|
||
|
|
>
|
||
|
|
<template v-slot:button-content>
|
||
|
|
<i class="bx bx-dots-horizontal-rounded"></i>
|
||
|
|
</template>
|
||
|
|
<b-dropdown-item>Action</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Another action</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Something else</b-dropdown-item>
|
||
|
|
</b-dropdown>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="chat-conversation p-3">
|
||
|
|
<simplebar
|
||
|
|
style="max-height: 470px"
|
||
|
|
id="containerElement"
|
||
|
|
ref="current"
|
||
|
|
>
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>
|
||
|
|
<div class="chat-day-title">
|
||
|
|
<span class="title">Today</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="conversation-list">
|
||
|
|
<b-dropdown
|
||
|
|
variant="white"
|
||
|
|
menu-class="dropdown-menu-end"
|
||
|
|
>
|
||
|
|
<template v-slot:button-content>
|
||
|
|
<i class="bx bx-dots-vertical-rounded"></i>
|
||
|
|
</template>
|
||
|
|
<b-dropdown-item>Copy</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Save</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Forward</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Delete</b-dropdown-item>
|
||
|
|
</b-dropdown>
|
||
|
|
<div class="ctext-wrap">
|
||
|
|
<div class="conversation-name">Steven Franklin</div>
|
||
|
|
<p>Hello!</p>
|
||
|
|
<p class="chat-time mb-0">
|
||
|
|
<i class="bx bx-time-five align-middle me-1"></i>
|
||
|
|
10:00
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="right">
|
||
|
|
<div class="conversation-list">
|
||
|
|
<b-dropdown
|
||
|
|
variant="white"
|
||
|
|
menu-class="dropdown-menu-end"
|
||
|
|
>
|
||
|
|
<template v-slot:button-content>
|
||
|
|
<i class="bx bx-dots-vertical-rounded"></i>
|
||
|
|
</template>
|
||
|
|
<b-dropdown-item>Copy</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Save</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Forward</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Delete</b-dropdown-item>
|
||
|
|
</b-dropdown>
|
||
|
|
<div class="ctext-wrap">
|
||
|
|
<div class="conversation-name">Henry Wells</div>
|
||
|
|
<p>Hi, How are you? What about our next meeting?</p>
|
||
|
|
|
||
|
|
<p class="chat-time mb-0">
|
||
|
|
<i class="bx bx-time-five align-middle me-1"></i>
|
||
|
|
10:02
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<div class="conversation-list">
|
||
|
|
<b-dropdown
|
||
|
|
variant="white"
|
||
|
|
menu-class="dropdown-menu-end"
|
||
|
|
>
|
||
|
|
<template v-slot:button-content>
|
||
|
|
<i class="bx bx-dots-vertical-rounded"></i>
|
||
|
|
</template>
|
||
|
|
<b-dropdown-item>Copy</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Save</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Forward</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Delete</b-dropdown-item>
|
||
|
|
</b-dropdown>
|
||
|
|
<div class="ctext-wrap">
|
||
|
|
<div class="conversation-name">Steven Franklin</div>
|
||
|
|
<p>Yeah everything is fine</p>
|
||
|
|
|
||
|
|
<p class="chat-time mb-0">
|
||
|
|
<i class="bx bx-time-five align-middle me-1"></i>
|
||
|
|
10:06
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="last-chat">
|
||
|
|
<div class="conversation-list">
|
||
|
|
<b-dropdown
|
||
|
|
variant="white"
|
||
|
|
menu-class="dropdown-menu-end"
|
||
|
|
>
|
||
|
|
<template v-slot:button-content>
|
||
|
|
<i class="bx bx-dots-vertical-rounded"></i>
|
||
|
|
</template>
|
||
|
|
<b-dropdown-item>Copy</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Save</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Forward</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Delete</b-dropdown-item>
|
||
|
|
</b-dropdown>
|
||
|
|
<div class="ctext-wrap">
|
||
|
|
<div class="conversation-name">Steven Franklin</div>
|
||
|
|
<p>& Next meeting tomorrow 10.00AM</p>
|
||
|
|
<p class="chat-time mb-0">
|
||
|
|
<i class="bx bx-time-five align-middle me-1"></i>
|
||
|
|
10:06
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="right">
|
||
|
|
<div class="conversation-list">
|
||
|
|
<b-dropdown
|
||
|
|
variant="white"
|
||
|
|
menu-class="dropdown-menu-end"
|
||
|
|
>
|
||
|
|
<template v-slot:button-content>
|
||
|
|
<i class="bx bx-dots-vertical-rounded"></i>
|
||
|
|
</template>
|
||
|
|
<b-dropdown-item>Copy</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Save</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Forward</b-dropdown-item>
|
||
|
|
<b-dropdown-item>Delete</b-dropdown-item>
|
||
|
|
</b-dropdown>
|
||
|
|
<div class="ctext-wrap">
|
||
|
|
<div class="conversation-name">Henry Wells</div>
|
||
|
|
<p>Wow that's great</p>
|
||
|
|
|
||
|
|
<p class="chat-time mb-0">
|
||
|
|
<i class="bx bx-time-five align-middle me-1"></i>
|
||
|
|
10:07
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</simplebar>
|
||
|
|
</div>
|
||
|
|
<div class="p-3 chat-input-section">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col">
|
||
|
|
<div class="position-relative">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
class="form-control chat-input"
|
||
|
|
placeholder="Enter Message..."
|
||
|
|
/>
|
||
|
|
<div class="chat-input-links">
|
||
|
|
<ul class="list-inline mb-0">
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
data-toggle="tooltip"
|
||
|
|
data-placement="top"
|
||
|
|
title="Emoji"
|
||
|
|
><i class="mdi mdi-emoticon-happy-outline"></i
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
data-toggle="tooltip"
|
||
|
|
data-placement="top"
|
||
|
|
title="Images"
|
||
|
|
><i class="mdi mdi-file-image-outline"></i
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
<li class="list-inline-item">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
data-toggle="tooltip"
|
||
|
|
data-placement="top"
|
||
|
|
title="Add Files"
|
||
|
|
><i class="mdi mdi-file-document-outline"></i
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto">
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="btn btn-primary btn-rounded chat-send w-md waves-effect waves-light"
|
||
|
|
>
|
||
|
|
<span class="d-none d-sm-inline-block me-2">Send</span>
|
||
|
|
<i class="mdi mdi-send"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Layout>
|
||
|
|
</template>
|