feat: Eslint rules (#9839)

# Pull Request Template

## Description

This PR adds new eslint rules to the code base.

**Error rules**

|    Rule name     | Type | Files updated |
| ----------------- | --- | - |
| `vue/block-order`  | error  |  ✅  |
| `vue/component-name-in-template-casing`  | error  |  ✅  |
| `vue/component-options-name-casing`  | error  |  ✅  |
| `vue/custom-event-name-casing`  | error  |  ✅  |
| `vue/define-emits-declaration`  | error  |  ✅  |
| `vue/no-unused-properties`  | error  |  ✅  |
| `vue/define-macros-order`  | error  |  ✅  |
| `vue/define-props-declaration`  | error  |  ✅  |
| `vue/match-component-import-name`  | error  |  ✅  |
| `vue/next-tick-style`  | error  |  ✅  |
| `vue/no-bare-strings-in-template`  | error  |  ✅  |
| `vue/no-empty-component-block`  | error  |  ✅  |
| `vue/no-multiple-objects-in-class`  | error  |  ✅  |
| `vue/no-required-prop-with-default`  | error  |  ✅  |
| `vue/no-static-inline-styles`  | error  |  ✅  |
| `vue/no-template-target-blank`  | error  |  ✅  |
| `vue/no-this-in-before-route-enter`  | error  |  ✅  |
| `vue/no-undef-components`  | error  |  ✅  |
| `vue/no-unused-emit-declarations`  | error  |  ✅  |
| `vue/no-unused-refs`  | error  |  ✅  |
| `vue/no-use-v-else-with-v-for`  | error  |  ✅  |
| `vue/no-useless-v-bind`  | error  |  ✅  |
| `vue/no-v-text`  | error  |  ✅  |
| `vue/padding-line-between-blocks`  | error  |  ✅  |
| ~`vue/prefer-prop-type-boolean-first`~ | ~error~ | ❌ (removed this
rule, cause a bug in displaying custom attributes) |
| `vue/prefer-separate-static-class`  | error  |  ✅  |
| `vue/prefer-true-attribute-shorthand`  | error  |  ✅  |
| `vue/require-explicit-slots`  | error  |  ✅  |
| `vue/require-macro-variable-name`  | error  |  ✅  |


**Warn rules**

|    Rule name     | Type | Files updated |
| ---- | ------------- | ------------- |
| `vue/no-root-v-if`  | warn  |  ❎  |


Fixes https://linear.app/chatwoot/issue/CW-3492/vue-eslint-rules

## Type of change

- [x] New feature (non-breaking change which adds functionality)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Fayaz Ahmed <fayazara@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/widget/App.vue

@@ -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';
@@ -60,10 +37,7 @@ export default {
   computed: {
     ...mapGetters({
       activeCampaign: 'campaign/getActiveCampaign',
-      campaigns: 'campaign/getCampaigns',
       conversationSize: 'conversation/getConversationSize',
-      currentUser: 'contacts/getCurrentUser',
-      hasFetched: 'agent/getHasFetched',
       hideMessageBubble: 'appConfig/getHideMessageBubble',
       isFetchingList: 'conversation/getIsFetchingList',
       isRightAligned: 'appConfig/isRightAligned',
@@ -114,7 +88,7 @@ export default {
       'setBubbleVisibility',
       'setColorScheme',
     ]),
-    ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
+    ...mapActions('conversation', ['fetchOldConversations']),
     ...mapActions('campaign', [
       'initCampaigns',
       'executeCampaign',
@@ -354,6 +328,29 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!conversationSize && isFetchingList"
+    class="flex items-center justify-center flex-1 h-full bg-black-25"
+    :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>

app/javascript/widget/components/AgentMessage.vue

@@ -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">
+          <ReplyToChip :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"
+              >
+                <ImageBubble
+                  v-if="attachment.file_type === 'image' && !hasImageError"
+                  :url="attachment.data_url"
+                  :thumb="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onImageLoadError"
+                />
+
+                <VideoBubble
+                  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>
+                <FileBubble v-else :url="attachment.data_url" />
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col justify-end">
+            <MessageReplyButton
+              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>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -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"
+      />
+      <EmailInput
+        v-if="isTemplateEmail"
+        :message-id="messageId"
+        :message-content-attributes="messageContentAttributes"
+      />
+
+      <IntegrationCard
+        v-if="isIntegrations"
+        :message-id="messageId"
+        :meeting-data="messageContentAttributes.data"
+      />
+    </div>
+    <div v-if="isOptions">
+      <ChatOptions
+        :title="message"
+        :options="messageContentAttributes.items"
+        :hide-fields="!!messageContentAttributes.submitted_values"
+        @click="onOptionSelect"
+      />
+    </div>
+    <ChatForm
+      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">
+      <ChatCard
+        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">
+      <ChatArticle :items="messageContentAttributes.items" />
+    </div>
+    <CustomerSatisfaction
+      v-if="isCSAT"
+      :message-content-attributes="messageContentAttributes.submitted_values"
+      :message-id="messageId"
+    />
+  </div>
+</template>

app/javascript/widget/components/AgentTypingBubble.vue

@@ -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';

app/javascript/widget/components/ArticleCategoryCard.vue

@@ -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,24 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div>
+    <h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
+      {{ title }}
+    </h3>
+    <ArticleList :articles="articles" @click="onArticleClick" />
+    <button
+      class="inline-flex items-center justify-between px-2 py-1 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
+      :style="{ color: widgetColor }"
+      @click="$emit('viewAll')"
+    >
+      <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
+      <FluentIcon icon="arrow-right" size="14" />
+    </button>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .see-articles {
   color: var(--brand-textButtonClear);

app/javascript/widget/components/ArticleHero.vue

@@ -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 {
@@ -16,10 +7,6 @@ export default {
       type: Array,
       default: () => [],
     },
-    categoryPath: {
-      type: String,
-      default: '',
-    },
   },
   methods: {
     onArticleClick(link) {
@@ -29,4 +16,11 @@ export default {
 };
 </script>
 
-<style></style>
+<template>
+  <CategoryCard
+    :title="$t('PORTAL.POPULAR_ARTICLES')"
+    :articles="articles.slice(0, 6)"
+    @viewAll="$emit('viewAll')"
+    @view="onArticleClick"
+  />
+</template>

app/javascript/widget/components/ArticleList.vue

@@ -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">
+    <ArticleListItem
+      v-for="article in articles"
+      :key="article.slug"
+      :link="article.link"
+      :title="article.title"
+      @click="onClick"
+    />
+  </ul>
+</template>

app/javascript/widget/components/ArticleListItem.vue

@@ -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">
+      <FluentIcon icon="arrow-right" size="14" />
+    </span>
+  </li>
+</template>

app/javascript/widget/components/ArticleSearch.vue

@@ -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 px-2 py-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 px-2 pl-6 pr-1 text-sm border rounded-md focus-visible:outline-none text-slate-800 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 px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
+      >
+        {{ '⌘K' }}
+      </kbd>
+    </div>
+  </div>
+</template>

app/javascript/widget/components/AvailableAgents.vue

@@ -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>
+  <GroupedAvatars :users="users" />
+</template>

app/javascript/widget/components/Banner.vue

@@ -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 {

app/javascript/widget/components/ChatAttachment.vue

@@ -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>
+  <FileUpload
+    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">
+      <FluentIcon v-if="!isUploading.image" icon="attach" />
+      <Spinner v-if="isUploading" size="small" />
+    </button>
+  </FileUpload>
+</template>

app/javascript/widget/components/ChatFooter.vue

@@ -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';
@@ -59,12 +17,6 @@ export default {
     FooterReplyTo,
   },
   mixins: [routerMixin],
-  props: {
-    msg: {
-      type: String,
-      default: '',
-    },
-  },
   data() {
     return {
       inReplyTo: null,
@@ -161,6 +113,49 @@ 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,
+    }"
+  >
+    <FooterReplyTo
+      v-if="hasReplyTo"
+      :in-reply-to="inReplyTo"
+      @dismiss="inReplyTo = null"
+    />
+    <ChatInputWrap
+      class="shadow-sm"
+      :on-send-message="handleSendMessage"
+      :on-send-attachment="handleSendAttachment"
+    />
+  </footer>
+  <div v-else>
+    <CustomButton
+      class="font-medium"
+      block
+      :bg-color="widgetColor"
+      :text-color="textColor"
+      @click="startNewConversation"
+    >
+      {{ $t('START_NEW_CONVERSATION') }}
+    </CustomButton>
+    <CustomButton
+      v-if="showEmailTranscriptButton"
+      type="clear"
+      class="font-normal"
+      @click="sendTranscript"
+    >
+      {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
+    </CustomButton>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 

app/javascript/widget/components/ChatHeader.vue

@@ -1,52 +1,4 @@
-<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';
-
 import availabilityMixin from 'widget/mixins/availability';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -84,9 +36,6 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
       const anyAgentOnline = this.availableAgents.length > 0;
@@ -104,3 +53,49 @@ export default {
   },
 };
 </script>
+
+<template>
+  <header
+    class="flex justify-between w-full p-5"
+    :class="$dm('bg-white', 'dark:bg-slate-900')"
+  >
+    <div class="flex items-center">
+      <button
+        v-if="showBackButton"
+        class="px-2 -ml-3"
+        @click="onBackButtonClick"
+      >
+        <FluentIcon
+          icon="chevron-left"
+          size="24"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        />
+      </button>
+      <img
+        v-if="avatarUrl"
+        class="w-8 h-8 mr-3 rounded-full"
+        :src="avatarUrl"
+        alt="avatar"
+      />
+      <div>
+        <div
+          class="flex items-center text-base font-medium leading-4"
+          :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="mt-1 text-xs leading-3"
+          :class="$dm('text-black-700', 'dark:text-slate-400')"
+        >
+          {{ replyWaitMessage }}
+        </div>
+      </div>
+    </div>
+    <HeaderActions :show-popout-button="showPopoutButton" />
+  </header>
+</template>

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -1,35 +1,3 @@
-<template>
-  <header
-    class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
-  >
-    <div
-      class="flex items-start"
-      :class="[avatarUrl ? 'justify-between' : 'justify-end']"
-    >
-      <img
-        v-if="avatarUrl"
-        class="h-12 rounded-full"
-        :src="avatarUrl"
-        alt="Avatar"
-      />
-      <header-actions
-        :show-popout-button="showPopoutButton"
-        :show-end-conversation-button="false"
-      />
-    </div>
-    <h2
-      v-dompurify-html="introHeading"
-      class="mt-4 text-2xl mb-1.5 font-medium"
-      :class="$dm('text-slate-900', 'dark:text-slate-50')"
-    />
-    <p
-      v-dompurify-html="introBody"
-      class="text-base leading-normal"
-      :class="$dm('text-slate-700', 'dark:text-slate-200')"
-    />
-  </header>
-</template>
-
 <script>
 import HeaderActions from './HeaderActions.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -60,3 +28,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <header
+    class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
+  >
+    <div
+      class="flex items-start"
+      :class="[avatarUrl ? 'justify-between' : 'justify-end']"
+    >
+      <img
+        v-if="avatarUrl"
+        class="h-12 rounded-full"
+        :src="avatarUrl"
+        alt="Avatar"
+      />
+      <HeaderActions
+        :show-popout-button="showPopoutButton"
+        :show-end-conversation-button="false"
+      />
+    </div>
+    <h2
+      v-dompurify-html="introHeading"
+      class="mt-4 text-2xl mb-1.5 font-medium"
+      :class="$dm('text-slate-900', 'dark:text-slate-50')"
+    />
+    <p
+      v-dompurify-html="introBody"
+      class="text-base leading-normal"
+      :class="$dm('text-slate-700', 'dark:text-slate-200')"
+    />
+  </header>
+</template>

app/javascript/widget/components/ChatInputWrap.vue

@@ -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"
+  >
+    <ResizableTextArea
+      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"
+      @typingOff="onTypingOff"
+      @typingOn="onTypingOn"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <div class="button-wrap">
+      <ChatAttachmentButton
+        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="$t('EMOJI.ARIA_LABEL')"
+        @click="toggleEmojiPicker"
+      >
+        <FluentIcon icon="emoji" :class="emojiIconColor" />
+      </button>
+      <EmojiInput
+        v-if="showEmojiPicker"
+        v-on-clickaway="hideEmojiPicker"
+        :on-click="emojiOnClick"
+        @keydown.esc="hideEmojiPicker"
+      />
+      <ChatSendButton
+        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';

app/javascript/widget/components/ChatMessage.vue

@@ -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;

app/javascript/widget/components/ChatSendButton.vue

@@ -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"
+  >
+    <FluentIcon v-if="!loading" icon="send" :style="`color: ${color}`" />
+    <Spinner v-else size="small" />
+  </button>
+</template>

app/javascript/widget/components/ContinueChatButton.vue

@@ -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"
@@ -7,7 +29,7 @@
     <div
       class="w-10 h-10 rounded-md bg-slate-75 dark:bg-slate-700 text-lg flex items-center justify-center flex-shrink-0"
     >
-      <fluent-icon
+      <FluentIcon
         icon="chat"
         size="16"
         class="text-slate-600 dark:text-slate-400"
@@ -33,29 +55,7 @@
       </p>
     </div>
     <div class="w-8 h-10 flex items-center justify-center">
-      <fluent-icon icon="chevron-right" />
+      <FluentIcon icon="chevron-right" />
     </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>

app/javascript/widget/components/ConversationWrap.vue

@@ -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"
+      >
+        <DateSeparator :date="groupedMessage.date" />
+        <ChatMessage
+          v-for="message in groupedMessage.messages"
+          :key="message.id"
+          :message="message"
+        />
+      </div>
+      <AgentTypingBubble v-if="showStatusIndicator" />
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';

app/javascript/widget/components/DragWrapper.vue

@@ -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>

app/javascript/widget/components/FileBubble.vue

@@ -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 }">
+      <FluentIcon 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';
 

app/javascript/widget/components/FooterReplyTo.vue

@@ -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>{{ $t('FOOTER_REPLY_TO.REPLY_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')"
+    >
+      <FluentIcon icon="dismiss" size="12" />
+    </button>
+  </div>
+</template>

app/javascript/widget/components/Form/Input.vue

@@ -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,32 @@ 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>

app/javascript/widget/components/Form/PhoneInput.vue

@@ -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="relative mt-2 phone-input--wrap">
+    <div
+      class="flex items-center justify-start w-full border border-solid rounded outline-none phone-input"
+      :class="inputHasError"
+    >
+      <div
+        class="flex items-center justify-between h-full px-2 py-2 cursor-pointer country-emoji--wrap"
+        :class="dropdownClass"
+        @click="toggleCountryDropdown"
+      >
+        <h5 v-if="activeCountry.emoji" class="mb-0 text-xl">
+          {{ activeCountry.emoji }}
+        </h5>
+        <FluentIcon v-else icon="globe" class="fluent-icon" size="20" />
+        <FluentIcon icon="chevron-down" class="fluent-icon" size="12" />
+      </div>
+      <span
+        v-if="activeDialCode"
+        class="py-2 pl-2 pr-0 text-base"
+        :class="$dm('text-slate-700', 'dark:text-slate-50')"
+      >
+        {{ activeDialCode }}
+      </span>
+      <input
+        :value="phoneNumber"
+        type="phoneInput"
+        class="w-full h-full py-2 pl-2 pr-3 leading-tight border-0 rounded-r outline-none"
+        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="absolute z-10 h-48 px-0 pt-0 pb-1 pl-1 pr-1 overflow-y-auto rounded shadow-lg country-dropdown top-12"
+      @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="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
+          class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"
+          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
+        />
+      </div>
+      <div
+        v-for="(country, index) in items"
+        :key="index"
+        class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item"
+        :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="text-sm leading-5 truncate">
+          {{ country.name }}
+        </span>
+        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
+      </div>
+      <div v-if="items.length === 0">
+        <span
+          class="flex justify-center mt-4 text-sm text-center"
+          :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 {

app/javascript/widget/components/Form/TextArea.vue

@@ -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 {
@@ -28,10 +7,6 @@ export default {
       type: String,
       default: '',
     },
-    type: {
-      type: String,
-      default: 'text',
-    },
     placeholder: {
       type: String,
       default: '',
@@ -73,6 +48,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs font-medium leading-3"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+    <textarea
+      class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-slate-700"
+      :class="isTextAreaHasError"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="mt-2 text-xs font-medium leading-3 text-red-400">
+      {{ error }}
+    </div>
+  </label>
+</template>
+
 <style lang="scss" scoped>
 textarea {
   min-height: 8rem;

app/javascript/widget/components/GroupedAvatars.vue

@@ -1,22 +1,3 @@
-<template>
-  <div class="flex">
-    <span
-      v-for="(user, index) in users"
-      :key="user.id"
-      :class="`${
-        index ? '-ml-4' : ''
-      } inline-block rounded-full text-white shadow-solid`"
-    >
-      <thumbnail
-        size="36px"
-        :username="user.name"
-        :src="user.avatar"
-        has-border
-      />
-    </span>
-  </div>
-</template>
-
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -31,3 +12,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex">
+    <span
+      v-for="(user, index) in users"
+      :key="user.id"
+      :class="`${
+        index ? '-ml-4' : ''
+      } inline-block rounded-full text-white shadow-solid`"
+    >
+      <Thumbnail
+        size="36px"
+        :username="user.name"
+        :src="user.avatar"
+        has-border
+      />
+    </span>
+  </div>
+</template>

app/javascript/widget/components/HeaderActions.vue

@@ -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,52 @@ 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"
+    >
+      <FluentIcon
+        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"
+    >
+      <FluentIcon
+        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"
+    >
+      <FluentIcon
+        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';
 

app/javascript/widget/components/ImageBubble.vue

@@ -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"
@@ -17,23 +35,6 @@
   </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';
 

app/javascript/widget/components/MessageReplyButton.vue

@@ -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>

app/javascript/widget/components/PreChat/Form.vue

@@ -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,70 @@ 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'),
+      }"
+    />
+
+    <CustomButton
+      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') }}
+    </CustomButton>
+  </FormulateForm>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 ::v-deep {

app/javascript/widget/components/ReplyToChip.vue

@@ -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)"
+  >
+    <FluentIcon icon="arrow-reply" size="12" class="flex-shrink-0" />
+    <div class="truncate max-w-[8rem]">
+      {{ replyTo.content || replyToAttachment }}
+    </div>
+  </button>
+</template>

app/javascript/widget/components/SearchArticle.vue

@@ -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 h-8 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 px-2 pl-6 pr-1 m-0 text-sm border rounded-md focus-visible:outline-none text-slate-800 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 px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
+      >
+        {{ '⌘K' }}
+      </kbd>
+    </div>
+  </div>
+</template>

app/javascript/widget/components/TeamAvailability.vue

@@ -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';
@@ -59,10 +25,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    unreadCount: {
-      type: Number,
-      default: 0,
-    },
   },
 
   computed: {
@@ -84,7 +46,7 @@ export default {
   },
   methods: {
     startConversation() {
-      this.$emit('start-conversation');
+      this.$emit('startConversation');
       if (!this.hasConversation) {
         IFrameHelper.sendMessage({
           event: 'onEvent',
@@ -96,3 +58,37 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="p-4 bg-white rounded-md shadow-sm 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="mt-1 text-sm text-slate-500 dark:text-slate-100">
+          {{ replyWaitMessage }}
+        </div>
+      </div>
+      <AvailableAgents v-if="isOnline" :agents="availableAgents" />
+    </div>
+    <button
+      class="inline-flex items-center justify-between px-2 py-1 mt-2 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 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>
+      <FluentIcon icon="arrow-right" size="14" />
+    </button>
+  </div>
+</template>

app/javascript/widget/components/UnreadMessage.vue

@@ -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,32 @@ 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 {

app/javascript/widget/components/UnreadMessageList.vue

@@ -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,53 @@ 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">
+          <FluentIcon class="mr-1" icon="dismiss" size="12" />
+          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
+        </span>
+      </button>
+    </div>
+    <div class="unread-messages">
+      <UnreadMessage
+        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,
+          }"
+        >
+          <FluentIcon 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';
 

app/javascript/widget/components/UserAvatar.vue

@@ -1,6 +1,3 @@
-<template>
-  <div class="user-avatar" :class="size" :style="getBgImage" />
-</template>
 <script>
 /**
  * Thumbnail Component
@@ -27,6 +24,10 @@ export default {
 };
 </script>
 
+<template>
+  <div class="user-avatar" :class="size" :style="getBgImage" />
+</template>
+
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 @import '~widget/assets/scss/mixins.scss';

app/javascript/widget/components/UserMessage.vue

@@ -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">
+          <ReplyToChip :reply-to="replyTo" />
+        </div>
+        <div class="flex justify-end gap-1">
+          <div class="flex flex-col justify-end">
+            <MessageReplyButton
+              v-if="!isInProgress && !isFailed"
+              class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
+              @click="toggleReply"
+            />
+          </div>
+          <DragWrapper direction="left" @dragged="toggleReply">
+            <UserMessageBubble
+              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"
+              >
+                <ImageBubble
+                  v-if="attachment.file_type === 'image' && !hasImageError"
+                  :url="attachment.data_url"
+                  :thumb="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onImageLoadError"
+                />
+
+                <VideoBubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
+                <FileBubble
+                  v-else
+                  :url="attachment.data_url"
+                  :is-in-progress="isInProgress"
+                  :widget-color="widgetColor"
+                  is-user-bubble
+                />
+              </div>
+            </div>
+          </DragWrapper>
+        </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"
+          >
+            <FluentIcon icon="arrow-clockwise" size="14" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/widget/components/UserMessageBubble.vue

@@ -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';
@@ -18,10 +10,6 @@ export default {
       type: String,
       default: '',
     },
-    status: {
-      type: String,
-      default: '',
-    },
     widgetColor: {
       type: String,
       default: '',
@@ -35,6 +23,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';
 

app/javascript/widget/components/VideoBubble.vue

@@ -4,14 +4,15 @@ defineProps({
   readableTime: { type: String, default: '' },
 });
 
-const emits = defineEmits(['error']);
+const emit = defineEmits(['error']);
 
 const onVideoError = () => {
-  emits('error');
+  emit('error');
 };
 </script>
+
 <template>
-  <div class="block relative max-w-full">
+  <div class="relative block max-w-full">
     <video
       class="w-full max-w-[250px] h-auto"
       :src="url"
@@ -19,7 +20,7 @@ const onVideoError = () => {
       @error="onVideoError"
     />
     <span
-      class="text-xs absolute text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
+      class="absolute text-xs text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
     >
       {{ readableTime }}
     </span>

app/javascript/widget/components/dropdown/DropdownMenu.vue

@@ -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,41 @@ 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';
 

app/javascript/widget/components/dropdown/DropdownMenuItem.vue

@@ -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,19 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button class="menu-item" :class="[itemClass]" @click="action">
+    <FluentIcon
+      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';
 

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -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';
@@ -67,7 +28,6 @@ export default {
     ...mapGetters({
       appConfig: 'appConfig/getAppConfig',
       availableAgents: 'agent/availableAgents',
-      widgetColor: 'appConfig/getWidgetColor',
     }),
     portal() {
       return window.chatwootWebChannel.portal;
@@ -141,6 +101,46 @@ 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="relative flex flex-col h-full">
+      <div
+        class="sticky top-0 z-40 transition-all header-wrap"
+        :class="{
+          expanded: !isHeaderCollapsed,
+          collapsed: isHeaderCollapsed,
+          'custom-header-shadow': isHeaderCollapsed,
+          ...opacityClass,
+        }"
+      >
+        <ChatHeaderExpanded
+          v-if="!isHeaderCollapsed"
+          :intro-heading="channelConfig.welcomeTitle"
+          :intro-body="channelConfig.welcomeTagline"
+          :avatar-url="channelConfig.avatarUrl"
+          :show-popout-button="appConfig.showPopoutButton"
+        />
+        <ChatHeader
+          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';
 @import '~widget/assets/scss/mixins';

app/javascript/widget/components/template/Article.vue

@@ -1,32 +1,3 @@
-<template>
-  <div
-    v-if="!!items.length"
-    class="chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
-  >
-    <div v-for="item in items" :key="item.link" class="article-item">
-      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
-        <span class="title flex items-center text-black-900 font-medium">
-          <fluent-icon
-            icon="link"
-            class="mr-1"
-            :class="$dm('text-black-900', 'dark:text-slate-50')"
-          />
-          <span :class="$dm('text-slate-900', 'dark:text-slate-50')">{{
-            item.title
-          }}</span>
-        </span>
-        <span
-          class="description"
-          :class="$dm('text-slate-700', 'dark:text-slate-200')"
-        >
-          {{ truncateMessage(item.description) }}
-        </span>
-      </a>
-    </div>
-  </div>
-</template>
-
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -46,6 +17,35 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!!items.length"
+    class="chat-bubble agent"
+    :class="$dm('bg-white', 'dark:bg-slate-700')"
+  >
+    <div v-for="item in items" :key="item.link" class="article-item">
+      <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
+        <span class="title flex items-center text-black-900 font-medium">
+          <FluentIcon
+            icon="link"
+            class="mr-1"
+            :class="$dm('text-black-900', 'dark:text-slate-50')"
+          />
+          <span :class="$dm('text-slate-900', 'dark:text-slate-50')">{{
+            item.title
+          }}</span>
+        </span>
+        <span
+          class="description"
+          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+        >
+          {{ truncateMessage(item.description) }}
+        </span>
+      </a>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 

app/javascript/widget/components/template/EmailInput.vue

@@ -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,
+        }"
+      >
+        <FluentIcon 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';
 

app/javascript/widget/components/template/IntegrationCard.vue

@@ -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,38 @@ 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"
+    >
+      <FluentIcon 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';
 

app/javascript/widget/i18n/locale/en.json

@@ -70,7 +70,8 @@
         "REQUIRED_ERROR": "Phone Number is required",
         "DIAL_CODE_VALID_ERROR": "Please select a country code",
         "VALID_ERROR": "Please enter a valid phone number",
-        "DROPDOWN_EMPTY": "No results found"
+        "DROPDOWN_EMPTY": "No results found",
+        "DROPDOWN_SEARCH": "Search country"
       },
       "MESSAGE": {
         "LABEL": "Message",
@@ -91,7 +92,8 @@
   },
   "EMOJI": {
     "PLACEHOLDER": "Search emojis",
-    "NOT_FOUND": "No emoji match your search"
+    "NOT_FOUND": "No emoji match your search",
+    "ARIA_LABEL": "Emoji picker"
   },
   "CSAT": {
     "TITLE": "Rate your conversation",
@@ -133,5 +135,8 @@
     "fallback": {
       "CONTENT": "has shared a url"
     }
+  },
+  "FOOTER_REPLY_TO": {
+    "REPLY_TO": "Replying to:"
   }
 }

app/javascript/widget/views/ArticleViewer.vue

@@ -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">
+    <IframeLoader :url="link" />
+  </div>
+</template>

app/javascript/widget/views/Campaigns.vue

@@ -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>
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
+</template>

app/javascript/widget/views/Home.vue

@@ -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';
@@ -51,20 +16,9 @@ export default {
     ArticleCardSkeletonLoader,
   },
   mixins: [configMixin, routerMixin, darkModeMixin],
-  props: {
-    hasFetched: {
-      type: Boolean,
-      default: false,
-    },
-    isCampaignViewClicked: {
-      type: Boolean,
-      default: false,
-    },
-  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
-      activeCampaign: 'campaign/getActiveCampaign',
       conversationSize: 'conversation/getConversationSize',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
       popularArticles: 'article/popularArticles',
@@ -134,3 +88,38 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    class="z-50 flex flex-col flex-1 w-full rounded-md"
+    :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
+  >
+    <div class="w-full px-4 pt-4">
+      <TeamAvailability
+        :available-agents="availableAgents"
+        :has-conversation="!!conversationSize"
+        :unread-count="unreadMessageCount"
+        @startConversation="startConversation"
+      />
+    </div>
+    <div v-if="showArticles" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
+        <ArticleHero
+          v-if="
+            !articleUiFlags.isFetching &&
+            !articleUiFlags.isError &&
+            popularArticles.length
+          "
+          :articles="popularArticles"
+          @view="openArticleInArticleViewer"
+          @viewAll="viewAllArticles"
+        />
+      </div>
+    </div>
+    <div v-if="articleUiFlags.isFetching" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
+        <ArticleCardSkeletonLoader />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/widget/views/Messages.vue

@@ -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,14 @@ 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">
+      <ConversationWrap :grouped-messages="groupedMessages" />
+    </div>
+    <ChatFooter class="px-5" />
+  </div>
+</template>

app/javascript/widget/views/PreChatForm.vue

@@ -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,9 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-1 overflow-auto">
+    <PreChatForm :options="preChatFormOptions" @submit="onSubmit" />
+  </div>
+</template>

app/javascript/widget/views/UnreadMessages.vue

@@ -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>
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
+</template>