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

app/javascript/widget/App.vue

@@ -337,7 +337,7 @@ export default {
     class="flex flex-1 items-center h-full bg-black-25 justify-center"
     :class="{ dark: prefersDarkMode }"
   >
-    <spinner size="" />
+    <Spinner size="" />
   </div>
   <div
     v-else

app/javascript/widget/components/AgentMessage.vue

@@ -168,7 +168,7 @@ export default {
   >
     <div v-if="!isASubmittedForm" class="agent-message">
       <div class="avatar-wrap">
-        <thumbnail
+        <Thumbnail
           v-if="message.showAvatar || hasRecordedResponse"
           :src="avatarUrl"
           size="24px"
@@ -177,7 +177,7 @@ export default {
       </div>
       <div class="message-wrap">
         <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">
-          <reply-to-chip :reply-to="replyTo" />
+          <ReplyToChip :reply-to="replyTo" />
         </div>
         <div class="flex gap-1">
           <div class="space-y-2">
@@ -198,7 +198,7 @@ export default {
                 v-for="attachment in message.attachments"
                 :key="attachment.id"
               >
-                <image-bubble
+                <ImageBubble
                   v-if="attachment.file_type === 'image' && !hasImageError"
                   :url="attachment.data_url"
                   :thumb="attachment.data_url"
@@ -206,7 +206,7 @@ export default {
                   @error="onImageLoadError"
                 />
 
-                <video-bubble
+                <VideoBubble
                   v-if="attachment.file_type === 'video' && !hasVideoError"
                   :url="attachment.data_url"
                   :readable-time="readableTime"
@@ -216,12 +216,12 @@ export default {
                 <audio v-else-if="attachment.file_type === 'audio'" controls>
                   <source :src="attachment.data_url" />
                 </audio>
-                <file-bubble v-else :url="attachment.data_url" />
+                <FileBubble v-else :url="attachment.data_url" />
               </div>
             </div>
           </div>
           <div class="flex flex-col justify-end">
-            <message-reply-button
+            <MessageReplyButton
               class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
               @click="toggleReply"
             />

app/javascript/widget/components/AgentMessageBubble.vue

@@ -94,27 +94,27 @@ export default {
         v-dompurify-html="formatMessage(message, false)"
         class="message-content text-slate-900 dark:text-slate-50"
       />
-      <email-input
+      <EmailInput
         v-if="isTemplateEmail"
         :message-id="messageId"
         :message-content-attributes="messageContentAttributes"
       />
 
-      <integration-card
+      <IntegrationCard
         v-if="isIntegrations"
         :message-id="messageId"
         :meeting-data="messageContentAttributes.data"
       />
     </div>
     <div v-if="isOptions">
-      <chat-options
+      <ChatOptions
         :title="message"
         :options="messageContentAttributes.items"
         :hide-fields="!!messageContentAttributes.submitted_values"
         @click="onOptionSelect"
       />
     </div>
-    <chat-form
+    <ChatForm
       v-if="isForm && !messageContentAttributes.submitted_values"
       :items="messageContentAttributes.items"
       :button-label="messageContentAttributes.button_label"
@@ -122,7 +122,7 @@ export default {
       @submit="onFormSubmit"
     />
     <div v-if="isCards">
-      <chat-card
+      <ChatCard
         v-for="item in messageContentAttributes.items"
         :key="item.title"
         :media-url="item.media_url"
@@ -132,9 +132,9 @@ export default {
       />
     </div>
     <div v-if="isArticle">
-      <chat-article :items="messageContentAttributes.items" />
+      <ChatArticle :items="messageContentAttributes.items" />
     </div>
-    <customer-satisfaction
+    <CustomerSatisfaction
       v-if="isCSAT"
       :message-content-attributes="messageContentAttributes.submitted_values"
       :message-id="messageId"

app/javascript/widget/components/ArticleCategoryCard.vue

@@ -31,14 +31,14 @@ export default {
     <h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
       {{ title }}
     </h3>
-    <article-list :articles="articles" @click="onArticleClick" />
+    <ArticleList :articles="articles" @click="onArticleClick" />
     <button
       class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
       :style="{ color: widgetColor }"
       @click="$emit('view-all')"
     >
       <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
-      <fluent-icon icon="arrow-right" size="14" />
+      <FluentIcon icon="arrow-right" size="14" />
     </button>
   </div>
 </template>

app/javascript/widget/components/ArticleHero.vue

@@ -21,7 +21,7 @@ export default {
 </script>
 
 <template>
-  <category-card
+  <CategoryCard
     :title="$t('PORTAL.POPULAR_ARTICLES')"
     :articles="articles.slice(0, 6)"
     @view-all="$emit('view-all')"

app/javascript/widget/components/ArticleList.vue

@@ -24,7 +24,7 @@ export default {
 
 <template>
   <ul role="list" class="py-2">
-    <article-list-item
+    <ArticleListItem
       v-for="article in articles"
       :key="article.slug"
       :link="article.link"

app/javascript/widget/components/ArticleListItem.vue

@@ -34,7 +34,7 @@ export default {
       {{ title }}
     </button>
     <span class="pl-1 arrow">
-      <fluent-icon icon="arrow-right" size="14" />
+      <FluentIcon icon="arrow-right" size="14" />
     </span>
   </li>
 </template>

app/javascript/widget/components/AvailableAgents.vue

@@ -23,5 +23,5 @@ export default {
 </script>
 
 <template>
-  <grouped-avatars :users="users" />
+  <GroupedAvatars :users="users" />
 </template>

app/javascript/widget/components/ChatAttachment.vue

@@ -134,7 +134,7 @@ export default {
 </script>
 
 <template>
-  <file-upload
+  <FileUpload
     ref="upload"
     :size="4096 * 2048"
     :accept="allowedFileTypes"
@@ -145,8 +145,8 @@ export default {
     @input-file="onFileUpload"
   >
     <button class="icon-button flex items-center justify-center">
-      <fluent-icon v-if="!isUploading.image" icon="attach" />
-      <spinner v-if="isUploading" size="small" />
+      <FluentIcon v-if="!isUploading.image" icon="attach" />
+      <Spinner v-if="isUploading" size="small" />
     </button>
-  </file-upload>
+  </FileUpload>
 </template>

app/javascript/widget/components/ChatFooter.vue

@@ -130,19 +130,19 @@ export default {
         hasReplyTo,
     }"
   >
-    <footer-reply-to
+    <FooterReplyTo
       v-if="hasReplyTo"
       :in-reply-to="inReplyTo"
       @dismiss="inReplyTo = null"
     />
-    <chat-input-wrap
+    <ChatInputWrap
       class="shadow-sm"
       :on-send-message="handleSendMessage"
       :on-send-attachment="handleSendAttachment"
     />
   </footer>
   <div v-else>
-    <custom-button
+    <CustomButton
       class="font-medium"
       block
       :bg-color="widgetColor"
@@ -150,15 +150,15 @@ export default {
       @click="startNewConversation"
     >
       {{ $t('START_NEW_CONVERSATION') }}
-    </custom-button>
-    <custom-button
+    </CustomButton>
+    <CustomButton
       v-if="showEmailTranscriptButton"
       type="clear"
       class="font-normal"
       @click="sendTranscript"
     >
       {{ $t('EMAIL_TRANSCRIPT.BUTTON_TEXT') }}
-    </custom-button>
+    </CustomButton>
   </div>
 </template>
 <style scoped lang="scss">

app/javascript/widget/components/ChatHeader.vue

@@ -70,7 +70,7 @@ export default {
         class="-ml-3 px-2"
         @click="onBackButtonClick"
       >
-        <fluent-icon
+        <FluentIcon
           icon="chevron-left"
           size="24"
           :class="$dm('text-black-900', 'dark:text-slate-50')"
@@ -101,6 +101,6 @@ export default {
         </div>
       </div>
     </div>
-    <header-actions :show-popout-button="showPopoutButton" />
+    <HeaderActions :show-popout-button="showPopoutButton" />
   </header>
 </template>

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -43,7 +43,7 @@ export default {
         :src="avatarUrl"
         alt="Avatar"
       />
-      <header-actions
+      <HeaderActions
         :show-popout-button="showPopoutButton"
         :show-end-conversation-button="false"
       />

app/javascript/widget/components/ChatInputWrap.vue

@@ -131,7 +131,7 @@ export default {
     :class="$dm('bg-white ', 'dark:bg-slate-600')"
     @keydown.esc="hideEmojiPicker"
   >
-    <resizable-text-area
+    <ResizableTextArea
       id="chat-input"
       ref="chatInput"
       v-model="userInput"
@@ -146,7 +146,7 @@ export default {
       @blur="onBlur"
     />
     <div class="button-wrap">
-      <chat-attachment-button
+      <ChatAttachmentButton
         v-if="showAttachment"
         :class="$dm('text-black-900', 'dark:text-slate-100')"
         :on-attach="onSendAttachment"
@@ -157,15 +157,15 @@ export default {
         aria-label="Emoji picker"
         @click="toggleEmojiPicker"
       >
-        <fluent-icon icon="emoji" :class="emojiIconColor" />
+        <FluentIcon icon="emoji" :class="emojiIconColor" />
       </button>
-      <emoji-input
+      <EmojiInput
         v-if="showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
         :on-click="emojiOnClick"
         @keydown.esc="hideEmojiPicker"
       />
-      <chat-send-button
+      <ChatSendButton
         v-if="showSendButton"
         :on-click="handleButtonClick"
         :color="widgetColor"

app/javascript/widget/components/ChatSendButton.vue

@@ -35,7 +35,7 @@ export default {
     class="icon-button flex items-center justify-center ml-1"
     @click="onClick"
   >
-    <fluent-icon v-if="!loading" icon="send" :style="`color: ${color}`" />
-    <spinner v-else size="small" />
+    <FluentIcon v-if="!loading" icon="send" :style="`color: ${color}`" />
+    <Spinner v-else size="small" />
   </button>
 </template>

app/javascript/widget/components/ContinueChatButton.vue

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

app/javascript/widget/components/ConversationWrap.vue

@@ -99,21 +99,21 @@ export default {
   <div class="conversation--container" :class="colorSchemeClass">
     <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
       <div v-if="isFetchingList" class="message--loader">
-        <spinner />
+        <Spinner />
       </div>
       <div
         v-for="groupedMessage in groupedMessages"
         :key="groupedMessage.date"
         class="messages-wrap"
       >
-        <date-separator :date="groupedMessage.date" />
-        <chat-message
+        <DateSeparator :date="groupedMessage.date" />
+        <ChatMessage
           v-for="message in groupedMessage.messages"
           :key="message.id"
           :message="message"
         />
       </div>
-      <agent-typing-bubble v-if="showStatusIndicator" />
+      <AgentTypingBubble v-if="showStatusIndicator" />
     </div>
   </div>
 </template>

app/javascript/widget/components/FileBubble.vue

@@ -61,7 +61,7 @@ export default {
 <template>
   <div class="file flex flex-row items-center p-3 cursor-pointer">
     <div class="icon-wrap" :style="{ color: textColor }">
-      <fluent-icon icon="document" size="28" />
+      <FluentIcon icon="document" size="28" />
     </div>
     <div class="meta">
       <div class="title" :class="titleColor" :style="{ color: textColor }">

app/javascript/widget/components/FooterReplyTo.vue

@@ -35,7 +35,7 @@ export default {
       class="items-end flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800"
       @click="$emit('dismiss')"
     >
-      <fluent-icon icon="dismiss" size="12" />
+      <FluentIcon icon="dismiss" size="12" />
     </button>
   </div>
 </template>

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

@@ -235,8 +235,8 @@ export default {
         <h5 v-if="activeCountry.emoji" class="text-xl mb-0">
           {{ activeCountry.emoji }}
         </h5>
-        <fluent-icon v-else icon="globe" class="fluent-icon" size="20" />
-        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
+        <FluentIcon v-else icon="globe" class="fluent-icon" size="20" />
+        <FluentIcon icon="chevron-down" class="fluent-icon" size="12" />
       </div>
       <span
         v-if="activeDialCode"

app/javascript/widget/components/GroupedAvatars.vue

@@ -22,7 +22,7 @@ export default {
         index ? '-ml-4' : ''
       } inline-block rounded-full text-white shadow-solid`"
     >
-      <thumbnail
+      <Thumbnail
         size="36px"
         :username="user.name"
         :src="user.avatar"

app/javascript/widget/components/HeaderActions.vue

@@ -88,7 +88,7 @@ export default {
       :title="$t('END_CONVERSATION')"
       @click="resolveConversation"
     >
-      <fluent-icon
+      <FluentIcon
         icon="sign-out"
         size="22"
         :class="$dm('text-black-900', 'dark:text-slate-50')"
@@ -99,7 +99,7 @@ export default {
       class="button transparent compact new-window--button"
       @click="popoutWindow"
     >
-      <fluent-icon
+      <FluentIcon
         icon="open"
         size="22"
         :class="$dm('text-black-900', 'dark:text-slate-50')"
@@ -112,7 +112,7 @@ export default {
       }"
       @click="closeWindow"
     >
-      <fluent-icon
+      <FluentIcon
         icon="dismiss"
         size="24"
         :class="$dm('text-black-900', 'dark:text-slate-50')"

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

@@ -304,16 +304,16 @@ export default {
       }"
     />
 
-    <custom-button
+    <CustomButton
       class="mt-2 mb-5 font-medium"
       block
       :bg-color="widgetColor"
       :text-color="textColor"
       :disabled="isCreating"
     >
-      <spinner v-if="isCreating" class="p-0" />
+      <Spinner v-if="isCreating" class="p-0" />
       {{ $t('START_CONVERSATION') }}
-    </custom-button>
+    </CustomButton>
   </FormulateForm>
 </template>
 <style lang="scss" scoped>

app/javascript/widget/components/ReplyToChip.vue

@@ -52,7 +52,7 @@ export default {
     class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
     @click="navigateTo(replyTo.id)"
   >
-    <fluent-icon icon="arrow-reply" size="12" class="flex-shrink-0" />
+    <FluentIcon icon="arrow-reply" size="12" class="flex-shrink-0" />
     <div class="truncate max-w-[8rem]">
       {{ replyTo.content || replyToAttachment }}
     </div>

app/javascript/widget/components/TeamAvailability.vue

@@ -78,7 +78,7 @@ export default {
           {{ replyWaitMessage }}
         </div>
       </div>
-      <available-agents v-if="isOnline" :agents="availableAgents" />
+      <AvailableAgents v-if="isOnline" :agents="availableAgents" />
     </div>
     <button
       class="inline-flex text-sm font-medium rounded-md py-1 mt-2 px-2 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800"
@@ -92,7 +92,7 @@ export default {
             : $t('START_CONVERSATION')
         }}
       </span>
-      <fluent-icon icon="arrow-right" size="14" />
+      <FluentIcon icon="arrow-right" size="14" />
     </button>
   </div>
 </template>

app/javascript/widget/components/UnreadMessage.vue

@@ -89,7 +89,7 @@ export default {
       @click="onClickMessage"
     >
       <div v-if="showSender" class="row--agent-block">
-        <thumbnail
+        <Thumbnail
           :src="avatarUrl"
           size="20px"
           :username="agentName"

app/javascript/widget/components/UnreadMessageList.vue

@@ -58,13 +58,13 @@ export default {
     <div class="close-unread-wrap">
       <button class="button small close-unread-button" @click="closeFullView">
         <span class="flex items-center">
-          <fluent-icon class="mr-1" icon="dismiss" size="12" />
+          <FluentIcon class="mr-1" icon="dismiss" size="12" />
           {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
         </span>
       </button>
     </div>
     <div class="unread-messages">
-      <unread-message
+      <UnreadMessage
         v-for="(message, index) in messages"
         :key="message.id"
         :message-type="message.messageType"
@@ -91,7 +91,7 @@ export default {
             color: widgetColor,
           }"
         >
-          <fluent-icon class="mr-2" size="16" icon="arrow-right" />
+          <FluentIcon class="mr-2" size="16" icon="arrow-right" />
           {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
         </span>
       </button>

app/javascript/widget/components/UserMessage.vue

@@ -111,18 +111,18 @@ export default {
         :class="{ 'in-progress': isInProgress, 'is-failed': isFailed }"
       >
         <div v-if="hasReplyTo" class="flex justify-end mt-2 mb-1 text-xs">
-          <reply-to-chip :reply-to="replyTo" />
+          <ReplyToChip :reply-to="replyTo" />
         </div>
         <div class="flex justify-end gap-1">
           <div class="flex flex-col justify-end">
-            <message-reply-button
+            <MessageReplyButton
               v-if="!isInProgress && !isFailed"
               class="transition-opacity delay-75 opacity-0 group-hover:opacity-100 sm:opacity-0"
               @click="toggleReply"
             />
           </div>
-          <drag-wrapper direction="left" @dragged="toggleReply">
-            <user-message-bubble
+          <DragWrapper direction="left" @dragged="toggleReply">
+            <UserMessageBubble
               v-if="showTextBubble"
               :message="message.content"
               :status="message.status"
@@ -137,7 +137,7 @@ export default {
                 v-for="attachment in message.attachments"
                 :key="attachment.id"
               >
-                <image-bubble
+                <ImageBubble
                   v-if="attachment.file_type === 'image' && !hasImageError"
                   :url="attachment.data_url"
                   :thumb="attachment.data_url"
@@ -145,14 +145,14 @@ export default {
                   @error="onImageLoadError"
                 />
 
-                <video-bubble
+                <VideoBubble
                   v-if="attachment.file_type === 'video' && !hasVideoError"
                   :url="attachment.data_url"
                   :readable-time="readableTime"
                   @error="onVideoLoadError"
                 />
 
-                <file-bubble
+                <FileBubble
                   v-else
                   :url="attachment.data_url"
                   :is-in-progress="isInProgress"
@@ -161,7 +161,7 @@ export default {
                 />
               </div>
             </div>
-          </drag-wrapper>
+          </DragWrapper>
         </div>
         <div
           v-if="isFailed"
@@ -173,7 +173,7 @@ export default {
             class="inline-flex items-center justify-center ml-2"
             @click="retrySendMessage"
           >
-            <fluent-icon icon="arrow-clockwise" size="14" />
+            <FluentIcon icon="arrow-clockwise" size="14" />
           </button>
         </div>
       </div>

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

@@ -42,7 +42,7 @@ export default {
 </script>
 <template>
   <button :class="['menu-item', itemClass]" @click="action">
-    <fluent-icon
+    <FluentIcon
       v-if="icon"
       :icon="iconName"
       :size="iconSize"

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

@@ -117,14 +117,14 @@ export default {
           ...opacityClass,
         }"
       >
-        <chat-header-expanded
+        <ChatHeaderExpanded
           v-if="!isHeaderCollapsed"
           :intro-heading="channelConfig.welcomeTitle"
           :intro-body="channelConfig.welcomeTagline"
           :avatar-url="channelConfig.avatarUrl"
           :show-popout-button="appConfig.showPopoutButton"
         />
-        <chat-header
+        <ChatHeader
           v-if="isHeaderCollapsed"
           :title="channelConfig.websiteName"
           :avatar-url="channelConfig.avatarUrl"
@@ -133,10 +133,10 @@ export default {
           :show-back-button="showBackButton"
         />
       </div>
-      <banner />
+      <Banner />
       <router-view />
 
-      <branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
+      <Branding v-if="!isOnArticleViewer" :disable-branding="disableBranding" />
     </div>
   </div>
 </template>

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

@@ -26,7 +26,7 @@ export default {
     <div v-for="item in items" :key="item.link" class="article-item">
       <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
         <span class="title flex items-center text-black-900 font-medium">
-          <fluent-icon
+          <FluentIcon
             icon="link"
             class="mr-1"
             :class="$dm('text-black-900', 'dark:text-slate-50')"

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

@@ -108,8 +108,8 @@ export default {
           color: textColor,
         }"
       >
-        <fluent-icon v-if="!isUpdating" icon="chevron-right" />
-        <spinner v-else class="mx-2" />
+        <FluentIcon v-if="!isUpdating" icon="chevron-right" />
+        <Spinner v-else class="mx-2" />
       </button>
     </form>
   </div>

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

@@ -65,7 +65,7 @@ export default {
       }"
       @click="joinTheCall"
     >
-      <fluent-icon icon="video-add" class="mr-2" />
+      <FluentIcon icon="video-add" class="mr-2" />
       {{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
     </button>
     <div v-if="dyteAuthToken" class="video-call--container">

app/javascript/widget/views/ArticleViewer.vue

@@ -17,6 +17,6 @@ export default {
 
 <template>
   <div class="bg-white h-full">
-    <iframe-loader :url="link" />
+    <IframeLoader :url="link" />
   </div>
 </template>

app/javascript/widget/views/Campaigns.vue

@@ -36,5 +36,5 @@ export default {
 </script>
 
 <template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
 </template>

app/javascript/widget/views/Home.vue

@@ -106,7 +106,7 @@ export default {
     :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
   >
     <div class="px-4 pt-4 w-full">
-      <team-availability
+      <TeamAvailability
         :available-agents="availableAgents"
         :has-conversation="!!conversationSize"
         :unread-count="unreadMessageCount"
@@ -115,7 +115,7 @@ export default {
     </div>
     <div v-if="showArticles" class="px-4 py-2 w-full">
       <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
-        <article-hero
+        <ArticleHero
           v-if="
             !articleUiFlags.isFetching &&
             !articleUiFlags.isError &&
@@ -129,7 +129,7 @@ export default {
     </div>
     <div v-if="articleUiFlags.isFetching" class="px-4 py-2 w-full">
       <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
-        <article-card-skeleton-loader />
+        <ArticleCardSkeletonLoader />
       </div>
     </div>
   </div>

app/javascript/widget/views/Messages.vue

@@ -21,8 +21,8 @@ export default {
     class="flex flex-col flex-1 overflow-hidden rounded-b-lg bg-slate-25 dark:bg-slate-800"
   >
     <div class="flex flex-1 overflow-auto">
-      <conversation-wrap :grouped-messages="groupedMessages" />
+      <ConversationWrap :grouped-messages="groupedMessages" />
     </div>
-    <chat-footer class="px-5" />
+    <ChatFooter class="px-5" />
   </div>
 </template>

app/javascript/widget/views/PreChatForm.vue

@@ -59,6 +59,6 @@ export default {
 </script>
 <template>
   <div class="flex flex-1 overflow-auto">
-    <pre-chat-form :options="preChatFormOptions" @submit="onSubmit" />
+    <PreChatForm :options="preChatFormOptions" @submit="onSubmit" />
   </div>
 </template>

app/javascript/widget/views/UnreadMessages.vue

@@ -24,5 +24,5 @@ export default {
 </script>
 
 <template>
-  <unread-message-list :messages="messages" @close="closeFullView" />
+  <UnreadMessageList :messages="messages" @close="closeFullView" />
 </template>