chore: Refactor widget (#5621)

app/javascript/widget/components/AgentMessage.vue

@@ -104,8 +104,7 @@ export default {
       ) {
         return false;
       }
-      if (!this.message.content) return false;
-      return true;
+      return this.message.content;
     },
     readableTime() {
       const { created_at: createdAt = '' } = this.message;

app/javascript/widget/components/ChatAttachment.vue

@@ -54,9 +54,9 @@ export default {
     },
     async onFileUpload(file) {
       if (this.globalConfig.directUploadsEnabled) {
-        this.onDirectFileUpload(file);
+        await this.onDirectFileUpload(file);
       } else {
-        this.onIndirectFileUpload(file);
+        await this.onIndirectFileUpload(file);
       }
     },
     async onDirectFileUpload(file) {

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -7,7 +7,12 @@
       class="flex items-start"
       :class="[avatarUrl ? 'justify-between' : 'justify-end']"
     >
-      <img v-if="avatarUrl" class="h-12 rounded-full" :src="avatarUrl" />
+      <img
+        v-if="avatarUrl"
+        class="h-12 rounded-full"
+        :src="avatarUrl"
+        alt="Avatar"
+      />
       <header-actions :show-popout-button="showPopoutButton" />
     </div>
     <h2

app/javascript/widget/components/ChatInputWrap.vue

@@ -209,9 +209,7 @@ export default {
   min-height: $space-large;
   max-height: 2.4 * $space-mega;
   resize: none;
-  padding: 0;
-  padding-top: $space-smaller;
-  padding-bottom: $space-smaller;
+  padding: $space-smaller 0;
   margin-top: $space-small;
   margin-bottom: $space-small;
 }

app/javascript/widget/components/FileBubble.vue

@@ -49,8 +49,7 @@ export default {
         : decodeURI(this.fileName);
     },
     fileName() {
-      const filename = this.url.substring(this.url.lastIndexOf('/') + 1);
-      return filename;
+      return this.url.substring(this.url.lastIndexOf('/') + 1);
     },
   },
   methods: {

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

@@ -118,13 +118,10 @@ export default {
       const isUserEmailAvailable = !!this.currentUser.email;
       const isUserPhoneNumberAvailable = !!this.currentUser.phone_number;
       return this.preChatFields.filter(field => {
-        if (
+        return !(
           (isUserEmailAvailable && field.name === 'emailAddress') ||
           (isUserPhoneNumberAvailable && field.name === 'phoneNumber')
-        ) {
-          return false;
-        }
-        return true;
+        );
       });
     },
     enabledPreChatFields() {

app/javascript/widget/components/TeamAvailability.vue

@@ -13,7 +13,7 @@
           }}
         </div>
         <div class="text-xs leading-4 mt-1">
-          {{ replyWaitMeessage }}
+          {{ replyWaitMessage }}
         </div>
       </div>
       <available-agents v-if="isOnline" :agents="availableAgents" />
@@ -75,7 +75,7 @@ export default {
       }
       return anyAgentOnline;
     },
-    replyWaitMeessage() {
+    replyWaitMessage() {
       const { workingHoursEnabled } = this.channelConfig;
 
       if (this.isOnline) {

app/javascript/widget/components/UnreadMessageList.vue

@@ -107,13 +107,12 @@ export default {
   .clear-button {
     background: transparent;
     color: $color-woot;
-    padding: 0;
     border: 0;
     font-weight: $font-weight-bold;
     font-size: $font-size-medium;
     transition: all 0.3s var(--ease-in-cubic);
     margin-left: $space-smaller;
-    padding-right: $space-one;
+    padding: 0 $space-one 0 0;
 
     &:hover {
       transform: translateX($space-smaller);