- Added live chat update

- Fixed sending a message when creating a chat
- Fixed chat scrolling when entering it

src/components/appMain/modules/ovh cloud/openInstance.vue

@@ -479,9 +479,10 @@
               shape="round"
               size="large"
               :disabled="VM.state.state !== 'RUNNING'"
-              @click="openVNC"
             >
-              VNC
+              <router-link :to="{ path: `${$route.params.uuid}/vnc` }">
+                VNC
+              </router-link>
             </a-button>
           </div>
         </a-col>

src/components/appMain/support/addTicket.vue

@@ -85,7 +85,7 @@ export default {
       //   message: this.ticketMessage,
       //   department: this.ticketDepartment,
       // }})
-      this.$store.dispatch('support/createChat', {
+      this.$store.dispatch('nocloud/chats/createChat', {
         subject: this.ticketTitle,
         message: md.render(this.ticketMessage).trim()
       })
@@ -98,8 +98,8 @@ export default {
             this.$store.dispatch("support/autoFetch");
             this.$store.commit("support/inverseAddTicketState");
           } else if (resp.uuid) {
-            if (!resp.meta.lastMessage) {
-              await this.$store.dispatch('support/sendMessage', {
+            if (!resp.meta.lastMessage?.uuid) {
+              await this.$store.dispatch('nocloud/chats/sendMessage', {
                 uuid: resp.uuid,
                 content: md.render(this.ticketMessage).trim(),
                 account: this.user.uuid,

src/components/appMain/support/singleTicket.vue

@@ -16,7 +16,7 @@
         </div>
       </div>
       <div class="ticket__lower">
-        <div class="ticket__message">{{ beauty(ticket.message) }}</div>
+        <div class="ticket__message" v-html="beauty(ticket.message)"></div>
         <div class="ticket__time">{{ formatDate(ticket.date) }}</div>
       </div>
     </div>
@@ -35,6 +35,7 @@ export default {
       message = this.decode(message);
       message = message.replace(/-{2,}.*/gi, "");
       message = message.replace(/IP Address.*/gi, "");
+      message = message.replace(/<\/?[a-z1-9 #-:=";_!]+>/gi, "");
       return message || 'empty';
     },
     formatDate(date) {

src/components/appMain/support/ticketchat.vue

@@ -123,6 +123,11 @@ export default {
       txt.innerHTML = this.subject;
       return txt.value;
     },
+    messages() {
+      const chatMessages = this.$store.getters['nocloud/chats/getMessages'];
+
+      return [...this.replies, ...chatMessages];
+    },
   },
   methods: {
     goBack() {
@@ -176,7 +181,7 @@ export default {
       setTimeout(() => { content.scrollTo(0, content.scrollHeight) }, 100);
 
       if (this.replies[0].gateways) {
-        this.$store.dispatch('support/sendMessage', {
+        this.$store.dispatch('nocloud/chats/sendMessage', {
           uuid: this.$route.params.pathMatch,
           content: message.message,
           account: message.userid,
@@ -216,8 +221,8 @@ export default {
         .then(async (resp) => {
           if (resp.replies) return resp;
           else {
-            await this.$store.dispatch('support/fetchChats');
-            return this.$store.dispatch('support/fetchMessages', this.chatid);
+            await this.$store.dispatch('nocloud/chats/fetchChats');
+            return this.$store.dispatch('nocloud/chats/fetchMessages', this.chatid);
           }
         })
         .then((resp) => {
@@ -226,6 +231,9 @@ export default {
           this.subject = resp.subject;
         })
         .finally(() => {
+          setTimeout(() => {
+            this.$refs.content.scrollTo(0, this.$refs.content.scrollHeight);
+          });
           this.loading = false;
         });
     },
@@ -248,6 +256,7 @@ export default {
     },
   },
   mounted() {
+    this.$store.dispatch('nocloud/chats/startStream');
     this.loadMessages();
   },
   beforeRouteUpdate(to, from, next) {

src/routes/support.vue

@@ -3,24 +3,22 @@
 		<loading v-if="isLoading" />
 		<div v-else class="container">
 
-			<template>
-				<empty v-if="tickets.length == 0"/>
-				<div class="ticket__wrapper">
-					<singleTicket v-for='(ticket, index) in tickets' :key='index' :ticket='ticket'/>
-				</div>
-			</template>
+      <empty v-if="chats.length === 0"/>
+      <div class="ticket__wrapper">
+        <singleTicket v-for='(ticket, index) in chats' :key='index' :ticket='ticket'/>
+      </div>
 
 			<addTicketField v-if="addTicketStatus"/>
 		</div>
 	</div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import singleTicket from "@/components/appMain/support/singleTicket.vue";
+import addTicketField from '@/components/appMain/support/addTicket.vue';
 import loading from '@/components/loading/loading.vue';
 import empty from '@/components/empty/empty.vue';
-import addTicketField from '@/components/appMain/support/addTicket.vue';
-import { mapGetters } from 'vuex';
 
 export default {
 	name: 'support',
@@ -35,11 +33,39 @@ export default {
 			isLoading: 'isLoading',
 			tickets: 'getTickets',
 			addTicketStatus: 'isAddTicketState'
-		})
+		}),
+    user() {
+      return this.$store.getters['nocloud/auth/userdata'];
+    },
+    chats() {
+      const chats = this.$store.getters['nocloud/chats/getChats'];
+      const result = [];
+      const { uuid } = this.user;
+
+      chats.forEach((ticket) => {
+        const isReaded = ticket.meta.lastMessage?.readers.includes(uuid);
+        const value = {
+          id: ticket.uuid,
+          tid: `${ticket.uuid.slice(0, 8)}...`,
+          title: ticket.topic,
+          date: Number(ticket.meta.lastMessage?.sent ?? ticket.created),
+          message: ticket.meta.lastMessage?.content ?? '',
+          status: 'Open',
+          unread: (isReaded) ? 0 : ticket.meta.unread
+        };
+
+        result.push(value);
+      });
+
+      result.sort((a, b) => b.date - a.date);
+
+      return [...result, ...this.tickets];
+    }
 	},
 	mounted() {
 		this.$store.dispatch("support/autoFetch");
-    this.$store.dispatch("support/fetchChats");
+    this.$store.dispatch("nocloud/chats/fetchChats");
+    this.$store.dispatch('nocloud/chats/startStream');
 	},
 }
 </script>

src/store/index.js

@@ -11,7 +11,9 @@ import network from './network'
 import products from './products'
 import utils from './utils'
 import nocloud from './nocloud'
+import chats from './nocloud/chats'
 
+nocloud.modules.chats = chats;
 Vue.use(vuex)
 
 export default new vuex.Store({
@@ -28,4 +30,4 @@ export default new vuex.Store({
 		utils,
 		nocloud
 	}
-})
+})