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

app/javascript/dashboard/App.vue

@@ -128,23 +128,20 @@ export default {
     :class="{ 'app-rtl--wrapper': isRTLView }"
     :dir="isRTLView ? 'rtl' : 'ltr'"
   >
-    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
+    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
     <template v-if="currentAccountId">
-      <pending-email-verification-banner v-if="hideOnOnboardingView" />
-      <payment-pending-banner v-if="hideOnOnboardingView" />
-      <upgrade-banner />
+      <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
+      <PaymentPendingBanner v-if="hideOnOnboardingView" />
+      <UpgradeBanner />
     </template>
     <transition name="fade" mode="out-in">
       <router-view />
     </transition>
-    <add-account-modal
-      :show="showAddAccountModal"
-      :has-accounts="hasAccounts"
-    />
-    <woot-snackbar-box />
-    <network-notification />
+    <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
+    <WootSnackbarBox />
+    <NetworkNotification />
   </div>
-  <loading-state v-else />
+  <LoadingState v-else />
 </template>
 
 <style lang="scss">

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -37,7 +37,7 @@ export default {
       @click="$emit('click')"
     >
       <div class="flex justify-between mb-0.5">
-        <emoji-or-icon class="inline-block w-5" :icon="icon" :emoji="emoji" />
+        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
         <h5
           class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
         >

app/javascript/dashboard/components/ChatList.vue

@@ -874,7 +874,7 @@ export default {
     ]"
   >
     <slot />
-    <chat-list-header
+    <ChatListHeader
       :page-title="pageTitle"
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
@@ -886,14 +886,14 @@ export default {
       @basic-filter-change="onBasicFilterChange"
     />
 
-    <add-custom-views
+    <AddCustomViews
       v-if="showAddFoldersModal"
       :custom-views-query="foldersQuery"
       :open-last-saved-item="openLastSavedItemInFolder"
       @close="onCloseAddFoldersModal"
     />
 
-    <delete-custom-views
+    <DeleteCustomViews
       v-if="showDeleteFoldersModal"
       :show-delete-popup.sync="showDeleteFoldersModal"
       :active-custom-view="activeFolder"
@@ -902,7 +902,7 @@ export default {
       @close="onCloseDeleteFoldersModal"
     />
 
-    <chat-type-tabs
+    <ChatTypeTabs
       v-if="!hasAppliedFiltersOrActiveFolders"
       :items="assigneeTabItems"
       :active-tab="activeAssigneeTab"
@@ -916,7 +916,7 @@ export default {
     >
       {{ $t('CHAT_LIST.LIST.404') }}
     </p>
-    <conversation-bulk-actions
+    <ConversationBulkActions
       v-if="selectedConversations.length"
       :conversations="selectedConversations"
       :all-conversations-selected="allConversationsSelected"
@@ -935,7 +935,7 @@ export default {
       class="flex-1 conversations-list"
       :class="{ 'overflow-hidden': isContextMenuOpen }"
     >
-      <virtual-list
+      <VirtualList
         ref="conversationVirtualList"
         :data-key="'id'"
         :data-sources="conversationList"
@@ -954,20 +954,20 @@ export default {
           >
             {{ $t('CHAT_LIST.EOF') }}
           </p>
-          <intersection-observer
+          <IntersectionObserver
             v-if="!showEndOfListMessage && !chatListLoading"
             :options="infiniteLoaderOptions"
             @observed="loadMoreConversations"
           />
         </template>
-      </virtual-list>
+      </VirtualList>
     </div>
     <woot-modal
       :show.sync="showAdvancedFilters"
       :on-close="closeAdvanceFiltersModal"
       size="medium"
     >
-      <conversation-advanced-filter
+      <ConversationAdvancedFilter
         v-if="showAdvancedFilters"
         :initial-filter-types="advancedFilterTypes"
         :initial-applied-filters="appliedFilter"

app/javascript/dashboard/components/ChatListHeader.vue

@@ -106,7 +106,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
         size="tiny"
         @click="emits('filters-modal')"
       />
-      <conversation-basic-filter
+      <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
         @changeFilter="onBasicFilterChange"
       />

app/javascript/dashboard/components/ConversationItem.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <template>
-  <conversation-card
+  <ConversationCard
     :key="source.id"
     :active-label="label"
     :team-id="teamId"

app/javascript/dashboard/components/CustomAttribute.vue

@@ -216,7 +216,7 @@ export default {
             "
           >
             {{ label }}
-            <helper-text-popup
+            <HelperTextPopup
               v-if="description"
               :message="description"
               class="mt-0.5"
@@ -309,7 +309,7 @@ export default {
       </div>
     </div>
     <div v-if="isAttributeTypeList">
-      <multiselect-dropdown
+      <MultiselectDropdown
         :options="listOptions"
         :selected-item="selectedItem"
         :has-thumbnail="false"

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -44,7 +44,7 @@ export default {
   <div class="flex flex-col">
     <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
     <form class="modal-content" @submit.prevent="chooseTime">
-      <date-picker
+      <DatePicker
         v-model="snoozeTime"
         type="datetime"
         inline

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -45,7 +45,7 @@ export default {
     tag="div"
     class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
   >
-    <woot-snackbar
+    <WootSnackbar
       v-for="snackMessage in snackMessages"
       :key="snackMessage.key"
       :message="snackMessage.message"

app/javascript/dashboard/components/app/PaymentPendingBanner.vue

@@ -77,7 +77,7 @@ export default {
 </script>
 
 <template>
-  <banner
+  <Banner
     v-if="shouldShowBanner"
     color-scheme="alert"
     :banner-message="bannerMessage"

app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue

@@ -31,7 +31,7 @@ export default {
 </script>
 
 <template>
-  <banner
+  <Banner
     v-if="shouldShowBanner"
     color-scheme="alert"
     :banner-message="bannerMessage"

app/javascript/dashboard/components/app/UpdateBanner.vue

@@ -67,7 +67,7 @@ export default {
 };
 </script>
 <template>
-  <banner
+  <Banner
     v-if="shouldShowBanner"
     color-scheme="primary"
     :banner-message="bannerMessage"

app/javascript/dashboard/components/app/UpgradeBanner.vue

@@ -77,7 +77,7 @@ export default {
 </script>
 
 <template>
-  <banner
+  <Banner
     v-if="shouldShowBanner"
     color-scheme="alert"
     :banner-message="bannerMessage"

app/javascript/dashboard/components/buttons/FormSubmitButton.vue

@@ -58,7 +58,7 @@ export default {
   >
     <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
     <span>{{ buttonText }}</span>
-    <spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
+    <Spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
   </button>
 </template>
 <style lang="scss" scoped>

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -193,8 +193,8 @@ export default {
       v-on-clickaway="closeDropdown"
       class="dropdown-pane dropdown-pane--open"
     >
-      <woot-dropdown-menu class="mb-0">
-        <woot-dropdown-item v-if="!isPending">
+      <WootDropdownMenu class="mb-0">
+        <WootDropdownItem v-if="!isPending">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -204,8 +204,8 @@ export default {
           >
             {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="!isPending">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="!isPending">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -215,8 +215,8 @@ export default {
           >
             {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
+        </WootDropdownItem>
+      </WootDropdownMenu>
     </div>
   </div>
 </template>

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -91,9 +91,9 @@ export default {
 </script>
 
 <template>
-  <woot-dropdown-menu>
-    <woot-dropdown-header :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
-    <woot-dropdown-item
+  <WootDropdownMenu>
+    <WootDropdownHeader :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
+    <WootDropdownItem
       v-for="status in availabilityStatuses"
       :key="status.value"
       class="flex items-baseline"
@@ -105,12 +105,12 @@ export default {
         class-names="status-change--dropdown-button"
         @click="changeAvailabilityStatus(status.value)"
       >
-        <availability-status-badge :status="status.value" />
+        <AvailabilityStatusBadge :status="status.value" />
         {{ status.label }}
       </woot-button>
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-    <woot-dropdown-item class="flex items-center justify-between p-2 m-0">
+    </WootDropdownItem>
+    <WootDropdownDivider />
+    <WootDropdownItem class="flex items-center justify-between p-2 m-0">
       <div class="flex items-center">
         <fluent-icon
           v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
@@ -132,7 +132,7 @@ export default {
         :value="currentUserAutoOffline"
         @input="updateAutoOffline"
       />
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-  </woot-dropdown-menu>
+    </WootDropdownItem>
+    <WootDropdownDivider />
+  </WootDropdownMenu>
 </template>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -182,7 +182,7 @@ export default {
 
 <template>
   <aside class="flex h-full">
-    <primary-sidebar
+    <PrimarySidebar
       :logo-source="globalConfig.logoThumbnail"
       :installation-name="globalConfig.installationName"
       :is-a-custom-branded-instance="isACustomBrandedInstance"
@@ -193,7 +193,7 @@ export default {
       @key-shortcut-modal="toggleKeyShortcutModal"
       @open-notification-panel="openNotificationPanel"
     />
-    <secondary-sidebar
+    <SecondarySidebar
       v-if="showSecondarySidebar"
       :class="sidebarClassName"
       :account-id="accountId"

app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue

@@ -29,7 +29,7 @@ export default {
     class="items-center flex rounded-full"
     @click="handleClick"
   >
-    <thumbnail
+    <Thumbnail
       :src="currentUser.avatar_url"
       :username="currentUser.name"
       :status="statusOfAgent"

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -63,9 +63,9 @@ export default {
       class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-30 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
       :class="{ 'block visible': show }"
     >
-      <availability-status />
-      <woot-dropdown-menu>
-        <woot-dropdown-item v-if="showChangeAccountOption">
+      <AvailabilityStatus />
+      <WootDropdownMenu>
+        <WootDropdownItem v-if="showChangeAccountOption">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -75,8 +75,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="globalConfig.chatwootInboxToken">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -86,8 +86,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -97,8 +97,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <router-link
             v-slot="{ href, isActive, navigate }"
             :to="`/app/accounts/${accountId}/profile/settings`"
@@ -116,8 +116,8 @@ export default {
               </span>
             </a>
           </router-link>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -127,8 +127,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
           <a
             href="/super_admin"
             class="button small clear secondary bg-white dark:bg-slate-800 h-8"
@@ -145,8 +145,8 @@ export default {
               {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
             </span>
           </a>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
+        </WootDropdownItem>
+        <WootDropdownItem>
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -156,8 +156,8 @@ export default {
           >
             {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
           </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
+        </WootDropdownItem>
+      </WootDropdownMenu>
     </div>
   </transition>
 </template>

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -71,13 +71,13 @@ export default {
     class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
   >
     <div class="flex flex-col items-center">
-      <logo
+      <Logo
         :source="logoSource"
         :name="installationName"
         :account-id="accountId"
         class="m-4 mb-10"
       />
-      <primary-nav-item
+      <PrimaryNavItem
         v-for="menuItem in menuItems"
         :key="menuItem.toState"
         :icon="menuItem.icon"
@@ -87,16 +87,16 @@ export default {
       />
     </div>
     <div class="flex flex-col items-center justify-end pb-6">
-      <primary-nav-item
+      <PrimaryNavItem
         v-if="!isACustomBrandedInstance"
         icon="book-open-globe"
         name="DOCS"
         :open-in-new-page="true"
         :to="helpDocsURL"
       />
-      <notification-bell @open-notification-panel="openNotificationPanel" />
-      <agent-details @toggle-menu="toggleOptions" />
-      <options-menu
+      <NotificationBell @open-notification-panel="openNotificationPanel" />
+      <AgentDetails @toggle-menu="toggleOptions" />
+      <OptionsMenu
         :show="showOptionsMenu"
         @toggle-accounts="toggleAccountModal"
         @show-support-chat-window="toggleSupportChatWindow"

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -239,18 +239,18 @@ export default {
     v-if="hasSecondaryMenu"
     class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
   >
-    <account-context @toggle-accounts="toggleAccountModal" />
+    <AccountContext @toggle-accounts="toggleAccountModal" />
     <transition-group
       name="menu-list"
       tag="ul"
       class="pt-2 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[menuConfig.parentNav]"
         :key="menuItem.key"
         :menu-item="menuItem"

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -241,7 +241,7 @@ export default {
     </router-link>
 
     <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
-      <secondary-child-nav-item
+      <SecondaryChildNavItem
         v-for="child in menuItem.children"
         :key="child.id"
         :to="child.toState"

app/javascript/dashboard/components/ui/DateRangePicker.vue

@@ -26,7 +26,7 @@ export default {
 
 <template>
   <div class="date-picker">
-    <date-picker
+    <DatePicker
       :range="true"
       :confirm="true"
       :clearable="false"

app/javascript/dashboard/components/ui/DateTimePicker.vue

@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div class="date-picker">
-    <date-picker
+    <DatePicker
       type="datetime"
       :confirm="true"
       :clearable="false"

app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -77,7 +77,7 @@ const shouldShowEmptyState = computed(() => {
     @click.stop
   >
     <slot name="search">
-      <dropdown-search
+      <DropdownSearch
         v-if="enableSearch"
         :input-value="searchTerm"
         :input-placeholder="inputPlaceholder"
@@ -87,15 +87,15 @@ const shouldShowEmptyState = computed(() => {
       />
     </slot>
     <slot name="listItem">
-      <dropdown-loading-state
+      <DropdownLoadingState
         v-if="shouldShowLoadingState"
         :message="loadingPlaceholder"
       />
-      <dropdown-empty-state
+      <DropdownEmptyState
         v-else-if="shouldShowEmptyState"
         :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
       />
-      <list-item-button
+      <ListItemButton
         v-for="item in filteredListItems"
         :key="item.id"
         :is-active="isFilterActive(item.id)"

app/javascript/dashboard/components/ui/WootButton.vue

@@ -111,12 +111,12 @@ export default {
     :disabled="isDisabled || isLoading"
     @click="handleClick"
   >
-    <spinner
+    <Spinner
       v-if="isLoading"
       size="small"
       :color-scheme="showDarkSpinner ? 'dark' : ''"
     />
-    <emoji-or-icon
+    <EmojiOrIcon
       v-else-if="icon || emoji"
       class="icon"
       :emoji="emoji"

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -162,7 +162,7 @@ export default {
             class="answer--text-input"
             placeholder="Enter url"
           />
-          <automation-action-file-input
+          <AutomationActionFileInput
             v-if="inputType === 'attachment'"
             v-model="action_params"
             :initial-file-name="initialFileName"
@@ -177,12 +177,12 @@ export default {
         @click="removeAction"
       />
     </div>
-    <automation-action-team-message-input
+    <AutomationActionTeamMessageInput
       v-if="inputType === 'team_message'"
       v-model="action_params"
       :teams="dropdownValues"
     />
-    <woot-message-editor
+    <WootMessageEditor
       v-if="inputType === 'textarea'"
       v-model="castMessageVmodel"
       rows="4"

app/javascript/dashboard/components/widgets/AutomationFileInput.vue

@@ -59,7 +59,7 @@ export default {
       :class="uploadState === 'processing' ? 'disabled' : ''"
       @change="onChangeFile"
     />
-    <spinner v-if="uploadState === 'processing'" />
+    <Spinner v-if="uploadState === 'processing'" />
     <fluent-icon v-if="uploadState === 'idle'" icon="file-upload" />
     <fluent-icon
       v-if="uploadState === 'uploaded'"

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -58,7 +58,7 @@ export default {
 };
 </script>
 <template>
-  <channel-selector
+  <ChannelSelector
     :class="{ inactive: !isActive }"
     :title="channel.name"
     :src="getChannelThumbnail()"

app/javascript/dashboard/components/widgets/ColorPicker.vue

@@ -39,7 +39,7 @@ export default {
       :style="`background-color: ${value}`"
       @click.prevent="toggleColorPicker"
     />
-    <chrome
+    <Chrome
       v-if="isPickerOpen"
       v-on-clickaway="closeTogglePicker"
       :disable-alpha="true"

app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue

@@ -87,7 +87,7 @@ export default {
       :key="index"
       class="dashboard-app--list"
     >
-      <loading-state
+      <LoadingState
         v-if="iframeLoading"
         :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
         class="dashboard-app_loading-container"

app/javascript/dashboard/components/widgets/LabelSelector.vue

@@ -78,7 +78,7 @@ export default {
 
 <template>
   <div v-on-clickaway="closeDropdownLabel" class="label-wrap">
-    <add-label @add="toggleLabels" />
+    <AddLabel @add="toggleLabels" />
     <woot-label
       v-for="label in savedLabels"
       :key="label.id"
@@ -94,7 +94,7 @@ export default {
         :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
         class="dropdown-pane"
       >
-        <label-dropdown
+        <LabelDropdown
           v-if="showSearchDropdownLabel"
           :account-labels="allLabels"
           :selected-labels="selectedLabels"

app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -31,12 +31,12 @@ const isFooterVisible = computed(
     v-if="isFooterVisible"
     class="h-12 flex items-center justify-between px-6"
   >
-    <table-footer-results
+    <TableFooterResults
       :first-index="firstIndex"
       :last-index="lastIndex"
       :total-count="totalCount"
     />
-    <table-footer-pagination
+    <TableFooterPagination
       v-if="totalCount"
       :current-page="currentPage"
       :total-pages="totalPages"

app/javascript/dashboard/components/widgets/ThumbnailGroup.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 <template>
   <div class="overlapping-thumbnails">
-    <thumbnail
+    <Thumbnail
       v-for="user in usersList"
       :key="user.id"
       v-tooltip="user.name"

app/javascript/dashboard/components/widgets/UserAvatarWithName.vue

@@ -23,7 +23,7 @@ export default {
 </script>
 <template>
   <div class="flex items-center gap-1.5 text-left">
-    <thumbnail
+    <Thumbnail
       :src="user.thumbnail"
       :size="size"
       :username="user.name"

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -684,17 +684,17 @@ export default {
 
 <template>
   <div ref="editorRoot" class="relative editor-root">
-    <tag-agents
+    <TagAgents
       v-if="showUserMentions && isPrivate"
       :search-key="mentionSearchKey"
       @click="insertMentionNode"
     />
-    <canned-response
+    <CannedResponse
       v-if="shouldShowCannedResponses"
       :search-key="cannedSearchTerm"
       @click="insertCannedResponse"
     />
-    <variable-list
+    <VariableList
       v-if="shouldShowVariables"
       :search-key="variableSearchTerm"
       @click="insertVariable"

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -249,7 +249,7 @@ export default {
         size="small"
         @click="toggleEmojiPicker"
       />
-      <file-upload
+      <FileUpload
         ref="upload"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
         input-id="conversationAttachment"
@@ -274,7 +274,7 @@ export default {
           variant="smooth"
           size="small"
         />
-      </file-upload>
+      </FileUpload>
       <woot-button
         v-if="showAudioRecorderButton"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
@@ -326,7 +326,7 @@ export default {
         :title="'Whatsapp Templates'"
         @click="$emit('selectWhatsappTemplate')"
       />
-      <video-call-button
+      <VideoCallButton
         v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
         :conversation-id="conversationId"
       />

app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-  <mention-box
+  <MentionBox
     v-if="items.length"
     :items="items"
     @mention-select="handleMentionClick"
@@ -50,5 +50,5 @@ export default {
     <template slot-scope="{ item }">
       <strong>{{ item.label }}</strong> - {{ item.description }}
     </template>
-  </mention-box>
+  </MentionBox>
 </template>

app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue

@@ -310,7 +310,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/components/widgets/conversation/ConversationBasicFilter.vue

@@ -83,7 +83,7 @@ export default {
         <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
           $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
-        <filter-item
+        <FilterItem
           type="status"
           :selected-value="chatStatus"
           :items="chatStatusItems"
@@ -95,7 +95,7 @@ export default {
         <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
           $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
-        <filter-item
+        <FilterItem
           type="sort"
           :selected-value="sortFilter"
           :items="chatSortItems"

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -94,7 +94,7 @@ export default {
     class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
     :class="{ 'with-border-right': !isOnExpandedLayout }"
   >
-    <conversation-header
+    <ConversationHeader
       v-if="currentChat.id"
       :chat="currentChat"
       :is-inbox-view="isInboxView"
@@ -119,14 +119,14 @@ export default {
       v-show="!activeIndex"
       class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
     >
-      <messages-view
+      <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"
         :is-inbox-view="isInboxView"
         :is-contact-panel-open="isContactPanelOpen"
         @contact-panel-toggle="onToggleContactPanel"
       />
-      <empty-state
+      <EmptyState
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
@@ -134,7 +134,7 @@ export default {
         v-show="showContactPanel"
         class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
       >
-        <contact-panel
+        <ContactPanel
           v-if="showContactPanel"
           :conversation-id="currentChat.id"
           :inbox-id="currentChat.inbox_id"
@@ -142,7 +142,7 @@ export default {
         />
       </div>
     </div>
-    <dashboard-app-frame
+    <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"
       v-show="activeIndex - 1 === index"
       :key="currentChat.id + '-' + dashboardApp.id"

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -252,7 +252,7 @@ export default {
         @change="onSelectConversation($event.target.checked)"
       />
     </label>
-    <thumbnail
+    <Thumbnail
       v-if="bulkActionCheck"
       :src="currentContact.thumbnail"
       :badge="inboxBadge"
@@ -264,7 +264,7 @@ export default {
       class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-slate-50 dark:border-slate-800/75 w-[calc(100%-40px)]"
     >
       <div class="flex justify-between">
-        <inbox-name v-if="showInboxName" :inbox="inbox" />
+        <InboxName v-if="showInboxName" :inbox="inbox" />
         <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
           <span
             v-if="showAssignee && assignee.name"
@@ -277,7 +277,7 @@ export default {
             />
             {{ assignee.name }}
           </span>
-          <priority-mark :priority="chat.priority" />
+          <PriorityMark :priority="chat.priority" />
         </div>
       </div>
       <h4
@@ -285,7 +285,7 @@ export default {
       >
         {{ currentContact.name }}
       </h4>
-      <message-preview
+      <MessagePreview
         v-if="lastMessageInChat"
         :message="lastMessageInChat"
         class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm text-slate-700 dark:text-slate-200"
@@ -305,7 +305,7 @@ export default {
       </p>
       <div class="absolute flex flex-col conversation--meta right-4 top-4">
         <span class="ml-auto font-normal leading-4 text-black-600 text-xxs">
-          <time-ago
+          <TimeAgo
             :last-activity-timestamp="chat.timestamp"
             :created-at-timestamp="chat.created_at"
           />
@@ -316,11 +316,11 @@ export default {
           {{ unreadCount > 9 ? '9+' : unreadCount }}
         </span>
       </div>
-      <card-labels :conversation-id="chat.id" class="mt-0.5 mx-2 mb-0">
+      <CardLabels :conversation-id="chat.id" class="mt-0.5 mx-2 mb-0">
         <template v-if="hasSlaPolicyId" #before>
-          <SLA-card-label :chat="chat" class="ltr:mr-1 rtl:ml-1" />
+          <SLACardLabel :chat="chat" class="ltr:mr-1 rtl:ml-1" />
         </template>
-      </card-labels>
+      </CardLabels>
     </div>
     <woot-context-menu
       v-if="showContextMenu"
@@ -329,7 +329,7 @@ export default {
       :y="contextMenu.y"
       @close="closeContextMenu"
     >
-      <conversation-context-menu
+      <ConversationContextMenu
         :status="chat.status"
         :inbox-id="inbox.id"
         :priority="chat.priority"

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -139,7 +139,7 @@ export default {
       :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
     >
       <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
-        <back-button
+        <BackButton
           v-if="showBackButton"
           :back-url="backButtonUrl"
           class="ltr:ml-0 rtl:mr-0 rtl:ml-4"
@@ -180,7 +180,7 @@ export default {
           <div
             class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
           >
-            <inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
+            <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
             <span
               v-if="isSnoozed"
               class="font-medium text-yellow-600 dark:text-yellow-500"
@@ -202,12 +202,12 @@ export default {
         class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
         :class="{ 'justify-end': isContactPanelOpen }"
       >
-        <SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
-        <linear
+        <SLACardLabel v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
+        <Linear
           v-if="isLinearIntegrationEnabled && isLinearFeatureEnabled"
           :conversation-id="currentChat.id"
         />
-        <more-actions :conversation-id="currentChat.id" />
+        <MoreActions :conversation-id="currentChat.id" />
       </div>
     </div>
   </div>

app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue

@@ -71,11 +71,8 @@ export default {
       v-if="!inboxesList.length && !uiFlags.isFetching && !loadingChatList"
       class="clearfix"
     >
-      <onboarding-view v-if="isAdmin" />
-      <empty-state-message
-        v-else
-        :message="$t('CONVERSATION.NO_INBOX_AGENT')"
-      />
+      <OnboardingView v-if="isAdmin" />
+      <EmptyStateMessage v-else :message="$t('CONVERSATION.NO_INBOX_AGENT')" />
     </div>
     <!-- Show empty state images if not loading -->
 
@@ -84,11 +81,11 @@ export default {
       class="flex flex-col items-center justify-center h-full"
     >
       <!-- No conversations available -->
-      <empty-state-message
+      <EmptyStateMessage
         v-if="!allConversations.length"
         :message="$t('CONVERSATION.NO_MESSAGE_1')"
       />
-      <empty-state-message
+      <EmptyStateMessage
         v-else-if="allConversations.length && !currentChat.id"
         :message="conversationMissingMessage"
       />

app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue

@@ -30,6 +30,6 @@ export default {
       <br />
     </span>
     <!-- Cmd bar, keyboard shortcuts placeholder -->
-    <feature-placeholder />
+    <FeaturePlaceholder />
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue

@@ -30,16 +30,16 @@ export default {
       class="flex gap-2 items-center"
     >
       <div class="flex gap-2 items-center">
-        <hotkey
+        <Hotkey
           custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
         >
           ⌘
-        </hotkey>
-        <hotkey
+        </Hotkey>
+        <Hotkey
           custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
         >
           {{ keyShortcut.key }}
-        </hotkey>
+        </Hotkey>
       </div>
       <span
         class="text-sm text-slate-700 dark:text-slate-300 font-medium text-center"

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -459,14 +459,14 @@ export default {
         />
       </div>
       <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
-        <bubble-mail-head
+        <BubbleMailHead
           :email-attributes="contentAttributes.email"
           :cc="emailHeadAttributes.cc"
           :bcc="emailHeadAttributes.bcc"
           :is-incoming="isIncoming"
         />
-        <instagram-story-reply v-if="storyUrl" :story-url="storyUrl" />
-        <bubble-reply-to
+        <InstagramStoryReply v-if="storyUrl" :story-url="storyUrl" />
+        <BubbleReplyTo
           v-if="inReplyToMessageId && inboxSupportsReplyTo.incoming"
           :message="inReplyTo"
           :message-type="data.message_type"
@@ -483,13 +483,13 @@ export default {
             {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
           </template>
         </div>
-        <bubble-text
+        <BubbleText
           v-else-if="data.content"
           :message="message"
           :is-email="isEmailContentType"
           :display-quoted-button="displayQuotedButton"
         />
-        <bubble-integration
+        <BubbleIntegration
           :message-id="data.id"
           :content-attributes="contentAttributes"
           :inbox-id="data.inbox_id"
@@ -502,31 +502,31 @@ export default {
         </span>
         <div v-if="!isPending && hasAttachments">
           <div v-for="attachment in attachments" :key="attachment.id">
-            <instagram-story
+            <InstagramStory
               v-if="isAnInstagramStory"
               :story-url="attachment.data_url"
               @error="onMediaLoadError"
             />
-            <bubble-image-audio-video
+            <BubbleImageAudioVideo
               v-else-if="isAttachmentImageVideoAudio(attachment.file_type)"
               :attachment="attachment"
               @error="onMediaLoadError"
             />
-            <bubble-location
+            <BubbleLocation
               v-else-if="attachment.file_type === 'location'"
               :latitude="attachment.coordinates_lat"
               :longitude="attachment.coordinates_long"
               :name="attachment.fallback_title"
             />
-            <bubble-contact
+            <BubbleContact
               v-else-if="attachment.file_type === 'contact'"
               :name="data.content"
               :phone-number="attachment.fallback_title"
             />
-            <bubble-file v-else :url="attachment.data_url" />
+            <BubbleFile v-else :url="attachment.data_url" />
           </div>
         </div>
-        <bubble-actions
+        <BubbleActions
           :id="data.id"
           :sender="data.sender"
           :story-sender="storySender"
@@ -543,7 +543,7 @@ export default {
           :created-at="createdAt"
         />
       </div>
-      <spinner v-if="isPending" size="tiny" />
+      <Spinner v-if="isPending" size="tiny" />
       <div
         v-if="showAvatar"
         v-tooltip.left="tooltipForSender"
@@ -569,7 +569,7 @@ export default {
       v-if="shouldShowContextMenu"
       class="invisible context-menu-wrap group-hover:visible"
     >
-      <context-menu
+      <ContextMenu
         v-if="isBubble && !isMessageDeleted"
         :context-menu-position="contextMenuPosition"
         :is-open="showContextMenu"

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -438,7 +438,7 @@ export default {
 
 <template>
   <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
-    <banner
+    <Banner
       v-if="!currentChat.can_reply"
       color-scheme="alert"
       :banner-message="replyWindowBannerMessage"
@@ -464,7 +464,7 @@ export default {
           <span v-if="shouldShowSpinner" class="spinner message" />
         </li>
       </transition>
-      <message
+      <Message
         v-for="message in getReadMessages"
         :key="message.id"
         class="message--read ph-no-capture"
@@ -489,7 +489,7 @@ export default {
           }}
         </span>
       </li>
-      <message
+      <Message
         v-for="message in getUnReadMessages"
         :key="message.id"
         class="message--unread ph-no-capture"
@@ -503,7 +503,7 @@ export default {
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :in-reply-to="getInReplyToMessage(message)"
       />
-      <conversation-label-suggestion
+      <ConversationLabelSuggestion
         v-if="shouldShowLabelSuggestions"
         :suggested-labels="labelSuggestions"
         :chat-labels="currentChat.labels"
@@ -529,7 +529,7 @@ export default {
           />
         </div>
       </div>
-      <reply-box
+      <ReplyBox
         :conversation-id="currentChat.id"
         :popout-reply-box.sync="isPopoutReplyBox"
         @click="showPopoutReplyBox"

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -72,11 +72,11 @@ export default {
       icon="share"
       @click="toggleEmailActionsModal"
     />
-    <resolve-action
+    <ResolveAction
       :conversation-id="currentChat.id"
       :status="currentChat.status"
     />
-    <email-transcript-modal
+    <EmailTranscriptModal
       v-if="showEmailActionsModal"
       :show="showEmailActionsModal"
       :current-chat="currentChat"

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -1081,7 +1081,7 @@ export default {
 
 <template>
   <div class="reply-box" :class="replyBoxClass">
-    <banner
+    <Banner
       v-if="showSelfAssignBanner"
       action-button-variant="clear"
       color-scheme="secondary"
@@ -1091,7 +1091,7 @@ export default {
       :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
       @click="onClickSelfAssign"
     />
-    <reply-top-panel
+    <ReplyTopPanel
       :mode="replyType"
       :set-reply-mode="setReplyMode"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
@@ -1099,38 +1099,38 @@ export default {
       :popout-reply-box="popoutReplyBox"
       @click="$emit('click')"
     />
-    <article-search-popover
+    <ArticleSearchPopover
       v-if="showArticleSearchPopover && connectedPortalSlug"
       :selected-portal-slug="connectedPortalSlug"
       @insert="handleInsert"
       @close="onSearchPopoverClose"
     />
     <div class="reply-box__top">
-      <reply-to-message
+      <ReplyToMessage
         v-if="shouldShowReplyToMessage"
         :message="inReplyTo"
         @dismiss="resetReplyToMessage"
       />
-      <canned-response
+      <CannedResponse
         v-if="showMentions && hasSlashCommand"
         v-on-clickaway="hideMentions"
         class="normal-editor__canned-box"
         :search-key="mentionSearchKey"
         @click="replaceText"
       />
-      <emoji-input
+      <EmojiInput
         v-if="showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
         :class="emojiDialogClassOnExpandedLayoutAndRTLView"
         :on-click="addIntoEditor"
       />
-      <reply-email-head
+      <ReplyEmailHead
         v-if="showReplyHead"
         :cc-emails.sync="ccEmails"
         :bcc-emails.sync="bccEmails"
         :to-emails.sync="toEmails"
       />
-      <woot-audio-recorder
+      <WootAudioRecorder
         v-if="showAudioRecorderEditor"
         ref="audioRecorderInput"
         :audio-record-format="audioRecordFormat"
@@ -1138,7 +1138,7 @@ export default {
         @state-recorder-changed="onStateRecorderChanged"
         @finish-record="onFinishRecorder"
       />
-      <resizable-text-area
+      <ResizableTextArea
         v-else-if="!showRichContentEditor"
         ref="messageInput"
         v-model="message"
@@ -1153,7 +1153,7 @@ export default {
         @focus="onFocus"
         @blur="onBlur"
       />
-      <woot-message-editor
+      <WootMessageEditor
         v-else
         v-model="message"
         :editor-id="editorStateId"
@@ -1178,16 +1178,16 @@ export default {
       />
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
-      <attachment-preview
+      <AttachmentPreview
         class="flex-col mt-4"
         :attachments="attachedFiles"
         @remove-attachment="removeAttachment"
       />
     </div>
-    <message-signature-missing-alert
+    <MessageSignatureMissingAlert
       v-if="isSignatureEnabledForInbox && !isSignatureAvailable"
     />
-    <reply-bottom-panel
+    <ReplyBottomPanel
       :conversation-id="conversationId"
       :enable-multiple-file-upload="enableMultipleFileUpload"
       :has-whatsapp-templates="hasWhatsappTemplates"
@@ -1216,7 +1216,7 @@ export default {
       @replace-text="replaceText"
       @toggle-insert-article="toggleInsertArticle"
     />
-    <whatsapp-templates
+    <WhatsappTemplates
       :inbox-id="inbox.id"
       :show="showWhatsAppTemplatesModal"
       @close="hideWhatsappTemplatesModal"

app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue

@@ -19,7 +19,7 @@ export default {
     <fluent-icon class="flex-shrink-0 icon" icon="arrow-reply" size="14" />
     <div class="flex-grow gap-1 mt-px text-xs truncate">
       {{ $t('CONVERSATION.REPLYBOX.REPLYING_TO') }}
-      <message-preview
+      <MessagePreview
         :message="message"
         :show-message-type="false"
         :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"

app/javascript/dashboard/components/widgets/conversation/VariableList.vue

@@ -57,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <mention-box
+  <MentionBox
     v-if="items.length"
     type="variable"
     :items="items"
@@ -69,7 +69,7 @@ export default {
       </span>
       ({{ item.label }})
     </template>
-  </mention-box>
+  </MentionBox>
 </template>
 <style scoped>
 .variable--list-label {

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue

@@ -55,12 +55,12 @@ export default {
       :header-content="modalHeaderContent"
     />
     <div class="row modal-content">
-      <templates-picker
+      <TemplatesPicker
         v-if="!selectedWaTemplate"
         :inbox-id="inboxId"
         @onSelect="pickTemplate"
       />
-      <template-parser
+      <TemplateParser
         v-else
         :template="selectedWaTemplate"
         @resetTemplate="onResetTemplate"

app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue

@@ -110,7 +110,7 @@ export default {
     <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
       <source :src="`${dataUrl}?t=${Date.now()}`" />
     </audio>
-    <gallery-view
+    <GalleryView
       v-if="show"
       :show.sync="show"
       :attachment="attachment"

app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue

@@ -37,15 +37,15 @@ export default {
 };
 </script>
 <template>
-  <bubble-image
+  <BubbleImage
     v-if="!hasImgStoryError"
     :url="storyUrl"
     @error="onImageLoadError"
   />
-  <bubble-video
+  <BubbleVideo
     v-else-if="!hasVideoStoryError"
     :url="storyUrl"
     @error="onVideoLoadError"
   />
-  <instagram-story-error-place-holder v-else />
+  <InstagramStoryErrorPlaceHolder v-else />
 </template>

app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue

@@ -30,6 +30,6 @@ export default {
     class="my-0 px-2 pb-0 pt-0 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200"
   >
     <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
-    <instagram-story :story-url="storyUrl" class="mt-3 rounded-md" />
+    <InstagramStory :story-url="storyUrl" class="mt-3 rounded-md" />
   </blockquote>
 </template>

app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue

@@ -31,7 +31,7 @@ export default {
 };
 </script>
 <template>
-  <dyte-video-call
+  <DyteVideoCall
     v-if="showDyteIntegration"
     :message-id="messageId"
     :meeting-data="contentAttributes.data"

app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue

@@ -46,7 +46,7 @@ export default {
     }"
     @click="scrollToMessage"
   >
-    <message-preview
+    <MessagePreview
       class="cursor-pointer"
       :message="message"
       :show-message-type="false"

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -85,14 +85,14 @@ export default {
   >
     <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
     <div v-else @click="handleClickOnContent">
-      <letter
+      <Letter
         class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
         :html="message"
       />
     </div>
     <button
       v-if="showQuoteToggle"
-      class="text-slate-300 dark:text-slate-300 cursor-pointer text-xs py-1"
+      class="py-1 text-xs cursor-pointer text-slate-300 dark:text-slate-300"
       @click="toggleQuotedContent"
     >
       <span v-if="showQuotedContent" class="flex items-center gap-0.5">
@@ -104,7 +104,7 @@ export default {
         {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
       </span>
     </button>
-    <gallery-view
+    <GalleryView
       v-if="showGalleryViewer"
       :show.sync="showGalleryViewer"
       :attachment="attachment"

app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue

@@ -226,7 +226,7 @@ export default {
           v-if="senderDetails"
           class="items-center flex justify-start min-w-[15rem]"
         >
-          <thumbnail
+          <Thumbnail
             v-if="senderDetails.avatar"
             :username="senderDetails.name"
             :src="senderDetails.avatar"

app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue

@@ -145,7 +145,7 @@ export default {
         {{ slaStatus.threshold }}
       </span>
     </div>
-    <SLA-popover-card
+    <SLAPopoverCard
       v-if="showSlaPopoverCard"
       :sla-missed-events="slaEvents"
       class="right-0 top-7"

app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue

@@ -44,12 +44,12 @@ const toggleShowAllNRT = () => {
     <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
       {{ $t('SLA.EVENTS.TITLE') }}
     </span>
-    <SLA-event-item
+    <SLAEventItem
       v-if="frtMisses.length"
       :label="$t('SLA.EVENTS.FRT')"
       :items="frtMisses"
     />
-    <SLA-event-item
+    <SLAEventItem
       v-if="nrtMisses.length"
       :label="$t('SLA.EVENTS.NRT')"
       :items="nrtMisses"
@@ -75,8 +75,8 @@ const toggleShowAllNRT = () => {
           </woot-button>
         </div>
       </template>
-    </SLA-event-item>
-    <SLA-event-item
+    </SLAEventItem>
+    <SLAEventItem
       v-if="rtMisses.length"
       :label="$t('SLA.EVENTS.RT')"
       :items="rtMisses"

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -180,14 +180,14 @@ export default {
 
 <template>
   <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
-    <menu-item
+    <MenuItem
       v-if="!hasUnreadMessages"
       :option="unreadOption"
       variant="icon"
       @click="$emit('mark-as-unread')"
     />
     <template v-for="option in statusMenuConfig">
-      <menu-item
+      <MenuItem
         v-if="show(option.key)"
         :key="option.key"
         :option="option"
@@ -195,40 +195,40 @@ export default {
         @click="toggleStatus(option.key, null)"
       />
     </template>
-    <menu-item
+    <MenuItem
       v-if="showSnooze"
       :option="snoozeOption"
       variant="icon"
       @click="snoozeConversation()"
     />
 
-    <menu-item-with-submenu :option="priorityConfig">
-      <menu-item
+    <MenuItemWithSubmenu :option="priorityConfig">
+      <MenuItem
         v-for="(option, i) in priorityConfig.options"
         :key="i"
         :option="option"
         @click="assignPriority(option.key)"
       />
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
       :option="labelMenuConfig"
       :sub-menu-available="!!labels.length"
     >
-      <menu-item
+      <MenuItem
         v-for="label in labels"
         :key="label.id"
         :option="generateMenuLabelConfig(label, 'label')"
         variant="label"
         @click="$emit('assign-label', label)"
       />
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
       :option="agentMenuConfig"
       :sub-menu-available="!!assignableAgents.length"
     >
-      <agent-loading-placeholder v-if="assignableAgentsUiFlags.isFetching" />
+      <AgentLoadingPlaceholder v-if="assignableAgentsUiFlags.isFetching" />
       <template v-else>
-        <menu-item
+        <MenuItem
           v-for="agent in assignableAgents"
           :key="agent.id"
           :option="generateMenuLabelConfig(agent, 'agent')"
@@ -236,17 +236,17 @@ export default {
           @click="$emit('assign-agent', agent)"
         />
       </template>
-    </menu-item-with-submenu>
-    <menu-item-with-submenu
+    </MenuItemWithSubmenu>
+    <MenuItemWithSubmenu
       :option="teamMenuConfig"
       :sub-menu-available="!!teams.length"
     >
-      <menu-item
+      <MenuItem
         v-for="team in teams"
         :key="team.id"
         :option="generateMenuLabelConfig(team, 'team')"
         @click="$emit('assign-team', team)"
       />
-    </menu-item-with-submenu>
+    </MenuItemWithSubmenu>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue

@@ -10,7 +10,7 @@ export default {
 
 <template>
   <div class="agent-placeholder">
-    <spinner />
+    <Spinner />
     <p>{{ $t('CONVERSATION.CARD_CONTEXT_MENU.AGENTS_LOADING') }}</p>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue

@@ -34,7 +34,7 @@ export default {
       class="label-pill"
       :style="{ backgroundColor: option.color }"
     />
-    <thumbnail
+    <Thumbnail
       v-if="variant === 'agent'"
       :username="option.label"
       :src="option.thumbnail"

app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue

@@ -171,7 +171,7 @@ export default {
               "
             />
           </button>
-          <woot-button
+          <WootButton
             v-if="preparedLabels.length === 1"
             v-tooltip.top="{
               content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
@@ -187,7 +187,7 @@ export default {
           />
         </div>
         <div v-if="preparedLabels.length > 1">
-          <woot-button
+          <WootButton
             :variant="selectedLabels.length === 0 ? 'smooth' : ''"
             class="label--add"
             icon="add"
@@ -195,8 +195,8 @@ export default {
             @click="addAllLabels"
           >
             {{ addButtonText }}
-          </woot-button>
-          <woot-button
+          </WootButton>
+          <WootButton
             v-tooltip.top="{
               content: $t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.DISMISS'),
               delay: { show: 600, hide: 0 },
@@ -220,9 +220,9 @@ export default {
           }"
           size="16px"
         >
-          <avatar class="user-thumbnail thumbnail-rounded">
+          <Avatar class="user-thumbnail thumbnail-rounded">
             <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
-          </avatar>
+          </Avatar>
         </woot-thumbnail>
       </div>
     </div>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -107,7 +107,7 @@ export default {
         v-if="assignableAgentsUiFlags.isFetching"
         class="agent__list-loading"
       >
-        <spinner />
+        <Spinner />
         <p>{{ $t('BULK_ACTION.AGENT_LIST_LOADING') }}</p>
       </div>
       <div v-else class="agent__list-container">
@@ -128,7 +128,7 @@ export default {
           </li>
           <li v-for="agent in filteredAgents" :key="agent.id">
             <div class="agent-list-item" @click="assignAgent(agent)">
-              <thumbnail
+              <Thumbnail
                 :src="agent.thumbnail"
                 :status="agent.availability_status"
                 :username="agent.name"

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -197,7 +197,7 @@ export default {
         />
       </div>
       <transition name="popover-animation">
-        <label-actions
+        <LabelActions
           v-if="showLabelActions"
           class="label-actions-box"
           @assign="assignLabels"
@@ -205,7 +205,7 @@ export default {
         />
       </transition>
       <transition name="popover-animation">
-        <update-actions
+        <UpdateActions
           v-if="showUpdateActions"
           class="update-actions-box"
           :selected-inboxes="selectedInboxes"
@@ -218,7 +218,7 @@ export default {
         />
       </transition>
       <transition name="popover-animation">
-        <agent-selector
+        <AgentSelector
           v-if="showAgentsList"
           class="agent-actions-box"
           :selected-inboxes="selectedInboxes"
@@ -228,7 +228,7 @@ export default {
         />
       </transition>
       <transition name="popover-animation">
-        <team-actions
+        <TeamActions
           v-if="showTeamsList"
           class="team-actions-box"
           @assign-team="assignTeam"
@@ -243,7 +243,7 @@ export default {
       :show.sync="showCustomTimeSnoozeModal"
       :on-close="hideCustomSnoozeModal"
     >
-      <custom-snooze-modal
+      <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
         @choose-time="customSnoozeTime"
       />

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue

@@ -102,9 +102,9 @@ const actionLabel = key => {
       />
     </div>
     <div class="px-2.5 pt-0 pb-2.5">
-      <woot-dropdown-menu class="m-0 list-none">
+      <WootDropdownMenu class="m-0 list-none">
         <template v-for="action in actions">
-          <woot-dropdown-item v-if="showAction(action.key)" :key="action.key">
+          <WootDropdownItem v-if="showAction(action.key)" :key="action.key">
             <woot-button
               variant="clear"
               color-scheme="secondary"
@@ -114,9 +114,9 @@ const actionLabel = key => {
             >
               {{ actionLabel(action.key) }}
             </woot-button>
-          </woot-dropdown-item>
+          </WootDropdownItem>
         </template>
-      </woot-dropdown-menu>
+      </WootDropdownMenu>
     </div>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue

@@ -236,7 +236,7 @@ onMounted(getTeams);
       />
     </label>
     <div class="flex flex-col gap-4">
-      <searchable-dropdown
+      <SearchableDropdown
         v-for="dropdown in dropdowns"
         :key="dropdown.type"
         :type="dropdown.type"

app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue

@@ -72,7 +72,7 @@ const onClickTabChange = index => {
         </woot-tabs>
       </div>
       <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
-        <create-issue
+        <CreateIssue
           :account-id="accountId"
           :conversation-id="conversation.id"
           :title="title"
@@ -81,7 +81,7 @@ const onClickTabChange = index => {
       </div>
 
       <div v-else class="flex flex-col px-8 pb-4">
-        <link-issue
+        <LinkIssue
           :conversation-id="conversation.id"
           :title="title"
           @close="onClose"

app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue

@@ -59,7 +59,7 @@ const unlinkIssue = () => {
     class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
   >
     <div class="flex flex-col w-full">
-      <issue-header
+      <IssueHeader
         :identifier="issue.identifier"
         :link-id="linkId"
         :issue-url="issue.url"
@@ -77,7 +77,7 @@ const unlinkIssue = () => {
       </span>
     </div>
     <div class="flex flex-row items-center h-6 gap-2">
-      <user-avatar-with-name v-if="assignee" :user="assignee" class="py-1" />
+      <UserAvatarWithName v-if="assignee" :user="assignee" class="py-1" />
       <div v-if="assignee" class="w-px h-3 bg-ash-200" />
       <div class="flex items-center gap-1 py-1">
         <fluent-icon

app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue

@@ -100,14 +100,14 @@ const linkIssue = async () => {
     class="flex flex-col justify-between"
     :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
   >
-    <filter-button
+    <FilterButton
       right-icon="chevron-down"
       :button-text="linkIssueTitle"
       class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
       @click="toggleDropdown"
     >
       <template v-if="shouldShowDropdown" #dropdown>
-        <filter-list-dropdown
+        <FilterListDropdown
           v-if="issues"
           v-on-clickaway="toggleDropdown"
           :show-clear-filter="false"
@@ -122,7 +122,7 @@ const linkIssue = async () => {
           @click="onSelectIssue"
         />
       </template>
-    </filter-button>
+    </FilterButton>
     <div class="flex items-center justify-end w-full gap-2 mt-2">
       <woot-button
         class="px-4 rounded-xl button clear outline-woot-200/50 outline"

app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue

@@ -48,14 +48,14 @@ const selectedItemId = computed(() => selectedItem.value?.id || null);
   >
     <label class="w-full" :class="{ error: hasError }">
       {{ label }}
-      <filter-button
+      <FilterButton
         right-icon="chevron-down"
         :button-text="selectedItemName"
         class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
         @click="toggleDropdown"
       >
         <template v-if="shouldShowDropdown" #dropdown>
-          <filter-list-dropdown
+          <FilterListDropdown
             v-on-clickaway="toggleDropdown"
             :show-clear-filter="false"
             :list-items="items"
@@ -66,7 +66,7 @@ const selectedItemId = computed(() => selectedItem.value?.id || null);
             @click="onSelect"
           />
         </template>
-      </filter-button>
+      </FilterButton>
       <span v-if="hasError" class="mt-1 message">{{ error }}</span>
     </label>
   </div>

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -118,7 +118,7 @@ onMounted(() => {
         {{ linkedIssue.issue.identifier }}
       </span>
     </woot-button>
-    <issue
+    <Issue
       v-if="linkedIssue"
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
@@ -131,7 +131,7 @@ onMounted(() => {
       :close-on-backdrop-click="false"
       class="!items-start [&>div]:!top-12 [&>div]:sticky"
     >
-      <create-or-link-issue
+      <CreateOrLinkIssue
         :conversation="conversation"
         :account-id="currentAccountId"
         @close="closePopup"

app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue

@@ -67,7 +67,7 @@ export default {
 
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <modal :show.sync="show" :on-close="closeModal">
+  <Modal :show.sync="show" :on-close="closeModal">
     <woot-modal-header :header-title="title" :header-content="message" />
     <form @submit.prevent="onConfirm">
       <woot-input
@@ -86,5 +86,5 @@ export default {
         </woot-button>
       </div>
     </form>
-  </modal>
+  </Modal>
 </template>

app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue

@@ -50,7 +50,7 @@ export default {
 };
 </script>
 <template>
-  <modal :show.sync="show" :on-close="cancel">
+  <Modal :show.sync="show" :on-close="cancel">
     <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="title" :header-content="description" />
       <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">
@@ -62,5 +62,5 @@ export default {
         </woot-button>
       </div>
     </div>
-  </modal>
+  </Modal>
 </template>

app/javascript/dashboard/components/widgets/modal/DeleteModal.vue

@@ -20,7 +20,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="title"
       :header-content="message"
@@ -39,7 +39,7 @@ export default {
         {{ confirmText }}
       </woot-button>
     </div>
-  </modal>
+  </Modal>
 </template>
 <style lang="scss" scoped>
 .action-button {

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -37,12 +37,12 @@ export default {
             {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
           </h5>
           <div class="flex items-center mb-1 ml-2 gap-2">
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-            </hotkey>
-            <hotkey custom-class="min-h-[28px] min-w-[36px] key">
+            </Hotkey>
+            <Hotkey custom-class="min-h-[28px] min-w-[36px] key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
-            </hotkey>
+            </Hotkey>
           </div>
         </div>
       </div>
@@ -54,20 +54,20 @@ export default {
           </h5>
           <div class="flex items-center mb-1 ml-2 gap-2">
             <div class="flex gap-2">
-              <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+              <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-              </hotkey>
-              <hotkey custom-class="min-h-[28px] w-9 key"> J </hotkey>
+              </Hotkey>
+              <Hotkey custom-class="min-h-[28px] w-9 key"> J </Hotkey>
               <span
                 class="flex items-center font-semibold text-sm text-slate-800 dark:text-slate-100"
               >
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
               </span>
             </div>
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-            </hotkey>
-            <hotkey custom-class="w-9 key"> K </hotkey>
+            </Hotkey>
+            <Hotkey custom-class="w-9 key"> K </Hotkey>
           </div>
         </div>
 
@@ -76,13 +76,13 @@ export default {
             {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
           </h5>
           <div class="flex items-center mb-1 ml-2 gap-2">
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-            </hotkey>
-            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
+            </Hotkey>
+            <Hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-            </hotkey>
-            <hotkey custom-class="w-9 key"> E </hotkey>
+            </Hotkey>
+            <Hotkey custom-class="w-9 key"> E </Hotkey>
           </div>
         </div>
         <div
@@ -94,18 +94,18 @@ export default {
             {{ title(shortcutKey) }}
           </h5>
           <div class="flex items-center mb-1 ml-2 gap-2">
-            <hotkey
+            <Hotkey
               :class="{ 'min-w-[60px]': shortcutKey.firstKey !== 'Up' }"
               custom-class="min-h-[28px] normal-case key"
             >
               {{ shortcutKey.firstKey }}
-            </hotkey>
-            <hotkey
+            </Hotkey>
+            <Hotkey
               :class="{ 'normal-case': shortcutKey.secondKey === 'Down' }"
               custom-class="min-h-[28px] min-w-[36px] key"
             >
               {{ shortcutKey.secondKey }}
-            </hotkey>
+            </Hotkey>
           </div>
         </div>
       </div>

app/javascript/dashboard/modules/contact/ContactMergeModal.vue

@@ -77,7 +77,7 @@ export default {
       :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
     />
 
-    <merge-contact
+    <MergeContact
       :primary-contact="primaryContact"
       :is-searching="isSearching"
       :is-merging="uiFlags.isMerging"

app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue

@@ -63,7 +63,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('CUSTOM_ATTRIBUTES.ADD.TITLE')"
       :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
@@ -96,5 +96,5 @@ export default {
         </woot-button>
       </div>
     </form>
-  </modal>
+  </Modal>
 </template>

app/javascript/dashboard/modules/contact/components/ContactAttribute.vue

@@ -41,7 +41,7 @@ export default {
     <div class="title-wrap">
       <h4 class="text-sm title">
         <div class="title--icon">
-          <emoji-or-icon :icon="icon" :emoji="emoji" />
+          <EmojiOrIcon :icon="icon" :emoji="emoji" />
         </div>
         {{ label }}
       </h4>

app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue

@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div class="option-item--user">
-    <thumbnail :src="thumbnail" size="28px" :username="name" />
+    <Thumbnail :src="thumbnail" size="28px" :username="name" />
     <div class="option__user-data">
       <h5 class="option__title">
         {{ name }}

app/javascript/dashboard/modules/contact/components/ContactFields.vue

@@ -53,7 +53,7 @@ export default {
     <h3 class="text-lg title">
       {{ $t('CONTACTS_PAGE.FIELDS') }}
     </h3>
-    <attribute
+    <Attribute
       :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
       icon="mail"
       emoji=""
@@ -61,7 +61,7 @@ export default {
       :show-edit="true"
       @update="onEmailUpdate"
     />
-    <attribute
+    <Attribute
       :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
       icon="call"
       emoji=""
@@ -69,7 +69,7 @@ export default {
       :show-edit="true"
       @update="onPhoneUpdate"
     />
-    <attribute
+    <Attribute
       v-if="additionalAttributes.location"
       :label="$t('CONTACT_PANEL.LOCATION')"
       icon="map"
@@ -83,7 +83,7 @@ export default {
       :key="attribute"
       class="custom-attribute--row"
     >
-      <attribute
+      <Attribute
         :label="attribute"
         icon="chevron-right"
         :value="customAttributes[attribute]"

app/javascript/dashboard/modules/contact/components/ContactIntro.vue

@@ -43,7 +43,7 @@ export default {
 </script>
 <template>
   <div class="contact--intro">
-    <thumbnail
+    <Thumbnail
       :src="contact.thumbnail"
       size="64px"
       :username="contact.name"
@@ -62,7 +62,7 @@ export default {
       <p v-if="additionalAttributes.description" class="contact--bio">
         {{ additionalAttributes.description }}
       </p>
-      <social-icons :social-profiles="socialProfiles" />
+      <SocialIcons :social-profiles="socialProfiles" />
     </div>
     <div class="contact-actions">
       <woot-button

app/javascript/dashboard/modules/contact/components/ContactPanel.vue

@@ -68,29 +68,29 @@ export default {
 </script>
 <template>
   <div class="panel">
-    <contact-intro
+    <ContactIntro
       :contact="contact"
       @message="toggleConversationModal"
       @edit="toggleEditModal"
     />
-    <contact-fields
+    <ContactFields
       :contact="contact"
       @update="updateField"
       @create-attribute="toggleCustomAttributeModal"
     />
-    <edit-contact
+    <EditContact
       v-if="showEditModal"
       :show="showEditModal"
       :contact="contact"
       @cancel="toggleEditModal"
     />
-    <new-conversation
+    <NewConversation
       v-if="enableNewConversation"
       :show="showConversationModal"
       :contact="contact"
       @cancel="toggleConversationModal"
     />
-    <add-custom-attribute
+    <AddCustomAttribute
       :show="showCustomAttributeModal"
       @cancel="toggleCustomAttributeModal"
       @create="createCustomAttribute"

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -98,7 +98,7 @@ export default {
             @search-change="searchChange"
           >
             <template slot="singleLabel" slot-scope="props">
-              <contact-dropdown-item
+              <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :identifier="props.option.id"
                 :name="props.option.name"
@@ -107,7 +107,7 @@ export default {
               />
             </template>
             <template slot="option" slot-scope="props">
-              <contact-dropdown-item
+              <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :identifier="props.option.id"
                 :name="props.option.name"
@@ -153,7 +153,7 @@ export default {
             track-by="id"
           >
             <template slot="singleLabel" slot-scope="props">
-              <contact-dropdown-item
+              <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :name="props.option.name"
                 :identifier="props.option.id"
@@ -165,7 +165,7 @@ export default {
         </div>
       </div>
     </div>
-    <merge-contact-summary
+    <MergeContactSummary
       :primary-contact-name="primaryContact.name"
       :parent-contact-name="parentContactName"
     />

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -148,13 +148,13 @@ export default {
       :show.sync="isCannedResponseModalOpen"
       :on-close="hideCannedResponseModal"
     >
-      <add-canned-modal
+      <AddCannedModal
         :response-content="plainTextContent"
         :on-close="hideCannedResponseModal"
       />
     </woot-modal>
     <!-- Translate Content -->
-    <translate-modal
+    <TranslateModal
       v-if="showTranslateModal"
       :content="messageContent"
       :content-attributes="contentAttributes"
@@ -186,7 +186,7 @@ export default {
       @close="handleClose"
     >
       <div class="menu-container">
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['replyTo']"
           :option="{
             icon: 'arrow-reply',
@@ -195,7 +195,7 @@ export default {
           variant="icon"
           @click="handleReplyTo"
         />
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['copy']"
           :option="{
             icon: 'clipboard',
@@ -204,7 +204,7 @@ export default {
           variant="icon"
           @click="handleCopy"
         />
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['copy']"
           :option="{
             icon: 'translate',
@@ -214,7 +214,7 @@ export default {
           @click="handleTranslate"
         />
         <hr />
-        <menu-item
+        <MenuItem
           :option="{
             icon: 'link',
             label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
@@ -222,7 +222,7 @@ export default {
           variant="icon"
           @click="copyLinkToMessage"
         />
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['cannedResponse']"
           :option="{
             icon: 'comment-add',
@@ -232,7 +232,7 @@ export default {
           @click="showCannedResponseModal"
         />
         <hr v-if="enabledOptions['delete']" />
-        <menu-item
+        <MenuItem
           v-if="enabledOptions['delete']"
           :option="{
             icon: 'delete',

app/javascript/dashboard/modules/notes/NotesOnContactPage.vue

@@ -41,7 +41,7 @@ export default {
 </script>
 
 <template>
-  <note-list
+  <NoteList
     :is-fetching="uiFlags.isFetching"
     :notes="notes"
     @add="onAdd"

app/javascript/dashboard/modules/notes/components/AddNote.vue

@@ -40,7 +40,7 @@ export default {
   <div
     class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100"
   >
-    <woot-message-editor
+    <WootMessageEditor
       v-model="noteContent"
       class="input--note"
       :placeholder="$t('NOTES.ADD.PLACEHOLDER')"

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -69,7 +69,7 @@ export default {
   >
     <div class="flex items-end justify-between gap-1 text-xs">
       <div class="flex items-center">
-        <thumbnail
+        <Thumbnail
           :title="noteAuthorName"
           :src="noteAuthor.thumbnail"
           :username="noteAuthorName"

app/javascript/dashboard/modules/notes/components/NoteList.vue

@@ -37,8 +37,8 @@ export default {
 
 <template>
   <div>
-    <add-note @add="onAddNote" />
-    <contact-note
+    <AddNote @add="onAddNote" />
+    <ContactNote
       v-for="note in notes"
       :id="note.id"
       :key="note.id"
@@ -50,7 +50,7 @@ export default {
     />
 
     <div v-if="isFetching" class="text-center p-4 text-base">
-      <spinner size="" />
+      <Spinner size="" />
       <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
     </div>
     <div v-else-if="!notes.length" class="text-center p-4 text-base">

app/javascript/dashboard/modules/search/components/MessageContent.vue

@@ -75,9 +75,9 @@ export default {
       </strong>
       {{ $t('SEARCH.WROTE') }}
     </p>
-    <read-more :shrink="isOverflowing" @expand="isOverflowing = false">
+    <ReadMore :shrink="isOverflowing" @expand="isOverflowing = false">
       <div v-dompurify-html="prepareContent(content)" class="message-content" />
-    </read-more>
+    </ReadMore>
   </blockquote>
 </template>
 

app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue

@@ -36,7 +36,7 @@ export default {
 </script>
 
 <template>
-  <search-result-section
+  <SearchResultSection
     :title="$t('SEARCH.SECTION.CONTACTS')"
     :empty="!contacts.length"
     :query="query"
@@ -45,7 +45,7 @@ export default {
   >
     <ul v-if="contacts.length" class="search-list">
       <li v-for="contact in contacts" :key="contact.id">
-        <search-result-contact-item
+        <SearchResultContactItem
           :id="contact.id"
           :name="contact.name"
           :email="contact.email"
@@ -55,5 +55,5 @@ export default {
         />
       </li>
     </ul>
-  </search-result-section>
+  </SearchResultSection>
 </template>

app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue

@@ -70,7 +70,7 @@ export default {
             small
           />
           <div class="inbox-name-wrap">
-            <inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
+            <InboxName :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
           </div>
         </div>
         <div>

app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <template>
-  <search-result-section
+  <SearchResultSection
     :title="$t('SEARCH.SECTION.CONVERSATIONS')"
     :empty="!conversations.length"
     :query="query"
@@ -44,7 +44,7 @@ export default {
   >
     <ul v-if="conversations.length" class="search-list">
       <li v-for="conversation in conversations" :key="conversation.id">
-        <search-result-conversation-item
+        <SearchResultConversationItem
           :id="conversation.id"
           :name="conversation.contact.name"
           :email="conversation.contact.email"
@@ -54,5 +54,5 @@ export default {
         />
       </li>
     </ul>
-  </search-result-section>
+  </SearchResultSection>
 </template>

app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <template>
-  <search-result-section
+  <SearchResultSection
     :title="$t('SEARCH.SECTION.MESSAGES')"
     :empty="!messages.length"
     :query="query"
@@ -53,20 +53,20 @@ export default {
   >
     <ul v-if="messages.length" class="search-list">
       <li v-for="message in messages" :key="message.id">
-        <search-result-conversation-item
+        <SearchResultConversationItem
           :id="message.conversation_id"
           :account-id="accountId"
           :inbox="message.inbox"
           :created-at="message.created_at"
           :message-id="message.id"
         >
-          <message-content
+          <MessageContent
             :author="getName(message)"
             :content="message.content"
             :search-term="query"
           />
-        </search-result-conversation-item>
+        </SearchResultConversationItem>
       </li>
     </ul>
-  </search-result-section>
+  </SearchResultSection>
 </template>

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -155,8 +155,8 @@ export default {
     </div>
     <section class="search-root">
       <header>
-        <search-header @search="onSearch" />
-        <search-tabs
+        <SearchHeader @search="onSearch" />
+        <SearchTabs
           v-if="query"
           :tabs="tabs"
           :selected-tab="activeTabIndex"
@@ -165,7 +165,7 @@ export default {
       </header>
       <div class="search-results">
         <div v-if="showResultsSection">
-          <search-result-contacts-list
+          <SearchResultContactsList
             v-if="filterContacts"
             :is-fetching="uiFlags.contact.isFetching"
             :contacts="contacts"
@@ -173,7 +173,7 @@ export default {
             :show-title="isSelectedTabAll"
           />
 
-          <search-result-messages-list
+          <SearchResultMessagesList
             v-if="filterMessages"
             :is-fetching="uiFlags.message.isFetching"
             :messages="messages"
@@ -181,7 +181,7 @@ export default {
             :show-title="isSelectedTabAll"
           />
 
-          <search-result-conversations-list
+          <SearchResultConversationsList
             v-if="filterConversations"
             :is-fetching="uiFlags.conversation.isFetching"
             :conversations="conversations"

app/javascript/dashboard/modules/widget-preview/components/Widget.vue

@@ -152,7 +152,7 @@ export default {
 <template>
   <div class="widget-preview-container">
     <div v-if="isWidgetVisible" class="screen-selector">
-      <input-radio-group
+      <InputRadioGroup
         name="widget-screen"
         :items="widgetScreens"
         :action="handleScreenChange"

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

@@ -48,7 +48,7 @@ export default {
           {{ config.replyTime }}
         </div>
       </div>
-      <thumbnail username="J" size="40px" />
+      <Thumbnail username="J" size="40px" />
     </div>
     <div v-else class="conversation-content">
       <div class="conversation-wrap">

app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue

@@ -18,7 +18,7 @@ export default {
 
 <template>
   <div class="footer-wrap">
-    <custom-button
+    <CustomButton
       v-if="config.isDefaultScreen"
       class="start-conversation"
       :style="{ background: config.color }"
@@ -26,9 +26,9 @@ export default {
       {{
         $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
       }}
-    </custom-button>
+    </CustomButton>
     <div v-else class="chat-message-input is-focused">
-      <resizable-text-area
+      <ResizableTextArea
         id="chat-input"
         :rows="1"
         :placeholder="