Delete conversation from UI.
This commit is contained in:
Haiping Chen
parent
7283259455
commit
403e97bfd3
|
|
@ -48,7 +48,7 @@ PS D:\> npm run dev
|
||||||
|
|
||||||
Access http://localhost:5015/
|
Access http://localhost:5015/
|
||||||
|
|
||||||
<img src="./docs/static/screenshots/agent-builder-agents.png" height="450px"/>
|
<img src="./docs/static/screenshots/agent-builder-conversations.png" height="450px"/>
|
||||||
<img src="./docs/static/screenshots/web-live-chat.png" height="450px"/>
|
<img src="./docs/static/screenshots/web-live-chat.png" height="450px"/>
|
||||||
|
|
||||||
### Core Modules
|
### Core Modules
|
||||||
|
|
|
||||||
BIN
docs/static/screenshots/agent-builder-conversations.png
vendored
Normal file
BIN
docs/static/screenshots/agent-builder-conversations.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
|
|
@ -27,7 +27,7 @@
|
||||||
<Dropdown class="d-none d-lg-inline-block">
|
<Dropdown class="d-none d-lg-inline-block">
|
||||||
<DropdownToggle type="button" color="" tag="a" class="btn header-item noti-icon waves-effect">
|
<DropdownToggle type="button" color="" tag="a" class="btn header-item noti-icon waves-effect">
|
||||||
<i class="bx bx-bell bx-tada" />
|
<i class="bx bx-bell bx-tada" />
|
||||||
<span class="badge bg-danger rounded-pill">3</span>
|
<span class="badge bg-danger rounded-pill">1</span>
|
||||||
</DropdownToggle>
|
</DropdownToggle>
|
||||||
<DropdownMenu class="dropdown-menu-lg" end>
|
<DropdownMenu class="dropdown-menu-lg" end>
|
||||||
<div class="p-3">
|
<div class="p-3">
|
||||||
|
|
@ -59,63 +59,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="javascript: void(0);" class="text-reset notification-item">
|
|
||||||
<div class="d-flex">
|
|
||||||
<img
|
|
||||||
src='/images/users/avatar-3.jpg'
|
|
||||||
class="me-3 rounded-circle avatar-xs"
|
|
||||||
alt="user-pic"
|
|
||||||
/>
|
|
||||||
<div class="flex-grow-1">
|
|
||||||
<h6 class="mb-1">James Lemire</h6>
|
|
||||||
<div class="font-size-12 text-muted">
|
|
||||||
<p class="mb-1" >It will seem like simplified English.</p>
|
|
||||||
<p class="mb-0">
|
|
||||||
<i class="mdi mdi-clock-outline" /> <span >1 hours ago</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
<Link href="javascript: void(0);" class="text-reset notification-item">
|
|
||||||
<div class="d-flex">
|
|
||||||
<div class="avatar-xs me-3">
|
|
||||||
<span class="avatar-title bg-success rounded-circle font-size-16">
|
|
||||||
<i class="bx bx-badge-check" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow-1">
|
|
||||||
<h6 class="mb-1" >Your item is shipped</h6>
|
|
||||||
<div class="font-size-12 text-muted">
|
|
||||||
<p class="mb-1" >If several languages coalesce the grammar</p>
|
|
||||||
<p class="mb-0">
|
|
||||||
<i class="mdi mdi-clock-outline" /> <span >3 min ago</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link href="javascript: void(0);" class="text-reset notification-item">
|
|
||||||
<div class="d-flex">
|
|
||||||
<img
|
|
||||||
src='/images/users/avatar-4.jpg'
|
|
||||||
class="me-3 rounded-circle avatar-xs"
|
|
||||||
alt="user-pic"
|
|
||||||
/>
|
|
||||||
<div class="flex-grow-1">
|
|
||||||
<h6 class="mb-1">Salena Layfield</h6>
|
|
||||||
<div class="font-size-12 text-muted">
|
|
||||||
<p class="mb-1" >
|
|
||||||
As a skeptical Cambridge friend of mine occidental.
|
|
||||||
</p>
|
|
||||||
<p class="mb-0">
|
|
||||||
<i class="mdi mdi-clock-outline" /> <span >1 hours ago</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
|
|
||||||
|
|
@ -28,19 +28,11 @@
|
||||||
><i class="bx bx-user font-size-16 align-middle me-1" />
|
><i class="bx bx-user font-size-16 align-middle me-1" />
|
||||||
<span>Profile</span>
|
<span>Profile</span>
|
||||||
</DropdownItem>
|
</DropdownItem>
|
||||||
<DropdownItem href="#"
|
|
||||||
><i class="bx bx-wallet font-size-16 align-middle me-1" />
|
|
||||||
<span>My Wallet</span>
|
|
||||||
</DropdownItem>
|
|
||||||
<DropdownItem href="#"
|
<DropdownItem href="#"
|
||||||
><span class="badge bg-success float-end">11</span><i
|
><span class="badge bg-success float-end">11</span><i
|
||||||
class="bx bx-wrench font-size-16 align-middle me-1"
|
class="bx bx-wrench font-size-16 align-middle me-1"
|
||||||
/> <span key="t-settings">Settings</span>
|
/> <span key="t-settings">Settings</span>
|
||||||
</DropdownItem>
|
</DropdownItem>
|
||||||
<DropdownItem href="#">
|
|
||||||
<i class="bx bx-lock-open font-size-16 align-middle me-1" />
|
|
||||||
<span key="t-lock-screen">Lock screen</span>
|
|
||||||
</DropdownItem>
|
|
||||||
<DropdownItem divider />
|
<DropdownItem divider />
|
||||||
<DropdownItem href="#" >
|
<DropdownItem href="#" >
|
||||||
<div on:click={logout}>
|
<div on:click={logout}>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ const Navdata = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"icon": "bx bx-conversation",
|
"icon": "bx bx-conversation",
|
||||||
"label": "Conversation",
|
"label": "Conversations",
|
||||||
"link": "/conversation"
|
"link": "/conversation"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -177,7 +177,6 @@
|
||||||
"As a skeptical Cambridge friend of mine occidental": "As a skeptical Cambridge friend of mine occidental",
|
"As a skeptical Cambridge friend of mine occidental": "As a skeptical Cambridge friend of mine occidental",
|
||||||
"1 hours ago": "1 hours ago",
|
"1 hours ago": "1 hours ago",
|
||||||
"View More": "View More",
|
"View More": "View More",
|
||||||
"My Wallet": "My Wallet",
|
|
||||||
"Settings": "Settings",
|
"Settings": "Settings",
|
||||||
"Logout": "Logout"
|
"Logout": "Logout"
|
||||||
}
|
}
|
||||||
|
|
@ -72,13 +72,11 @@ File: Main Css File
|
||||||
|
|
||||||
// Pages
|
// Pages
|
||||||
@import "custom/pages/authentication";
|
@import "custom/pages/authentication";
|
||||||
@import "custom/pages/ecommerce";
|
|
||||||
@import "custom/pages/email";
|
@import "custom/pages/email";
|
||||||
@import "custom/pages/file-manager";
|
@import "custom/pages/file-manager";
|
||||||
@import "custom/pages/chat";
|
@import "custom/pages/chat";
|
||||||
@import "custom/pages/projects";
|
@import "custom/pages/projects";
|
||||||
@import "custom/pages/contacts";
|
@import "custom/pages/contacts";
|
||||||
@import "custom/pages/crypto";
|
|
||||||
@import "custom/pages/coming-soon";
|
@import "custom/pages/coming-soon";
|
||||||
@import "custom/pages/timeline";
|
@import "custom/pages/timeline";
|
||||||
@import "custom/pages/extras-pages";
|
@import "custom/pages/extras-pages";
|
||||||
|
|
|
||||||
|
|
@ -1,355 +0,0 @@
|
||||||
//
|
|
||||||
// crypto.scss
|
|
||||||
//
|
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
|
||||||
.currency-value {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "\F04E1";
|
|
||||||
font-family: "Material Design Icons";
|
|
||||||
font-size: 24px;
|
|
||||||
position: absolute;
|
|
||||||
width: 45px;
|
|
||||||
height: 45px;
|
|
||||||
line-height: 45px;
|
|
||||||
border-radius: 50%;
|
|
||||||
text-align: center;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: $primary;
|
|
||||||
color: $white;
|
|
||||||
z-index: 9;
|
|
||||||
right: -34px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.crypto-buy-sell-nav-content {
|
|
||||||
border: 2px solid var(--#{$prefix}border-color);
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// KYC Application
|
|
||||||
|
|
||||||
.kyc-doc-verification {
|
|
||||||
.dropzone {
|
|
||||||
min-height: 180px;
|
|
||||||
|
|
||||||
.dz-message {
|
|
||||||
margin: 24px 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/******************
|
|
||||||
Ico Landing
|
|
||||||
*******************/
|
|
||||||
|
|
||||||
.section {
|
|
||||||
position: relative;
|
|
||||||
padding-top: 80px;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
|
|
||||||
&.bg-white {
|
|
||||||
background-color: var(--#{$prefix}secondary-bg) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-title {
|
|
||||||
color: var(--#{$prefix}secondary-color);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Navigation
|
|
||||||
|
|
||||||
.navigation {
|
|
||||||
padding: 0 16px;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 999;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
transition: all 0.5s ease-in-out;
|
|
||||||
border-bottom: 1px solid rgba($white, 0.1);
|
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
|
||||||
background-color: var(--#{$prefix}topnav-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-logo {
|
|
||||||
line-height: 70px;
|
|
||||||
transition: all 0.4s;
|
|
||||||
|
|
||||||
.logo-dark {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-light {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.navbar-nav {
|
|
||||||
.nav-item {
|
|
||||||
.nav-link {
|
|
||||||
color: rgba($white, 0.6);
|
|
||||||
line-height: 58px;
|
|
||||||
padding: 6px 16px;
|
|
||||||
font-weight: $font-weight-medium;
|
|
||||||
transition: all 0.4s;
|
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
|
||||||
color: var(--#{$prefix}header-item-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.active {
|
|
||||||
color: rgba($white, 0.9);
|
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
|
||||||
line-height: 28px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-sticky {
|
|
||||||
background-color: var(--#{$prefix}topnav-bg);
|
|
||||||
box-shadow: $box-shadow;
|
|
||||||
|
|
||||||
.navbar-logo {
|
|
||||||
line-height: 60px;
|
|
||||||
|
|
||||||
.logo-dark {
|
|
||||||
display: var(--#{$prefix}display-block);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-light {
|
|
||||||
display: var(--#{$prefix}display-none);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav {
|
|
||||||
.nav-item {
|
|
||||||
.nav-link {
|
|
||||||
line-height: 48px;
|
|
||||||
color: var(--#{$prefix}header-item-color);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.active {
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-overlay {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
opacity: 0.7;
|
|
||||||
background-color: $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section {
|
|
||||||
padding-top: 220px;
|
|
||||||
padding-bottom: 190px;
|
|
||||||
|
|
||||||
&.bg-ico-hero {
|
|
||||||
background-image: url("../images/crypto/bg-ico-hero.jpg");
|
|
||||||
background-size: cover;
|
|
||||||
background-position: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
padding-top: 140px;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-title {
|
|
||||||
font-size: 42px;
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ico-countdown {
|
|
||||||
font-size: 22px;
|
|
||||||
margin-right: -12px;
|
|
||||||
margin-left: -12px;
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.coming-box {
|
|
||||||
margin-right: 12px;
|
|
||||||
margin-left: 12px;
|
|
||||||
border: 1px solid var(--#{$prefix}border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 8px;
|
|
||||||
background-color: var(--#{$prefix}secondary-bg);
|
|
||||||
|
|
||||||
@media (max-width: 575.98px) {
|
|
||||||
display: inline-block;
|
|
||||||
width: 40%;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
background-color: var(--#{$prefix}light);
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 4px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.softcap-progress {
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-label {
|
|
||||||
position: relative;
|
|
||||||
text-align: right;
|
|
||||||
color: var(--#{$prefix}body-color);
|
|
||||||
bottom: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: $font-weight-medium;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// currency price
|
|
||||||
|
|
||||||
.currency-price {
|
|
||||||
position: relative;
|
|
||||||
bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Clients
|
|
||||||
|
|
||||||
.client-images {
|
|
||||||
img {
|
|
||||||
max-height: 34px;
|
|
||||||
width: auto !important;
|
|
||||||
margin: 12px auto;
|
|
||||||
opacity: 0.7;
|
|
||||||
transition: all 0.4s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Features
|
|
||||||
|
|
||||||
.features-number {
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Team
|
|
||||||
|
|
||||||
.team-box {
|
|
||||||
.team-social-links {
|
|
||||||
a {
|
|
||||||
color: var(--#{$prefix}body-color);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Blog
|
|
||||||
|
|
||||||
.blog-box {
|
|
||||||
.blog-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// landing footer
|
|
||||||
|
|
||||||
.landing-footer {
|
|
||||||
padding: 80px 0 40px;
|
|
||||||
background-color: $sidebar-dark-bg;
|
|
||||||
color: rgba($white, 0.5);
|
|
||||||
|
|
||||||
.footer-list-title {
|
|
||||||
color: rgba($white, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-list-menu {
|
|
||||||
li {
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
color: rgba($white, 0.5);
|
|
||||||
margin-bottom: 14px;
|
|
||||||
transition: all 0.4s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: rgba($white, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-post {
|
|
||||||
|
|
||||||
.post {
|
|
||||||
display: block;
|
|
||||||
color: rgba($white, 0.5);
|
|
||||||
padding: 16px 0px;
|
|
||||||
border-bottom: 1px solid rgba($white, 0.1);
|
|
||||||
|
|
||||||
.post-title {
|
|
||||||
color: rgba($white, 0.8);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-of-type {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
padding-bottom: 0;
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-border {
|
|
||||||
border-color: rgba($white, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,121 +0,0 @@
|
||||||
//
|
|
||||||
// ecommerce.scss
|
|
||||||
//
|
|
||||||
|
|
||||||
// product
|
|
||||||
|
|
||||||
.search-box{
|
|
||||||
.form-control{
|
|
||||||
border-radius: 30px;
|
|
||||||
padding-left: 40px;
|
|
||||||
}
|
|
||||||
.search-icon{
|
|
||||||
font-size: 16px;
|
|
||||||
position: absolute;
|
|
||||||
left: 13px;
|
|
||||||
top: 0;
|
|
||||||
line-height: 38px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-list{
|
|
||||||
li{
|
|
||||||
a{
|
|
||||||
display: block;
|
|
||||||
padding: 4px 0px;
|
|
||||||
color: var(--#{$prefix}body-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-view-nav{
|
|
||||||
&.nav-pills {
|
|
||||||
.nav-item{
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
.nav-link{
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 36px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-ribbon{
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Product Details
|
|
||||||
|
|
||||||
.product-detai-imgs{
|
|
||||||
.nav{
|
|
||||||
.nav-link{
|
|
||||||
margin: 7px 0px;
|
|
||||||
|
|
||||||
&.active{
|
|
||||||
background-color: var(--#{$prefix}tertiary-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-color{
|
|
||||||
a{
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--#{$prefix}body-color);
|
|
||||||
.product-color-item{
|
|
||||||
margin: 7px;
|
|
||||||
}
|
|
||||||
&.active, &:hover{
|
|
||||||
color: $primary;
|
|
||||||
.product-color-item{
|
|
||||||
border-color: $primary !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ecommerce cart
|
|
||||||
|
|
||||||
.visa-card{
|
|
||||||
.visa-logo{
|
|
||||||
line-height: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visa-pattern{
|
|
||||||
position: absolute;
|
|
||||||
font-size: 385px;
|
|
||||||
color: rgba($white, 0.05);
|
|
||||||
line-height: 0.4;
|
|
||||||
right: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// checkout
|
|
||||||
|
|
||||||
.checkout-tabs{
|
|
||||||
.nav-pills{
|
|
||||||
.nav-link{
|
|
||||||
margin-bottom: 24px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: var(--#{$prefix}secondary-bg);
|
|
||||||
box-shadow: $box-shadow;
|
|
||||||
|
|
||||||
&.active{
|
|
||||||
background-color: $primary;
|
|
||||||
}
|
|
||||||
.check-nav-icon{
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { getUserStore } from '$lib/helpers/store.js';
|
import { getUserStore } from '$lib/helpers/store.js';
|
||||||
import { agentListUrl, agentDetailUrl } from '$lib/services/api-endpoints.js';
|
import { endpoints } from '$lib/services/api-endpoints.js';
|
||||||
|
|
||||||
export async function getAgents() {
|
export async function getAgents() {
|
||||||
let user = getUserStore();
|
let user = getUserStore();
|
||||||
|
|
@ -7,7 +7,7 @@ export async function getAgents() {
|
||||||
Authorization: `Bearer ${user.token}`,
|
Authorization: `Bearer ${user.token}`,
|
||||||
};
|
};
|
||||||
|
|
||||||
const response = await fetch(agentListUrl, {
|
const response = await fetch(endpoints.agentListUrl, {
|
||||||
headers: headers
|
headers: headers
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
|
|
@ -28,7 +28,7 @@ export async function getAgent(id) {
|
||||||
Authorization: `Bearer ${user.token}`,
|
Authorization: `Bearer ${user.token}`,
|
||||||
};
|
};
|
||||||
|
|
||||||
const response = await fetch(agentDetailUrl.replace("{id}", id), {
|
const response = await fetch(endpoints.agentDetailUrl.replace("{id}", id), {
|
||||||
headers: headers
|
headers: headers
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,27 @@
|
||||||
const host = 'http://localhost:5500';
|
export const host = 'http://localhost:5500';
|
||||||
|
|
||||||
// user
|
export const endpoints = {
|
||||||
export const tokenUrl = `${host}/token`;
|
// user
|
||||||
export const myInfoUrl = `${host}/user/my`;
|
tokenUrl: `${host}/token`,
|
||||||
export const usrCreationUrl = `${host}/user`;
|
myInfoUrl: `${host}/user/my`,
|
||||||
|
usrCreationUrl: `${host}/user`,
|
||||||
|
|
||||||
|
// plugin
|
||||||
|
pluginListUrl: `${host}/plugins`,
|
||||||
|
|
||||||
|
// agent
|
||||||
|
agentListUrl: `${host}/agents`,
|
||||||
|
agentDetailUrl: `${host}/agent/{id}`,
|
||||||
|
|
||||||
|
// conversation
|
||||||
|
conversationInitUrl: `${host}/conversation/{agentId}`,
|
||||||
|
conversationMessageUrl: `${host}/conversation/{agentId}/{conversationId}`,
|
||||||
|
conversationsUrl: `${host}/conversations`,
|
||||||
|
conversationCountUrl: `${host}/conversations/count`,
|
||||||
|
conversationDeletionUrl: `${host}/conversation/{conversationId}`,
|
||||||
|
dialogsUrl: `${host}/conversation/{conversationId}/dialogs`,
|
||||||
|
|
||||||
|
// chathub
|
||||||
|
chatHubUrl: `${host}/chatHub`,
|
||||||
|
}
|
||||||
|
|
||||||
// plugin
|
|
||||||
export const pluginListUrl = `${host}/plugins`;
|
|
||||||
|
|
||||||
// agent
|
|
||||||
export const agentListUrl = `${host}/agents`;
|
|
||||||
export const agentDetailUrl = `${host}/agent/{id}`;
|
|
||||||
|
|
||||||
// conversation
|
|
||||||
export const conversationInitUrl = `${host}/conversation/{agentId}`
|
|
||||||
export const conversationMessageUrl = `${host}/conversation/{agentId}/{conversationId}`
|
|
||||||
export const conversationsUrl = `${host}/conversations`
|
|
||||||
export const conversationCountUrl = `${host}/conversations/count`
|
|
||||||
export const dialogsUrl = `${host}/conversation/{conversationId}/dialogs`
|
|
||||||
|
|
||||||
// chathub
|
|
||||||
export const chatHubUrl = `${host}/chatHub`;
|
|
||||||
|
|
||||||
// Twilio
|
|
||||||
export const twilioAccessTokenUrl = `${host}/twilio/token`;
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { userStore, getUserStore } from '$lib/helpers/store.js';
|
import { userStore, getUserStore } from '$lib/helpers/store.js';
|
||||||
import { tokenUrl, myInfoUrl, usrCreationUrl } from './api-endpoints.js';
|
import { setAuthorization } from '$lib/helpers/http';
|
||||||
|
import { endpoints } from './api-endpoints.js';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -13,7 +14,7 @@ export async function getToken(email, password, onSucceed) {
|
||||||
Authorization: `Basic ${credentials}`,
|
Authorization: `Basic ${credentials}`,
|
||||||
};
|
};
|
||||||
|
|
||||||
await fetch(tokenUrl, {
|
await fetch(endpoints.tokenUrl, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: headers,
|
headers: headers,
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
|
|
@ -43,7 +44,8 @@ export function setToken(token) {
|
||||||
* @returns {Promise<import('$types').UserModel>}
|
* @returns {Promise<import('$types').UserModel>}
|
||||||
*/
|
*/
|
||||||
export async function myInfo() {
|
export async function myInfo() {
|
||||||
const response = await axios.get(myInfoUrl);
|
setAuthorization();
|
||||||
|
const response = await axios.get(endpoints.myInfoUrl);
|
||||||
return response.data;
|
return response.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -62,7 +64,7 @@ export async function register(firstName, lastName, email, password, onSucceed)
|
||||||
password
|
password
|
||||||
});
|
});
|
||||||
|
|
||||||
await fetch(usrCreationUrl, {
|
await fetch(endpoints.usrCreationUrl, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,4 @@
|
||||||
import {
|
import { endpoints } from './api-endpoints.js';
|
||||||
conversationInitUrl,
|
|
||||||
conversationsUrl,
|
|
||||||
conversationMessageUrl,
|
|
||||||
dialogsUrl,
|
|
||||||
} from './api-endpoints.js';
|
|
||||||
import { setAuthorization } from '$lib/helpers/http';
|
import { setAuthorization } from '$lib/helpers/http';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
|
|
@ -14,7 +9,7 @@ import axios from 'axios';
|
||||||
*/
|
*/
|
||||||
export async function newConversation(agentId) {
|
export async function newConversation(agentId) {
|
||||||
setAuthorization();
|
setAuthorization();
|
||||||
let url = conversationInitUrl.replace("{agentId}", agentId);
|
let url = endpoints.conversationInitUrl.replace("{agentId}", agentId);
|
||||||
const response = await axios.post(url, {});
|
const response = await axios.post(url, {});
|
||||||
return response.data;
|
return response.data;
|
||||||
}
|
}
|
||||||
|
|
@ -25,13 +20,25 @@ export async function newConversation(agentId) {
|
||||||
* @returns {Promise<import('$types').PagedItems<import('$types').ConversationModel>>}
|
* @returns {Promise<import('$types').PagedItems<import('$types').ConversationModel>>}
|
||||||
*/
|
*/
|
||||||
export async function getConversations(filter) {
|
export async function getConversations(filter) {
|
||||||
let url = conversationsUrl;
|
setAuthorization();
|
||||||
|
let url = endpoints.conversationsUrl;
|
||||||
const response = await axios.get(url, {
|
const response = await axios.get(url, {
|
||||||
params: filter
|
params: filter
|
||||||
});
|
});
|
||||||
return response.data;
|
return response.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete conversation
|
||||||
|
* @param {string} conversationId
|
||||||
|
*/
|
||||||
|
export async function deleteConversation(conversationId) {
|
||||||
|
setAuthorization();
|
||||||
|
let url = endpoints.conversationDeletionUrl.replace("{conversationId}", conversationId);
|
||||||
|
const response = await axios.delete(url);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get dialog history
|
* Get dialog history
|
||||||
* @param {string} conversationId
|
* @param {string} conversationId
|
||||||
|
|
@ -39,7 +46,7 @@ export async function getConversations(filter) {
|
||||||
*/
|
*/
|
||||||
export async function GetDialogs(conversationId) {
|
export async function GetDialogs(conversationId) {
|
||||||
setAuthorization();
|
setAuthorization();
|
||||||
let url = dialogsUrl.replace("{conversationId}", conversationId);
|
let url = endpoints.dialogsUrl.replace("{conversationId}", conversationId);
|
||||||
const response = await axios.get(url);
|
const response = await axios.get(url);
|
||||||
return response.data;
|
return response.data;
|
||||||
}
|
}
|
||||||
|
|
@ -51,7 +58,7 @@ export async function GetDialogs(conversationId) {
|
||||||
* @param {string} message The text message sent to CSR
|
* @param {string} message The text message sent to CSR
|
||||||
*/
|
*/
|
||||||
export async function sendMessageToHub(agentId, conversationId, message) {
|
export async function sendMessageToHub(agentId, conversationId, message) {
|
||||||
let url = conversationMessageUrl.replace("{agentId}", agentId)
|
let url = endpoints.conversationMessageUrl.replace("{agentId}", agentId)
|
||||||
.replace("{conversationId}", conversationId);
|
.replace("{conversationId}", conversationId);
|
||||||
const response = await axios.post(url, {
|
const response = await axios.post(url, {
|
||||||
"text": message
|
"text": message
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { HubConnection, HubConnectionBuilder, LogLevel, HubConnectionState } from '@microsoft/signalr';
|
import { HubConnection, HubConnectionBuilder, LogLevel, HubConnectionState } from '@microsoft/signalr';
|
||||||
import { chatHubUrl } from '$lib/services/api-endpoints.js';
|
import { endpoints } from '$lib/services/api-endpoints.js';
|
||||||
import { getUserStore } from '$lib/helpers/store.js';
|
import { getUserStore } from '$lib/helpers/store.js';
|
||||||
|
|
||||||
// create a writable store to store the connection object
|
// create a writable store to store the connection object
|
||||||
|
|
@ -27,7 +27,7 @@ export const signalr = {
|
||||||
// create a new connection object with the hub URL and some options
|
// create a new connection object with the hub URL and some options
|
||||||
let user = getUserStore();
|
let user = getUserStore();
|
||||||
connection = new HubConnectionBuilder()
|
connection = new HubConnectionBuilder()
|
||||||
.withUrl(chatHubUrl + `?conversationId=${conversationId}&access_token=${user.token}`) // the hub URL, change it according to your server
|
.withUrl(endpoints.chatHubUrl + `?conversationId=${conversationId}&access_token=${user.token}`) // the hub URL, change it according to your server
|
||||||
.withAutomaticReconnect() // enable automatic reconnection
|
.withAutomaticReconnect() // enable automatic reconnection
|
||||||
.configureLogging(LogLevel.Information) // configure the logging level
|
.configureLogging(LogLevel.Information) // configure the logging level
|
||||||
.build();
|
.build();
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
const countdown = () => {
|
const countdown = () => {
|
||||||
if(browser){
|
if(browser){
|
||||||
// Set the date we're counting down to
|
// Set the date we're counting down to
|
||||||
var countDownDate = new Date("Dec 30, 2024").getTime();
|
var countDownDate = new Date("Dec 30, 2025").getTime();
|
||||||
|
|
||||||
// Update the count down every 1 second
|
// Update the count down every 1 second
|
||||||
var countDown = setInterval(function () {
|
var countDown = setInterval(function () {
|
||||||
|
|
@ -79,7 +79,7 @@
|
||||||
<Row class="justify-content-center mt-5">
|
<Row class="justify-content-center mt-5">
|
||||||
<Col sm="8">
|
<Col sm="8">
|
||||||
<div class="maintenance-img">
|
<div class="maintenance-img">
|
||||||
<img src="/images/megamenu-img.png" alt="" style="width: 50vw;" />
|
<img src="/images/megamenu-img.png" alt="" style="width: 25vw;" />
|
||||||
</div>
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,185 @@
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardBody,
|
||||||
|
Col,
|
||||||
|
Dropdown,
|
||||||
|
DropdownItem,
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownToggle,
|
||||||
|
Input,
|
||||||
|
Row,
|
||||||
|
Table
|
||||||
|
} from 'sveltestrap';
|
||||||
|
import Breadcrumb from '$lib/common/Breadcrumb.svelte';
|
||||||
|
import HeadTitle from '$lib/common/HeadTitle.svelte';
|
||||||
|
import Pagination from '$lib/common/Pager.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import Link from 'svelte-link';
|
||||||
|
import { getConversations, deleteConversation } from '$lib/services/conversation-service.js';
|
||||||
|
import { format } from '$lib/helpers/datetime';
|
||||||
|
|
||||||
|
/** @type {import('$types').PagedItems<import('$types').ConversationModel>} */
|
||||||
|
let conversations = {count: 0, items: []};
|
||||||
|
|
||||||
|
/** @type {import('$types').ConversationFilter} */
|
||||||
|
let filter = {
|
||||||
|
pager: { page: 0, size: 20, count: 0 },
|
||||||
|
agentId: '01fcc3e5-9af7-49e6-ad7a-a760bd12dc4a',
|
||||||
|
channel: null,
|
||||||
|
status: null
|
||||||
|
};
|
||||||
|
|
||||||
|
/** @type {import('$types').Pagination} */
|
||||||
|
let pager = filter.pager;
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
await getConversationList();
|
||||||
|
});
|
||||||
|
|
||||||
|
function refreshPager() {
|
||||||
|
pager = {
|
||||||
|
page: filter.pager.page,
|
||||||
|
size: filter.pager.size,
|
||||||
|
count: conversations.count
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getConversationList() {
|
||||||
|
conversations = await getConversations(filter);
|
||||||
|
|
||||||
|
refreshPager();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {string} conversationId */
|
||||||
|
async function handleConversationView(conversationId) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {string} conversationId */
|
||||||
|
async function handleConversationDeletion(conversationId) {
|
||||||
|
await deleteConversation(conversationId);
|
||||||
|
conversations.count--;
|
||||||
|
conversations.items = conversations.items.filter(x => x.id != conversationId);
|
||||||
|
refreshPager();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<HeadTitle title="Conversation List" />
|
||||||
|
|
||||||
|
<Breadcrumb title="Communication" pagetitle="Conversations" />
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col lg="12">
|
||||||
|
<Card>
|
||||||
|
<CardBody class="border-bottom">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<h5 class="mb-0 card-title flex-grow-1">Conversation List</h5>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<Link href="#" class="btn btn-light" on:click={getConversationList}><i class="mdi mdi-magnify" /></Link>
|
||||||
|
<Dropdown class="dropdown d-inline-block">
|
||||||
|
<DropdownToggle type="menu" class="btn" id="dropdownMenuButton1">
|
||||||
|
<i class="mdi mdi-dots-vertical" /></DropdownToggle
|
||||||
|
>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem href="#">Action</DropdownItem>
|
||||||
|
<DropdownItem href="#">Another action</DropdownItem>
|
||||||
|
<DropdownItem href="#">Something else here</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
<CardBody class="border-bottom">
|
||||||
|
<Row class="g-3">
|
||||||
|
<Col xxl="4" lg="6">
|
||||||
|
<Input
|
||||||
|
type="search"
|
||||||
|
class="form-control"
|
||||||
|
id="searchTableList"
|
||||||
|
placeholder="Search for ..."
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col xxl="2" lg="6">
|
||||||
|
<select class="form-select" id="idStatus" bind:value={filter.status}>
|
||||||
|
<option value={null}>Status</option>
|
||||||
|
<option value="open">Active</option>
|
||||||
|
<option value="closed">Completed</option>
|
||||||
|
</select>
|
||||||
|
</Col>
|
||||||
|
<Col xxl="2" lg="4">
|
||||||
|
<select class="form-select" id="idType" bind:value={filter.channel}>
|
||||||
|
<option value={null}>Select Channel</option>
|
||||||
|
<option value="webchat">Live Chat</option>
|
||||||
|
<option value="phone">Phone</option>
|
||||||
|
<option value="email">Email</option>
|
||||||
|
</select>
|
||||||
|
</Col>
|
||||||
|
<Col xxl="2" lg="4">
|
||||||
|
<Input type="date" class="form-control" />
|
||||||
|
</Col>
|
||||||
|
<Col xxl="2" lg="4">
|
||||||
|
<Button type="button" color="secondary" class="btn-soft-secondary w-100">
|
||||||
|
<i class="mdi mdi-filter-outline align-middle" /> Filter
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</CardBody>
|
||||||
|
<CardBody>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<Table class="align-middle nowrap" bordered>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Title</th>
|
||||||
|
<th scope="col">Customer Name</th>
|
||||||
|
<th scope="col">Role</th>
|
||||||
|
<th scope="col">Channel</th>
|
||||||
|
<th scope="col">Posted Date</th>
|
||||||
|
<th scope="col">Last Date</th>
|
||||||
|
<th scope="col">Status</th>
|
||||||
|
<th scope="col">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each conversations.items as conv}
|
||||||
|
<tr>
|
||||||
|
<td scope="row">
|
||||||
|
<a href={`/communication/${conv.id}`}>{conv.title}</a></td>
|
||||||
|
<td>{conv.user.full_name}</td>
|
||||||
|
<td>{conv.user.role}</td>
|
||||||
|
<td><span class="badge badge-soft-success">{conv.channel}</span></td>
|
||||||
|
<td>{format(conv.created_time, 'time')}</td>
|
||||||
|
<td>{format(conv.updated_time, 'time')}</td>
|
||||||
|
<td><span class="badge bg-success">{conv.status}</span></td>
|
||||||
|
<td>
|
||||||
|
<ul class="list-unstyled hstack gap-1 mb-0">
|
||||||
|
<li data-bs-toggle="tooltip" data-bs-placement="top" title="View Dialog">
|
||||||
|
<Link href="#" on:click={() => handleConversationView(conv.id)} class="btn btn-sm btn-soft-primary">
|
||||||
|
<i class="mdi mdi-eye-outline" />
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
|
||||||
|
<Link href="{`/chat/${conv.agent_id}/${conv.id}`}" target="_blank" class="btn btn-sm btn-soft-info">
|
||||||
|
<i class="mdi mdi-pencil-outline" />
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
|
||||||
|
<Link href="#" on:click={() => handleConversationDeletion(conv.id)} class="btn btn-sm btn-soft-danger">
|
||||||
|
<i class="mdi mdi-delete-outline" />
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Pagination pagination={pager} />
|
||||||
|
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
<img src='/images/logo.png' alt="" height="25" />
|
<img src='/images/logo.png' alt="" height="25" />
|
||||||
</span>
|
</span>
|
||||||
<span class="logo-lg">
|
<span class="logo-lg">
|
||||||
<img src='/images/logo.png' alt="" height="65" />
|
<img src='/images/logo.png' alt="" height="50" />
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
<img src='/images/logo.png' alt="" height="25" />
|
<img src='/images/logo.png' alt="" height="25" />
|
||||||
</span>
|
</span>
|
||||||
<span class="logo-lg">
|
<span class="logo-lg">
|
||||||
<img src='/images/logo.png' alt="" height="65" />
|
<img src='/images/logo.png' alt="" height="50" />
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -84,16 +84,6 @@
|
||||||
<FullScreenDropdown />
|
<FullScreenDropdown />
|
||||||
<NotificationDropdown />
|
<NotificationDropdown />
|
||||||
<ProfileDropdown />
|
<ProfileDropdown />
|
||||||
|
|
||||||
<Dropdown class="d-inline-block">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn header-item noti-icon right-bar-toggle waves-effect"
|
|
||||||
on:click={toggleRightBar}
|
|
||||||
>
|
|
||||||
<i class="bx bx-cog bx-spin" />
|
|
||||||
</button>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -22,4 +22,6 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Chat currentUser={currentUser} agent={agent} />
|
{#if currentUser }
|
||||||
|
<Chat currentUser={currentUser} agent={agent} />
|
||||||
|
{/if}
|
||||||
|
|
@ -4,7 +4,6 @@
|
||||||
DropdownToggle,
|
DropdownToggle,
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownItem,
|
DropdownItem,
|
||||||
Form,
|
|
||||||
Input,
|
Input,
|
||||||
Button
|
Button
|
||||||
} from 'sveltestrap';
|
} from 'sveltestrap';
|
||||||
|
|
@ -194,14 +193,16 @@
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex-shrink-0 align-self-center me-3">
|
<div class="flex-shrink-0 align-self-center me-3">
|
||||||
<img src="/images/users/chatbot.png" class="rounded-circle avatar-xs" alt="avatar">
|
<img src="/images/users/chatbot.png" class="rounded-circle avatar-xs" alt="avatar">
|
||||||
{#if message.rich_content.message.rich_type == 'text'}
|
{#if message.rich_content && message.rich_content.message.rich_type == 'text'}
|
||||||
<RcText message={message.rich_content.message} />
|
<RcText message={message.rich_content.message} />
|
||||||
{:else if message.rich_content.message.rich_type == 'quick_reply'}
|
{:else if message.rich_content && message.rich_content.message.rich_type == 'quick_reply'}
|
||||||
<RcQuickReply
|
<RcQuickReply
|
||||||
agentId={params.agentId}
|
agentId={params.agentId}
|
||||||
conversationId={params.conversationId}
|
conversationId={params.conversationId}
|
||||||
message={message.rich_content.message}
|
message={message.rich_content.message}
|
||||||
/>
|
/>
|
||||||
|
{:else}
|
||||||
|
<span>{message.text}</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue