- Added new chat system

Support-pl · Jul 6, 2023 · e4407b2 · e4407b2
1 parent 43b4dcd
commit e4407b2
Show file tree

Hide file tree

Showing 10 changed files with 700 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -9,11 +9,16 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@bufbuild/connect": "^0.10.1",
+    "@bufbuild/connect-web": "^0.10.1",
+    "@bufbuild/protobuf": "^1.2.1",
     "ant-design-vue": "^1.5.4",
     "axios": "^1.2.1",
     "core-js": "^3.26.0",
     "js-cookie": "^3.0.1",
     "latest-version": "^6.0.0",
+    "markdown-it": "^13.0.1",
+    "markdown-it-emoji": "^2.0.2",
     "md5": "^2.2.1",
     "nocloud-ui": "^1.0.5",
     "nocloudjsrest": "^1.5.2",

diff --git a/src/components/appMain/support/addTicket.vue b/src/components/appMain/support/addTicket.vue
@@ -9,7 +9,7 @@
   >
     <a-spin tip="Loading..." :spinning="isLoading">
       <a-form-model layout="vertical">
-        <a-form-model-item :label="$t('department')">
+        <a-form-model-item :label="$t('department')" v-if="false">
           <a-select v-model="ticketDepartment" placeholder="department">
             <a-select-option v-for="dep in departments" :key="dep.id" :value="dep.id" >
               {{ dep.name }}
@@ -31,6 +31,16 @@
 
 <script>
 import { mapGetters } from "vuex";
+import Markdown from "markdown-it";
+import emoji from "markdown-it-emoji"
+
+const md = new Markdown({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+
+md.use(emoji);
 
 export default {
   name: "addTicket",
@@ -45,7 +55,7 @@ export default {
   },
   computed: {
     user() {
-      return this.$store.getters.getUser;
+      return this.$store.getters['nocloud/auth/userdata'];
     },
     ...mapGetters("support", {
       addTicketStatus: "isAddTicketState",
@@ -63,26 +73,40 @@ export default {
         return;
       }
 
-      if (this.ticketDepartment == -1) {
-        this.$message.warn(this.$t("departments are loading"));
-        return;
-      }
+      // if (this.ticketDepartment == -1) {
+      //   this.$message.warn(this.$t("departments are loading"));
+      //   return;
+      // }
 
       this.isSending = true;
-      this.$api.get(this.baseURL, { params: {
-        run: 'create_ticket',
+      // this.$api.get(this.baseURL, { params: {
+      //   run: 'create_ticket',
+      //   subject: this.ticketTitle,
+      //   message: this.ticketMessage,
+      //   department: this.ticketDepartment,
+      // }})
+      this.$store.dispatch('support/createChat', {
         subject: this.ticketTitle,
-        message: this.ticketMessage,
-        department: this.ticketDepartment,
-      }})
-        .then((resp) => {
-          if (resp.result == "success") {
+        message: md.render(this.ticketMessage).trim()
+      })
+        .then(async (resp) => {
+          if (resp.result === "success") {
             this.ticketTitle = "";
             this.ticketMessage = "";
             this.isSending = false;
 
             this.$store.dispatch("support/autoFetch");
             this.$store.commit("support/inverseAddTicketState");
+          } else if (resp.uuid) {
+            if (!resp.meta.lastMessage) {
+              await this.$store.dispatch('support/sendMessage', {
+                uuid: resp.uuid,
+                content: md.render(this.ticketMessage).trim(),
+                account: this.user.uuid,
+                date: BigInt(Date.now())
+              });
+            }
+            this.$router.push(`ticket-${resp.uuid}`);
           } else {
             throw resp;
           }
@@ -106,7 +130,7 @@ export default {
         this.ticketDepartment = this.departments[0].id;
       })
       .catch(() => {
-        this.$message.error(this.$t("departments not found"));
+        // this.$message.error(this.$t("departments not found"));
       })
       .finally(() => {
         this.isLoading = false;

diff --git a/src/components/appMain/support/singleTicket.vue b/src/components/appMain/support/singleTicket.vue
@@ -6,9 +6,13 @@
     ></div>
     <div class="ticket__content">
       <div class="ticket__upper">
-        <div class="ticket__title">#{{ ticket.tid }} - {{ titleDecoded }}</div>
+        <div class="ticket__title">
+          #{{ ticket.tid }} - {{ titleDecoded }}
+        </div>
         <div class="ticket__status-text">
-          {{ $t(`ticketStatus.${ticket.status}`) }}
+          <a-badge :count="ticket.unread" :offset="[10, -15]">
+            {{ $t(`ticketStatus.${ticket.status}`) }}
+          </a-badge>
         </div>
       </div>
       <div class="ticket__lower">
@@ -34,7 +38,7 @@ export default {
       return message || 'empty';
     },
     formatDate(date) {
-      const d = new Date(date.replace(/-/g, "/"));
+      const d = new Date((date.replace) ? date.replace(/-/g, "/") : date);
       const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
       const mo = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(d);
       const da = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(d);

diff --git a/src/components/appMain/support/ticketchat.vue b/src/components/appMain/support/ticketchat.vue
@@ -1,17 +1,19 @@
 <template>
   <div class="chat">
     <div class="chat__header">
-      <div class="chat__back">
-        <div class="icon__wrapper" @click="goBack()">
-          <a-icon type="left" />
+      <div class="chat__container">
+        <div class="chat__back">
+          <div class="icon__wrapper" @click="goBack()">
+            <a-icon type="left" />
+          </div>
         </div>
-      </div>
-      <div class="chat__title">
-        {{ titleDecoded }}
-      </div>
-      <div class="chat__reload">
-        <div class="icon__wrapper" @click="reload()">
-          <a-icon type="reload" />
+        <div class="chat__title">
+          {{ titleDecoded }}
+        </div>
+        <div class="chat__reload">
+          <div class="icon__wrapper" @click="reload()">
+            <a-icon type="reload" />
+          </div>
         </div>
       </div>
     </div>
@@ -83,8 +85,18 @@
 </template>
 
 <script>
+import Markdown from "markdown-it";
+import emoji from "markdown-it-emoji"
 import load from "@/components/loading/loading.vue";
 
+const md = new Markdown({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+
+md.use(emoji);
+
 export default {
   name: "ticketChat",
   components: { load },
@@ -150,8 +162,8 @@ export default {
         attachment: "",
         contactid: "0",
         date: new Date(),
-        email: this.user?.email || 'none',
-        message: this.messageInput.trim(),
+        email: this.user.data?.email ?? 'none',
+        message: md.render(this.messageInput).trim(),
         name: this.user.title,
         userid: this.user.uuid,
         sending: true,
@@ -161,20 +173,37 @@ export default {
       const { content } = this.$refs;
 
       this.replies.push({ ...message, date, requestor_type });
-
       setTimeout(() => { content.scrollTo(0, content.scrollHeight) }, 100);
+
+      if (this.replies[0].gateways) {
+        this.$store.dispatch('support/sendMessage', {
+          uuid: this.$route.params.pathMatch,
+          content: message.message,
+          account: message.userid,
+          date: BigInt(message.date.getTime())
+        })
+          .catch((err) => {
+            this.replies.at(-1).error = true;
+            console.error(err);
+          })
+          .finally(() => {
+            this.replies.at(-1).sending = false;
+          });
+        this.messageInput = '';
+        return;
+      }
+
       this.$api.get(this.baseURL, { params: {
         run: 'answer_ticket',
         id: this.$route.params.pathMatch,
         message: this.messageInput,
       }})
-        .then(() => {
-          this.replies.at(-1).sending = false;
-        })
         .catch((err) => {
+          this.replies.at(-1).error = true;
           console.error(err);
+        })
+        .finally(() => {
           this.replies.at(-1).sending = false;
-          this.replies.at(-1).error = true;
         });
       this.messageInput = "";
     },
@@ -184,6 +213,13 @@ export default {
         run: 'get_ticket_full',
         ticket_id: this.chatid,
       }})
+        .then(async (resp) => {
+          if (resp.replies) return resp;
+          else {
+            await this.$store.dispatch('support/fetchChats');
+            return this.$store.dispatch('support/fetchMessages', this.chatid);
+          }
+        })
         .then((resp) => {
           this.status = resp.status;
           this.replies = resp.replies ?? [];
@@ -241,18 +277,32 @@ export default {
   line-height: 64px;
   background-color: var(--main);
   color: var(--bright_font);
+}
+
+.chat__container {
   padding: 0;
   display: grid;
   grid-template-columns: 20% 1fr 20%;
   justify-items: center;
   align-items: center;
+  max-width: 768px;
+  height: 100%;
+  margin: 0 auto;
 }
 
 .chat__title {
   font-weight: bold;
   line-height: 1.1rem;
 }
 
+.chat__back {
+  justify-self: start;
+}
+
+.chat__reload {
+  justify-self: end;
+}
+
 .chat__back,
 .chat__reload {
   font-size: 1.4rem;