Feature: As an end-user, I should be able to see the list of agents in the widget. (#461)

Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>

app/javascript/widget/views/Home.vue

@@ -4,6 +4,7 @@
       <ChatHeaderExpanded v-if="isHeaderExpanded" />
       <ChatHeader v-else :title="getHeaderName" />
     </div>
+    <AvailableAgents v-if="showAvailableAgents" :agents="availableAgents" />
     <ConversationWrap :grouped-messages="groupedMessages" />
     <div class="footer-wrap">
       <div class="input-wrap">
@@ -22,6 +23,7 @@ import ChatFooter from 'widget/components/ChatFooter.vue';
 import ChatHeaderExpanded from 'widget/components/ChatHeaderExpanded.vue';
 import ChatHeader from 'widget/components/ChatHeader.vue';
 import ConversationWrap from 'widget/components/ConversationWrap.vue';
+import AvailableAgents from 'widget/components/AvailableAgents.vue';
 
 export default {
   name: 'Home',
@@ -31,19 +33,14 @@ export default {
     ConversationWrap,
     ChatHeader,
     Branding,
-  },
-  methods: {
-    ...mapActions('conversation', ['sendMessage']),
-    handleSendMessage(content) {
-      this.sendMessage({
-        content,
-      });
-    },
+    AvailableAgents,
   },
   computed: {
     ...mapGetters({
       groupedMessages: 'conversation/getGroupedConversation',
       conversationSize: 'conversation/getConversationSize',
+      availableAgents: 'agent/availableAgents',
+      hasFetched: 'agent/uiFlags/hasFetched',
     }),
     isHeaderExpanded() {
       return this.conversationSize === 0;
@@ -51,6 +48,18 @@ export default {
     getHeaderName() {
       return window.chatwootWebChannel.website_name;
     },
+    showAvailableAgents() {
+      return this.availableAgents.length > 0;
+    },
+  },
+
+  methods: {
+    ...mapActions('conversation', ['sendMessage']),
+    handleSendMessage(content) {
+      this.sendMessage({
+        content,
+      });
+    },
   },
 };
 </script>
@@ -68,6 +77,13 @@ export default {
 
   .header-wrap {
     flex-shrink: 0;
+    border-radius: $space-normal;
+    background: white;
+    @include shadow-large;
+
+    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+      border-radius: 0;
+    }
   }
 
   .footer-wrap {
@@ -94,7 +110,7 @@ export default {
   }
 
   .input-wrap {
-    padding: 0 $space-medium;
+    padding: 0 $space-normal;
   }
 }
 </style>