fix: apply ESLint rule vue/component-tags-order
This commit is contained in:
iamsivin
@@ -1,26 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!conversationSize && isFetchingList"
|
||||
class="flex flex-1 items-center h-full bg-black-25 justify-center"
|
||||
:class="{ dark: prefersDarkMode }"
|
||||
>
|
||||
<spinner size="" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col justify-end h-full"
|
||||
:class="{
|
||||
'is-mobile': isMobile,
|
||||
'is-widget-right': isRightAligned,
|
||||
'is-bubble-hidden': hideMessageBubble,
|
||||
'is-flat-design': isWidgetStyleFlat,
|
||||
dark: prefersDarkMode,
|
||||
}"
|
||||
>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex';
|
||||
import { setHeader } from 'widget/helpers/axios';
|
||||
@@ -354,6 +331,29 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="!conversationSize && isFetchingList"
|
||||
class="flex flex-1 items-center h-full bg-black-25 justify-center"
|
||||
:class="{ dark: prefersDarkMode }"
|
||||
>
|
||||
<spinner size="" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col justify-end h-full"
|
||||
:class="{
|
||||
'is-mobile': isMobile,
|
||||
'is-widget-right': isRightAligned,
|
||||
'is-bubble-hidden': hideMessageBubble,
|
||||
'is-flat-design': isWidgetStyleFlat,
|
||||
dark: prefersDarkMode,
|
||||
}"
|
||||
>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~widget/assets/scss/woot.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,91 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="agent-message-wrap group"
|
||||
:class="{
|
||||
'has-response': hasRecordedResponse || isASubmittedForm,
|
||||
}"
|
||||
>
|
||||
<div v-if="!isASubmittedForm" class="agent-message">
|
||||
<div class="avatar-wrap">
|
||||
<thumbnail
|
||||
v-if="message.showAvatar || hasRecordedResponse"
|
||||
:src="avatarUrl"
|
||||
size="24px"
|
||||
:username="agentName"
|
||||
/>
|
||||
</div>
|
||||
<div class="message-wrap">
|
||||
<div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
|
||||
<reply-to-chip :reply-to="replyTo" />
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<div class="space-y-2">
|
||||
<AgentMessageBubble
|
||||
v-if="shouldDisplayAgentMessage"
|
||||
:content-type="contentType"
|
||||
:message-content-attributes="messageContentAttributes"
|
||||
:message-id="message.id"
|
||||
:message-type="messageType"
|
||||
:message="message.content"
|
||||
/>
|
||||
<div
|
||||
v-if="hasAttachments"
|
||||
class="space-y-2 chat-bubble has-attachment agent"
|
||||
:class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
|
||||
>
|
||||
<div
|
||||
v-for="attachment in message.attachments"
|
||||
:key="attachment.id"
|
||||
>
|
||||
<image-bubble
|
||||
v-if="attachment.file_type === 'image' && !hasImageError"
|
||||
:url="attachment.data_url"
|
||||
:thumb="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onImageLoadError"
|
||||
/>
|
||||
|
||||
<video-bubble
|
||||
v-if="attachment.file_type === 'video' && !hasVideoError"
|
||||
:url="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onVideoLoadError"
|
||||
/>
|
||||
|
||||
<audio v-else-if="attachment.file_type === 'audio'" controls>
|
||||
<source :src="attachment.data_url" />
|
||||
</audio>
|
||||
<file-bubble v-else :url="attachment.data_url" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-end">
|
||||
<message-reply-button
|
||||
class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
|
||||
@click="toggleReply"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
v-if="message.showAvatar || hasRecordedResponse"
|
||||
v-dompurify-html="agentName"
|
||||
class="agent-name"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-200')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UserMessage v-if="hasRecordedResponse" :message="responseMessage" />
|
||||
<div v-if="isASubmittedForm">
|
||||
<UserMessage
|
||||
v-for="submittedValue in submittedFormValues"
|
||||
:key="submittedValue.id"
|
||||
:message="submittedValue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserMessage from 'widget/components/UserMessage.vue';
|
||||
import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
|
||||
@@ -246,3 +158,91 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="agent-message-wrap group"
|
||||
:class="{
|
||||
'has-response': hasRecordedResponse || isASubmittedForm,
|
||||
}"
|
||||
>
|
||||
<div v-if="!isASubmittedForm" class="agent-message">
|
||||
<div class="avatar-wrap">
|
||||
<thumbnail
|
||||
v-if="message.showAvatar || hasRecordedResponse"
|
||||
:src="avatarUrl"
|
||||
size="24px"
|
||||
:username="agentName"
|
||||
/>
|
||||
</div>
|
||||
<div class="message-wrap">
|
||||
<div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
|
||||
<reply-to-chip :reply-to="replyTo" />
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<div class="space-y-2">
|
||||
<AgentMessageBubble
|
||||
v-if="shouldDisplayAgentMessage"
|
||||
:content-type="contentType"
|
||||
:message-content-attributes="messageContentAttributes"
|
||||
:message-id="message.id"
|
||||
:message-type="messageType"
|
||||
:message="message.content"
|
||||
/>
|
||||
<div
|
||||
v-if="hasAttachments"
|
||||
class="space-y-2 chat-bubble has-attachment agent"
|
||||
:class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
|
||||
>
|
||||
<div
|
||||
v-for="attachment in message.attachments"
|
||||
:key="attachment.id"
|
||||
>
|
||||
<image-bubble
|
||||
v-if="attachment.file_type === 'image' && !hasImageError"
|
||||
:url="attachment.data_url"
|
||||
:thumb="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onImageLoadError"
|
||||
/>
|
||||
|
||||
<video-bubble
|
||||
v-if="attachment.file_type === 'video' && !hasVideoError"
|
||||
:url="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onVideoLoadError"
|
||||
/>
|
||||
|
||||
<audio v-else-if="attachment.file_type === 'audio'" controls>
|
||||
<source :src="attachment.data_url" />
|
||||
</audio>
|
||||
<file-bubble v-else :url="attachment.data_url" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-end">
|
||||
<message-reply-button
|
||||
class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
|
||||
@click="toggleReply"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
v-if="message.showAvatar || hasRecordedResponse"
|
||||
v-dompurify-html="agentName"
|
||||
class="agent-name"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-200')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UserMessage v-if="hasRecordedResponse" :message="responseMessage" />
|
||||
<div v-if="isASubmittedForm">
|
||||
<UserMessage
|
||||
v-for="submittedValue in submittedFormValues"
|
||||
:key="submittedValue.id"
|
||||
:message="submittedValue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,64 +1,3 @@
|
||||
<template>
|
||||
<div class="chat-bubble-wrap">
|
||||
<div
|
||||
v-if="
|
||||
!isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
|
||||
"
|
||||
class="chat-bubble agent"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
|
||||
>
|
||||
<div
|
||||
v-dompurify-html="formatMessage(message, false)"
|
||||
class="message-content text-slate-900 dark:text-slate-50"
|
||||
/>
|
||||
<email-input
|
||||
v-if="isTemplateEmail"
|
||||
:message-id="messageId"
|
||||
:message-content-attributes="messageContentAttributes"
|
||||
/>
|
||||
|
||||
<integration-card
|
||||
v-if="isIntegrations"
|
||||
:message-id="messageId"
|
||||
:meeting-data="messageContentAttributes.data"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isOptions">
|
||||
<chat-options
|
||||
:title="message"
|
||||
:options="messageContentAttributes.items"
|
||||
:hide-fields="!!messageContentAttributes.submitted_values"
|
||||
@click="onOptionSelect"
|
||||
/>
|
||||
</div>
|
||||
<chat-form
|
||||
v-if="isForm && !messageContentAttributes.submitted_values"
|
||||
:items="messageContentAttributes.items"
|
||||
:button-label="messageContentAttributes.button_label"
|
||||
:submitted-values="messageContentAttributes.submitted_values"
|
||||
@submit="onFormSubmit"
|
||||
/>
|
||||
<div v-if="isCards">
|
||||
<chat-card
|
||||
v-for="item in messageContentAttributes.items"
|
||||
:key="item.title"
|
||||
:media-url="item.media_url"
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
:actions="item.actions"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isArticle">
|
||||
<chat-article :items="messageContentAttributes.items" />
|
||||
</div>
|
||||
<customer-satisfaction
|
||||
v-if="isCSAT"
|
||||
:message-content-attributes="messageContentAttributes.submitted_values"
|
||||
:message-id="messageId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
||||
import ChatCard from 'shared/components/ChatCard.vue';
|
||||
@@ -141,3 +80,64 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-bubble-wrap">
|
||||
<div
|
||||
v-if="
|
||||
!isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
|
||||
"
|
||||
class="chat-bubble agent"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
|
||||
>
|
||||
<div
|
||||
v-dompurify-html="formatMessage(message, false)"
|
||||
class="message-content text-slate-900 dark:text-slate-50"
|
||||
/>
|
||||
<email-input
|
||||
v-if="isTemplateEmail"
|
||||
:message-id="messageId"
|
||||
:message-content-attributes="messageContentAttributes"
|
||||
/>
|
||||
|
||||
<integration-card
|
||||
v-if="isIntegrations"
|
||||
:message-id="messageId"
|
||||
:meeting-data="messageContentAttributes.data"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isOptions">
|
||||
<chat-options
|
||||
:title="message"
|
||||
:options="messageContentAttributes.items"
|
||||
:hide-fields="!!messageContentAttributes.submitted_values"
|
||||
@click="onOptionSelect"
|
||||
/>
|
||||
</div>
|
||||
<chat-form
|
||||
v-if="isForm && !messageContentAttributes.submitted_values"
|
||||
:items="messageContentAttributes.items"
|
||||
:button-label="messageContentAttributes.button_label"
|
||||
:submitted-values="messageContentAttributes.submitted_values"
|
||||
@submit="onFormSubmit"
|
||||
/>
|
||||
<div v-if="isCards">
|
||||
<chat-card
|
||||
v-for="item in messageContentAttributes.items"
|
||||
:key="item.title"
|
||||
:media-url="item.media_url"
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
:actions="item.actions"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isArticle">
|
||||
<chat-article :items="messageContentAttributes.items" />
|
||||
</div>
|
||||
<customer-satisfaction
|
||||
v-if="isCSAT"
|
||||
:message-content-attributes="messageContentAttributes.submitted_values"
|
||||
:message-id="messageId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
<script>
|
||||
import darkModeMixing from 'widget/mixins/darkModeMixin.js';
|
||||
export default {
|
||||
name: 'AgentTypingBubble',
|
||||
mixins: [darkModeMixing],
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="agent-message-wrap">
|
||||
<div class="agent-message">
|
||||
@@ -17,14 +25,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import darkModeMixing from 'widget/mixins/darkModeMixin.js';
|
||||
export default {
|
||||
name: 'AgentTypingBubble',
|
||||
mixins: [darkModeMixing],
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
@@ -1,20 +1,3 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<article-list :articles="articles" @click="onArticleClick" />
|
||||
<button
|
||||
class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
|
||||
:style="{ color: widgetColor }"
|
||||
@click="$emit('view-all')"
|
||||
>
|
||||
<span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
|
||||
<fluent-icon icon="arrow-right" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import ArticleList from './ArticleList.vue';
|
||||
@@ -42,6 +25,23 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<article-list :articles="articles" @click="onArticleClick" />
|
||||
<button
|
||||
class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
|
||||
:style="{ color: widgetColor }"
|
||||
@click="$emit('view-all')"
|
||||
>
|
||||
<span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
|
||||
<fluent-icon icon="arrow-right" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.see-articles {
|
||||
color: var(--brand-textButtonClear);
|
||||
|
||||
@@ -1,12 +1,3 @@
|
||||
<template>
|
||||
<category-card
|
||||
:title="$t('PORTAL.POPULAR_ARTICLES')"
|
||||
:articles="articles.slice(0, 6)"
|
||||
@view-all="$emit('view-all')"
|
||||
@view="onArticleClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CategoryCard from './ArticleCategoryCard.vue';
|
||||
export default {
|
||||
@@ -29,4 +20,13 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<category-card
|
||||
:title="$t('PORTAL.POPULAR_ARTICLES')"
|
||||
:articles="articles.slice(0, 6)"
|
||||
@view-all="$emit('view-all')"
|
||||
@view="onArticleClick"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
@@ -1,15 +1,3 @@
|
||||
<template>
|
||||
<ul role="list" class="py-2">
|
||||
<article-list-item
|
||||
v-for="article in articles"
|
||||
:key="article.slug"
|
||||
:link="article.link"
|
||||
:title="article.title"
|
||||
@click="onClick"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArticleListItem from './ArticleListItem.vue';
|
||||
|
||||
@@ -33,3 +21,15 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul role="list" class="py-2">
|
||||
<article-list-item
|
||||
v-for="article in articles"
|
||||
:key="article.slug"
|
||||
:link="article.link"
|
||||
:title="article.title"
|
||||
@click="onClick"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
@@ -1,18 +1,3 @@
|
||||
<template>
|
||||
<li
|
||||
class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
|
||||
role="button"
|
||||
@click="onClick"
|
||||
>
|
||||
<button class="underline-offset-2 text-sm leading-6 text-left">
|
||||
{{ title }}
|
||||
</button>
|
||||
<span class="pl-1 arrow">
|
||||
<fluent-icon icon="arrow-right" size="14" />
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
|
||||
@@ -38,3 +23,18 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
class="py-1 flex items-center justify-between -mx-1 px-1 hover:bg-slate-25 dark:hover:bg-slate-600 rounded cursor-pointer text-slate-700 dark:text-slate-50 dark:hover:text-slate-25 hover:text-slate-900"
|
||||
role="button"
|
||||
@click="onClick"
|
||||
>
|
||||
<button class="underline-offset-2 text-sm leading-6 text-left">
|
||||
{{ title }}
|
||||
</button>
|
||||
<span class="pl-1 arrow">
|
||||
<fluent-icon icon="arrow-right" size="14" />
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -1,29 +1,3 @@
|
||||
<template>
|
||||
<div class="relative flex items-center">
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 flex items-center py-2 px-2 text-slate-500"
|
||||
>
|
||||
<fluent-icon icon="search" size="14" />
|
||||
</div>
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
:placeholder="placeholder"
|
||||
type="text"
|
||||
name="search"
|
||||
class="block w-full h-8 rounded-md focus-visible:outline-none pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
|
||||
<kbd
|
||||
class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
|
||||
>
|
||||
⌘K
|
||||
</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
export default {
|
||||
@@ -49,3 +23,29 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative flex items-center">
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 flex items-center py-2 px-2 text-slate-500"
|
||||
>
|
||||
<fluent-icon icon="search" size="14" />
|
||||
</div>
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
:placeholder="placeholder"
|
||||
type="text"
|
||||
name="search"
|
||||
class="block w-full h-8 rounded-md focus-visible:outline-none pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
|
||||
<kbd
|
||||
class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
|
||||
>
|
||||
⌘K
|
||||
</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
<template>
|
||||
<grouped-avatars :users="users" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
|
||||
|
||||
@@ -25,3 +21,7 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<grouped-avatars :users="users" />
|
||||
</template>
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
<template>
|
||||
<div v-if="showBannerMessage" :class="`banner ${bannerType}`">
|
||||
<span>
|
||||
{{ bannerMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BUS_EVENTS } from 'shared/constants/busEvents';
|
||||
import { emitter } from 'shared/helpers/mitt';
|
||||
@@ -31,6 +23,14 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="showBannerMessage" :class="`banner ${bannerType}`">
|
||||
<span>
|
||||
{{ bannerMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
.banner {
|
||||
|
||||
@@ -1,21 +1,3 @@
|
||||
<template>
|
||||
<file-upload
|
||||
ref="upload"
|
||||
:size="4096 * 2048"
|
||||
:accept="allowedFileTypes"
|
||||
:data="{
|
||||
direct_upload_url: '/api/v1/widget/direct_uploads',
|
||||
direct_upload: true,
|
||||
}"
|
||||
@input-file="onFileUpload"
|
||||
>
|
||||
<button class="icon-button flex items-center justify-center">
|
||||
<fluent-icon v-if="!isUploading.image" icon="attach" />
|
||||
<spinner v-if="isUploading" size="small" />
|
||||
</button>
|
||||
</file-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileUpload from 'vue-upload-component';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
@@ -150,3 +132,21 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<file-upload
|
||||
ref="upload"
|
||||
:size="4096 * 2048"
|
||||
:accept="allowedFileTypes"
|
||||
:data="{
|
||||
direct_upload_url: '/api/v1/widget/direct_uploads',
|
||||
direct_upload: true,
|
||||
}"
|
||||
@input-file="onFileUpload"
|
||||
>
|
||||
<button class="icon-button flex items-center justify-center">
|
||||
<fluent-icon v-if="!isUploading.image" icon="attach" />
|
||||
<spinner v-if="isUploading" size="small" />
|
||||
</button>
|
||||
</file-upload>
|
||||
</template>
|
||||
|
||||
@@ -1,45 +1,3 @@
|
||||
<template>
|
||||
<footer
|
||||
v-if="!hideReplyBox"
|
||||
class="relative z-50 mb-1"
|
||||
:class="{
|
||||
'rounded-lg': !isWidgetStyleFlat,
|
||||
'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
|
||||
hasReplyTo,
|
||||
}"
|
||||
>
|
||||
<footer-reply-to
|
||||
v-if="hasReplyTo"
|
||||
:in-reply-to="inReplyTo"
|
||||
@dismiss="inReplyTo = null"
|
||||
/>
|
||||
<chat-input-wrap
|
||||
class="shadow-sm"
|
||||
:on-send-message="handleSendMessage"
|
||||
:on-send-attachment="handleSendAttachment"
|
||||
/>
|
||||
</footer>
|
||||
<div v-else>
|
||||
<custom-button
|
||||
class="font-medium"
|
||||
block
|
||||
:bg-color="widgetColor"
|
||||
:text-color="textColor"
|
||||
@click="startNewConversation"
|
||||
>
|
||||
{{ $t('START_NEW_CONVERSATION') }}
|
||||
</custom-button>
|
||||
<custom-button
|
||||
v-if="showEmailTranscriptButton"
|
||||
type="clear"
|
||||
class="font-normal"
|
||||
@click="sendTranscript"
|
||||
>
|
||||
{{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
|
||||
</custom-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
import { getContrastingTextColor } from '@chatwoot/utils';
|
||||
@@ -161,6 +119,48 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer
|
||||
v-if="!hideReplyBox"
|
||||
class="relative z-50 mb-1"
|
||||
:class="{
|
||||
'rounded-lg': !isWidgetStyleFlat,
|
||||
'pt-2.5 shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.05)] dark:shadow-[0px_-20px_20px_1px_rgba(0,_0,_0,_0.15)] rounded-t-none':
|
||||
hasReplyTo,
|
||||
}"
|
||||
>
|
||||
<footer-reply-to
|
||||
v-if="hasReplyTo"
|
||||
:in-reply-to="inReplyTo"
|
||||
@dismiss="inReplyTo = null"
|
||||
/>
|
||||
<chat-input-wrap
|
||||
class="shadow-sm"
|
||||
:on-send-message="handleSendMessage"
|
||||
:on-send-attachment="handleSendAttachment"
|
||||
/>
|
||||
</footer>
|
||||
<div v-else>
|
||||
<custom-button
|
||||
class="font-medium"
|
||||
block
|
||||
:bg-color="widgetColor"
|
||||
:text-color="textColor"
|
||||
@click="startNewConversation"
|
||||
>
|
||||
{{ $t('START_NEW_CONVERSATION') }}
|
||||
</custom-button>
|
||||
<custom-button
|
||||
v-if="showEmailTranscriptButton"
|
||||
type="clear"
|
||||
class="font-normal"
|
||||
@click="sendTranscript"
|
||||
>
|
||||
{{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
|
||||
</custom-button>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,49 +1,3 @@
|
||||
<template>
|
||||
<header
|
||||
class="flex justify-between p-5 w-full"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-900')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
v-if="showBackButton"
|
||||
class="-ml-3 px-2"
|
||||
@click="onBackButtonClick"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="chevron-left"
|
||||
size="24"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
/>
|
||||
</button>
|
||||
<img
|
||||
v-if="avatarUrl"
|
||||
class="h-8 w-8 rounded-full mr-3"
|
||||
:src="avatarUrl"
|
||||
alt="avatar"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="font-medium text-base leading-4 flex items-center"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
>
|
||||
<span v-dompurify-html="title" class="mr-1" />
|
||||
<div
|
||||
:class="`h-2 w-2 rounded-full
|
||||
${isOnline ? 'bg-green-500' : 'hidden'}`"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="text-xs mt-1 leading-3"
|
||||
:class="$dm('text-black-700', 'dark:text-slate-400')"
|
||||
>
|
||||
{{ replyWaitMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<header-actions :show-popout-button="showPopoutButton" />
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
@@ -104,3 +58,49 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="flex justify-between p-5 w-full"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-900')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
v-if="showBackButton"
|
||||
class="-ml-3 px-2"
|
||||
@click="onBackButtonClick"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="chevron-left"
|
||||
size="24"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
/>
|
||||
</button>
|
||||
<img
|
||||
v-if="avatarUrl"
|
||||
class="h-8 w-8 rounded-full mr-3"
|
||||
:src="avatarUrl"
|
||||
alt="avatar"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="font-medium text-base leading-4 flex items-center"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
>
|
||||
<span v-dompurify-html="title" class="mr-1" />
|
||||
<div
|
||||
:class="`h-2 w-2 rounded-full
|
||||
${isOnline ? 'bg-green-500' : 'hidden'}`"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="text-xs mt-1 leading-3"
|
||||
:class="$dm('text-black-700', 'dark:text-slate-400')"
|
||||
>
|
||||
{{ replyWaitMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<header-actions :show-popout-button="showPopoutButton" />
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,34 @@
|
||||
<script>
|
||||
import HeaderActions from './HeaderActions.vue';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
|
||||
|
||||
export default {
|
||||
name: 'ChatHeaderExpanded',
|
||||
components: {
|
||||
HeaderActions,
|
||||
},
|
||||
mixins: [darkModeMixin],
|
||||
props: {
|
||||
avatarUrl: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
introHeading: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
introBody: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showPopoutButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
|
||||
@@ -29,34 +60,3 @@
|
||||
/>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderActions from './HeaderActions.vue';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
|
||||
|
||||
export default {
|
||||
name: 'ChatHeaderExpanded',
|
||||
components: {
|
||||
HeaderActions,
|
||||
},
|
||||
mixins: [darkModeMixin],
|
||||
props: {
|
||||
avatarUrl: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
introHeading: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
introBody: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showPopoutButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,52 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="chat-message--input is-focused"
|
||||
:class="$dm('bg-white ', 'dark:bg-slate-600')"
|
||||
@keydown.esc="hideEmojiPicker"
|
||||
>
|
||||
<resizable-text-area
|
||||
id="chat-input"
|
||||
ref="chatInput"
|
||||
v-model="userInput"
|
||||
:rows="1"
|
||||
:aria-label="$t('CHAT_PLACEHOLDER')"
|
||||
:placeholder="$t('CHAT_PLACEHOLDER')"
|
||||
class="form-input user-message-input is-focused"
|
||||
:class="inputColor"
|
||||
@typing-off="onTypingOff"
|
||||
@typing-on="onTypingOn"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
<div class="button-wrap">
|
||||
<chat-attachment-button
|
||||
v-if="showAttachment"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-100')"
|
||||
:on-attach="onSendAttachment"
|
||||
/>
|
||||
<button
|
||||
v-if="hasEmojiPickerEnabled"
|
||||
class="flex items-center justify-center icon-button"
|
||||
aria-label="Emoji picker"
|
||||
@click="toggleEmojiPicker"
|
||||
>
|
||||
<fluent-icon icon="emoji" :class="emojiIconColor" />
|
||||
</button>
|
||||
<emoji-input
|
||||
v-if="showEmojiPicker"
|
||||
v-on-clickaway="hideEmojiPicker"
|
||||
:on-click="emojiOnClick"
|
||||
@keydown.esc="hideEmojiPicker"
|
||||
/>
|
||||
<chat-send-button
|
||||
v-if="showSendButton"
|
||||
:on-click="handleButtonClick"
|
||||
:color="widgetColor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
@@ -174,6 +125,55 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="chat-message--input is-focused"
|
||||
:class="$dm('bg-white ', 'dark:bg-slate-600')"
|
||||
@keydown.esc="hideEmojiPicker"
|
||||
>
|
||||
<resizable-text-area
|
||||
id="chat-input"
|
||||
ref="chatInput"
|
||||
v-model="userInput"
|
||||
:rows="1"
|
||||
:aria-label="$t('CHAT_PLACEHOLDER')"
|
||||
:placeholder="$t('CHAT_PLACEHOLDER')"
|
||||
class="form-input user-message-input is-focused"
|
||||
:class="inputColor"
|
||||
@typing-off="onTypingOff"
|
||||
@typing-on="onTypingOn"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
<div class="button-wrap">
|
||||
<chat-attachment-button
|
||||
v-if="showAttachment"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-100')"
|
||||
:on-attach="onSendAttachment"
|
||||
/>
|
||||
<button
|
||||
v-if="hasEmojiPickerEnabled"
|
||||
class="flex items-center justify-center icon-button"
|
||||
aria-label="Emoji picker"
|
||||
@click="toggleEmojiPicker"
|
||||
>
|
||||
<fluent-icon icon="emoji" :class="emojiIconColor" />
|
||||
</button>
|
||||
<emoji-input
|
||||
v-if="showEmojiPicker"
|
||||
v-on-clickaway="hideEmojiPicker"
|
||||
:on-click="emojiOnClick"
|
||||
@keydown.esc="hideEmojiPicker"
|
||||
/>
|
||||
<chat-send-button
|
||||
v-if="showSendButton"
|
||||
:on-click="handleButtonClick"
|
||||
:color="widgetColor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
@import '~widget/assets/scss/mixins.scss';
|
||||
|
||||
@@ -1,18 +1,3 @@
|
||||
<template>
|
||||
<UserMessage
|
||||
v-if="isUserMessage"
|
||||
:id="`cwmsg-${message.id}`"
|
||||
:message="message"
|
||||
:reply-to="replyTo"
|
||||
/>
|
||||
<AgentMessage
|
||||
v-else
|
||||
:id="`cwmsg-${message.id}`"
|
||||
:message="message"
|
||||
:reply-to="replyTo"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AgentMessage from 'widget/components/AgentMessage.vue';
|
||||
import UserMessage from 'widget/components/UserMessage.vue';
|
||||
@@ -45,6 +30,21 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UserMessage
|
||||
v-if="isUserMessage"
|
||||
:id="`cwmsg-${message.id}`"
|
||||
:message="message"
|
||||
:reply-to="replyTo"
|
||||
/>
|
||||
<AgentMessage
|
||||
v-else
|
||||
:id="`cwmsg-${message.id}`"
|
||||
:message="message"
|
||||
:reply-to="replyTo"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message-wrap {
|
||||
display: flex;
|
||||
|
||||
@@ -1,15 +1,3 @@
|
||||
<template>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="disabled"
|
||||
class="icon-button flex items-center justify-center ml-1"
|
||||
@click="onClick"
|
||||
>
|
||||
<fluent-icon v-if="!loading" icon="send" :style="`color: ${color}`" />
|
||||
<spinner v-else size="small" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
@@ -39,3 +27,15 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="disabled"
|
||||
class="icon-button flex items-center justify-center ml-1"
|
||||
@click="onClick"
|
||||
>
|
||||
<fluent-icon v-if="!loading" icon="send" :style="`color: ${color}`" />
|
||||
<spinner v-else size="small" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,25 @@
|
||||
<script>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
|
||||
export default {
|
||||
components: { FluentIcon },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Continue your chat',
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: 'Chat with us',
|
||||
},
|
||||
unreadCount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
@@ -37,25 +59,3 @@
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
|
||||
export default {
|
||||
components: { FluentIcon },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Continue your chat',
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: 'Chat with us',
|
||||
},
|
||||
unreadCount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,26 +1,3 @@
|
||||
<template>
|
||||
<div class="conversation--container" :class="colorSchemeClass">
|
||||
<div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
|
||||
<div v-if="isFetchingList" class="message--loader">
|
||||
<spinner />
|
||||
</div>
|
||||
<div
|
||||
v-for="groupedMessage in groupedMessages"
|
||||
:key="groupedMessage.date"
|
||||
class="messages-wrap"
|
||||
>
|
||||
<date-separator :date="groupedMessage.date" />
|
||||
<chat-message
|
||||
v-for="message in groupedMessage.messages"
|
||||
:key="message.id"
|
||||
:message="message"
|
||||
/>
|
||||
</div>
|
||||
<agent-typing-bubble v-if="showStatusIndicator" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChatMessage from 'widget/components/ChatMessage.vue';
|
||||
import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
|
||||
@@ -118,6 +95,29 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="conversation--container" :class="colorSchemeClass">
|
||||
<div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
|
||||
<div v-if="isFetchingList" class="message--loader">
|
||||
<spinner />
|
||||
</div>
|
||||
<div
|
||||
v-for="groupedMessage in groupedMessages"
|
||||
:key="groupedMessage.date"
|
||||
class="messages-wrap"
|
||||
>
|
||||
<date-separator :date="groupedMessage.date" />
|
||||
<chat-message
|
||||
v-for="message in groupedMessage.messages"
|
||||
:key="message.id"
|
||||
:message="message"
|
||||
/>
|
||||
</div>
|
||||
<agent-typing-bubble v-if="showStatusIndicator" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
@import '~widget/assets/scss/mixins.scss';
|
||||
|
||||
@@ -1,15 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{ transform: `translateX(${dragDistance}px)` }"
|
||||
class="will-change-transform"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchmove="handleTouchMove"
|
||||
@touchend="resetPosition"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DragWrapper',
|
||||
@@ -59,3 +47,15 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:style="{ transform: `translateX(${dragDistance}px)` }"
|
||||
class="will-change-transform"
|
||||
@touchstart="handleTouchStart"
|
||||
@touchmove="handleTouchMove"
|
||||
@touchend="resetPosition"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,27 +1,3 @@
|
||||
<template>
|
||||
<div class="file flex flex-row items-center p-3 cursor-pointer">
|
||||
<div class="icon-wrap" :style="{ color: textColor }">
|
||||
<fluent-icon icon="document" size="28" />
|
||||
</div>
|
||||
<div class="meta">
|
||||
<div class="title" :class="titleColor" :style="{ color: textColor }">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="link-wrap mb-1">
|
||||
<a
|
||||
class="download"
|
||||
rel="noreferrer noopener nofollow"
|
||||
target="_blank"
|
||||
:style="{ color: textColor }"
|
||||
:href="url"
|
||||
>
|
||||
{{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
|
||||
@@ -82,6 +58,30 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="file flex flex-row items-center p-3 cursor-pointer">
|
||||
<div class="icon-wrap" :style="{ color: textColor }">
|
||||
<fluent-icon icon="document" size="28" />
|
||||
</div>
|
||||
<div class="meta">
|
||||
<div class="title" :class="titleColor" :style="{ color: textColor }">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="link-wrap mb-1">
|
||||
<a
|
||||
class="download"
|
||||
rel="noreferrer noopener nofollow"
|
||||
target="_blank"
|
||||
:style="{ color: textColor }"
|
||||
:href="url"
|
||||
>
|
||||
{{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,20 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
|
||||
>
|
||||
<div class="items-center flex-grow truncate">
|
||||
<strong>Replying to:</strong>
|
||||
{{ inReplyTo.content || replyToAttachment }}
|
||||
</div>
|
||||
<button
|
||||
class="items-end flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800"
|
||||
@click="$emit('dismiss')"
|
||||
>
|
||||
<fluent-icon icon="dismiss" size="12" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
|
||||
@@ -39,3 +22,20 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
|
||||
>
|
||||
<div class="items-center flex-grow truncate">
|
||||
<strong>Replying to:</strong>
|
||||
{{ inReplyTo.content || replyToAttachment }}
|
||||
</div>
|
||||
<button
|
||||
class="items-end flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800"
|
||||
@click="$emit('dismiss')"
|
||||
>
|
||||
<fluent-icon icon="dismiss" size="12" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,31 +1,3 @@
|
||||
<template>
|
||||
<label class="block">
|
||||
<div
|
||||
v-if="label"
|
||||
class="mb-2 text-xs leading-3 font-medium"
|
||||
:class="labelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
<input
|
||||
:type="type"
|
||||
class="border rounded w-full py-2 px-3 leading-tight outline-none"
|
||||
:class="inputHasError"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
@change="onChange"
|
||||
/>
|
||||
<div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!error && helpText"
|
||||
class="text-red-400 mt-2 text-xs leading-3 font-medium"
|
||||
>
|
||||
{{ helpText }}
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
<script>
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin';
|
||||
export default {
|
||||
@@ -84,3 +56,31 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<label class="block">
|
||||
<div
|
||||
v-if="label"
|
||||
class="mb-2 text-xs leading-3 font-medium"
|
||||
:class="labelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
<input
|
||||
:type="type"
|
||||
class="border rounded w-full py-2 px-3 leading-tight outline-none"
|
||||
:class="inputHasError"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
@change="onChange"
|
||||
/>
|
||||
<div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!error && helpText"
|
||||
class="text-red-400 mt-2 text-xs leading-3 font-medium"
|
||||
>
|
||||
{{ helpText }}
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
@@ -1,90 +1,3 @@
|
||||
<template>
|
||||
<div class="phone-input--wrap relative mt-2">
|
||||
<div
|
||||
class="phone-input rounded w-full flex items-center justify-start outline-none border border-solid"
|
||||
:class="inputHasError"
|
||||
>
|
||||
<div
|
||||
class="country-emoji--wrap h-full cursor-pointer flex items-center justify-between px-2 py-2"
|
||||
:class="dropdownClass"
|
||||
@click="toggleCountryDropdown"
|
||||
>
|
||||
<h5 v-if="activeCountry.emoji" class="text-xl mb-0">
|
||||
{{ activeCountry.emoji }}
|
||||
</h5>
|
||||
<fluent-icon v-else icon="globe" class="fluent-icon" size="20" />
|
||||
<fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
|
||||
</div>
|
||||
<span
|
||||
v-if="activeDialCode"
|
||||
class="py-2 pr-0 pl-2 text-base"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-50')"
|
||||
>
|
||||
{{ activeDialCode }}
|
||||
</span>
|
||||
<input
|
||||
:value="phoneNumber"
|
||||
type="phoneInput"
|
||||
class="border-0 w-full py-2 pl-2 pr-3 leading-tight outline-none h-full rounded-r"
|
||||
name="phoneNumber"
|
||||
:placeholder="placeholder"
|
||||
:class="inputLightAndDarkModeColor"
|
||||
@input="onChange"
|
||||
@blur="context.blurHandler"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showDropdown"
|
||||
ref="dropdown"
|
||||
v-on-clickaway="closeDropdown"
|
||||
:class="dropdownBackgroundClass"
|
||||
class="country-dropdown h-48 overflow-y-auto z-10 absolute top-12 px-0 pt-0 pl-1 pr-1 pb-1 rounded shadow-lg"
|
||||
@keydown.up="moveSelectionUp"
|
||||
@keydown.down="moveSelectionDown"
|
||||
@keydown.enter="onSelect"
|
||||
>
|
||||
<div class="sticky top-0" :class="dropdownBackgroundClass">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="searchCountry"
|
||||
type="text"
|
||||
placeholder="Search country"
|
||||
class="dropdown-search h-8 text-sm mb-1 mt-1 w-full rounded py-2 px-3 outline-none border border-solid"
|
||||
:class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(country, index) in items"
|
||||
ref="dropdownItem"
|
||||
:key="index"
|
||||
class="country-dropdown--item h-8 flex items-center cursor-pointer rounded py-2 px-2"
|
||||
:class="[
|
||||
dropdownItemClass,
|
||||
country.id === activeCountryCode ? activeDropdownItemClass : '',
|
||||
index === selectedIndex ? focusedDropdownItemClass : '',
|
||||
]"
|
||||
@click="onSelectCountry(country)"
|
||||
>
|
||||
<span v-if="country.emoji" class="mr-2 text-xl">{{
|
||||
country.emoji
|
||||
}}</span>
|
||||
<span class="truncate text-sm leading-5">
|
||||
{{ country.name }}
|
||||
</span>
|
||||
<span class="ml-2 text-xs">{{ country.dial_code }}</span>
|
||||
</div>
|
||||
<div v-if="items.length === 0">
|
||||
<span
|
||||
class="text-sm mt-4 justify-center text-center flex"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-50')"
|
||||
>
|
||||
{{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countries from 'shared/constants/countries.js';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
@@ -307,6 +220,93 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="phone-input--wrap relative mt-2">
|
||||
<div
|
||||
class="phone-input rounded w-full flex items-center justify-start outline-none border border-solid"
|
||||
:class="inputHasError"
|
||||
>
|
||||
<div
|
||||
class="country-emoji--wrap h-full cursor-pointer flex items-center justify-between px-2 py-2"
|
||||
:class="dropdownClass"
|
||||
@click="toggleCountryDropdown"
|
||||
>
|
||||
<h5 v-if="activeCountry.emoji" class="text-xl mb-0">
|
||||
{{ activeCountry.emoji }}
|
||||
</h5>
|
||||
<fluent-icon v-else icon="globe" class="fluent-icon" size="20" />
|
||||
<fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
|
||||
</div>
|
||||
<span
|
||||
v-if="activeDialCode"
|
||||
class="py-2 pr-0 pl-2 text-base"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-50')"
|
||||
>
|
||||
{{ activeDialCode }}
|
||||
</span>
|
||||
<input
|
||||
:value="phoneNumber"
|
||||
type="phoneInput"
|
||||
class="border-0 w-full py-2 pl-2 pr-3 leading-tight outline-none h-full rounded-r"
|
||||
name="phoneNumber"
|
||||
:placeholder="placeholder"
|
||||
:class="inputLightAndDarkModeColor"
|
||||
@input="onChange"
|
||||
@blur="context.blurHandler"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showDropdown"
|
||||
ref="dropdown"
|
||||
v-on-clickaway="closeDropdown"
|
||||
:class="dropdownBackgroundClass"
|
||||
class="country-dropdown h-48 overflow-y-auto z-10 absolute top-12 px-0 pt-0 pl-1 pr-1 pb-1 rounded shadow-lg"
|
||||
@keydown.up="moveSelectionUp"
|
||||
@keydown.down="moveSelectionDown"
|
||||
@keydown.enter="onSelect"
|
||||
>
|
||||
<div class="sticky top-0" :class="dropdownBackgroundClass">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="searchCountry"
|
||||
type="text"
|
||||
placeholder="Search country"
|
||||
class="dropdown-search h-8 text-sm mb-1 mt-1 w-full rounded py-2 px-3 outline-none border border-solid"
|
||||
:class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(country, index) in items"
|
||||
ref="dropdownItem"
|
||||
:key="index"
|
||||
class="country-dropdown--item h-8 flex items-center cursor-pointer rounded py-2 px-2"
|
||||
:class="[
|
||||
dropdownItemClass,
|
||||
country.id === activeCountryCode ? activeDropdownItemClass : '',
|
||||
index === selectedIndex ? focusedDropdownItemClass : '',
|
||||
]"
|
||||
@click="onSelectCountry(country)"
|
||||
>
|
||||
<span v-if="country.emoji" class="mr-2 text-xl">{{
|
||||
country.emoji
|
||||
}}</span>
|
||||
<span class="truncate text-sm leading-5">
|
||||
{{ country.name }}
|
||||
</span>
|
||||
<span class="ml-2 text-xs">{{ country.dial_code }}</span>
|
||||
</div>
|
||||
<div v-if="items.length === 0">
|
||||
<span
|
||||
class="text-sm mt-4 justify-center text-center flex"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-50')"
|
||||
>
|
||||
{{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
.phone-input--wrap {
|
||||
|
||||
@@ -1,24 +1,3 @@
|
||||
<template>
|
||||
<label class="block">
|
||||
<div
|
||||
v-if="label"
|
||||
class="mb-2 text-xs leading-3 font-medium"
|
||||
:class="labelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
<textarea
|
||||
class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
|
||||
:class="isTextAreaHasError"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
@change="onChange"
|
||||
/>
|
||||
<div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
|
||||
{{ error }}
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
<script>
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin';
|
||||
export default {
|
||||
@@ -73,6 +52,27 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<label class="block">
|
||||
<div
|
||||
v-if="label"
|
||||
class="mb-2 text-xs leading-3 font-medium"
|
||||
:class="labelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
<textarea
|
||||
class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
|
||||
:class="isTextAreaHasError"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
@change="onChange"
|
||||
/>
|
||||
<div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
|
||||
{{ error }}
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
textarea {
|
||||
min-height: 8rem;
|
||||
|
||||
@@ -1,3 +1,18 @@
|
||||
<script>
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
|
||||
export default {
|
||||
name: 'GroupedAvatars',
|
||||
components: { Thumbnail },
|
||||
props: {
|
||||
users: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<span
|
||||
@@ -16,18 +31,3 @@
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
|
||||
export default {
|
||||
name: 'GroupedAvatars',
|
||||
components: { Thumbnail },
|
||||
props: {
|
||||
users: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,47 +1,3 @@
|
||||
<template>
|
||||
<div v-if="showHeaderActions" class="actions flex items-center">
|
||||
<button
|
||||
v-if="
|
||||
canLeaveConversation &&
|
||||
hasEndConversationEnabled &&
|
||||
showEndConversationButton
|
||||
"
|
||||
class="button transparent compact"
|
||||
:title="$t('END_CONVERSATION')"
|
||||
@click="resolveConversation"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="sign-out"
|
||||
size="22"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="showPopoutButton"
|
||||
class="button transparent compact new-window--button"
|
||||
@click="popoutWindow"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="open"
|
||||
size="22"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="button transparent compact close-button"
|
||||
:class="{
|
||||
'rn-close-button': isRNWebView,
|
||||
}"
|
||||
@click="closeWindow"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="dismiss"
|
||||
size="24"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
|
||||
@@ -120,6 +76,50 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div v-if="showHeaderActions" class="actions flex items-center">
|
||||
<button
|
||||
v-if="
|
||||
canLeaveConversation &&
|
||||
hasEndConversationEnabled &&
|
||||
showEndConversationButton
|
||||
"
|
||||
class="button transparent compact"
|
||||
:title="$t('END_CONVERSATION')"
|
||||
@click="resolveConversation"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="sign-out"
|
||||
size="22"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="showPopoutButton"
|
||||
class="button transparent compact new-window--button"
|
||||
@click="popoutWindow"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="open"
|
||||
size="22"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="button transparent compact close-button"
|
||||
:class="{
|
||||
'rn-close-button': isRNWebView,
|
||||
}"
|
||||
@click="closeWindow"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="dismiss"
|
||||
size="24"
|
||||
:class="$dm('text-black-900', 'dark:text-slate-50')"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,3 +1,21 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
url: { type: String, default: '' },
|
||||
thumb: { type: String, default: '' },
|
||||
readableTime: { type: String, default: '' },
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.$emit('error');
|
||||
},
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a
|
||||
:href="url"
|
||||
@@ -16,24 +34,6 @@
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
url: { type: String, default: '' },
|
||||
thumb: { type: String, default: '' },
|
||||
readableTime: { type: String, default: '' },
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.$emit('error');
|
||||
},
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,12 +1,3 @@
|
||||
<template>
|
||||
<button
|
||||
class="p-1 mb-1 rounded-full dark:text-slate-500 dark:bg-slate-900 text-slate-600 bg-slate-100 hover:text-slate-800"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
|
||||
@@ -15,3 +6,12 @@ export default {
|
||||
components: { FluentIcon },
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="p-1 mb-1 rounded-full dark:text-slate-500 dark:bg-slate-900 text-slate-600 bg-slate-100 hover:text-slate-800"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@@ -1,66 +1,3 @@
|
||||
<template>
|
||||
<FormulateForm
|
||||
v-model="formValues"
|
||||
class="flex flex-col flex-1 p-6 overflow-y-auto"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<div
|
||||
v-if="shouldShowHeaderMessage"
|
||||
v-dompurify-html="formatMessage(headerMessage, false)"
|
||||
class="mb-4 text-sm leading-5 pre-chat-header-message"
|
||||
:class="$dm('text-black-800', 'dark:text-slate-50')"
|
||||
/>
|
||||
<FormulateInput
|
||||
v-for="item in enabledPreChatFields"
|
||||
:key="item.name"
|
||||
:name="item.name"
|
||||
:type="item.type"
|
||||
:label="getLabel(item)"
|
||||
:placeholder="getPlaceHolder(item)"
|
||||
:validation="getValidation(item)"
|
||||
:options="getOptions(item)"
|
||||
:label-class="context => labelClass(context)"
|
||||
:input-class="context => inputClass(context)"
|
||||
:validation-messages="{
|
||||
startsWithPlus: $t(
|
||||
'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DIAL_CODE_VALID_ERROR'
|
||||
),
|
||||
isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
|
||||
email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
|
||||
required: $t('PRE_CHAT_FORM.REQUIRED'),
|
||||
matches: item.regex_cue
|
||||
? item.regex_cue
|
||||
: $t('PRE_CHAT_FORM.REGEX_ERROR'),
|
||||
}"
|
||||
:has-error-in-phone-input="hasErrorInPhoneInput"
|
||||
/>
|
||||
<FormulateInput
|
||||
v-if="!hasActiveCampaign"
|
||||
name="message"
|
||||
type="textarea"
|
||||
:label-class="context => labelClass(context)"
|
||||
:input-class="context => inputClass(context)"
|
||||
:label="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.LABEL')"
|
||||
:placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
|
||||
validation="required"
|
||||
:validation-messages="{
|
||||
required: $t('PRE_CHAT_FORM.FIELDS.MESSAGE.ERROR'),
|
||||
}"
|
||||
/>
|
||||
|
||||
<custom-button
|
||||
class="mt-2 mb-5 font-medium"
|
||||
block
|
||||
:bg-color="widgetColor"
|
||||
:text-color="textColor"
|
||||
:disabled="isCreating"
|
||||
>
|
||||
<spinner v-if="isCreating" class="p-0" />
|
||||
{{ $t('START_CONVERSATION') }}
|
||||
</custom-button>
|
||||
</FormulateForm>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomButton from 'shared/components/Button.vue';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
@@ -316,6 +253,69 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormulateForm
|
||||
v-model="formValues"
|
||||
class="flex flex-col flex-1 p-6 overflow-y-auto"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<div
|
||||
v-if="shouldShowHeaderMessage"
|
||||
v-dompurify-html="formatMessage(headerMessage, false)"
|
||||
class="mb-4 text-sm leading-5 pre-chat-header-message"
|
||||
:class="$dm('text-black-800', 'dark:text-slate-50')"
|
||||
/>
|
||||
<FormulateInput
|
||||
v-for="item in enabledPreChatFields"
|
||||
:key="item.name"
|
||||
:name="item.name"
|
||||
:type="item.type"
|
||||
:label="getLabel(item)"
|
||||
:placeholder="getPlaceHolder(item)"
|
||||
:validation="getValidation(item)"
|
||||
:options="getOptions(item)"
|
||||
:label-class="context => labelClass(context)"
|
||||
:input-class="context => inputClass(context)"
|
||||
:validation-messages="{
|
||||
startsWithPlus: $t(
|
||||
'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DIAL_CODE_VALID_ERROR'
|
||||
),
|
||||
isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
|
||||
email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
|
||||
required: $t('PRE_CHAT_FORM.REQUIRED'),
|
||||
matches: item.regex_cue
|
||||
? item.regex_cue
|
||||
: $t('PRE_CHAT_FORM.REGEX_ERROR'),
|
||||
}"
|
||||
:has-error-in-phone-input="hasErrorInPhoneInput"
|
||||
/>
|
||||
<FormulateInput
|
||||
v-if="!hasActiveCampaign"
|
||||
name="message"
|
||||
type="textarea"
|
||||
:label-class="context => labelClass(context)"
|
||||
:input-class="context => inputClass(context)"
|
||||
:label="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.LABEL')"
|
||||
:placeholder="$t('PRE_CHAT_FORM.FIELDS.MESSAGE.PLACEHOLDER')"
|
||||
validation="required"
|
||||
:validation-messages="{
|
||||
required: $t('PRE_CHAT_FORM.FIELDS.MESSAGE.ERROR'),
|
||||
}"
|
||||
/>
|
||||
|
||||
<custom-button
|
||||
class="mt-2 mb-5 font-medium"
|
||||
block
|
||||
:bg-color="widgetColor"
|
||||
:text-color="textColor"
|
||||
:disabled="isCreating"
|
||||
>
|
||||
<spinner v-if="isCreating" class="p-0" />
|
||||
{{ $t('START_CONVERSATION') }}
|
||||
</custom-button>
|
||||
</FormulateForm>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
::v-deep {
|
||||
|
||||
@@ -1,15 +1,3 @@
|
||||
<template>
|
||||
<button
|
||||
class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
|
||||
@click="navigateTo(replyTo.id)"
|
||||
>
|
||||
<fluent-icon icon="arrow-reply" size="12" class="flex-shrink-0" />
|
||||
<div class="truncate max-w-[8rem]">
|
||||
{{ replyTo.content || replyToAttachment }}
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
|
||||
@@ -58,3 +46,15 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
|
||||
@click="navigateTo(replyTo.id)"
|
||||
>
|
||||
<fluent-icon icon="arrow-reply" size="12" class="flex-shrink-0" />
|
||||
<div class="truncate max-w-[8rem]">
|
||||
{{ replyTo.content || replyToAttachment }}
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@@ -1,29 +1,3 @@
|
||||
<template>
|
||||
<div class="relative flex items-center">
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 flex items-center px-2 h-8 text-slate-500"
|
||||
>
|
||||
<fluent-icon icon="search" size="14" />
|
||||
</div>
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
:placeholder="placeholder"
|
||||
type="text"
|
||||
name="search"
|
||||
class="block w-full h-8 rounded-md focus-visible:outline-none m-0 pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 flex h-8 p-1">
|
||||
<kbd
|
||||
class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
|
||||
>
|
||||
⌘K
|
||||
</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
export default {
|
||||
@@ -49,3 +23,29 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative flex items-center">
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 flex items-center px-2 h-8 text-slate-500"
|
||||
>
|
||||
<fluent-icon icon="search" size="14" />
|
||||
</div>
|
||||
<input
|
||||
id="search"
|
||||
v-model="searchQuery"
|
||||
:placeholder="placeholder"
|
||||
type="text"
|
||||
name="search"
|
||||
class="block w-full h-8 rounded-md focus-visible:outline-none m-0 pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 flex h-8 p-1">
|
||||
<kbd
|
||||
class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
|
||||
>
|
||||
⌘K
|
||||
</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,37 +1,3 @@
|
||||
<template>
|
||||
<div class="p-4 shadow-sm rounded-md bg-white dark:bg-slate-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class=" ">
|
||||
<div class="text-sm font-medium text-slate-700 dark:text-slate-50">
|
||||
{{
|
||||
isOnline
|
||||
? $t('TEAM_AVAILABILITY.ONLINE')
|
||||
: $t('TEAM_AVAILABILITY.OFFLINE')
|
||||
}}
|
||||
</div>
|
||||
<div class="text-sm mt-1 text-slate-500 dark:text-slate-100">
|
||||
{{ replyWaitMessage }}
|
||||
</div>
|
||||
</div>
|
||||
<available-agents v-if="isOnline" :agents="availableAgents" />
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex text-sm font-medium rounded-md py-1 mt-2 px-2 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800"
|
||||
:style="{ color: widgetColor }"
|
||||
@click="startConversation"
|
||||
>
|
||||
<span class="pr-2 text-sm">
|
||||
{{
|
||||
hasConversation
|
||||
? $t('CONTINUE_CONVERSATION')
|
||||
: $t('START_CONVERSATION')
|
||||
}}
|
||||
</span>
|
||||
<fluent-icon icon="arrow-right" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getContrastingTextColor } from '@chatwoot/utils';
|
||||
@@ -96,3 +62,37 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-4 shadow-sm rounded-md bg-white dark:bg-slate-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class=" ">
|
||||
<div class="text-sm font-medium text-slate-700 dark:text-slate-50">
|
||||
{{
|
||||
isOnline
|
||||
? $t('TEAM_AVAILABILITY.ONLINE')
|
||||
: $t('TEAM_AVAILABILITY.OFFLINE')
|
||||
}}
|
||||
</div>
|
||||
<div class="text-sm mt-1 text-slate-500 dark:text-slate-100">
|
||||
{{ replyWaitMessage }}
|
||||
</div>
|
||||
</div>
|
||||
<available-agents v-if="isOnline" :agents="availableAgents" />
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex text-sm font-medium rounded-md py-1 mt-2 px-2 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800"
|
||||
:style="{ color: widgetColor }"
|
||||
@click="startConversation"
|
||||
>
|
||||
<span class="pr-2 text-sm">
|
||||
{{
|
||||
hasConversation
|
||||
? $t('CONTINUE_CONVERSATION')
|
||||
: $t('START_CONVERSATION')
|
||||
}}
|
||||
</span>
|
||||
<fluent-icon icon="arrow-right" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,28 +1,3 @@
|
||||
<template>
|
||||
<div class="chat-bubble-wrap">
|
||||
<button
|
||||
class="chat-bubble agent"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-50')"
|
||||
@click="onClickMessage"
|
||||
>
|
||||
<div v-if="showSender" class="row--agent-block">
|
||||
<thumbnail
|
||||
:src="avatarUrl"
|
||||
size="20px"
|
||||
:username="agentName"
|
||||
:status="availabilityStatus"
|
||||
/>
|
||||
<span v-dompurify-html="agentName" class="agent--name" />
|
||||
<span v-dompurify-html="companyName" class="company--name" />
|
||||
</div>
|
||||
<div
|
||||
v-dompurify-html="formatMessage(message, false)"
|
||||
class="message-content"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
@@ -105,6 +80,31 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chat-bubble-wrap">
|
||||
<button
|
||||
class="chat-bubble agent"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-50')"
|
||||
@click="onClickMessage"
|
||||
>
|
||||
<div v-if="showSender" class="row--agent-block">
|
||||
<thumbnail
|
||||
:src="avatarUrl"
|
||||
size="20px"
|
||||
:username="agentName"
|
||||
:status="availabilityStatus"
|
||||
/>
|
||||
<span v-dompurify-html="agentName" class="agent--name" />
|
||||
<span v-dompurify-html="companyName" class="company--name" />
|
||||
</div>
|
||||
<div
|
||||
v-dompurify-html="formatMessage(message, false)"
|
||||
class="message-content"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
.chat-bubble {
|
||||
|
||||
@@ -1,49 +1,3 @@
|
||||
<template>
|
||||
<div class="unread-wrap">
|
||||
<div class="close-unread-wrap">
|
||||
<button class="button small close-unread-button" @click="closeFullView">
|
||||
<span class="flex items-center">
|
||||
<fluent-icon class="mr-1" icon="dismiss" size="12" />
|
||||
{{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="unread-messages">
|
||||
<unread-message
|
||||
v-for="(message, index) in messages"
|
||||
:key="message.id"
|
||||
:message-type="message.messageType"
|
||||
:message-id="message.id"
|
||||
:show-sender="!index"
|
||||
:sender="message.sender"
|
||||
:message="getMessageContent(message)"
|
||||
:campaign-id="message.campaignId"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="open-read-view-wrap">
|
||||
<button
|
||||
v-if="unreadMessageCount"
|
||||
class="button clear-button"
|
||||
@click="openConversationView"
|
||||
>
|
||||
<span
|
||||
class="flex items-center"
|
||||
:class="{
|
||||
'is-background-light': isBackgroundLighter,
|
||||
}"
|
||||
:style="{
|
||||
color: widgetColor,
|
||||
}"
|
||||
>
|
||||
<fluent-icon class="mr-2" size="16" icon="arrow-right" />
|
||||
{{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import configMixin from '../mixins/configMixin';
|
||||
@@ -98,6 +52,52 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="unread-wrap">
|
||||
<div class="close-unread-wrap">
|
||||
<button class="button small close-unread-button" @click="closeFullView">
|
||||
<span class="flex items-center">
|
||||
<fluent-icon class="mr-1" icon="dismiss" size="12" />
|
||||
{{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="unread-messages">
|
||||
<unread-message
|
||||
v-for="(message, index) in messages"
|
||||
:key="message.id"
|
||||
:message-type="message.messageType"
|
||||
:message-id="message.id"
|
||||
:show-sender="!index"
|
||||
:sender="message.sender"
|
||||
:message="getMessageContent(message)"
|
||||
:campaign-id="message.campaignId"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="open-read-view-wrap">
|
||||
<button
|
||||
v-if="unreadMessageCount"
|
||||
class="button clear-button"
|
||||
@click="openConversationView"
|
||||
>
|
||||
<span
|
||||
class="flex items-center"
|
||||
:class="{
|
||||
'is-background-light': isBackgroundLighter,
|
||||
}"
|
||||
:style="{
|
||||
color: widgetColor,
|
||||
}"
|
||||
>
|
||||
<fluent-icon class="mr-2" size="16" icon="arrow-right" />
|
||||
{{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables';
|
||||
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
<template>
|
||||
<div class="user-avatar" :class="size" :style="getBgImage" />
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* Thumbnail Component
|
||||
@@ -26,6 +23,9 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="user-avatar" :class="size" :style="getBgImage" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
@@ -1,81 +1,3 @@
|
||||
<template>
|
||||
<div class="user-message-wrap group">
|
||||
<div class="flex gap-1 user-message">
|
||||
<div
|
||||
class="message-wrap"
|
||||
:class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
|
||||
>
|
||||
<div v-if="hasReplyTo" class="flex justify-end mt-2 mb-1 text-xs">
|
||||
<reply-to-chip :reply-to="replyTo" />
|
||||
</div>
|
||||
<div class="flex justify-end gap-1">
|
||||
<div class="flex flex-col justify-end">
|
||||
<message-reply-button
|
||||
v-if="!isInProgress && !isFailed"
|
||||
class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
|
||||
@click="toggleReply"
|
||||
/>
|
||||
</div>
|
||||
<drag-wrapper direction="left" @dragged="toggleReply">
|
||||
<user-message-bubble
|
||||
v-if="showTextBubble"
|
||||
:message="message.content"
|
||||
:status="message.status"
|
||||
:widget-color="widgetColor"
|
||||
/>
|
||||
<div
|
||||
v-if="hasAttachments"
|
||||
class="chat-bubble has-attachment user"
|
||||
:style="{ backgroundColor: widgetColor }"
|
||||
>
|
||||
<div
|
||||
v-for="attachment in message.attachments"
|
||||
:key="attachment.id"
|
||||
>
|
||||
<image-bubble
|
||||
v-if="attachment.file_type === 'image' && !hasImageError"
|
||||
:url="attachment.data_url"
|
||||
:thumb="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onImageLoadError"
|
||||
/>
|
||||
|
||||
<video-bubble
|
||||
v-if="attachment.file_type === 'video' && !hasVideoError"
|
||||
:url="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onVideoLoadError"
|
||||
/>
|
||||
|
||||
<file-bubble
|
||||
v-else
|
||||
:url="attachment.data_url"
|
||||
:is-in-progress="isInProgress"
|
||||
:widget-color="widgetColor"
|
||||
is-user-bubble
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</drag-wrapper>
|
||||
</div>
|
||||
<div
|
||||
v-if="isFailed"
|
||||
class="flex justify-end px-4 py-2 text-red-700 align-middle"
|
||||
>
|
||||
<button
|
||||
v-if="!hasAttachments"
|
||||
:title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
|
||||
class="inline-flex items-center justify-center ml-2"
|
||||
@click="retrySendMessage"
|
||||
>
|
||||
<fluent-icon icon="arrow-clockwise" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserMessageBubble from 'widget/components/UserMessageBubble.vue';
|
||||
import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
|
||||
@@ -180,3 +102,81 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="user-message-wrap group">
|
||||
<div class="flex gap-1 user-message">
|
||||
<div
|
||||
class="message-wrap"
|
||||
:class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
|
||||
>
|
||||
<div v-if="hasReplyTo" class="flex justify-end mt-2 mb-1 text-xs">
|
||||
<reply-to-chip :reply-to="replyTo" />
|
||||
</div>
|
||||
<div class="flex justify-end gap-1">
|
||||
<div class="flex flex-col justify-end">
|
||||
<message-reply-button
|
||||
v-if="!isInProgress && !isFailed"
|
||||
class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
|
||||
@click="toggleReply"
|
||||
/>
|
||||
</div>
|
||||
<drag-wrapper direction="left" @dragged="toggleReply">
|
||||
<user-message-bubble
|
||||
v-if="showTextBubble"
|
||||
:message="message.content"
|
||||
:status="message.status"
|
||||
:widget-color="widgetColor"
|
||||
/>
|
||||
<div
|
||||
v-if="hasAttachments"
|
||||
class="chat-bubble has-attachment user"
|
||||
:style="{ backgroundColor: widgetColor }"
|
||||
>
|
||||
<div
|
||||
v-for="attachment in message.attachments"
|
||||
:key="attachment.id"
|
||||
>
|
||||
<image-bubble
|
||||
v-if="attachment.file_type === 'image' && !hasImageError"
|
||||
:url="attachment.data_url"
|
||||
:thumb="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onImageLoadError"
|
||||
/>
|
||||
|
||||
<video-bubble
|
||||
v-if="attachment.file_type === 'video' && !hasVideoError"
|
||||
:url="attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
@error="onVideoLoadError"
|
||||
/>
|
||||
|
||||
<file-bubble
|
||||
v-else
|
||||
:url="attachment.data_url"
|
||||
:is-in-progress="isInProgress"
|
||||
:widget-color="widgetColor"
|
||||
is-user-bubble
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</drag-wrapper>
|
||||
</div>
|
||||
<div
|
||||
v-if="isFailed"
|
||||
class="flex justify-end px-4 py-2 text-red-700 align-middle"
|
||||
>
|
||||
<button
|
||||
v-if="!hasAttachments"
|
||||
:title="$t('COMPONENTS.MESSAGE_BUBBLE.RETRY')"
|
||||
class="inline-flex items-center justify-center ml-2"
|
||||
@click="retrySendMessage"
|
||||
>
|
||||
<fluent-icon icon="arrow-clockwise" size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
v-dompurify-html="formatMessage(message, false)"
|
||||
class="chat-bubble user"
|
||||
:style="{ background: widgetColor, color: textColor }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
||||
import { getContrastingTextColor } from '@chatwoot/utils';
|
||||
@@ -35,6 +27,14 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-dompurify-html="formatMessage(message, false)"
|
||||
class="chat-bubble user"
|
||||
:style="{ background: widgetColor, color: textColor }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,37 +1,3 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<button class="z-10 focus:outline-none select-none" @click="toggleMenu">
|
||||
<slot name="button" />
|
||||
</button>
|
||||
|
||||
<!-- to close when clicked on space around it-->
|
||||
<button
|
||||
v-if="isOpen"
|
||||
tabindex="-1"
|
||||
class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
|
||||
<!--dropdown menu-->
|
||||
<transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
leave-active-class="transition-all duration-750 ease-in"
|
||||
enter-class="opacity-0 scale-75"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-class="opacity-100 scale-100"
|
||||
leave-to-class="opacity-0 scale-75"
|
||||
>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
|
||||
:class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
|
||||
>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
@@ -74,6 +40,40 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<button class="z-10 focus:outline-none select-none" @click="toggleMenu">
|
||||
<slot name="button" />
|
||||
</button>
|
||||
|
||||
<!-- to close when clicked on space around it-->
|
||||
<button
|
||||
v-if="isOpen"
|
||||
tabindex="-1"
|
||||
class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
|
||||
<!--dropdown menu-->
|
||||
<transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
leave-active-class="transition-all duration-750 ease-in"
|
||||
enter-class="opacity-0 scale-75"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-class="opacity-100 scale-100"
|
||||
leave-to-class="opacity-0 scale-75"
|
||||
>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
|
||||
:class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
|
||||
>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,14 +1,3 @@
|
||||
<template>
|
||||
<button :class="['menu-item', itemClass]" @click="action">
|
||||
<fluent-icon
|
||||
v-if="icon"
|
||||
:icon="iconName"
|
||||
:size="iconSize"
|
||||
:class="iconClass"
|
||||
/>
|
||||
<span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
|
||||
@@ -51,6 +40,17 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<button :class="['menu-item', itemClass]" @click="action">
|
||||
<fluent-icon
|
||||
v-if="icon"
|
||||
:icon="iconName"
|
||||
:size="iconSize"
|
||||
:class="iconClass"
|
||||
/>
|
||||
<span :class="[{ 'pl-3': icon }, textClass]">{{ text }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,42 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="w-full h-full bg-slate-25 dark:bg-slate-800"
|
||||
:class="{ 'overflow-auto': isOnHomeView }"
|
||||
@keydown.esc="closeWindow"
|
||||
>
|
||||
<div class="flex flex-col h-full relative">
|
||||
<div
|
||||
class="header-wrap sticky top-0 z-40 transition-all"
|
||||
:class="{
|
||||
expanded: !isHeaderCollapsed,
|
||||
collapsed: isHeaderCollapsed,
|
||||
'custom-header-shadow': isHeaderCollapsed,
|
||||
...opacityClass,
|
||||
}"
|
||||
>
|
||||
<chat-header-expanded
|
||||
v-if="!isHeaderCollapsed"
|
||||
:intro-heading="channelConfig.welcomeTitle"
|
||||
:intro-body="channelConfig.welcomeTagline"
|
||||
:avatar-url="channelConfig.avatarUrl"
|
||||
:show-popout-button="appConfig.showPopoutButton"
|
||||
/>
|
||||
<chat-header
|
||||
v-if="isHeaderCollapsed"
|
||||
:title="channelConfig.websiteName"
|
||||
:avatar-url="channelConfig.avatarUrl"
|
||||
:show-popout-button="appConfig.showPopoutButton"
|
||||
:available-agents="availableAgents"
|
||||
:show-back-button="showBackButton"
|
||||
/>
|
||||
</div>
|
||||
<banner />
|
||||
<router-view />
|
||||
|
||||
<branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Banner from '../Banner.vue';
|
||||
import Branding from 'shared/components/Branding.vue';
|
||||
@@ -140,6 +101,45 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="w-full h-full bg-slate-25 dark:bg-slate-800"
|
||||
:class="{ 'overflow-auto': isOnHomeView }"
|
||||
@keydown.esc="closeWindow"
|
||||
>
|
||||
<div class="flex flex-col h-full relative">
|
||||
<div
|
||||
class="header-wrap sticky top-0 z-40 transition-all"
|
||||
:class="{
|
||||
expanded: !isHeaderCollapsed,
|
||||
collapsed: isHeaderCollapsed,
|
||||
'custom-header-shadow': isHeaderCollapsed,
|
||||
...opacityClass,
|
||||
}"
|
||||
>
|
||||
<chat-header-expanded
|
||||
v-if="!isHeaderCollapsed"
|
||||
:intro-heading="channelConfig.welcomeTitle"
|
||||
:intro-body="channelConfig.welcomeTagline"
|
||||
:avatar-url="channelConfig.avatarUrl"
|
||||
:show-popout-button="appConfig.showPopoutButton"
|
||||
/>
|
||||
<chat-header
|
||||
v-if="isHeaderCollapsed"
|
||||
:title="channelConfig.websiteName"
|
||||
:avatar-url="channelConfig.avatarUrl"
|
||||
:show-popout-button="appConfig.showPopoutButton"
|
||||
:available-agents="availableAgents"
|
||||
:show-back-button="showBackButton"
|
||||
/>
|
||||
</div>
|
||||
<banner />
|
||||
<router-view />
|
||||
|
||||
<branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables';
|
||||
|
||||
@@ -1,3 +1,22 @@
|
||||
<script>
|
||||
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FluentIcon,
|
||||
},
|
||||
mixins: [messageFormatterMixin, darkModeMixin],
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="!!items.length"
|
||||
@@ -27,25 +46,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FluentIcon,
|
||||
},
|
||||
mixins: [messageFormatterMixin, darkModeMixin],
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,34 +1,3 @@
|
||||
<template>
|
||||
<div>
|
||||
<form
|
||||
v-if="!hasSubmitted"
|
||||
class="email-input-group"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<input
|
||||
v-model.trim="email"
|
||||
class="form-input"
|
||||
:placeholder="$t('EMAIL_PLACEHOLDER')"
|
||||
:class="inputHasError"
|
||||
@input="v$.email.$touch"
|
||||
@keydown.enter="onSubmit"
|
||||
/>
|
||||
<button
|
||||
class="button small"
|
||||
:disabled="v$.email.$invalid"
|
||||
:style="{
|
||||
background: widgetColor,
|
||||
borderColor: widgetColor,
|
||||
color: textColor,
|
||||
}"
|
||||
>
|
||||
<fluent-icon v-if="!isUpdating" icon="chevron-right" />
|
||||
<spinner v-else class="mx-2" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
@@ -115,6 +84,37 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<form
|
||||
v-if="!hasSubmitted"
|
||||
class="email-input-group"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<input
|
||||
v-model.trim="email"
|
||||
class="form-input"
|
||||
:placeholder="$t('EMAIL_PLACEHOLDER')"
|
||||
:class="inputHasError"
|
||||
@input="v$.email.$touch"
|
||||
@keydown.enter="onSubmit"
|
||||
/>
|
||||
<button
|
||||
class="button small"
|
||||
:disabled="v$.email.$invalid"
|
||||
:style="{
|
||||
background: widgetColor,
|
||||
borderColor: widgetColor,
|
||||
color: textColor,
|
||||
}"
|
||||
>
|
||||
<fluent-icon v-if="!isUpdating" icon="chevron-right" />
|
||||
<spinner v-else class="mx-2" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,33 +1,3 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="button join-call-button"
|
||||
color-scheme="secondary"
|
||||
:is-loading="isLoading"
|
||||
:style="{
|
||||
background: widgetColor,
|
||||
borderColor: widgetColor,
|
||||
color: textColor,
|
||||
}"
|
||||
@click="joinTheCall"
|
||||
>
|
||||
<fluent-icon icon="video-add" class="mr-2" />
|
||||
{{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
|
||||
</button>
|
||||
<div v-if="dyteAuthToken" class="video-call--container">
|
||||
<iframe
|
||||
:src="meetingLink"
|
||||
allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
|
||||
/>
|
||||
<button
|
||||
class="button small join-call-button leave-room-button"
|
||||
@click="leaveTheRoom"
|
||||
>
|
||||
{{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import IntegrationAPIClient from 'widget/api/integration';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
@@ -82,6 +52,36 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="button join-call-button"
|
||||
color-scheme="secondary"
|
||||
:is-loading="isLoading"
|
||||
:style="{
|
||||
background: widgetColor,
|
||||
borderColor: widgetColor,
|
||||
color: textColor,
|
||||
}"
|
||||
@click="joinTheCall"
|
||||
>
|
||||
<fluent-icon icon="video-add" class="mr-2" />
|
||||
{{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
|
||||
</button>
|
||||
<div v-if="dyteAuthToken" class="video-call--container">
|
||||
<iframe
|
||||
:src="meetingLink"
|
||||
allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
|
||||
/>
|
||||
<button
|
||||
class="button small join-call-button leave-room-button"
|
||||
@click="leaveTheRoom"
|
||||
>
|
||||
{{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
<template>
|
||||
<div class="bg-white h-full">
|
||||
<iframe-loader :url="link" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IframeLoader from 'shared/components/IframeLoader.vue';
|
||||
|
||||
@@ -20,3 +14,9 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white h-full">
|
||||
<iframe-loader :url="link" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
<template>
|
||||
<unread-message-list :messages="messages" @close="closeFullView" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { IFrameHelper } from 'widget/helpers/utils';
|
||||
@@ -38,3 +34,7 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<unread-message-list :messages="messages" @close="closeFullView" />
|
||||
</template>
|
||||
|
||||
@@ -1,38 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="z-50 rounded-md w-full flex flex-1 flex-col"
|
||||
:class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
|
||||
>
|
||||
<div class="px-4 pt-4 w-full">
|
||||
<team-availability
|
||||
:available-agents="availableAgents"
|
||||
:has-conversation="!!conversationSize"
|
||||
:unread-count="unreadMessageCount"
|
||||
@start-conversation="startConversation"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="showArticles" class="px-4 py-2 w-full">
|
||||
<div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
|
||||
<article-hero
|
||||
v-if="
|
||||
!articleUiFlags.isFetching &&
|
||||
!articleUiFlags.isError &&
|
||||
popularArticles.length
|
||||
"
|
||||
:articles="popularArticles"
|
||||
@view="openArticleInArticleViewer"
|
||||
@view-all="viewAllArticles"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="articleUiFlags.isFetching" class="px-4 py-2 w-full">
|
||||
<div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
|
||||
<article-card-skeleton-loader />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TeamAvailability from 'widget/components/TeamAvailability.vue';
|
||||
import ArticleHero from 'widget/components/ArticleHero.vue';
|
||||
@@ -134,3 +99,38 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="z-50 rounded-md w-full flex flex-1 flex-col"
|
||||
:class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
|
||||
>
|
||||
<div class="px-4 pt-4 w-full">
|
||||
<team-availability
|
||||
:available-agents="availableAgents"
|
||||
:has-conversation="!!conversationSize"
|
||||
:unread-count="unreadMessageCount"
|
||||
@start-conversation="startConversation"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="showArticles" class="px-4 py-2 w-full">
|
||||
<div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
|
||||
<article-hero
|
||||
v-if="
|
||||
!articleUiFlags.isFetching &&
|
||||
!articleUiFlags.isError &&
|
||||
popularArticles.length
|
||||
"
|
||||
:articles="popularArticles"
|
||||
@view="openArticleInArticleViewer"
|
||||
@view-all="viewAllArticles"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="articleUiFlags.isFetching" class="px-4 py-2 w-full">
|
||||
<div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
|
||||
<article-card-skeleton-loader />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
|
||||
>
|
||||
<div class="flex flex-1 overflow-auto">
|
||||
<conversation-wrap :grouped-messages="groupedMessages" />
|
||||
</div>
|
||||
<chat-footer class="px-5" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
@@ -26,3 +16,13 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
|
||||
>
|
||||
<div class="flex flex-1 overflow-auto">
|
||||
<conversation-wrap :grouped-messages="groupedMessages" />
|
||||
</div>
|
||||
<chat-footer class="px-5" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,8 +1,3 @@
|
||||
<template>
|
||||
<div class="flex flex-1 overflow-auto">
|
||||
<pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PreChatForm from '../components/PreChat/Form.vue';
|
||||
import configMixin from '../mixins/configMixin';
|
||||
@@ -62,3 +57,8 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-1 overflow-auto">
|
||||
<pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
<template>
|
||||
<unread-message-list :messages="messages" @close="closeFullView" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { IFrameHelper } from 'widget/helpers/utils';
|
||||
@@ -26,3 +22,7 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<unread-message-list :messages="messages" @close="closeFullView" />
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user