Merge branch 'feature/discussions' into develop

src/App.vue

@@ -218,7 +218,7 @@ export default {
           }
 
           const isCurrentRoom =
-            this.$route.name === 'room' && this.$route.params.id === message.room;
+            this.$route.name === 'room' && this.$route.params.roomId === message.room;
           const isViewModeCurrentRoom =
             this.$route.params.viewedAgent && activeRoom?.uuid === message.room;
 
@@ -239,6 +239,56 @@ export default {
         }
       });
 
+      this.ws.on('discussion_msg.create', async (message) => {
+        const { discussions, activeDiscussion } = this.$store.state.chats.discussions;
+        const findDiscussion = discussions.find(
+          (discussion) => discussion.uuid === message.discussion,
+        );
+
+        // this.$store.dispatch('chats/rooms/bringRoomFront', findRoom);
+        if (findDiscussion) {
+          if (this.me.email === message.user?.email) {
+            return;
+          }
+
+          const notification = new Notification('ping-bing');
+          notification.notify();
+
+          if (document.hidden) {
+            sendWindowNotification({
+              title: message.contact.name,
+              message: message.text,
+              image: message.media?.[0]?.url,
+            });
+          }
+
+          const isCurrentDiscussion =
+            this.$route.name === 'discussion' &&
+            this.$route.params.discussionId === message.discussion;
+          const isViewModeCurrentDiscussion =
+            this.$route.params.viewedAgent && activeDiscussion?.uuid === message.discussion;
+          const shouldAddDiscussionMessage = isCurrentDiscussion || isViewModeCurrentDiscussion;
+
+          if (shouldAddDiscussionMessage) {
+            this.$store.dispatch('chats/discussionMessages/addDiscussionMessage', message);
+          }
+
+          const isJsonMessage = this.isAJson(message.text);
+          if (shouldAddDiscussionMessage || isJsonMessage) {
+            return;
+          }
+
+          this.$store.dispatch('chats/discussions/addNewMessagesByDiscussion', {
+            discussion: message.discussion,
+            message: {
+              created_on: message.created_on,
+              uuid: message.uuid,
+              text: message.text,
+            },
+          });
+        }
+      });
+
       this.ws.on('rooms.create', (room) => {
         if (!!room.user && room.user.email !== this.me.email) return;
 
@@ -279,10 +329,32 @@ export default {
         }
       });
 
+      this.ws.on('discussions.update', (discussion) => {
+        const { discussions } = this.$store.state.chats.discussions;
+        const isNewDiscussion = !discussions.find(
+          (mappedDiscussion) => mappedDiscussion.uuid === discussion.uuid,
+        );
+
+        if (isNewDiscussion && discussion.user.email !== this.me.email) {
+          this.$store.dispatch('chats/discussions/addDiscussion', discussion);
+
+          const notification = new Notification('select-sound');
+          notification.notify();
+        }
+      });
+
       this.ws.on('rooms.close', (room) => {
         this.$store.dispatch('chats/rooms/removeRoom', room.uuid);
       });
 
+      this.ws.on('discussions.close', (discussion) => {
+        this.$store.dispatch('chats/discussions/removeDiscussion', discussion.uuid);
+
+        if (this.$route.params.discussionId === discussion.uuid) {
+          this.$store.dispatch('chats/discussions/setActiveDiscussion', null);
+        }
+      });
+
       this.ws.on('msg.update', (message) => {
         if (this.me.email === message.user?.email) {
           return;

src/components/chats/ContactInfo/index.vue

@@ -8,7 +8,7 @@
       class="contact-info"
       :title="$t('contact_info.title')"
       icon="information-circle-4"
-      @close="$listeners.close"
+      :close="$listeners.close"
     >
       <section class="scrollable">
         <aside-slot-template-section>

src/components/chats/DiscussionSidebar/DiscussionAbout.vue

@@ -96,13 +96,6 @@ export default {
       agentSelected: [],
     };
   },
-  async created() {
-    const responseAgents = await this.$store.dispatch('chats/discussions/getDiscussionAgents');
-    if (responseAgents.results) {
-      this.agentsInvolved = responseAgents.results;
-    }
-    this.agentsToSelect = [{ value: '', label: this.$t('discussions.add_agents.search_agent') }];
-  },
   computed: {
     discussionStartDate() {
       const { created_on } = this.details;
@@ -172,6 +165,18 @@ export default {
         this.agentsToSelect = newAgents;
       }
     },
+    details: {
+      immediate: true,
+      async handler() {
+        const responseAgents = await this.$store.dispatch('chats/discussions/getDiscussionAgents');
+        if (responseAgents.results) {
+          this.agentsInvolved = responseAgents.results;
+        }
+        this.agentsToSelect = [
+          { value: '', label: this.$t('discussions.add_agents.search_agent') },
+        ];
+      },
+    },
   },
 };
 </script>

src/components/chats/DiscussionSidebar/index.vue

@@ -9,10 +9,20 @@
       "
       :icon="isOwnDiscussion ? 'chat_info' : 'history'"
       iconScheme="neutral-dark"
-      @close="handleEndDiscussionModal"
+      :close="isOwnDiscussion ? handleEndDiscussionModal : null"
     >
       <discussion-about v-if="isOwnDiscussion" :details="details" />
-      <room-messages v-else />
+      <section v-else class="discussion-sidebar__room">
+        <room-messages />
+        <unnnic-button
+          :text="$t('update')"
+          type="primary"
+          iconLeft="refresh"
+          size="small"
+          :loading="isMessagesRoomLoading"
+          @click="updateRoomMessages"
+        />
+      </section>
 
       <unnnic-modal
         v-if="isEndDiscussionModalOpen"
@@ -58,6 +68,7 @@ export default {
   data: () => {
     return {
       isSidebarLoading: true,
+      isMessagesRoomLoading: false,
 
       details: null,
       isOwnDiscussion: false,
@@ -67,12 +78,6 @@ export default {
     };
   },
 
-  async created() {
-    this.details = await this.$store.dispatch('chats/discussions/getDiscussionDetails');
-    this.isOwnDiscussion = this.me.email === this.details.created_by?.email;
-    this.isSidebarLoading = false;
-  },
-
   computed: {
     ...mapState({
       me: (state) => state.profile.me,
@@ -81,16 +86,53 @@ export default {
   },
 
   methods: {
+    async loadDiscussionDetails() {
+      this.isSidebarLoading = true;
+
+      this.details = await this.$store.dispatch('chats/discussions/getDiscussionDetails');
+      this.isOwnDiscussion = this.me.email === this.details.created_by?.email;
+      await this.$store.dispatch('chats/rooms/setActiveRoom', {
+        uuid: this.details.room,
+        contact: { name: this.details.contact },
+      });
+      this.isSidebarLoading = false;
+    },
+
+    async updateRoomMessages() {
+      this.isMessagesRoomLoading = true;
+      await this.$store
+        .dispatch('chats/roomMessages/getRoomMessages', {
+          offset: 0,
+          limit: 20,
+        })
+        .then(() => {
+          this.isMessagesRoomLoading = false;
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+
     handleEndDiscussionModal() {
       this.isEndDiscussionModalOpen = !this.isEndDiscussionModalOpen;
     },
 
     async endDiscussion() {
       this.isEndDiscussionLoading = true;
+      await this.$store.dispatch('chats/rooms/setActiveRoom', null);
       await this.$store.dispatch('chats/discussions/delete');
       this.handleEndDiscussionModal();
     },
   },
+
+  watch: {
+    discussion: {
+      immediate: true,
+      async handler() {
+        await this.loadDiscussionDetails();
+      },
+    },
+  },
 };
 </script>
 
@@ -102,8 +144,17 @@ export default {
 }
 
 .discussion-sidebar {
-  .chat-messages {
-    padding: 0 $unnnic-spacing-xs;
+  padding: $unnnic-spacing-xs;
+  padding-bottom: $unnnic-spacing-sm;
+
+  &__room {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-xs;
+
+    :deep(.chat-messages) {
+      padding: 0;
+    }
   }
 
   &__end-modal {

src/components/chats/MessageManager/index.vue

@@ -34,14 +34,14 @@
       </div>
       <div class="message-manager__actions">
         <unnnic-button
-          v-if="canUseCopilot && !isCopilotOpen && showActionButton"
+          v-if="canUseCopilot && !isCopilotOpen && showActionButton && !discussionId"
           @click="openCopilot"
           type="secondary"
           size="large"
           iconCenter="study-light-idea-1"
         />
         <unnnic-button
-          v-if="!canUseCopilot && showActionButton"
+          v-if="(!canUseCopilot || discussionId) && showActionButton"
           @click="record"
           type="secondary"
           size="large"
@@ -96,7 +96,7 @@
         :search="textBoxMessage"
         :suggestions="shortcuts"
         :keyboard-event="keyboardEvent"
-        :copilot="canUseCopilot"
+        :copilot="canUseCopilot && !discussionId"
         @open="isSuggestionBoxOpen = true"
         @close="closeSuggestionBox"
         @select="setMessage($event.text)"

src/components/chats/QuickMessages/index.vue

@@ -3,7 +3,7 @@
     v-if="!isEditing && !isCreating"
     :title="$t('quick_message')"
     icon="flash-1-3"
-    @close="$emit('close')"
+    :close="() => $emit('close')"
   >
     <aside-slot-template-section class="messages-section__container">
       <div class="messages-section">

src/components/chats/chat/ChatMessages/ChatMessagesFeedbackMessage.vue

@@ -111,6 +111,11 @@ export default {
         ecf: `${content.user} ${t('chats.feedback.edit_custom_field')} <i>${
           content.custom_field_name
         }</i> ${t('from')} <i>${content.old}</i> ${t('to')} <i>${content.new}</i>`,
+        dc: `${t('chats.feedback.discussion_created', {
+          agent: content.user,
+          queue: content.queue,
+        })}`,
+        da: `${t('chats.feedback.discussion_joined', { agent: content.user })}`,
       };
 
       return feedbackLabels[method] || '';

src/components/chats/chat/ChatMessages/index.vue

@@ -1,12 +1,13 @@
 <!-- eslint-disable vuejs-accessibility/alt-text -->
 <!-- eslint-disable vuejs-accessibility/media-has-caption -->
 <template>
-  <div class="chat-messages">
-    <chat-messages-loading v-show="isLoading" />
+  <div class="chat-messages__container">
+    <chat-messages-loading v-show="isSkeletonLoadingActive" />
     <section
+      class="chat-messages"
       ref="chatMessages"
       @scroll="handleScroll"
-      v-show="!isLoading"
+      v-show="!isSkeletonLoadingActive"
       v-if="chatUuid && messagesSorted"
     >
       <section
@@ -117,7 +118,7 @@
       :feedback="roomEndedChatFeedback(room)"
       scheme="purple"
     /> -->
-      <section v-if="tags.length > 0" v-show="!isLoading" class="chat-messages__tags">
+      <section v-if="tags.length > 0" v-show="!isSkeletonLoadingActive" class="chat-messages__tags">
         <!-- <chat-feedback :feedback="roomEndedChatFeedback(room)" scheme="purple" ref="endChatElement" /> -->
         <tag-group :tags="tags" />
       </section>
@@ -277,6 +278,11 @@ export default {
         .flat()
         .filter((media) => this.isMedia(media));
     },
+
+    isSkeletonLoadingActive() {
+      const { isLoading, prevChatUuid, chatUuid } = this;
+      return isLoading && prevChatUuid !== chatUuid;
+    },
   },
 
   methods: {
@@ -459,7 +465,7 @@ export default {
       }
 
       this.prevChatUuid = this.chatUuid;
-      this.lastMessageUuidBeforePagination = messagesSorted[0].minutes[0].messages?.[0]?.uuid;
+      this.lastMessageUuidBeforePagination = messagesSorted?.[0]?.minutes?.[0]?.messages?.[0]?.uuid;
     },
 
     scrollToBottom() {
@@ -482,6 +488,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.chat-messages__container {
+  overflow: hidden;
+
+  height: 100%;
+}
+
 .chat-messages {
   overflow: hidden auto;
 

src/components/chats/chat/DiscussionMessages.vue

@@ -82,6 +82,7 @@ export default {
       immediate: true,
       handler(discussionUuid) {
         if (discussionUuid) {
+          this.page = 0;
           this.getDiscussionMessages();
         }
       },

src/components/chats/chat/RoomMessages.vue

@@ -77,6 +77,7 @@ export default {
       immediate: true,
       handler(roomUuid) {
         if (roomUuid) {
+          this.page = 0;
           this.getRoomMessages();
         }
       },