single chat modul in default template

webapp/components/Chat/Chat.vue

@@ -3,22 +3,28 @@
     <client-only>
       <internal-page :pageParams="pageParams" />
       <vue-advanced-chat
+        :theme="theme"
         :current-user-id="currentUserId"
+        :room-id="null"
         :template-actions="JSON.stringify(templatesText)"
-        :text-messages="JSON.stringify(textMessages)"
         :menu-actions="JSON.stringify(menuActions)"
-        :rooms="JSON.stringify(rooms)"
+        :text-messages="JSON.stringify(textMessages)"
         :messages="JSON.stringify(messages)"
+        :messages-loaded="messagesLoaded"
+       
+        :rooms="JSON.stringify(rooms)"
+        
         :room-actions="JSON.stringify(roomActions)"
         :rooms-loaded="true"
         show-files="false"
         show-audio="false"
         :show-footer="true"
-        :messages-loaded="messagesLoaded"
+        
         @send-message="sendMessage($event.detail[0])"
         @fetch-messages="fetchMessages($event.detail[0])"
-        :theme="theme"
-        :is-device="isDevice"
+        
+        :responsive-breakpoint="responsiveBreakpoint"
+        :single-room="singleRoom"
         @show-demo-options="showDemoOptions = $event"
       />
     </client-only>
@@ -35,6 +41,10 @@ export default {
     theme: {
       type: String,
     },
+    singleRoom: {
+      type: Boolean,
+      default: false,
+    }
   },
   data() {
     return {
@@ -97,30 +107,30 @@ export default {
         { name: 'deleteRoom', title: 'Delete Room' },
       ],
       rooms: [
-        // {
-        //   roomId: '1',
-        //   roomName: 'John Snow',
-        //   avatar: 'https://66.media.tumblr.com/avatar_c6a8eae4303e_512.pnj',
-        //   users: [
-        //     { _id: '1234', username: 'John Doe' },
-        //     { _id: '4321', username: 'John Snow' },
-        //   ],
-        // },
-        // {
-        //   roomId: '2',
-        //   roomName: 'Max J. Mustermann',
-        //   avatar:
-        //     'https://64.media.tumblr.com/8889b6e26370f4e3837584c1c59721a6/f4f76ed6b0249d08-4b/s1280x1920/810e9e5fa724366d26c10c0fa22ba97dad8778d1.pnj',
-        //   users: [
-        //     { _id: '1234', username: 'Johnx Doe' },
-        //     { _id: '43210', username: 'Max J. Mustermann' },
-        //   ],
-        // },
+        {
+          roomId: '1',
+          roomName: 'John Snow',
+          avatar: 'https://66.media.tumblr.com/avatar_c6a8eae4303e_512.pnj',
+          users: [
+            { _id: '1234', username: 'John Doe' },
+            { _id: '4321', username: 'John Snow' },
+          ],
+        },
+        {
+          roomId: '2',
+          roomName: 'Max J. Mustermann',
+          avatar:
+            'https://64.media.tumblr.com/8889b6e26370f4e3837584c1c59721a6/f4f76ed6b0249d08-4b/s1280x1920/810e9e5fa724366d26c10c0fa22ba97dad8778d1.pnj',
+          users: [
+            { _id: '1234', username: 'Johnx Doe' },
+            { _id: '43210', username: 'Max J. Mustermann' },
+          ],
+        },
       ],
       messages: [],
-      messagesLoaded: false,
+      messagesLoaded: true,
       showDemoOptions: true,
-      isDevice: true,
+      responsiveBreakpoint: 600,
     }
   },
 
@@ -207,26 +217,26 @@ export default {
       }, 2000)
     },
   },
-  apollo: {
-    Rooms: {
-      query() {
-        return roomQuery()
-      },
-      update({ Room }) {
-        console.log('Rooms', Room)
-        if (!Room) {
-          this.rooms = []
-          return
-        }
-        this.rooms = Room
-      },
-      error(error) {
-        this.rooms = []
-        this.$toast.error(error.message)
-      },
-      fetchPolicy: 'cache-and-network',
-    },
-  },
+//   apollo: {
+//     Rooms: {
+//       query() {
+//         return roomQuery()
+//       },
+//       update({ Room }) {
+//         console.log('Rooms', Room)
+//         if (!Room) {
+//           this.rooms = []
+//           return
+//         }
+//         this.rooms = Room
+//       },
+//       error(error) {
+//         this.rooms = []
+//         this.$toast.error(error.message)
+//       },
+//       fetchPolicy: 'cache-and-network',
+//     },
+//   },
 }
 </script>
 <style lang="scss">

webapp/layouts/default.vue

@@ -13,6 +13,9 @@
     <client-only>
       <modal />
     </client-only>
+    <client-only>
+      <div v-if="true" class="chat-modul" ><chat-modul :singleRoom="true"/></div>
+    </client-only>
   </div>
 </template>
 
@@ -22,12 +25,14 @@ import mobile from '~/mixins/mobile'
 import HeaderMenu from '~/components/HeaderMenu/HeaderMenu'
 import Modal from '~/components/Modal'
 import PageFooter from '~/components/PageFooter/PageFooter'
+import ChatModul from '~/components/Chat/Chat.vue'
 
 export default {
   components: {
     HeaderMenu,
     Modal,
     PageFooter,
+    ChatModul,
   },
   mixins: [seo, mobile()],
 }
@@ -41,4 +46,14 @@ export default {
   padding-top: 6rem;
   padding-bottom: 5rem;
 }
+
+.chat-modul {
+  background-color: red;
+  height: 594px;
+  width: 355px;
+  position: absolute;
+  bottom: 45px;
+  right: 0;
+  z-index: 10000;
+}
 </style>

webapp/pages/profile/_id/_slug.vue

@@ -79,6 +79,14 @@
               @optimistic="optimisticFollow"
               @update="updateFollow"
             />
+            <base-button
+             
+              v-tooltip="{
+                content: $t('notifications.headerMenuButton.chat'),
+                placement: 'bottom-start',
+              }"
+            ><img src="/img/empty/chat-bubble.svg" height="20"/>
+            </base-button>
           </div>
           <template v-if="user.about">
             <hr />