Give the chat plus button a function and show hide the user search

webapp/components/Chat/Chat.vue

@@ -19,12 +19,13 @@
         show-audio="false"
         :styles="JSON.stringify(computedChatStyle)"
         :show-footer="true"
-        @send-message="sendMessage($event.detail[0])"
-        @fetch-messages="fetchMessages($event.detail[0])"
-        @fetch-more-rooms="fetchRooms"
         :responsive-breakpoint="responsiveBreakpoint"
         :single-room="singleRoom"
         show-reaction-emojis="false"
+        @send-message="sendMessage($event.detail[0])"
+        @fetch-messages="fetchMessages($event.detail[0])"
+        @fetch-more-rooms="fetchRooms"
+        @add-room="addRoom"
         @show-demo-options="showDemoOptions = $event"
       >
         <div slot="menu-icon" @click.prevent.stop="$emit('close-single-room', true)">
@@ -361,6 +362,10 @@ export default {
       if (!fullname) return
       return fullname.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
     },
+
+    addRoom() {
+      this.$emit('open-user-search')
+    }
   },
 }
 </script>

webapp/components/Group/AddGroupMember.vue

@@ -49,6 +49,7 @@
     </ds-space>
   </div>
 </template>
+
 <script>
 import { changeGroupMemberRoleMutation } from '~/graphql/groups.js'
 import { searchUsers } from '~/graphql/Search.js'

webapp/pages/chat.vue

@@ -1,16 +1,29 @@
 <template>
   <div>
     <ds-heading tag="h1">{{ $t('chat.page.headline') }}</ds-heading>
-    <chat :roomId="getShowChat.showChat ? getShowChat.roomID : null" />
+    <add-group-member
+      v-if="showUserSearch"
+      :groupId="0"
+      :groupMembers="[]"
+      @loadGroupMembers="null"
+    />
+    <ds-space margin-bottom="small" />
+    <chat :roomId="getShowChat.showChat ? getShowChat.roomID : null" @open-user-search="showUserSearch = !showUserSearch" />
   </div>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
+import AddGroupMember from '~/components/Group/AddGroupMember'
 import Chat from '../components/Chat/Chat.vue'
 
 export default {
-  components: { Chat },
+  components: { AddGroupMember, Chat },
+  data() {
+    return {
+      showUserSearch: false,
+    }
+  },
   mounted() {
     this.showChat({ showChat: false, roomID: null })
   },