fix: apply ESLint rule vue/component-name-in-template-casing

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -145,7 +145,7 @@ export default {
   <div
     class="flex flex-wrap flex-grow-0 w-full h-full max-w-full min-h-0 ml-auto mr-auto app-wrapper dark:text-slate-300"
   >
-    <sidebar
+    <Sidebar
       :route="currentRoute"
       :show-secondary-sidebar="isSidebarOpen"
       @open-notification-panel="openNotificationPanel"
@@ -156,27 +156,27 @@ export default {
     />
     <section class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
       <router-view />
-      <command-bar />
-      <account-selector
+      <CommandBar />
+      <AccountSelector
         :show-account-modal="showAccountModal"
         @close-account-modal="toggleAccountModal"
         @show-create-account-modal="openCreateAccountModal"
       />
-      <add-account-modal
+      <AddAccountModal
         :show="showCreateAccountModal"
         @close-account-create-modal="closeCreateAccountModal"
       />
-      <woot-key-shortcut-modal
+      <WootKeyShortcutModal
         :show.sync="showShortcutModal"
         @close="closeKeyShortcutModal"
         @clickaway="closeKeyShortcutModal"
       />
-      <notification-panel
+      <NotificationPanel
         v-if="isNotificationPanel"
         @close="closeNotificationPanel"
       />
       <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
-        <add-label-modal @close="hideAddLabelPopup" />
+        <AddLabelModal @close="hideAddLabelPopup" />
       </woot-modal>
     </section>
   </div>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -81,7 +81,7 @@ export default {
     class="relative w-1/4 h-full overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
     :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
   >
-    <contact-info
+    <ContactInfo
       :show-close-button="showCloseButton"
       :show-avatar="showAvatar"
       :contact="contact"
@@ -104,7 +104,7 @@ export default {
           class="list-group-item"
         >
           <div v-if="element.name === 'contact_attributes'">
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
               :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
               compact
@@ -112,7 +112,7 @@ export default {
                 value => toggleSidebarUIState('is_ct_custom_attr_open', value)
               "
             >
-              <custom-attributes
+              <CustomAttributes
                 :contact-id="contact.id"
                 attribute-type="contact_attribute"
                 attribute-class="conversation--attribute"
@@ -123,19 +123,19 @@ export default {
                 "
                 class="even"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div v-if="element.name === 'contact_labels'">
-            <accordion-item
+            <AccordionItem
               :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
               :is-open="isContactSidebarItemOpen('is_ct_labels_open')"
               @click="value => toggleSidebarUIState('is_ct_labels_open', value)"
             >
-              <contact-label :contact-id="contact.id" class="contact-labels" />
-            </accordion-item>
+              <ContactLabel :contact-id="contact.id" class="contact-labels" />
+            </AccordionItem>
           </div>
           <div v-if="element.name === 'previous_conversation'">
-            <accordion-item
+            <AccordionItem
               :title="
                 $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
               "
@@ -144,12 +144,12 @@ export default {
                 value => toggleSidebarUIState('is_ct_prev_conv_open', value)
               "
             >
-              <contact-conversations
+              <ContactConversations
                 v-if="contact.id"
                 :contact-id="contact.id"
                 conversation-id=""
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
         </div>
       </transition-group>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue

@@ -77,7 +77,7 @@ export default {
 </script>
 
 <template>
-  <label-selector
+  <LabelSelector
     :all-labels="allLabels"
     :saved-labels="savedLabels"
     @add="addItem"

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -281,7 +281,7 @@ export default {
       <div
         class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
       >
-        <filter-input-box
+        <FilterInputBox
           v-for="(filter, i) in appliedFilters"
           :key="i"
           v-model="appliedFilters[i]"

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue

@@ -252,7 +252,7 @@ export default {
   <section
     class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
   >
-    <ve-table
+    <VeTable
       :fixed-header="true"
       max-height="calc(100vh - 7.125rem)"
       scroll-width="187rem"
@@ -262,16 +262,16 @@ export default {
       :sort-option="sortOption"
     />
 
-    <empty-state
+    <EmptyState
       v-if="showSearchEmptyState"
       :title="$t('CONTACTS_PAGE.LIST.404')"
     />
-    <empty-state
+    <EmptyState
       v-else-if="!isLoading && !contacts.length"
       :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
     />
     <div v-if="isLoading" class="flex items-center justify-center text-base">
-      <spinner />
+      <Spinner />
       <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
     </div>
   </section>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue

@@ -391,7 +391,7 @@ export default {
 <template>
   <div class="flex flex-row w-full">
     <div class="flex flex-col h-full" :class="wrapClass">
-      <contacts-header
+      <ContactsHeader
         :search-query="searchQuery"
         :header-title="pageTitle"
         :segments-id="segmentsId"
@@ -406,7 +406,7 @@ export default {
         @on-toggle-delete-filter="onToggleDeleteFilters"
         @on-toggle-edit-filter="onToggleFilters"
       />
-      <contacts-table
+      <ContactsTable
         :contacts="records"
         :show-search-empty-state="showEmptySearchResult"
         :is-loading="uiFlags.isFetching"
@@ -414,7 +414,7 @@ export default {
         :active-contact-id="selectedContactId"
         @on-sort-change="onSortChange"
       />
-      <table-footer
+      <TableFooter
         class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
@@ -423,14 +423,14 @@ export default {
       />
     </div>
 
-    <add-custom-views
+    <AddCustomViews
       v-if="showAddSegmentsModal"
       :custom-views-query="segmentsQuery"
       :filter-type="filterType"
       :open-last-saved-item="openSavedItemInSegment"
       @close="onCloseAddSegmentsModal"
     />
-    <delete-custom-views
+    <DeleteCustomViews
       v-if="showDeleteSegmentsModal"
       :show-delete-popup.sync="showDeleteSegmentsModal"
       :active-custom-view="activeSegment"
@@ -440,21 +440,21 @@ export default {
       @close="onCloseDeleteSegmentsModal"
     />
 
-    <contact-info-panel
+    <ContactInfoPanel
       v-if="showContactViewPane"
       :contact="selectedContact"
       :on-close="closeContactInfoPanel"
     />
-    <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
+    <CreateContact :show="showCreateModal" @cancel="onToggleCreate" />
     <woot-modal :show.sync="showImportModal" :on-close="onToggleImport">
-      <import-contacts v-if="showImportModal" :on-close="onToggleImport" />
+      <ImportContacts v-if="showImportModal" :on-close="onToggleImport" />
     </woot-modal>
     <woot-modal
       :show.sync="showFiltersModal"
       :on-close="closeAdvanceFiltersModal"
       size="medium"
     >
-      <contacts-advanced-filters
+      <ContactsAdvancedFilters
         v-if="showFiltersModal"
         :on-close="closeAdvanceFiltersModal"
         :initial-filter-types="contactFilterItems"

app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
         <p>
@@ -91,5 +91,5 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </Modal>
 </template>

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -67,7 +67,7 @@ export default {
   <div
     class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
   >
-    <settings-header
+    <SettingsHeader
       button-route="new"
       :header-title="contact.name"
       show-back-button
@@ -75,22 +75,22 @@ export default {
       :back-url="backUrl"
       :show-new-button="false"
     >
-      <thumbnail
+      <Thumbnail
         v-if="contact.thumbnail"
         :src="contact.thumbnail"
         :username="contact.name"
         size="32px"
         class="mr-2 rtl:mr-0 rtl:ml-2"
       />
-    </settings-header>
+    </SettingsHeader>
 
     <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
-      <spinner size="" />
+      <Spinner size="" />
       <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
     </div>
     <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
       <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
-        <contact-info-panel
+        <ContactInfoPanel
           :show-close-button="false"
           :show-avatar="false"
           :contact="contact"
@@ -107,7 +107,7 @@ export default {
           <div
             class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
           >
-            <contact-notes
+            <ContactNotes
               v-if="selectedTabIndex === 0"
               :contact-id="Number(contactId)"
             />

app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue

@@ -55,7 +55,7 @@ export default {
         </span>
       </div>
       <div v-else class="contact-conversation--list">
-        <conversation-card
+        <ConversationCard
           v-for="conversation in previousConversations"
           :key="conversation.id"
           :chat="conversation"
@@ -65,7 +65,7 @@ export default {
         />
       </div>
     </div>
-    <spinner v-else />
+    <Spinner v-else />
   </div>
 </template>
 

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -137,7 +137,7 @@ export default {
   <div
     class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
   >
-    <contact-info
+    <ContactInfo
       :contact="contact"
       :channel-type="channelType"
       @toggle-panel="onPanelToggle"
@@ -162,24 +162,24 @@ export default {
             v-if="element.name === 'conversation_actions'"
             class="conversation--actions"
           >
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_ACTIONS')"
               :is-open="isContactSidebarItemOpen('is_conv_actions_open')"
               @click="
                 value => toggleSidebarUIState('is_conv_actions_open', value)
               "
             >
-              <conversation-action
+              <ConversationAction
                 :conversation-id="conversationId"
                 :inbox-id="inboxId"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div
             v-else-if="element.name === 'conversation_participants'"
             class="conversation--actions"
           >
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_PARTICIPANTS.SIDEBAR_TITLE')"
               :is-open="isContactSidebarItemOpen('is_conv_participants_open')"
               @click="
@@ -187,14 +187,14 @@ export default {
                   toggleSidebarUIState('is_conv_participants_open', value)
               "
             >
-              <conversation-participant
+              <ConversationParticipant
                 :conversation-id="conversationId"
                 :inbox-id="inboxId"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div v-else-if="element.name === 'conversation_info'">
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_INFO')"
               :is-open="isContactSidebarItemOpen('is_conv_details_open')"
               compact
@@ -202,14 +202,14 @@ export default {
                 value => toggleSidebarUIState('is_conv_details_open', value)
               "
             >
-              <conversation-info
+              <ConversationInfo
                 :conversation-attributes="conversationAdditionalAttributes"
                 :contact-attributes="contactAdditionalAttributes"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div v-else-if="element.name === 'contact_attributes'">
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
               :is-open="isContactSidebarItemOpen('is_contact_attributes_open')"
               compact
@@ -218,7 +218,7 @@ export default {
                   toggleSidebarUIState('is_contact_attributes_open', value)
               "
             >
-              <custom-attributes
+              <CustomAttributes
                 attribute-type="contact_attribute"
                 attribute-class="conversation--attribute"
                 class="even"
@@ -228,10 +228,10 @@ export default {
                   $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
                 "
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <div v-else-if="element.name === 'previous_conversation'">
-            <accordion-item
+            <AccordionItem
               v-if="contact.id"
               :title="
                 $t('CONVERSATION_SIDEBAR.ACCORDION.PREVIOUS_CONVERSATION')
@@ -241,24 +241,24 @@ export default {
                 value => toggleSidebarUIState('is_previous_conv_open', value)
               "
             >
-              <contact-conversations
+              <ContactConversations
                 :contact-id="contact.id"
                 :conversation-id="conversationId"
               />
-            </accordion-item>
+            </AccordionItem>
           </div>
           <woot-feature-toggle
             v-else-if="element.name === 'macros'"
             feature-key="macros"
           >
-            <accordion-item
+            <AccordionItem
               :title="$t('CONVERSATION_SIDEBAR.ACCORDION.MACROS')"
               :is-open="isContactSidebarItemOpen('is_macro_open')"
               compact
               @click="value => toggleSidebarUIState('is_macro_open', value)"
             >
-              <macros-list :conversation-id="conversationId" />
-            </accordion-item>
+              <MacrosList :conversation-id="conversationId" />
+            </AccordionItem>
           </woot-feature-toggle>
         </div>
       </transition-group>

app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue

@@ -193,7 +193,7 @@ export default {
 <template>
   <div class="bg-white dark:bg-slate-900">
     <div class="multiselect-wrap--small">
-      <contact-details-item
+      <ContactDetailsItem
         compact
         :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
       >
@@ -208,8 +208,8 @@ export default {
             {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
           </woot-button>
         </template>
-      </contact-details-item>
-      <multiselect-dropdown
+      </ContactDetailsItem>
+      <MultiselectDropdown
         :options="agentsList"
         :selected-item="assignedAgent"
         :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.AGENT')"
@@ -224,11 +224,11 @@ export default {
       />
     </div>
     <div class="multiselect-wrap--small">
-      <contact-details-item
+      <ContactDetailsItem
         compact
         :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
       />
-      <multiselect-dropdown
+      <MultiselectDropdown
         :options="teamsList"
         :selected-item="assignedTeam"
         :multiselector-title="$t('AGENT_MGMT.MULTI_SELECTOR.TITLE.TEAM')"
@@ -243,11 +243,8 @@ export default {
       />
     </div>
     <div class="multiselect-wrap--small">
-      <contact-details-item
-        compact
-        :title="$t('CONVERSATION.PRIORITY.TITLE')"
-      />
-      <multiselect-dropdown
+      <ContactDetailsItem compact :title="$t('CONVERSATION.PRIORITY.TITLE')" />
+      <MultiselectDropdown
         :options="priorityOptions"
         :selected-item="assignedPriority"
         :multiselector-title="$t('CONVERSATION.PRIORITY.TITLE')"
@@ -263,10 +260,10 @@ export default {
         @click="onClickAssignPriority"
       />
     </div>
-    <contact-details-item
+    <ContactDetailsItem
       compact
       :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_LABELS')"
     />
-    <conversation-labels :conversation-id="conversationId" />
+    <ConversationLabels :conversation-id="conversationId" />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue

@@ -156,7 +156,7 @@ export default {
       <div class="flex justify-between w-full mb-1">
         <div>
           <p v-if="watchersList.length" class="total-watchers m-0 text-sm">
-            <spinner v-if="watchersUiFlas.isFetching" size="tiny" />
+            <Spinner v-if="watchersUiFlas.isFetching" size="tiny" />
             {{ totalWatchersText }}
           </p>
           <p v-else class="text-slate-400 dark:text-slate-700 m-0 text-sm">
@@ -175,7 +175,7 @@ export default {
       </div>
     </div>
     <div class="flex justify-between items-center">
-      <thumbnail-group
+      <ThumbnailGroup
         :more-thumbnails-text="moreThumbnailsText"
         :show-more-thumbnails-count="showMoreThumbs"
         :users-list="thumbnailList"
@@ -219,7 +219,7 @@ export default {
           @click="onCloseDropdown"
         />
       </div>
-      <multiselect-dropdown-items
+      <MultiselectDropdownItems
         :options="agentsList"
         :selected-items="selectedWatchers"
         :has-thumbnail="true"

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -221,7 +221,7 @@ export default {
 
 <template>
   <section class="bg-white conversation-page dark:bg-slate-900">
-    <chat-list
+    <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"
       :label="label"
@@ -231,12 +231,12 @@ export default {
       :is-on-expanded-layout="isOnExpandedLayout"
       @conversation-load="onConversationLoad"
     >
-      <pop-over-search
+      <PopOverSearch
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle-conversation-layout="toggleConversationLayout"
       />
-    </chat-list>
-    <conversation-box
+    </ChatList>
+    <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"
       :is-contact-panel-open="isContactPanelOpen"
@@ -247,7 +247,7 @@ export default {
       :show.sync="showCustomSnoozeModal"
       :on-close="hideCustomSnoozeModal"
     >
-      <custom-snooze-modal
+      <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
         @choose-time="chooseSnoozeTime"
       />

app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue

@@ -50,7 +50,7 @@ export default {
       :message="$t('MACROS.LOADING')"
     />
     <div v-if="!uiFlags.isFetching && macros.length" class="macros-list">
-      <macro-item
+      <MacroItem
         v-for="macro in macros"
         :key="macro.id"
         :macro="macro"

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue

@@ -74,7 +74,7 @@ export default {
       />
     </div>
     <transition name="menu-slide">
-      <macro-preview
+      <MacroPreview
         v-if="showPreview"
         v-on-clickaway="closeMacroPreview"
         :macro="macro"

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -171,7 +171,7 @@ export default {
   <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
     <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
       <div class="flex flex-row justify-between">
-        <thumbnail
+        <Thumbnail
           v-if="showAvatar"
           :src="contact.thumbnail"
           size="56px"
@@ -225,7 +225,7 @@ export default {
           {{ additionalAttributes.description }}
         </p>
         <div class="flex flex-col items-start w-full gap-2">
-          <contact-info-row
+          <ContactInfoRow
             :href="contact.email ? `mailto:${contact.email}` : ''"
             :value="contact.email"
             icon="mail"
@@ -233,7 +233,7 @@ export default {
             :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
             show-copy
           />
-          <contact-info-row
+          <ContactInfoRow
             :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
             :value="contact.phone_number"
             icon="call"
@@ -241,27 +241,27 @@ export default {
             :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
             show-copy
           />
-          <contact-info-row
+          <ContactInfoRow
             v-if="contact.identifier"
             :value="contact.identifier"
             icon="contact-identify"
             emoji="🪪"
             :title="$t('CONTACT_PANEL.IDENTIFIER')"
           />
-          <contact-info-row
+          <ContactInfoRow
             :value="additionalAttributes.company_name"
             icon="building-bank"
             emoji="🏢"
             :title="$t('CONTACT_PANEL.COMPANY')"
           />
-          <contact-info-row
+          <ContactInfoRow
             v-if="location || additionalAttributes.location"
             :value="location || additionalAttributes.location"
             icon="map"
             emoji="🌍"
             :title="$t('CONTACT_PANEL.LOCATION')"
           />
-          <social-icons :social-profiles="socialProfiles" />
+          <SocialIcons :social-profiles="socialProfiles" />
         </div>
       </div>
       <div class="flex items-center w-full mt-0.5 gap-2">
@@ -302,19 +302,19 @@ export default {
           @click="toggleDeleteModal"
         />
       </div>
-      <edit-contact
+      <EditContact
         v-if="showEditModal"
         :show="showEditModal"
         :contact="contact"
         @cancel="toggleEditModal"
       />
-      <new-conversation
+      <NewConversation
         v-if="contact.id"
         :show="showConversationModal"
         :contact="contact"
         @cancel="toggleConversationModal"
       />
-      <contact-merge-modal
+      <ContactMergeModal
         v-if="showMergeModal"
         :primary-contact="contact"
         :show="showMergeModal"

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue

@@ -45,7 +45,7 @@ export default {
       :href="href"
       class="flex items-center gap-2 text-slate-800 dark:text-slate-100 hover:underline"
     >
-      <emoji-or-icon
+      <EmojiOrIcon
         :icon="icon"
         :emoji="emoji"
         icon-size="14"
@@ -78,7 +78,7 @@ export default {
       v-else
       class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
     >
-      <emoji-or-icon
+      <EmojiOrIcon
         :icon="icon"
         :emoji="emoji"
         icon-size="14"

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -355,7 +355,7 @@ export default {
               :options="[...inboxes]"
             >
               <template slot="singleLabel" slot-scope="{ option }">
-                <inbox-dropdown-item
+                <InboxDropdownItem
                   v-if="option.name"
                   :name="option.name"
                   :inbox-identifier="computedInboxSource(option)"
@@ -366,7 +366,7 @@ export default {
                 </span>
               </template>
               <template slot="option" slot-scope="{ option }">
-                <inbox-dropdown-item
+                <InboxDropdownItem
                   :name="option.name"
                   :inbox-identifier="computedInboxSource(option)"
                   :channel-type="option.channel_type"
@@ -386,7 +386,7 @@ export default {
             <div
               class="flex items-center h-[2.4735rem] rounded-sm py-1 px-2 bg-slate-25 dark:bg-slate-900 border border-solid border-slate-75 dark:border-slate-600"
             >
-              <thumbnail
+              <Thumbnail
                 :src="contact.thumbnail"
                 size="24px"
                 :username="contact.name"
@@ -420,7 +420,7 @@ export default {
       <div class="w-full">
         <div class="w-full">
           <div class="relative">
-            <canned-response
+            <CannedResponse
               v-if="showCannedResponseMenu && hasSlashCommand"
               :search-key="cannedResponseSearchKey"
               @click="replaceTextWithCannedResponse"
@@ -430,13 +430,13 @@ export default {
             <label>
               {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
             </label>
-            <reply-email-head
+            <ReplyEmailHead
               v-if="isAnEmailInbox"
               :cc-emails.sync="ccEmails"
               :bcc-emails.sync="bccEmails"
             />
             <div class="editor-wrap">
-              <woot-message-editor
+              <WootMessageEditor
                 v-model="message"
                 class="message-editor"
                 :class="{ editor_warning: v$.message.$error }"
@@ -448,7 +448,7 @@ export default {
                 @blur="v$.message.$touch"
               >
                 <template #footer>
-                  <message-signature-missing-alert
+                  <MessageSignatureMissingAlert
                     v-if="isSignatureEnabledForInbox && !messageSignature"
                     class="!mx-0 mb-1"
                   />
@@ -464,13 +464,13 @@ export default {
                     />
                   </div>
                 </template>
-              </woot-message-editor>
+              </WootMessageEditor>
               <span v-if="v$.message.$error" class="editor-warning__message">
                 {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
               </span>
             </div>
           </div>
-          <whatsapp-templates
+          <WhatsappTemplates
             v-else-if="hasWhatsappTemplates"
             :inbox-id="selectedInbox.inbox.id"
             @on-select-template="toggleWaTemplate"
@@ -490,7 +490,7 @@ export default {
             </span>
           </label>
           <div v-if="isEmailOrWebWidgetInbox" class="flex flex-col">
-            <file-upload
+            <FileUpload
               ref="uploadAttachment"
               input-id="newConversationAttachment"
               :size="4096 * 4096"
@@ -519,12 +519,12 @@ export default {
               >
                 {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.HELP_TEXT') }}
               </span>
-            </file-upload>
+            </FileUpload>
             <div
               v-if="hasAttachments"
               class="max-h-20 overflow-y-auto mb-4 mt-1.5"
             >
-              <attachment-preview
+              <AttachmentPreview
                 class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
                 :attachments="attachedFiles"
                 :remove-attachment="removeAttachment"

app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue

@@ -45,7 +45,7 @@ export default {
         :header-title="$t('CREATE_CONTACT.TITLE')"
         :header-content="$t('CREATE_CONTACT.DESC')"
       />
-      <contact-form
+      <ContactForm
         :in-progress="uiFlags.isCreating"
         :on-submit="onSubmit"
         @success="onSuccess"

app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue

@@ -51,7 +51,7 @@ export default {
         }`"
         :header-content="$t('EDIT_CONTACT.DESC')"
       />
-      <contact-form
+      <ContactForm
         :contact="contact"
         :in-progress="uiFlags.isUpdating"
         :on-submit="onSubmit"

app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue

@@ -50,7 +50,7 @@ export default {
         :header-title="$t('NEW_CONVERSATION.TITLE')"
         :header-content="$t('NEW_CONVERSATION.DESC')"
       />
-      <conversation-form
+      <ConversationForm
         :contact="contact"
         :on-submit="onSubmit"
         @success="onSuccess"

app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue

@@ -42,12 +42,12 @@ export default {
 
 <template>
   <div class="mx-0 flex flex-wrap">
-    <templates-picker
+    <TemplatesPicker
       v-if="!selectedWaTemplate"
       :inbox-id="inboxId"
       @onSelect="pickTemplate"
     />
-    <template-parser
+    <TemplateParser
       v-else
       :template="selectedWaTemplate"
       @resetTemplate="onResetTemplate"

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue

@@ -148,7 +148,7 @@ export default {
 
 <template>
   <div class="custom-attributes--panel">
-    <custom-attribute
+    <CustomAttribute
       v-for="attribute in displayedAttributes"
       :key="attribute.id"
       :attribute-key="attribute.attribute_key"

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -80,7 +80,7 @@ export default {
         class="label-wrap"
         @keyup.esc="closeDropdownLabel"
       >
-        <add-label @add="toggleLabels" />
+        <AddLabel @add="toggleLabels" />
         <woot-label
           v-for="label in activeLabels"
           :key="label.id"
@@ -98,7 +98,7 @@ export default {
             :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
             class="dropdown-pane"
           >
-            <label-dropdown
+            <LabelDropdown
               v-if="showSearchDropdownLabel"
               :account-labels="accountLabels"
               :selected-labels="savedLabels"
@@ -110,7 +110,7 @@ export default {
         </div>
       </div>
     </div>
-    <spinner v-else />
+    <Spinner v-else />
   </div>
 </template>
 

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -58,7 +58,7 @@ export default {
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </p>
       </router-link>
-      <switch-layout
+      <SwitchLayout
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle="$emit('toggle-conversation-layout')"
       />

app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue

@@ -97,7 +97,7 @@ export default {
 
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <woot-modal-header
       :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
       :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
@@ -132,7 +132,7 @@ export default {
         </div>
       </div>
     </form>
-  </modal>
+  </Modal>
 </template>
 <style scoped lang="scss">
 .input-container::v-deep {

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue

@@ -57,7 +57,7 @@ export default {
 
 <template>
   <div class="edit-article--container">
-    <resizable-text-area
+    <ResizableTextArea
       v-model="articleTitle"
       type="text"
       :rows="1"
@@ -67,7 +67,7 @@ export default {
       @blur="onBlur"
       @input="onTitleInput"
     />
-    <woot-article-editor
+    <WootArticleEditor
       v-model="articleContent"
       class="article-content"
       :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue

@@ -39,7 +39,7 @@ export default {
     </div>
     <div class="-ml-4 h-full overflow-y-auto">
       <div class="w-full h-full min-h-0">
-        <iframe-loader :url="url" />
+        <IframeLoader :url="url" />
       </div>
     </div>
 

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue

@@ -136,20 +136,20 @@ export default {
       v-on-clickaway="onClose"
       class="flex flex-col px-4 pb-4 rounded-md shadow-md border border-solid border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-900 z-[1000] max-w-[720px] md:w-[20rem] lg:w-[24rem] xl:w-[28rem] 2xl:w-[32rem] h-[calc(100vh-20rem)] max-h-[40rem]"
     >
-      <search-header
+      <SearchHeader
         :title="$t('HELP_CENTER.ARTICLE_SEARCH.TITLE')"
         class="w-full sticky top-0 bg-[inherit]"
         @close="onClose"
         @search="onSearch"
       />
 
-      <article-view
+      <ArticleView
         v-if="activeId"
         :url="articleViewerUrl"
         @back="onBack"
         @insert="onInsert"
       />
-      <search-results
+      <SearchResults
         v-else
         :search-query="searchQuery"
         :is-loading="isLoading"

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue

@@ -51,7 +51,7 @@ export default {
       <div v-else-if="showNoResults" class="empty-state-message">
         {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
       </div>
-      <search-result-item
+      <SearchResultItem
         v-for="article in articles"
         v-else
         :id="article.id"

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue

@@ -145,7 +145,7 @@ export default {
       />
     </draggable>
 
-    <table-footer
+    <TableFooter
       v-if="showArticleFooter"
       :current-page="currentPage"
       :total-count="totalCount"

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue

@@ -125,7 +125,7 @@ export default {
           class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
         >
           {{ selectedValue }}
-          <Fluent-icon class="dropdown-arrow" icon="chevron-down" size="14" />
+          <FluentIcon class="dropdown-arrow" icon="chevron-down" size="14" />
         </span>
       </woot-button>
       <div
@@ -133,8 +133,8 @@ export default {
         v-on-clickaway="closeDropdown"
         class="dropdown-pane dropdown-pane--open"
       >
-        <woot-dropdown-menu>
-          <woot-dropdown-item>
+        <WootDropdownMenu>
+          <WootDropdownItem>
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -143,8 +143,8 @@ export default {
             >
               {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
             </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
+          </WootDropdownItem>
+          <WootDropdownItem>
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -153,8 +153,8 @@ export default {
             >
               {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
             </woot-button>
-          </woot-dropdown-item>
-          <woot-dropdown-item>
+          </WootDropdownItem>
+          <WootDropdownItem>
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -163,8 +163,8 @@ export default {
             >
               {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
             </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
+          </WootDropdownItem>
+        </WootDropdownMenu>
       </div>
       <woot-button
         v-if="shouldShowSettings"
@@ -188,7 +188,7 @@ export default {
               class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
             >
               {{ selectedLocale }}
-              <Fluent-icon
+              <FluentIcon
                 class="dropdown-arrow"
                 icon="chevron-down"
                 size="14"
@@ -201,7 +201,7 @@ export default {
           v-on-clickaway="closeLocaleDropdown"
           class="dropdown-pane dropdown-pane--open"
         >
-          <multiselect-dropdown-items
+          <MultiselectDropdownItems
             :options="switchableLocales"
             :has-thumbnail="false"
             :selected-items="[selectedLocale]"

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -285,14 +285,14 @@ export default {
 </script>
 <template>
   <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
-    <sidebar
+    <Sidebar
       :route="currentRoute"
       @toggle-account-modal="toggleAccountModal"
       @open-notification-panel="openNotificationPanel"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
     />
-    <help-center-sidebar
+    <HelpCenterSidebar
       v-if="showHelpCenterSidebar"
       :header-title="headerTitle"
       :portal-slug="selectedPortalSlug"
@@ -308,21 +308,21 @@ export default {
       class="flex flex-1 h-full min-h-0 px-0 overflow-hidden bg-white dark:bg-slate-900"
     >
       <router-view @reload-locale="fetchPortalAndItsCategories" />
-      <command-bar />
-      <account-selector
+      <CommandBar />
+      <AccountSelector
         :show-account-modal="showAccountModal"
         @close-account-modal="toggleAccountModal"
       />
-      <woot-key-shortcut-modal
+      <WootKeyShortcutModal
         v-if="showShortcutModal"
         @close="closeKeyShortcutModal"
         @clickaway="closeKeyShortcutModal"
       />
-      <notification-panel
+      <NotificationPanel
         v-if="showNotificationPanel"
         @close="closeNotificationPanel"
       />
-      <portal-popover
+      <PortalPopover
         v-if="showPortalPopover"
         :portals="portals"
         :active-portal-slug="selectedPortalSlug"
@@ -330,7 +330,7 @@ export default {
         @fetch-portal="fetchPortalAndItsCategories"
         @close-popover="closePortalPopover"
       />
-      <add-category
+      <AddCategory
         v-if="showAddCategoryModal"
         :show.sync="showAddCategoryModal"
         :portal-name="selectedPortalName"
@@ -339,6 +339,6 @@ export default {
         @cancel="onClickCloseAddCategoryModal"
       />
     </section>
-    <upgrade-page v-else />
+    <UpgradePage v-else />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue

@@ -354,7 +354,7 @@ export default {
               )
             }}
           </h2>
-          <locale-item-table
+          <LocaleItemTable
             :locales="locales"
             :selected-locale-code="portal.meta.default_locale"
             @change-default-locale="changeDefaultLocale"

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue

@@ -70,7 +70,7 @@ export default {
       </p>
     </header>
     <div>
-      <portal-switch
+      <PortalSwitch
         v-for="portal in portals"
         :key="portal.id"
         :portal="portal"

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue

@@ -66,7 +66,7 @@ export default {
   <div
     class="h-full overflow-auto w-60 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm"
   >
-    <sidebar-header
+    <SidebarHeader
       :thumbnail-src="thumbnailSrc"
       :header-title="headerTitle"
       :sub-title="subTitle"
@@ -79,12 +79,12 @@ export default {
       tag="ul"
       class="py-2 px-4 list-none ml-0 mb-0"
     >
-      <secondary-nav-item
+      <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
         :key="menuItem.toState"
         :menu-item="menuItem"
       />
-      <secondary-nav-item
+      <SecondaryNavItem
         v-for="menuItem in additionalSecondaryMenuItems"
         :key="menuItem.key"
         :menu-item="menuItem"

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue

@@ -38,7 +38,7 @@ export default {
     class="flex h-16 items-center justify-between py-4 px-0 mb-1/4 border-b border-slate-50 dark:border-slate-700"
   >
     <div class="flex items-center">
-      <thumbnail
+      <Thumbnail
         size="32px"
         :src="thumbnailSrc"
         :username="headerTitle"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue

@@ -130,7 +130,7 @@ export default {
       <div class="mt-4 mb-6">
         <label>
           {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
-          <multiselect-dropdown
+          <MultiselectDropdown
             :options="categories"
             :selected-item="selectedCategory"
             :has-thumbnail="false"
@@ -153,7 +153,7 @@ export default {
         </label>
         <label>
           {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
-          <multiselect-dropdown
+          <MultiselectDropdown
             :options="agents"
             :selected-item="assignedAuthor"
             :multiselector-title="

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue

@@ -174,7 +174,7 @@ export default {
       class="flex-1 flex-shrink-0 px-6 overflow-auto"
       :class="{ 'flex-grow-1 flex-shrink-0': showArticleSettings }"
     >
-      <edit-article-header
+      <EditArticleHeader
         :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
         :is-updating="isUpdating"
         :is-saved="isSaved"
@@ -186,17 +186,17 @@ export default {
         @update-meta="updateMeta"
       />
       <div v-if="isFetching" class="h-full p-4 text-base text-center">
-        <spinner size="" />
+        <Spinner size="" />
         <span>{{ $t('HELP_CENTER.EDIT_ARTICLE.LOADING') }}</span>
       </div>
-      <article-editor
+      <ArticleEditor
         v-else
         :is-settings-sidebar-open="showArticleSettings"
         :article="article"
         @save-article="saveArticle"
       />
     </div>
-    <article-settings
+    <ArticleSettings
       v-if="showArticleSettings"
       :article="article"
       @save-article="saveArticle"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue

@@ -159,7 +159,7 @@ export default {
   <div
     class="py-0 px-0 w-full max-w-full overflow-auto bg-white dark:bg-slate-900 flex flex-col"
   >
-    <article-header
+    <ArticleHeader
       :header-title="headerTitle"
       :count="meta.count"
       :selected-locale="activeLocaleName"
@@ -173,17 +173,17 @@ export default {
       v-if="isFetching"
       class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
     >
-      <spinner />
+      <Spinner />
       <span class="text-slate-600 dark:text-slate-200">
         {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
       </span>
     </div>
-    <empty-state
+    <EmptyState
       v-else-if="shouldShowEmptyState"
       :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
     />
     <div v-else class="flex flex-1">
-      <article-table
+      <ArticleTable
         :articles="articles"
         :current-page="Number(meta.currentPage)"
         :total-count="Number(meta.count)"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue

@@ -99,7 +99,7 @@ export default {
       class="flex-1 flex-shrink-0 px-6 overflow-y-auto"
       :class="{ 'flex-grow-1': showArticleSettings }"
     >
-      <edit-article-header
+      <EditArticleHeader
         :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
         draft-state="saved"
         :is-sidebar-open="showArticleSettings"
@@ -108,9 +108,9 @@ export default {
         @close="closeArticleSettings"
         @save-article="createNewArticle"
       />
-      <article-editor :article="newArticle" @save-article="createNewArticle" />
+      <ArticleEditor :article="newArticle" @save-article="createNewArticle" />
     </div>
-    <article-settings
+    <ArticleSettings
       v-if="showArticleSettings"
       :article="article"
       @save-article="saveArticle"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue

@@ -134,7 +134,7 @@ export default {
             </label>
           </div>
         </div>
-        <category-name-icon-input
+        <CategoryNameIconInput
           :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue

@@ -143,7 +143,7 @@ export default {
             </label>
           </div>
         </div>
-        <category-name-icon-input
+        <CategoryNameIconInput
           :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue

@@ -134,13 +134,13 @@ function changeCurrentCategory(event) {
       </div>
     </header>
     <div class="category-list">
-      <category-list-item
+      <CategoryListItem
         :categories="categoriesByLocaleCode"
         @delete="deleteCategory"
         @edit="openEditCategoryModal"
       />
     </div>
-    <edit-category
+    <EditCategory
       v-if="showEditCategoryModal"
       :show.sync="showEditCategoryModal"
       :portal-name="currentPortalName"
@@ -149,7 +149,7 @@ function changeCurrentCategory(event) {
       :selected-portal-slug="currentPortalSlug"
       @cancel="closeEditCategoryModal"
     />
-    <add-category
+    <AddCategory
       v-if="showAddCategoryModal"
       :show.sync="showAddCategoryModal"
       :portal-name="currentPortalName"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue

@@ -103,7 +103,7 @@ export default {
       :help-text="helpText"
       @input="onNameChange"
     />
-    <emoji-input
+    <EmojiInput
       v-if="showEmojiPicker"
       v-on-clickaway="hideEmojiPicker"
       class="left-0 top-16"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue

@@ -69,7 +69,7 @@ export default {
 
 <template>
   <div class="wrapper">
-    <settings-header
+    <SettingsHeader
       button-route="new"
       :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
       show-back-button
@@ -79,7 +79,7 @@ export default {
       :show-new-button="false"
     />
     <div class="overflow-auto max-h-[96%]">
-      <setting-intro-banner :header-title="portalName">
+      <SettingIntroBanner :header-title="portalName">
         <woot-tabs
           :index="activeTabIndex"
           :border="false"
@@ -92,7 +92,7 @@ export default {
             :show-badge="false"
           />
         </woot-tabs>
-      </setting-intro-banner>
+      </SettingIntroBanner>
       <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
         <router-view />
       </div>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue

@@ -71,7 +71,7 @@ async function deleteLogo() {
 </script>
 
 <template>
-  <portal-settings-basic-form
+  <PortalSettingsBasicForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue

@@ -44,7 +44,7 @@ async function updatePortalSettings(portalObj) {
 </script>
 
 <template>
-  <portal-settings-customization-form
+  <PortalSettingsCustomizationForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue

@@ -72,7 +72,7 @@ export default {
       </woot-button>
     </div>
     <div class="h-[90vh] overflow-y-scroll">
-      <portal-list-item
+      <PortalListItem
         v-for="portal in portals"
         :key="portal.id"
         :portal="portal"
@@ -84,10 +84,10 @@ export default {
         v-if="isFetching"
         class="flex items-center justify-center p-40 text-base"
       >
-        <spinner />
+        <Spinner />
         <span>{{ $t('HELP_CENTER.PORTAL.LOADING_MESSAGE') }}</span>
       </div>
-      <empty-state
+      <EmptyState
         v-else-if="shouldShowEmptyState"
         :title="$t('HELP_CENTER.PORTAL.NO_PORTALS_MESSAGE')"
       />
@@ -96,7 +96,7 @@ export default {
       :show.sync="isAddLocaleModalOpen"
       :on-close="closeAddLocaleModal"
     >
-      <add-locale
+      <AddLocale
         :show="isAddLocaleModalOpen"
         :portal="selectedPortal"
         @cancel="closeAddLocaleModal"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue

@@ -43,7 +43,7 @@ export default {
 
 <template>
   <section class="flex-1">
-    <settings-header
+    <SettingsHeader
       button-route="new"
       :header-title="portalHeaderText"
       show-back-button

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue

@@ -59,7 +59,7 @@ async function updatePortalSettings(portalObj) {
 </script>
 
 <template>
-  <portal-settings-customization-form
+  <PortalSettingsCustomizationForm
     v-if="currentPortal"
     :portal="currentPortal"
     :is-submitting="uiFlags.isUpdating"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue

@@ -10,7 +10,7 @@ defineComponent({
   <div
     class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full px-6 pt-3 pb-6 bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent"
   >
-    <empty-state
+    <EmptyState
       :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
       :message="
         $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.MESSAGE')
@@ -26,6 +26,6 @@ defineComponent({
           {{ $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.FINISH') }}
         </router-link>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -173,7 +173,7 @@ export default {
       class="flex flex-col h-full w-full md:min-w-[360px] md:max-w-[360px] ltr:border-r border-slate-50 dark:border-slate-800/50"
       :class="!currentNotificationId ? 'flex' : 'hidden md:flex'"
     >
-      <inbox-list-header
+      <InboxListHeader
         :is-context-menu-open="isInboxContextMenuOpen"
         @filter="onFilterChange"
         @redirect="redirectToInbox"
@@ -182,7 +182,7 @@ export default {
         ref="notificationList"
         class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
       >
-        <inbox-card
+        <InboxCard
           v-for="notificationItem in notifications"
           :key="notificationItem.id"
           :active="currentNotificationId === notificationItem.id"
@@ -202,7 +202,7 @@ export default {
         >
           {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
         </p>
-        <intersection-observer
+        <IntersectionObserver
           v-if="!showEndOfList && !uiFlags.isFetching"
           :options="infiniteLoaderOptions"
           @observed="loadMoreNotifications"

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -176,12 +176,12 @@ export default {
 <template>
   <div class="h-full w-full md:w-[calc(100%-360px)]">
     <div v-if="showEmptyState" class="flex w-full h-full">
-      <inbox-empty-state
+      <InboxEmptyState
         :empty-state-message="$t('INBOX.LIST.NO_MESSAGES_AVAILABLE')"
       />
     </div>
     <div v-else class="flex flex-col w-full h-full">
-      <inbox-item-header
+      <InboxItemHeader
         class="flex-1"
         :total-length="totalNotificationCount"
         :current-index="activeNotificationIndex"
@@ -195,7 +195,7 @@ export default {
       >
         <span class="my-4 spinner" />
       </div>
-      <conversation-box
+      <ConversationBox
         v-else
         class="h-[calc(100%-56px)]"
         is-inbox-view

app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue

@@ -205,7 +205,7 @@ export default {
         {{ snoozedDisplayText }}
       </span>
     </div>
-    <inbox-context-menu
+    <InboxContextMenu
       v-if="isContextMenuOpen"
       :context-menu-position="contextMenuPosition"
       :menu-items="menuItems"

app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue

@@ -35,7 +35,7 @@ export default {
     <div
       class="bg-white dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl"
     >
-      <menu-item
+      <MenuItem
         v-for="item in menuItems"
         :key="item.key"
         :label="item.label"

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -115,7 +115,7 @@ export default {
     >
       {{ $t('INBOX.ACTION_HEADER.BACK') }}
     </woot-button>
-    <pagination-button
+    <PaginationButton
       v-if="totalLength > 1"
       :total-length="totalLength"
       :current-index="currentIndex + 1"
@@ -149,7 +149,7 @@ export default {
       :show.sync="showCustomSnoozeModal"
       :on-close="hideCustomSnoozeModal"
     >
-      <custom-snooze-modal
+      <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
         @choose-time="scheduleCustomSnooze"
       />

app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue

@@ -99,7 +99,7 @@ export default {
             class="text-slate-600 dark:text-slate-200"
           />
         </div>
-        <inbox-display-menu
+        <InboxDisplayMenu
           v-if="showInboxDisplayMenu"
           v-on-clickaway="openInboxDisplayMenu"
           class="absolute top-9 ltr:left-0 rtl:right-0"
@@ -122,7 +122,7 @@ export default {
         icon="mail-inbox"
         @click="openInboxOptionsMenu"
       />
-      <inbox-option-menu
+      <InboxOptionMenu
         v-if="showInboxOptionMenu"
         v-on-clickaway="openInboxOptionsMenu"
         class="absolute top-9 ltr:right-0 ltr:md:right-[unset] rtl:left-0 rtl:md:left-[unset]"

app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue

@@ -35,7 +35,7 @@ export default {
     class="flex flex-col gap-1 bg-white z-50 dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
   >
     <div class="flex flex-col">
-      <menu-item
+      <MenuItem
         v-for="item in menuItems"
         :key="item.key"
         :label="item.label"

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue

@@ -179,7 +179,7 @@ export default {
           />
         </div>
       </div>
-      <notification-panel-list
+      <NotificationPanelList
         :notifications="getUnreadNotifications"
         :is-loading="uiFlags.isFetching"
         :on-click-notification="openConversation"

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue

@@ -78,7 +78,7 @@ export default {
               </span>
             </div>
             <div v-if="hasNotificationAssignee">
-              <thumbnail
+              <Thumbnail
                 :src="notificationAssigneeThumbnail"
                 size="16px"
                 :username="notificationAssigneeName"

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue

@@ -52,14 +52,14 @@ export default {
 
 <template>
   <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
-    <notification-panel-item
+    <NotificationPanelItem
       v-for="notificationItem in notifications"
       v-show="!isLoading"
       :key="notificationItem.id"
       :notification-item="notificationItem"
       @open-notification="onClickNotification"
     />
-    <empty-state
+    <EmptyState
       v-if="showEmptyResult"
       :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
     />
@@ -77,7 +77,7 @@ export default {
       v-if="isLoading"
       class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
     >
-      <spinner />
+      <Spinner />
       <span>{{
         $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
       }}</span>

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue

@@ -99,7 +99,7 @@ export default {
             </span>
           </td>
           <td class="thumbnail--column">
-            <thumbnail
+            <Thumbnail
               v-if="notificationItem.primary_actor.meta.assignee"
               :src="notificationItem.primary_actor.meta.assignee.thumbnail"
               size="36px"
@@ -122,12 +122,12 @@ export default {
         </tr>
       </tbody>
     </table>
-    <empty-state
+    <EmptyState
       v-if="showEmptyResult"
       :title="$t('NOTIFICATIONS_PAGE.LIST.404')"
     />
     <div v-if="isLoading" class="notifications--loader">
-      <spinner />
+      <Spinner />
       <span>{{ $t('NOTIFICATIONS_PAGE.LIST.LOADING_MESSAGE') }}</span>
     </div>
   </section>

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue

@@ -59,14 +59,14 @@ export default {
 <template>
   <div class="overflow-y-auto h-full">
     <div class="flex flex-col h-full">
-      <notification-table
+      <NotificationTable
         :notifications="records"
         :is-loading="uiFlags.isFetching"
         :is-updating="uiFlags.isUpdating"
         :on-click-notification="openConversation"
         :on-mark-all-done-click="onMarkAllDoneClick"
       />
-      <table-footer
+      <TableFooter
         class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"

app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue

@@ -63,7 +63,7 @@ export default {
       class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
     >
       <woot-sidemenu-icon v-if="showSidemenuIcon" />
-      <back-button
+      <BackButton
         v-if="showBackButton"
         :button-label="backButtonLabel"
         :back-url="backUrl"

app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue

@@ -49,7 +49,7 @@ export default {
   <div
     class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
   >
-    <settings-header
+    <SettingsHeader
       button-route="new"
       :icon="icon"
       :header-title="$t(headerTitle)"

app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue

@@ -54,7 +54,7 @@ export default {
         />
         <table v-else-if="agentBots.length" class="woot-table">
           <tbody>
-            <agent-bot-row
+            <AgentBotRow
               v-for="(agentBot, index) in agentBots"
               :key="agentBot.id"
               :agent-bot="agentBot"

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue

@@ -27,10 +27,10 @@ export default {
     <td class="agent-bot--details">
       <div class="agent-bot--link">
         {{ agentBot.name }}
-        (<agent-bot-type :bot-type="agentBot.bot_type" />)
+        (<AgentBotType :bot-type="agentBot.bot_type" />)
       </div>
       <div class="agent-bot--description">
-        <show-more :text="agentBot.description" :limit="120" />
+        <ShowMore :text="agentBot.description" :limit="120" />
       </div>
     </td>
     <td class="flex justify-end gap-1">

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue

@@ -49,7 +49,7 @@ export default {
     <div class="flex flex-row">
       <div class="w-[68%]">
         <div class="h-[calc(100vh-56px)] relative">
-          <csml-monaco-editor v-model="bot.csmlContent" class="w-full h-full" />
+          <CsmlMonacoEditor v-model="bot.csmlContent" class="w-full h-full" />
           <div
             v-if="v$.bot.csmlContent.$error"
             class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLMonacoEditor.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 <template>
   <div class="csml-editor--container">
-    <loading-state
+    <LoadingState
       v-if="iframeLoading"
       :message="$t('AGENT_BOTS.LOADING_EDITOR')"
       class="dashboard-app_loading-container"

app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/Edit.vue

@@ -34,12 +34,8 @@ export default {
 };
 </script>
 <template>
-  <csml-bot-editor
-    v-if="agentBot.id"
-    :agent-bot="agentBot"
-    @submit="updateBot"
-  />
+  <CsmlBotEditor v-if="agentBot.id" :agent-bot="agentBot" @submit="updateBot" />
   <div v-else class="flex flex-col h-auto overflow-auto no-padding">
-    <spinner />
+    <Spinner />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/agentBots/csml/New.vue

@@ -37,5 +37,5 @@ export default {
 </script>
 
 <template>
-  <csml-bot-editor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
+  <CsmlBotEditor :agent-bot="{ bot_config: {} }" @submit="saveBot" />
 </template>

app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue

@@ -125,7 +125,7 @@ export default {
 </script>
 
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header :header-title="pageTitle" />
       <form class="w-full" @submit.prevent="editAgent()">
@@ -174,7 +174,7 @@ export default {
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
           <div class="w-[50%]">
-            <woot-submit-button
+            <WootSubmitButton
               :disabled="
                 v$.agentType.$invalid ||
                 v$.agentName.$invalid ||
@@ -199,5 +199,5 @@ export default {
         </div>
       </form>
     </div>
-  </modal>
+  </Modal>
 </template>

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -149,7 +149,7 @@ export default {
               <tr v-for="(agent, index) in agentList" :key="agent.email">
                 <!-- Gravtar Image -->
                 <td>
-                  <thumbnail
+                  <Thumbnail
                     :src="agent.thumbnail"
                     :username="agent.name"
                     size="40px"
@@ -221,11 +221,11 @@ export default {
     </div>
     <!-- Add Agent -->
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-agent :on-close="hideAddPopup" />
+      <AddAgent :on-close="hideAddPopup" />
     </woot-modal>
     <!-- Edit Agent -->
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-agent
+      <EditAgent
         v-if="showEditPopup"
         :id="currentAgent.id"
         :name="currentAgent.name"

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -191,7 +191,7 @@ export default {
       <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
     </div>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-attribute
+      <EditAttribute
         :selected-attribute="selectedAttribute"
         :is-updating="uiFlags.isUpdating"
         @on-close="hideEditPopup"

app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue

@@ -32,9 +32,9 @@ export default {
     >
       {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
     </woot-button>
-    <custom-attribute />
+    <CustomAttribute />
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-attribute :on-close="hideAddPopup" />
+      <AddAttribute :on-close="hideAddPopup" />
     </woot-modal>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue

@@ -125,7 +125,7 @@ export default {
         </table>
       </div>
     </div>
-    <table-footer
+    <TableFooter
       :current-page="Number(meta.currentPage)"
       :total-count="meta.totalEntries"
       :page-size="meta.perPage"

app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue

@@ -245,7 +245,7 @@ export default {
       size="medium"
       :on-close="hideAddPopup"
     >
-      <add-automation-rule
+      <AddAutomationRule
         v-if="showAddPopup"
         :on-close="hideAddPopup"
         @saveAutomation="submitAutomation"
@@ -268,7 +268,7 @@ export default {
       size="medium"
       :on-close="hideEditPopup"
     >
-      <edit-automation-rule
+      <EditAutomationRule
         v-if="showEditPopup"
         :on-close="hideEditPopup"
         :selected-response="selectedResponse"

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -70,13 +70,13 @@ export default {
           "
         />
       </div>
-      <billing-item
+      <BillingItem
         :title="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.TITLE')"
         :description="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.DESCRIPTION')"
         :button-label="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.BUTTON_TXT')"
         @click="onClickBillingPortal"
       />
-      <billing-item
+      <BillingItem
         :title="$t('BILLING_SETTINGS.CHAT_WITH_US.TITLE')"
         :description="$t('BILLING_SETTINGS.CHAT_WITH_US.DESCRIPTION')"
         :button-label="$t('BILLING_SETTINGS.CHAT_WITH_US.BUTTON_TXT')"

app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue

@@ -218,7 +218,7 @@ export default {
             {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
           </label>
           <div>
-            <woot-message-editor
+            <WootMessageEditor
               v-model="message"
               class="message-editor"
               :class="{ editor_warning: v$.message.$error }"
@@ -305,7 +305,7 @@ export default {
 
         <label v-if="isOneOffType">
           {{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
-          <woot-date-time-picker
+          <WootDateTimePicker
             :value="scheduledAt"
             :confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
             :placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"

app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue

@@ -70,7 +70,7 @@ export default {
 </script>
 <template>
   <div class="flex-1 overflow-auto">
-    <campaigns-table
+    <CampaignsTable
       :campaigns="campaigns"
       :show-empty-result="showEmptyResult"
       :is-loading="uiFlags.isFetching"
@@ -79,7 +79,7 @@ export default {
       @delete="openDeletePopup"
     />
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-campaign
+      <EditCampaign
         :selected-campaign="selectedCampaign"
         @on-close="hideEditPopup"
       />

app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue

@@ -94,8 +94,8 @@ export default {
         :color-scheme="colorScheme"
         class="mr-3 text-xs"
       />
-      <inbox-name :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
-      <user-avatar-with-name
+      <InboxName :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
+      <UserAvatarWithName
         v-if="campaign.sender"
         :user="campaign.sender"
         class="mb-1"

app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue

@@ -59,13 +59,13 @@ export default {
 <template>
   <div class="flex items-center flex-col">
     <div v-if="isLoading" class="items-center flex text-base justify-center">
-      <spinner color-scheme="primary" />
+      <Spinner color-scheme="primary" />
       <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
     </div>
     <div v-else class="w-full">
-      <empty-state v-if="showEmptyResult" :title="emptyMessage" />
+      <EmptyState v-if="showEmptyResult" :title="emptyMessage" />
       <div v-else class="w-full">
-        <campaign-card
+        <CampaignCard
           v-for="campaign in campaigns"
           :key="campaign.id"
           :campaign="campaign"

app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue

@@ -191,7 +191,7 @@ export default {
           <label>
             {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
           </label>
-          <woot-message-editor
+          <WootMessageEditor
             v-model="message"
             class="message-editor"
             :is-format-mode="true"

app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue

@@ -44,9 +44,9 @@ export default {
     >
       {{ buttonText }}
     </woot-button>
-    <campaign />
+    <Campaign />
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-campaign @on-close="hideAddPopup" />
+      <AddCampaign @on-close="hideAddPopup" />
     </woot-modal>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -81,7 +81,7 @@ export default {
 </script>
 
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('CANNED_MGMT.ADD.TITLE')"
@@ -105,7 +105,7 @@ export default {
             {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
           </label>
           <div class="editor-wrap">
-            <woot-message-editor
+            <WootMessageEditor
               v-model="content"
               class="message-editor [&>div]:px-1"
               :class="{ editor_warning: v$.content.$error }"
@@ -117,7 +117,7 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
+          <WootSubmitButton
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
@@ -132,7 +132,7 @@ export default {
         </div>
       </form>
     </div>
-  </modal>
+  </Modal>
 </template>
 
 <style scoped lang="scss">

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -89,7 +89,7 @@ export default {
 </script>
 
 <template>
-  <modal :show.sync="show" :on-close="onClose">
+  <Modal :show.sync="show" :on-close="onClose">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header :header-title="pageTitle" />
       <form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">
@@ -110,7 +110,7 @@ export default {
             {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
           </label>
           <div class="editor-wrap">
-            <woot-message-editor
+            <WootMessageEditor
               v-model="content"
               class="message-editor [&>div]:px-1"
               :class="{ editor_warning: v$.content.$error }"
@@ -122,7 +122,7 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
+          <WootSubmitButton
             :disabled="
               v$.content.$invalid ||
               v$.shortCode.$invalid ||
@@ -137,7 +137,7 @@ export default {
         </div>
       </form>
     </div>
-  </modal>
+  </Modal>
 </template>
 <style scoped lang="scss">
 ::v-deep {

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -217,12 +217,12 @@ export default {
     </div>
     <!-- Add Agent -->
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-canned :on-close="hideAddPopup" />
+      <AddCanned :on-close="hideAddPopup" />
     </woot-modal>
 
     <!-- Edit Canned Response -->
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
-      <edit-canned
+      <EditCanned
         v-if="showEditPopup"
         :id="selectedResponse.id"
         :edshort-code="selectedResponse.short_code"

app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue

@@ -66,7 +66,7 @@ export default {
   >
     <form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
       <div class="w-full">
-        <page-header
+        <PageHeader
           :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
           :header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
         />

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue

@@ -64,7 +64,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       class="max-w-4xl"
       :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
       :header-content="
@@ -77,7 +77,7 @@ export default {
     <div
       class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mx-0 max-w-3xl"
     >
-      <channel-item
+      <ChannelItem
         v-for="channel in channelList"
         :key="channel.key"
         :channel="channel"

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -74,7 +74,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <empty-state
+    <EmptyState
       :title="$t('INBOX_MGMT.FINISH.TITLE')"
       :message="message"
       :button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
@@ -151,6 +151,6 @@ export default {
           </router-link>
         </div>
       </div>
-    </empty-state>
+    </EmptyState>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue

@@ -94,7 +94,7 @@ export default {
 
 <template>
   <div class="mx-8">
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.IMAP.TITLE')"
       :sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
       :note="$t('INBOX_MGMT.IMAP.NOTE_TEXT')"
@@ -161,6 +161,6 @@ export default {
           :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
         />
       </form>
-    </settings-section>
+    </SettingsSection>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -201,7 +201,7 @@ export default {
         />
       </div>
     </div>
-    <settings
+    <Settings
       v-if="showSettings"
       :show.sync="showSettings"
       :on-close="closeSettings"

app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue

@@ -113,7 +113,7 @@ export default {
           <label>
             {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
           </label>
-          <woot-message-editor
+          <WootMessageEditor
             v-model="preChatMessage"
             class="message-editor"
             :placeholder="
@@ -151,7 +151,7 @@ export default {
                 </th>
               </tr>
             </thead>
-            <pre-chat-fields
+            <PreChatFields
               :pre-chat-fields="preChatFields"
               @update="handlePreChatFieldOptions"
               @drag-end="changePreChatFieldFieldsOrder"

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -350,7 +350,7 @@ export default {
   <div
     class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
   >
-    <setting-intro-banner
+    <SettingIntroBanner
       :header-image="inbox.avatarUrl"
       :header-title="inboxName"
     >
@@ -367,13 +367,13 @@ export default {
           :show-badge="false"
         />
       </woot-tabs>
-    </setting-intro-banner>
+    </SettingIntroBanner>
 
-    <microsoft-reauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
-    <facebook-reauthorize v-if="facebookUnauthorized" :inbox="inbox" />
+    <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
+    <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
 
     <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
-      <settings-section
+      <SettingsSection
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
         :show-border="false"
@@ -493,7 +493,7 @@ export default {
           </p>
         </label>
         <div v-if="greetingEnabled" class="pb-4">
-          <greetings-editor
+          <GreetingsEditor
             v-model.trim="greetingMessage"
             :label="
               $t(
@@ -682,15 +682,15 @@ export default {
             {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
           </label>
         </div>
-      </settings-section>
-      <settings-section
+      </SettingsSection>
+      <SettingsSection
         v-if="isAWebWidgetInbox || isAnEmailChannel"
         :title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
         :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
         :show-border="false"
       >
         <div class="w-3/4 pb-4">
-          <sender-name-example-preview
+          <SenderNameExamplePreview
             :sender-name-type="senderNameType"
             :business-name="businessName"
             @update="toggleSenderNameType"
@@ -729,8 +729,8 @@ export default {
             </div>
           </div>
         </div>
-      </settings-section>
-      <settings-section :show-border="false">
+      </SettingsSection>
+      <SettingsSection :show-border="false">
         <woot-submit-button
           v-if="isAPIInbox"
           type="submit"
@@ -747,26 +747,26 @@ export default {
           :loading="uiFlags.isUpdating"
           @click="updateInbox"
         />
-      </settings-section>
+      </SettingsSection>
     </div>
 
     <div v-if="selectedTabKey === 'collaborators'" class="mx-8">
-      <collaborators-page :inbox="inbox" />
+      <CollaboratorsPage :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'configuration'">
-      <configuration-page :inbox="inbox" />
+      <ConfigurationPage :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'preChatForm'">
-      <pre-chat-form-settings :inbox="inbox" />
+      <PreChatFormSettings :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'businesshours'">
-      <weekly-availability :inbox="inbox" />
+      <WeeklyAvailability :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'widgetBuilder'">
-      <widget-builder :inbox="inbox" />
+      <WidgetBuilder :inbox="inbox" />
     </div>
     <div v-if="selectedTabKey === 'botConfiguration'">
-      <bot-configuration :inbox="inbox" />
+      <BotConfiguration :inbox="inbox" />
     </div>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue

@@ -154,7 +154,7 @@ export default {
 
 <template>
   <div class="mx-8">
-    <settings-section
+    <SettingsSection
       :title="$t('INBOX_MGMT.SMTP.TITLE')"
       :sub-title="$t('INBOX_MGMT.SMTP.SUBTITLE')"
     >
@@ -211,19 +211,19 @@ export default {
             :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
             @blur="v$.domain.$touch"
           />
-          <input-radio-group
+          <InputRadioGroup
             :label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
             :items="encryptionProtocols"
             :action="handleEncryptionChange"
           />
-          <single-select-dropdown
+          <SingleSelectDropdown
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
             :selected="openSSLVerifyMode"
             :options="openSSLVerifyModes"
             :action="handleSSLModeChange"
           />
-          <single-select-dropdown
+          <SingleSelectDropdown
             class="max-w-[75%] w-full"
             :label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
             :selected="authMechanism"
@@ -237,6 +237,6 @@ export default {
           :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
         />
       </form>
-    </settings-section>
+    </SettingsSection>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue

@@ -343,7 +343,7 @@ export default {
               }}
               <woot-color-picker v-model="color" />
             </label>
-            <input-radio-group
+            <InputRadioGroup
               name="widget-bubble-position"
               :label="
                 $t(
@@ -353,7 +353,7 @@ export default {
               :items="widgetBubblePositions"
               :action="handleWidgetBubblePositionChange"
             />
-            <input-radio-group
+            <InputRadioGroup
               name="widget-bubble-type"
               :label="
                 $t(
@@ -390,7 +390,7 @@ export default {
         </div>
       </div>
       <div class="widget-container w-100 lg:w-3/5">
-        <input-radio-group
+        <InputRadioGroup
           name="widget-view-options"
           :items="getWidgetViewOptions"
           :action="handleWidgetViewChange"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue

@@ -66,7 +66,7 @@ export default {
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
     />

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue

@@ -56,13 +56,13 @@ function onClick(emailProvider) {
     v-if="!provider"
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <page-header
+    <PageHeader
       class="max-w-4xl"
       :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
     />
     <div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
-      <channel-selector
+      <ChannelSelector
         v-for="emailProvider in emailProviderList"
         :key="emailProvider.key"
         :class="{ inactive: !emailProvider.isEnabled }"
@@ -72,7 +72,7 @@ function onClick(emailProvider) {
       />
     </div>
   </div>
-  <microsoft v-else-if="provider === 'microsoft'" />
-  <google v-else-if="provider === 'google'" />
-  <forward-to-option v-else-if="provider === 'other_provider'" />
+  <Microsoft v-else-if="provider === 'microsoft'" />
+  <Google v-else-if="provider === 'google'" />
+  <ForwardToOption v-else-if="provider === 'other_provider'" />
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -233,14 +233,14 @@ export default {
           v-dompurify-html="errorStateDescription"
         />
       </div>
-      <loading-state v-else-if="showLoader" :message="emptyStateMessage" />
+      <LoadingState v-else-if="showLoader" :message="emptyStateMessage" />
       <form
         v-else
         class="flex flex-wrap mx-0"
         @submit.prevent="createChannel()"
       >
         <div class="w-full">
-          <page-header
+          <PageHeader
             :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
             :header-content="
               useInstallationName(