Merge branch 'master' into chat-last-messages

.github/file-filters.yml

@@ -1,4 +1,5 @@
 backend: &backend
+  - '.github/workflows/test-backend.yml'
   - 'backend/**/*'
   - 'neo4j/**/*'
 
@@ -6,4 +7,5 @@ docker: &docker
   - 'docker-compose.*'
 
 webapp: &webapp
+  - '.github/workflows/test-webapp.yml'
   - 'webapp/**/*'

.github/workflows/test-backend.yml

@@ -10,10 +10,11 @@ jobs:
     outputs:
       backend: ${{ steps.changes.outputs.backend }}
       docker: ${{ steps.changes.outputs.docker }}
+      pr-number: ${{ steps.pr.outputs.number }}
     steps:
       - uses: actions/checkout@v3.3.0
 
-      - name: Check for frontend file changes
+      - name: Check for backend file changes
         uses: dorny/paths-filter@v2.11.1
         id: changes
         with:
@@ -21,6 +22,10 @@ jobs:
           filters: .github/file-filters.yml
           list-files: shell
 
+      - name: Get pr number
+        id: pr
+        uses: 8BitJonny/gh-get-current-pr@2.2.0
+
   build_test_neo4j:
     name: Docker Build Test - Neo4J
     if: needs.files-changed.outputs.backend == 'true' || needs.files-changed.outputs.docker == 'true'
@@ -34,12 +39,13 @@ jobs:
         run: |
           docker build --target community -t "ocelotsocialnetwork/neo4j-community:test" neo4j/
           docker save "ocelotsocialnetwork/neo4j-community:test" > /tmp/neo4j.tar
-
+      
-      - name: Upload Artifact
+      - name: Cache docker images
-        uses: actions/upload-artifact@v3
+        id: cache-neo4j
+        uses: actions/cache/save@v3.3.1
         with:
-          name: docker-neo4j-image
           path: /tmp/neo4j.tar
+          key: backend-neo4j-cache-pr${{ needs.files-changed.outputs.pr-number }}
 
   build_test_backend:
     name: Docker Build Test - Backend
@@ -54,12 +60,13 @@ jobs:
         run: |
           docker build --target test -t "ocelotsocialnetwork/backend:test" backend/
           docker save "ocelotsocialnetwork/backend:test" > /tmp/backend.tar
-
+      
-      - name: Upload Artifact
+      - name: Cache docker images
-        uses: actions/upload-artifact@v3
+        id: cache-backend
+        uses: actions/cache/save@v3.3.1
         with:
-          name: docker-backend-test
           path: /tmp/backend.tar
+          key: backend-cache-pr${{ needs.files-changed.outputs.pr-number }}
 
   lint_backend:
     name: Lint Backend
@@ -84,28 +91,29 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Download Docker Image (Neo4J)
+      - name: Restore Neo4J cache
-        uses: actions/download-artifact@v3
+        uses: actions/cache/restore@v3.3.1
         with:
-          name: docker-neo4j-image
+          path: /tmp/neo4j.tar
-          path: /tmp
+          key: backend-neo4j-cache-pr${{ needs.files-changed.outputs.pr-number }}
+          fail-on-cache-miss: true
 
-      - name: Load Docker Image
+      - name: Restore Backend cache
-        run: docker load < /tmp/neo4j.tar
+        uses: actions/cache/restore@v3.3.1
-
-      - name: Download Docker Image (Backend)
-        uses: actions/download-artifact@v3
         with:
-          name: docker-backend-test
+          path: /tmp/backend.tar
-          path: /tmp
+          key: backend-cache-pr${{ needs.files-changed.outputs.pr-number }}
+          fail-on-cache-miss: true
 
-      - name: Load Docker Image
+      - name: Load Docker Images
-        run: docker load < /tmp/backend.tar
+        run: |
+          docker load < /tmp/neo4j.tar
+          docker load < /tmp/backend.tar
 
-      - name: backend | copy env files webapp
+      - name: backend | copy env files
-        run: cp webapp/.env.template webapp/.env
+        run: |
-      - name: backend | copy env files backend
+          cp webapp/.env.template webapp/.env
-        run: cp backend/.env.template backend/.env
+          cp backend/.env.template backend/.env
 
       - name: backend | docker-compose
         run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps neo4j backend
@@ -118,3 +126,20 @@ jobs:
 
       - name: backend | Unit test incl. coverage check
         run: docker-compose exec -T backend yarn test
+
+  cleanup:
+    name: Cleanup
+    if: always()
+    needs: [files-changed, unit_test_backend]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Delete cache
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh extension install actions/gh-actions-cache
+          set +e
+          KEY="backend-neo4j-cache-pr${{ needs.files-changed.outputs.pr-number }}"
+          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm
+          KEY="backend-cache-pr${{ needs.files-changed.outputs.pr-number }}"
+          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm

.github/workflows/test-e2e.yml

@@ -113,5 +113,6 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           gh extension install actions/gh-actions-cache
+          set +e
           KEY="e2e-preparation-cache-pr${{ needs.docker_preparation.outputs.pr-number }}"
           gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm

.github/workflows/test-webapp.yml

@@ -9,6 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       docker: ${{ steps.changes.outputs.docker }}
+      pr-number: ${{ steps.pr.outputs.number }}
       webapp: ${{ steps.changes.outputs.webapp }}
     steps:
       - uses: actions/checkout@v3.3.0
@@ -21,6 +22,10 @@ jobs:
           filters: .github/file-filters.yml
           list-files: shell
 
+      - name: Get pr number
+        id: pr
+        uses: 8BitJonny/gh-get-current-pr@2.2.0
+
   prepare:
     name: Prepare
     if: needs.files-changed.outputs.webapp == 'true'
@@ -34,7 +39,7 @@ jobs:
         run: |
           scripts/translations/sort.sh
           scripts/translations/missing-keys.sh
-          
+
   build_test_webapp:
     name: Docker Build Test - Webapp
     if: needs.files-changed.outputs.docker == 'true' || needs.files-changed.outputs.webapp == 'true'
@@ -44,16 +49,16 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: webapp | Build 'test' image
+      - name: Webapp | Build 'test' image
         run: |
           docker build --target test -t "ocelotsocialnetwork/webapp:test" webapp/
           docker save "ocelotsocialnetwork/webapp:test" > /tmp/webapp.tar
 
-      - name: Upload Artifact
+      - name: Cache docker image
-        uses: actions/upload-artifact@v3
+        uses: actions/cache/save@v3.3.1
         with:
-          name: docker-webapp-test
           path: /tmp/webapp.tar
+          key: webapp-cache-pr${{ needs.files-changed.outputs.pr-number }}
 
   lint_webapp:
     name: Lint Webapp
@@ -78,20 +83,19 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Download Docker Image (Webapp)
+      - name: Restore webapp cache
-        uses: actions/download-artifact@v3
+        uses: actions/cache/restore@v3.3.1
         with:
-          name: docker-webapp-test
+          path: /tmp/webapp.tar
-          path: /tmp
+          key: webapp-cache-pr${{ needs.files-changed.outputs.pr-number }}
 
       - name: Load Docker Image
         run: docker load < /tmp/webapp.tar
 
-      - name: backend | copy env files webapp
+      - name: Copy env files
-        run: cp webapp/.env.template webapp/.env
+        run: |
-
+          cp webapp/.env.template webapp/.env
-      - name: backend | copy env files backend
+          cp backend/.env.template backend/.env
-        run: cp backend/.env.template backend/.env
 
       - name: backend | docker-compose
         run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up --detach --no-deps webapp
@@ -99,3 +103,18 @@ jobs:
       - name: webapp | Unit tests incl. coverage check
         run: docker-compose exec -T webapp yarn test
 
+  cleanup:
+    name: Cleanup
+    if: always()
+    needs: [files-changed, unit_test_webapp]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Delete cache
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh extension install actions/gh-actions-cache
+          set +e
+          KEY="webapp-cache-pr${{ needs.files-changed.outputs.pr-number }}"
+          gh actions-cache delete $KEY -R Ocelot-Social-Community/Ocelot-Social --confirm
+

backend/src/graphql/rooms.ts

@@ -26,7 +26,7 @@ export const createRoomMutation = () => {
 export const roomQuery = () => {
   return gql`
     query Room($first: Int, $offset: Int, $id: ID) {
-      Room(first: $first, offset: $offset, id: $id, orderBy: createdAt_desc) {
+      Room(first: $first, offset: $offset, id: $id, orderBy: lastMessageAt_desc) {
         id
         roomId
         roomName

backend/src/middleware/chatMiddleware.ts

@@ -54,4 +54,7 @@ export default {
   Mutation: {
     CreateRoom: roomProperties,
   },
+  Subscription: {
+    chatMessageAdded: messageProperties,
+  },
 }

backend/src/schema/resolvers/messages.spec.ts

@@ -117,7 +117,7 @@ describe('Message', () => {
         })
 
         describe('user chats in room', () => {
-          it('returns the message and publishes subscription', async () => {
+          it('returns the message and publishes subscriptions', async () => {
             await expect(
               mutate({
                 mutation: createMessageMutation(),
@@ -146,6 +146,20 @@ describe('Message', () => {
               roomCountUpdated: '1',
               userId: 'other-chatting-user',
             })
+            expect(pubsubSpy).toBeCalledWith('CHAT_MESSAGE_ADDED', {
+              chatMessageAdded: expect.objectContaining({
+                id: expect.any(String),
+                content: 'Some nice message to other chatting user',
+                senderId: 'chatting-user',
+                username: 'Chatting User',
+                avatar: expect.any(String),
+                date: expect.any(String),
+                saved: true,
+                distributed: false,
+                seen: false,
+              }),
+              userId: 'other-chatting-user',
+            })
           })
 
           describe('room is updated as well', () => {

backend/src/schema/resolvers/messages.ts

@@ -1,7 +1,9 @@
 import { neo4jgraphql } from 'neo4j-graphql-js'
 import Resolver from './helpers/Resolver'
+
 import { getUnreadRoomsCount } from './rooms'
-import { pubsub, ROOM_COUNT_UPDATED } from '../../server'
+import { pubsub, ROOM_COUNT_UPDATED, CHAT_MESSAGE_ADDED } from '../../server'
+import { withFilter } from 'graphql-subscriptions'
 
 const setMessagesAsDistributed = async (undistributedMessagesIds, session) => {
   return session.writeTransaction(async (transaction) => {
@@ -19,6 +21,16 @@ const setMessagesAsDistributed = async (undistributedMessagesIds, session) => {
 }
 
 export default {
+  Subscription: {
+    chatMessageAdded: {
+      subscribe: withFilter(
+        () => pubsub.asyncIterator(CHAT_MESSAGE_ADDED),
+        (payload, variables) => {
+          return payload.userId === variables.userId
+        },
+      ),
+    },
+  },
   Query: {
     Message: async (object, params, context, resolveInfo) => {
       const { roomId } = params
@@ -102,10 +114,14 @@ export default {
           const roomCountUpdated = await getUnreadRoomsCount(message.recipientId, session)
 
           // send subscriptions
-          await pubsub.publish(ROOM_COUNT_UPDATED, {
+          void pubsub.publish(ROOM_COUNT_UPDATED, {
             roomCountUpdated,
             userId: message.recipientId,
           })
+          void pubsub.publish(CHAT_MESSAGE_ADDED, {
+            chatMessageAdded: message,
+            userId: message.recipientId,
+          })
         }
 
         return message

backend/src/schema/resolvers/rooms.spec.ts

@@ -423,125 +423,147 @@ describe('Room', () => {
     })
 
     it('returns the rooms paginated', async () => {
-      expect(await query({ query: roomQuery(), variables: { first: 3, offset: 0 } })).toMatchObject(
+      await expect(
-        {
+        query({ query: roomQuery(), variables: { first: 3, offset: 0 } }),
-          errors: undefined,
+      ).resolves.toMatchObject({
-          data: {
+        errors: undefined,
-            Room: [
+        data: {
-              {
+          Room: expect.arrayContaining([
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Third Chatting User',
+              lastMessageAt: null,
+              unreadCount: 0,
+              lastMessage: null,
+              users: expect.arrayContaining([
+                expect.objectContaining({
+                  _id: 'chatting-user',
+                  id: 'chatting-user',
+                  name: 'Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+                expect.objectContaining({
+                  _id: 'third-chatting-user',
+                  id: 'third-chatting-user',
+                  name: 'Third Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+              ]),
+            }),
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Second Chatting User',
+              lastMessageAt: null,
+              unreadCount: 0,
+              lastMessage: null,
+              users: expect.arrayContaining([
+                expect.objectContaining({
+                  _id: 'chatting-user',
+                  id: 'chatting-user',
+                  name: 'Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+                expect.objectContaining({
+                  _id: 'second-chatting-user',
+                  id: 'second-chatting-user',
+                  name: 'Second Chatting User',
+                  avatar: {
+                    url: expect.any(String),
+                  },
+                }),
+              ]),
+            }),
+            expect.objectContaining({
+              id: expect.any(String),
+              roomId: expect.any(String),
+              roomName: 'Other Chatting User',
+              lastMessageAt: expect.any(String),
+              unreadCount: 0,
+              lastMessage: {
+                _id: expect.any(String),
                 id: expect.any(String),
-                roomId: expect.any(String),
+                content: '2nd message to other chatting user',
-                roomName: 'Third Chatting User',
+                senderId: 'chatting-user',
-                users: expect.arrayContaining([
+                username: 'Chatting User',
-                  {
+                avatar: expect.any(String),
-                    _id: 'chatting-user',
+                date: expect.any(String),
-                    id: 'chatting-user',
+                saved: true,
-                    name: 'Chatting User',
+                distributed: false,
-                    avatar: {
+                seen: false,
-                      url: expect.any(String),
-                    },
-                  },
-                  {
-                    _id: 'third-chatting-user',
-                    id: 'third-chatting-user',
-                    name: 'Third Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                ]),
               },
-              {
+              users: expect.arrayContaining([
-                id: expect.any(String),
+                expect.objectContaining({
-                roomId: expect.any(String),
+                  _id: 'chatting-user',
-                roomName: 'Second Chatting User',
+                  id: 'chatting-user',
-                users: expect.arrayContaining([
+                  name: 'Chatting User',
-                  {
+                  avatar: {
-                    _id: 'chatting-user',
+                    url: expect.any(String),
-                    id: 'chatting-user',
-                    name: 'Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
                   },
-                  {
+                }),
-                    _id: 'second-chatting-user',
+                expect.objectContaining({
-                    id: 'second-chatting-user',
+                  _id: 'other-chatting-user',
-                    name: 'Second Chatting User',
+                  id: 'other-chatting-user',
-                    avatar: {
+                  name: 'Other Chatting User',
-                      url: expect.any(String),
+                  avatar: {
-                    },
+                    url: expect.any(String),
                   },
-                ]),
+                }),
-              },
+              ]),
-              {
+            }),
-                id: expect.any(String),
+          ]),
-                roomId: expect.any(String),
-                roomName: 'Not Chatting User',
-                users: expect.arrayContaining([
-                  {
-                    _id: 'chatting-user',
-                    id: 'chatting-user',
-                    name: 'Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                  {
-                    _id: 'not-chatting-user',
-                    id: 'not-chatting-user',
-                    name: 'Not Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                ]),
-              },
-            ],
-          },
         },
-      )
+      })
-      expect(await query({ query: roomQuery(), variables: { first: 3, offset: 3 } })).toMatchObject(
+      await expect(
-        {
+        query({ query: roomQuery(), variables: { first: 3, offset: 3 } }),
-          errors: undefined,
+      ).resolves.toMatchObject({
-          data: {
+        errors: undefined,
-            Room: [
+        data: {
-              {
+          Room: [
-                id: expect.any(String),
+            expect.objectContaining({
-                roomId: expect.any(String),
+              id: expect.any(String),
-                roomName: 'Other Chatting User',
+              roomId: expect.any(String),
-                users: expect.arrayContaining([
+              roomName: 'Not Chatting User',
-                  {
+              users: expect.arrayContaining([
-                    _id: 'chatting-user',
+                {
-                    id: 'chatting-user',
+                  _id: 'chatting-user',
-                    name: 'Chatting User',
+                  id: 'chatting-user',
-                    avatar: {
+                  name: 'Chatting User',
-                      url: expect.any(String),
+                  avatar: {
-                    },
+                    url: expect.any(String),
                   },
-                  {
+                },
-                    _id: 'other-chatting-user',
+                {
-                    id: 'other-chatting-user',
+                  _id: 'not-chatting-user',
-                    name: 'Other Chatting User',
+                  id: 'not-chatting-user',
-                    avatar: {
+                  name: 'Not Chatting User',
-                      url: expect.any(String),
+                  avatar: {
-                    },
+                    url: expect.any(String),
                   },
-                ]),
+                },
-              },
+              ]),
-            ],
+            }),
-          },
+          ],
         },
-      )
+      })
     })
   })
 
   describe('query single room', () => {
     let result: any = null
+
     beforeAll(async () => {
       authenticatedUser = await chattingUser.toJson()
       result = await query({ query: roomQuery() })
     })
+
     describe('as chatter of room', () => {
       it('returns the room', async () => {
         expect(
@@ -556,34 +578,19 @@ describe('Room', () => {
               {
                 id: expect.any(String),
                 roomId: expect.any(String),
-                roomName: 'Third Chatting User',
+                roomName: result.data.Room[0].roomName,
-                users: expect.arrayContaining([
+                users: expect.any(Array),
-                  {
-                    _id: 'chatting-user',
-                    id: 'chatting-user',
-                    name: 'Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                  {
-                    _id: 'third-chatting-user',
-                    id: 'third-chatting-user',
-                    name: 'Third Chatting User',
-                    avatar: {
-                      url: expect.any(String),
-                    },
-                  },
-                ]),
               },
             ],
           },
         })
       })
+
       describe('as not chatter of room', () => {
         beforeAll(async () => {
           authenticatedUser = await notChattingUser.toJson()
         })
+
         it('returns no room', async () => {
           authenticatedUser = await notChattingUser.toJson()
           expect(

backend/src/schema/types/type/Message.gql

@@ -44,3 +44,7 @@ type Query {
     orderBy: [_MessageOrdering]
   ): [Message]
 }
+
+type Subscription {
+  chatMessageAdded(userId: ID!): Message
+}

backend/src/schema/types/type/Room.gql

@@ -7,7 +7,7 @@
 
 # TODO change this to last message date
 enum _RoomOrdering {
-  createdAt_desc
+  lastMessageAt_desc
 }
 
 type Room {

backend/src/server.ts

@@ -14,7 +14,7 @@ import bodyParser from 'body-parser'
 import { graphqlUploadExpress } from 'graphql-upload'
 
 export const NOTIFICATION_ADDED = 'NOTIFICATION_ADDED'
-// export const CHAT_MESSAGE_ADDED = 'CHAT_MESSAGE_ADDED'
+export const CHAT_MESSAGE_ADDED = 'CHAT_MESSAGE_ADDED'
 export const ROOM_COUNT_UPDATED = 'ROOM_COUNT_UPDATED'
 const { REDIS_DOMAIN, REDIS_PORT, REDIS_PASSWORD } = CONFIG
 let prodPubsub, devPubsub

webapp/components/Chat/Chat.vue

@@ -61,7 +61,12 @@
 
 <script>
 import { roomQuery, createRoom, unreadRoomsQuery } from '~/graphql/Rooms'
-import { messageQuery, createMessageMutation, markMessagesAsSeen } from '~/graphql/Messages'
+import {
+  messageQuery,
+  createMessageMutation,
+  chatMessageAdded,
+  markMessagesAsSeen,
+} from '~/graphql/Messages'
 import chatStyle from '~/constants/chat.js'
 import { mapGetters, mapMutations } from 'vuex'
 
@@ -169,6 +174,21 @@ export default {
     } else {
       this.fetchRooms()
     }
+
+    // Subscriptions
+    const observer = this.$apollo.subscribe({
+      query: chatMessageAdded(),
+      variables: {
+        userId: this.currentUser.id,
+      },
+    })
+
+    observer.subscribe({
+      next: this.chatMessageAdded,
+      error(error) {
+        this.$toast.error(error)
+      },
+    })
   },
   computed: {
     ...mapGetters({
@@ -297,6 +317,18 @@ export default {
       }
     },
 
+    async chatMessageAdded({ data }) {
+      if (data.chatMessageAdded.room.id === this.selectedRoom?.id) {
+        this.fetchMessages({ room: this.selectedRoom, options: { refetch: true } })
+      } else {
+        // TODO this might be optimized selectively (first page vs rest)
+        this.rooms = []
+        this.roomPage = 0
+        this.roomsLoaded = false
+        this.fetchRooms()
+      }
+    },
+
     async sendMessage(message) {
       // check for usersTag and change userid to username
       message.usersTag.forEach((userTag) => {

webapp/graphql/Messages.js

@@ -34,6 +34,32 @@ export const messageQuery = () => {
   `
 }
 
+export const chatMessageAdded = () => {
+  return gql`
+    subscription chatMessageAdded($userId: ID!) {
+      chatMessageAdded(userId: $userId) {
+        _id
+        id
+        indexId
+        content
+        senderId
+        author {
+          id
+        }
+        username
+        avatar
+        date
+        room {
+          id
+        }
+        saved
+        distributed
+        seen
+      }
+    }
+  `
+}
+
 export const markMessagesAsSeen = () => {
   return gql`
     mutation ($messageIds: [String!]) {

webapp/graphql/Rooms.js

@@ -11,7 +11,7 @@ export const createRoom = () => gql`
 
 export const roomQuery = () => gql`
   query Room($first: Int, $offset: Int, $id: ID) {
-    Room(first: $first, offset: $offset, id: $id, orderBy: createdAt_desc) {
+    Room(first: $first, offset: $offset, id: $id, orderBy: lastMessageAt_desc) {
       id
       roomId
       roomName

webapp/locales/de.json

@@ -86,6 +86,9 @@
     "messageDeleted": "Diese Nachricht wuerde gelöscht",
     "messagesEmpty": "Keine Nachrichten",
     "newMessages": "Neue Nachrichten",
+    "page": {
+      "headline": "Chat"
+    },
     "roomEmpty": "Keinen Raum selektiert",
     "roomsEmpty": "Keine Räume",
     "search": "Suche",

webapp/locales/en.json

@@ -86,6 +86,9 @@
     "messageDeleted": "This message was deleted",
     "messagesEmpty": "No messages",
     "newMessages": "New Messages",
+    "page": {
+      "headline": "Chat"
+    },
     "roomEmpty": "No room selected",
     "roomsEmpty": "No rooms",
     "search": "Search",

webapp/pages/chat.vue

@@ -1,5 +1,8 @@
 <template>
-  <chat />
+  <div>
+    <ds-heading tag="h1">{{ $t('chat.page.headline') }}</ds-heading>
+    <chat />
+  </div>
 </template>
 
 <script>