LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Widget Builder (#5104)

Browse Source 
* feat: Add widget builder
This commit is contained in:
Aswin Dev P.S
2022-08-02 13:04:20 +05:30
committed by GitHub
parent 945288ce15
commit d9b102cff0
10 changed files with 1079 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
View File

@@ -1,24 +1,42 @@
<template>
<div class="conversation--container">
<div class="conversation-wrap">
<div class="message-wrap">
<div class="user-message-wrap">
<div class="user-message">
<div class="message-wrap">
<div class="chat-bubble user">
<p>Hello</p>
<div class="widget-body-container">
<div v-if="config.isDefaultScreen" class="availability-content">
<div class="availability-info">
<div class="team-status">
{{ getStatusText }}
</div>
<div class="reply-wait-message">
{{ config.replyTime }}
</div>
</div>
<thumbnail username="J" size="40" />
</div>
<div v-else class="conversation-content">
<div class="conversation-wrap">
<div class="message-wrap">
<div class="user-message-wrap">
<div class="user-message">
<div class="message-wrap">
<div
class="chat-bubble user"
:style="{ background: config.color }"
>
<p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="agent-message-wrap">
<div class="agent-message">
<div class="avatar-wrap" />
<div class="message-wrap">
<div class="chat-bubble agent">
<div class="message-content">
<p>Hello</p>
<div class="agent-message-wrap">
<div class="agent-message">
<div class="avatar-wrap" />
<div class="message-wrap">
<div class="chat-bubble agent">
<div class="message-content">
<p>
{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
</p>
</div>
</div>
</div>
</div>
@@ -29,51 +47,105 @@
</template>
<script>
import Thumbnail from 'dashboard/components/widgets/Thumbnail';
export default {
name: 'WidgetBody',
components: {
Thumbnail,
},
props: {
config: {
type: Object,
default: () => {},
},
},
computed: {
getStatusText() {
return this.config.isOnline
? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
: this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
},
getWidgetBodyClass() {
return {
'with-chat-view': !this.config.isDefaultScreen,
'with-heading-or-title':
this.config.isDefaultScreen &&
(this.config.welcomeHeading || this.config.welcomeTagline),
'with-heading-or-title-without-logo':
this.config.isDefaultScreen &&
(this.config.welcomeHeading || this.config.welcomeTagline) &&
!this.config.logo,
'without-heading-and-title':
this.config.isDefaultScreen &&
!this.config.welcomeHeading &&
!this.config.welcomeTagline,
};
},
},
};
</script>
<style scoped lang="scss">
$tailwind-black-700: #3c4858;
.conversation--container {
width: 100%;
padding: var(--space-two);
.conversation-wrap {
min-height: 200px;
.user-message {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 0;
margin-bottom: var(--space-smaller);
margin-left: auto;
max-width: 85%;
text-align: right;
.widget-body-container {
.availability-content {
display: flex;
flex-direction: row;
align-items: flex-end;
padding: var(--space-one) var(--space-two) var(--space-one) var(--space-two);
min-height: inherit;
.availability-info {
width: 100%;
.team-status {
font-size: var(--font-size-default);
font-weight: var(--font-weight-medium);
}
.reply-wait-message {
font-size: var(--font-size-mini);
}
}
.message-wrap {
margin-right: var(--space-smaller);
max-width: 100%;
.chat-bubble {
box-shadow: var(--shadow-medium);
background: var(--color-woot);
border-radius: var(--border-radius-large);
color: var(--white);
display: inline-block;
font-size: var(--font-size-nano);
line-height: 1.5;
padding: var(--space-small) var(--space-one);
text-align: left;
word-break: break-word;
}
.conversation-content {
height: calc(var(--space-large) * 10);
padding: 0 var(--space-two);
.conversation-wrap {
.user-message {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: var(--space-zero);
margin-bottom: var(--space-smaller);
margin-left: auto;
max-width: 85%;
text-align: right;
}
.message-wrap {
margin-right: var(--space-smaller);
max-width: 100%;
&.user {
border-bottom-right-radius: var(--border-radius-small);
}
&.agent {
background: var(--white);
border-bottom-left-radius: var(--border-radius-small);
color: $tailwind-black-700;
.chat-bubble {
box-shadow: var(--shadow-medium);
border-radius: 2rem;
color: var(--white);
display: inline-block;
font-size: var(--font-size-nano);
line-height: 1.5;
padding: 1.3rem 1.75rem;
text-align: left;
p {
margin: var(--space-zero);
}
&.user {
border-bottom-right-radius: var(--border-radius-small);
background: var(--color-woot);
}
&.agent {
background: var(--white);
border-bottom-left-radius: var(--border-radius-small);
color: var(--b-900);
}
}
}
}