feat: Conversation transcript in widget (#2549)

app/javascript/widget/views/Home.vue

@@ -34,15 +34,7 @@
         />
       </transition>
     </div>
-    <div v-if="showAttachmentError" class="banner">
-      <span>
-        {{
-          $t('FILE_SIZE_LIMIT', {
-            MAXIMUM_FILE_UPLOAD_SIZE: fileUploadSizeLimit,
-          })
-        }}
-      </span>
-    </div>
+    <banner />
     <div class="flex flex-1 overflow-auto">
       <conversation-wrap
         v-if="currentView === 'messageView'"
@@ -85,6 +77,7 @@ import ConversationWrap from 'widget/components/ConversationWrap.vue';
 import configMixin from '../mixins/configMixin';
 import TeamAvailability from 'widget/components/TeamAvailability';
 import Spinner from 'shared/components/Spinner.vue';
+import Banner from 'widget/components/Banner.vue';
 import { mapGetters } from 'vuex';
 import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -100,6 +93,7 @@ export default {
     PreChatForm,
     Spinner,
     TeamAvailability,
+    Banner,
   },
   mixins: [configMixin],
   props: {
@@ -115,7 +109,6 @@ export default {
   data() {
     return {
       isOnCollapsedView: false,
-      showAttachmentError: false,
       isOnNewConversation: false,
     };
   },
@@ -164,12 +157,6 @@ export default {
     },
   },
   mounted() {
-    bus.$on(BUS_EVENTS.ATTACHMENT_SIZE_CHECK_ERROR, () => {
-      this.showAttachmentError = true;
-      setTimeout(() => {
-        this.showAttachmentError = false;
-      }, 3000);
-    });
     bus.$on(BUS_EVENTS.START_NEW_CONVERSATION, () => {
       this.isOnCollapsedView = true;
       this.isOnNewConversation = true;
@@ -242,13 +229,5 @@ export default {
   .input-wrap {
     padding: 0 $space-normal;
   }
-  .banner {
-    background: $color-error;
-    color: $color-white;
-    font-size: $font-size-default;
-    font-weight: $font-weight-bold;
-    padding: $space-slab;
-    text-align: center;
-  }
 }
 </style>