chore: Update self-closing tag eslint config (#4826)

* chore: Fix self-closing tag issues

* Fix merge conflicts

Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>

app/javascript/widget/components/AgentMessageBubble.vue

@@ -11,7 +11,7 @@
         v-dompurify-html="formatMessage(message, false)"
         class="message-content"
         :class="$dm('text-black-900', 'dark:text-slate-50')"
-      ></div>
+      />
       <email-input
         v-if="isTemplateEmail"
         :message-id="messageId"
@@ -24,8 +24,7 @@
         :options="messageContentAttributes.items"
         :hide-fields="!!messageContentAttributes.submitted_values"
         @click="onOptionSelect"
-      >
-      </chat-options>
+      />
     </div>
     <chat-form
       v-if="isForm && !messageContentAttributes.submitted_values"
@@ -33,8 +32,7 @@
       :button-label="messageContentAttributes.button_label"
       :submitted-values="messageContentAttributes.submitted_values"
       @submit="onFormSubmit"
-    >
-    </chat-form>
+    />
     <div v-if="isCards">
       <chat-card
         v-for="item in messageContentAttributes.items"
@@ -43,11 +41,10 @@
         :title="item.title"
         :description="item.description"
         :actions="item.actions"
-      >
-      </chat-card>
+      />
     </div>
     <div v-if="isArticle">
-      <chat-article :items="messageContentAttributes.items"></chat-article>
+      <chat-article :items="messageContentAttributes.items" />
     </div>
     <customer-satisfaction
       v-if="isCSAT"

app/javascript/widget/components/AgentTypingBubble.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="agent-message-wrap">
     <div class="agent-message">
-      <div class="avatar-wrap"></div>
+      <div class="avatar-wrap" />
       <div class="message-wrap">
         <div
           class="typing-bubble chat-bubble agent"

app/javascript/widget/components/ConversationWrap.vue

@@ -2,14 +2,14 @@
   <div class="conversation--container">
     <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
       <div v-if="isFetchingList" class="message--loader">
-        <spinner></spinner>
+        <spinner />
       </div>
       <div
         v-for="groupedMessage in groupedMessages"
         :key="groupedMessage.date"
         class="messages-wrap"
       >
-        <date-separator :date="groupedMessage.date"></date-separator>
+        <date-separator :date="groupedMessage.date" />
         <chat-message
           v-for="message in groupedMessage.messages"
           :key="message.id"

app/javascript/widget/components/UnreadMessage.vue

@@ -18,7 +18,7 @@
       <div
         v-dompurify-html="formatMessage(message, false)"
         class="message-content"
-      ></div>
+      />
     </button>
   </div>
 </template>

app/javascript/widget/components/UserAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="user-avatar" :class="size" :style="getBgImage"></div>
+  <div class="user-avatar" :class="size" :style="getBgImage" />
 </template>
 <script>
 /**

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

@@ -1,7 +1,7 @@
 <template>
   <div class="relative">
     <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
-      <slot name="button"></slot>
+      <slot name="button" />
     </button>
 
     <!-- to close when clicked on space around it-->
@@ -10,7 +10,7 @@
       tabindex="-1"
       class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
       @click="toggleMenu"
-    ></button>
+    />
 
     <!--dropdown menu-->
     <transition
@@ -26,7 +26,7 @@
         class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
         :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
       >
-        <slot name="content"></slot>
+        <slot name="content" />
       </div>
     </transition>
   </div>