Merge pull request #355 from weni-ai/fix/messages-crash

Chats crash when click at media not paginate
weni-ai · Oct 20, 2023 · a45105b · a45105b
2 parents bea90d8 + a3775aa
commit a45105b
Show file tree

Hide file tree

Showing 19 changed files with 112 additions and 73 deletions.
diff --git a/src/components/PreferencesBar.vue b/src/components/PreferencesBar.vue
@@ -50,20 +50,20 @@
         @input="changeSound"
       />
 
-      <unnnic-button-next
+      <unnnic-button
         @mousedown.prevent
         :text="$t('quick_messages.title')"
         icon-left="flash-1-3"
-        type="terciary"
+        type="secondary"
         size="small"
         @click="openQuickMessage"
       />
-      <unnnic-button-next
+      <unnnic-button
         @mousedown.prevent
         v-if="this.dashboard"
         text="Dashboard"
         icon-left="gauge-dashboard-2"
-        type="terciary"
+        type="secondary"
         size="small"
         @click="navigate('dashboard.manager')"
       />

diff --git a/src/components/chats/ContactInfo/index.vue b/src/components/chats/ContactInfo/index.vue
@@ -17,10 +17,10 @@
                 {{ (closedRoom || room).contact.name }}
               </h1>
 
-              <unnnic-button-next
+              <unnnic-button
                 v-if="!isHistory"
                 iconCenter="button-refresh-arrow-1"
-                type="terciary"
+                type="tertiary"
                 size="small"
                 @click="refreshContactInfos"
                 :disabled="isRefreshContactDisabled"
@@ -81,12 +81,12 @@
                 <unnnic-icon-svg icon="information-circle-4" scheme="neutral-soft" size="sm" />
               </unnnic-tool-tip>
             </div>
-            <unnnic-button-next
+            <unnnic-button
               v-if="!isHistory && !isViewMode"
               class="transfer__button"
               :text="$t('contact_info.see_contact_history')"
               iconLeft="export-1"
-              type="terciary"
+              type="tertiary"
               size="small"
               @click="openHistory()"
             />
@@ -124,10 +124,10 @@
               :disabled="!!transferContactError || isViewMode"
             />
 
-            <unnnic-button-next
+            <unnnic-button
               class="transfer__button"
               :text="$t('transfer')"
-              type="terciary"
+              type="secondary"
               size="small"
               @click="transferContact"
               :disabled="isViewMode"

diff --git a/src/components/chats/FlowsTrigger/ModalAddNewContact.vue b/src/components/chats/FlowsTrigger/ModalAddNewContact.vue
@@ -37,7 +37,7 @@
               <unnnic-button
                 style="padding: 0.75rem 4.75rem"
                 :text="$t('cancel')"
-                type="terciary"
+                type="tertiary"
                 :disabled="false"
               />
             </div>

diff --git a/src/components/chats/FlowsTrigger/SelectFlow.vue b/src/components/chats/FlowsTrigger/SelectFlow.vue
@@ -16,14 +16,14 @@
       <modal-progress-template-submission @close="closeModaProgress" />
     </div>
     <div class="flows-trigger__handlers">
-      <unnnic-button-next
+      <unnnic-button
         :text="$t('back')"
         size="small"
-        type="ghost"
+        type="tertiary"
         @click="$emit('back')"
         style="width: 100%"
       />
-      <unnnic-button-next
+      <unnnic-button
         :disabled="selectedFlow === ''"
         :text="$t('send')"
         size="small"

diff --git a/src/components/chats/MessageManager/index.vue b/src/components/chats/MessageManager/index.vue
@@ -30,17 +30,17 @@
         />
       </div>
       <div class="message-manager__actions">
-        <unnnic-button-next
+        <unnnic-button
           v-if="canUseCopilot && !isCopilotOpen && showActionButton"
           @click="openCopilot"
-          type="terciary"
+          type="secondary"
           size="large"
           iconCenter="study-light-idea-1"
         />
-        <unnnic-button-next
+        <unnnic-button
           v-if="!canUseCopilot && showActionButton"
           @click="record"
-          type="terciary"
+          type="secondary"
           size="large"
           iconCenter="microphone"
         />
@@ -50,7 +50,7 @@
           position="top-left"
           class="more-actions"
         >
-          <unnnic-button-next slot="trigger" type="primary" size="large" iconCenter="add-1" />
+          <unnnic-button slot="trigger" type="primary" size="large" iconCenter="add-1" />
 
           <div class="more-actions-container">
             <more-actions-option
@@ -72,7 +72,7 @@
           </div>
         </unnnic-dropdown>
 
-        <unnnic-button-next
+        <unnnic-button
           v-if="
             !isSuggestionBoxOpen &&
             (isTyping || isAudioRecorderVisible || loadingValue !== undefined)

diff --git a/src/components/chats/QuickMessages/QuickMessageForm.vue b/src/components/chats/QuickMessages/QuickMessageForm.vue
@@ -27,14 +27,14 @@
     />
 
     <div class="actions" v-if="!externalActions">
-      <unnnic-button-next
+      <unnnic-button
         class="button"
         :text="$t('cancel')"
-        type="secondary"
+        type="tertiary"
         size="small"
         @click="$emit('cancel')"
       />
-      <unnnic-button-next
+      <unnnic-button
         class="button"
         :text="$t('save')"
         type="primary"

diff --git a/src/components/chats/QuickMessages/index.vue b/src/components/chats/QuickMessages/index.vue
@@ -37,10 +37,10 @@
         </unnnic-collapse>
       </div>
 
-      <unnnic-button-next
+      <unnnic-button
         icon-left="add-1"
         :text="$t('quick_messages.new')"
-        type="terciary"
+        type="secondary"
         size="small"
         class="fill-w"
         @click="quickMessageToEdit = createEmptyQuickMessage()"
@@ -56,8 +56,8 @@
       :show-modal="!!quickMessageToDelete"
     >
       <template #options>
-        <unnnic-button :text="$t('cancel')" type="terciary" @click="quickMessageToDelete = null" />
-        <unnnic-button :text="$t('confirm')" type="secondary" @click="deleteQuickMessage" />
+        <unnnic-button :text="$t('cancel')" type="secondary" @click="quickMessageToDelete = null" />
+        <unnnic-button :text="$t('confirm')" type="tertiary" @click="deleteQuickMessage" />
       </template>
     </unnnic-modal>
   </aside-slot-template>

diff --git a/src/components/chats/chat/ChatMessages.vue b/src/components/chats/chat/ChatMessages.vue
@@ -18,10 +18,6 @@
           v-if="room?.is_waiting"
           :feedback="$t('waiting_answer.waiting_cliente_answer')"
         />
-        <chat-feedback
-          v-if="isFirstMessageByBot(messagesByDate.minutes)"
-          :feedback="$t('chat_with.bot')"
-        />
       </div>
 
       <section
@@ -30,6 +26,15 @@
         :key="messagesByDate.date + messagesByMinute.minute"
       >
         <template v-for="message in messagesByMinute.messages">
+          <chat-feedback
+            v-if="isChatSeparatorFeedback(message.uuid)"
+            :feedback="
+              startMessagesBy.agent === message.uuid
+                ? $t('chat_with.agent', { name: message?.user?.first_name })
+                : $t('chat_with.bot')
+            "
+            :key="'feedback' + message.uuid"
+          />
           <chat-feedback
             v-if="isFeedbackMessage(message)"
             :feedback="createFeedbackLabel(message)"
@@ -38,7 +43,7 @@
 
           <template v-else>
             <unnnic-chats-message
-              v-if="message.text"
+              v-if="message.text || isGeolocation(message.media[0])"
               :type="message.user || isMessageByBot(message) ? 'sent' : 'received'"
               :class="[
                 'chat-messages__message',
@@ -49,7 +54,7 @@
               :key="message.uuid"
               :ref="`message-${message.uuid}`"
             >
-              {{ isGeolocation(message.media[0]) ? message.media[0].url : message.text }}
+              {{ isGeolocation(message.media[0]) ? message.media[0]?.url : message.text }}
             </unnnic-chats-message>
             <template v-for="media in message.media">
               <unnnic-chats-message
@@ -86,7 +91,7 @@
                 />
               </unnnic-chats-message>
               <unnnic-chats-message
-                v-else-if="!isMedia(media)"
+                v-else-if="!isGeolocation(media)"
                 :key="media.created_on"
                 :ref="`message-${message.uuid}`"
                 :type="message.user ? 'sent' : 'received'"
@@ -115,9 +120,9 @@
 
     <!-- Media fullscreen -->
     <fullscreen-preview
-      v-if="isFullscreen"
-      :downloadMediaUrl="currentMedia.url"
-      :downloadMediaName="currentMedia.message"
+      v-if="isFullscreen && currentMedia"
+      :downloadMediaUrl="currentMedia?.url"
+      :downloadMediaName="currentMedia?.message"
       @close="isFullscreen = false"
       @next="nextMedia"
       @previous="previousMedia"
@@ -182,6 +187,10 @@ export default {
     currentMedia: {},
     prevUuidBeforePagination: null,
     prevRoomUuid: null,
+    startMessagesBy: {
+      bot: '',
+      agent: '',
+    },
   }),
 
   mounted() {
@@ -210,10 +219,7 @@ export default {
       return this.roomMessages
         .map((el) => el.media)
         .flat()
-        .filter((el) => {
-          const media = /(png|jp(e)?g|webp|mp4)/;
-          return media.test(el.content_type);
-        });
+        .filter((media) => this.isMedia(media));
     },
   },
 
@@ -236,11 +242,14 @@ export default {
       return this.isMediaOfType(media, 'audio');
     },
     isGeolocation(media) {
-      return this.isMediaOfType(media, 'geo');
+      if (media) {
+        return this.isMediaOfType(media, 'geo');
+      }
+      return false;
     },
     isMedia(media) {
-      const { isAudio, isImage, isVideo, isGeolocation } = this;
-      return isAudio(media) || isImage(media) || isVideo(media) || isGeolocation(media);
+      const { isAudio, isImage, isVideo } = this;
+      return isAudio(media) || isImage(media) || isVideo(media);
     },
     messageStatus({ message, media }) {
       if (message) {
@@ -287,12 +296,24 @@ export default {
       );
     },
 
-    isFirstMessageByBot(messagesByDateMinutes) {
-      return messagesByDateMinutes.some((minute) =>
-        minute.messages.some(
-          (message) => !message.contact && !message.user && !this.isFeedbackMessage(message),
-        ),
-      );
+    setStartFeedbacks() {
+      const newFirstMessageByAgentUuid = this.roomMessages.find(
+        (message) => message.user && !this.isFeedbackMessage(message),
+      )?.uuid;
+      const newFirstMessageByBotUuid = this.roomMessages.find(
+        (message) => !message.contact && !message.user && !this.isFeedbackMessage(message),
+      )?.uuid;
+
+      if (newFirstMessageByAgentUuid) {
+        this.startMessagesBy.agent = newFirstMessageByAgentUuid;
+      }
+      if (newFirstMessageByBotUuid) {
+        this.startMessagesBy.bot = newFirstMessageByBotUuid;
+      }
+    },
+
+    isChatSeparatorFeedback(messageUuid) {
+      return [this.startMessagesBy.bot, this.startMessagesBy.agent].includes(messageUuid);
     },
 
     isMessageByBot(message) {
@@ -379,9 +400,16 @@ export default {
 
       function getForwardLabel(action, to) {
         if (action === 'forward') {
-          return t('chats.feedback.forwarded_to_agent', {
-            agent: to.name,
-          });
+          if (to?.type === 'user') {
+            return t('chats.feedback.forwarded_to_agent', {
+              agent: to.name,
+            });
+          }
+          if (to?.type === 'queue') {
+            return t('chats.feedback.forwarded_to_queue', {
+              queue: to.name,
+            });
+          }
         }
         return '';
       }
@@ -474,6 +502,7 @@ export default {
 
   watch: {
     roomMessages() {
+      this.setStartFeedbacks();
       this.$nextTick(() => {
         this.manageScrollForNewMessages();
       });

diff --git a/src/components/chats/chat/ModalGetChat.vue b/src/components/chats/chat/ModalGetChat.vue
@@ -8,7 +8,7 @@
     scheme="neutral-darkest"
   >
     <template #options>
-      <unnnic-button :text="$t('cancel')" type="terciary" @click="close" />
+      <unnnic-button :text="$t('cancel')" type="tertiary" @click="close" />
       <unnnic-button :text="$t('confirm')" type="secondary" @click="getChat" />
     </template>
   </unnnic-modal>
@@ -58,7 +58,9 @@ export default {
 
       await Room.take(this.room.uuid, this.me.email);
       await this.setActiveRoom(this.room.uuid);
-      Room.updateReadMessages(this.room.uuid, true);
+      if (this.room.user) {
+        Room.updateReadMessages(this.room.uuid, true);
+      }
 
       this.close();
     },

diff --git a/src/components/settings/forms/Agent/Edit.vue b/src/components/settings/forms/Agent/Edit.vue
@@ -42,7 +42,7 @@
       @close="queueToRemove = {}"
     >
       <template #options>
-        <unnnic-button type="terciary" @click="queueToRemove = {}" text="Cancelar" />
+        <unnnic-button type="tertiary" @click="queueToRemove = {}" text="Cancelar" />
         <unnnic-button type="secondary" @click="removeQueue(queueToRemove)" text="Confirmar" />
       </template>
     </unnnic-modal>

diff --git a/src/components/settings/forms/Queue/Edit.vue b/src/components/settings/forms/Queue/Edit.vue
@@ -41,7 +41,7 @@
       @close="agentToRemove = {}"
     >
       <template #options>
-        <unnnic-button type="terciary" @click="agentToRemove = {}" text="Cancelar" />
+        <unnnic-button type="tertiary" @click="agentToRemove = {}" text="Cancelar" />
         <unnnic-button type="secondary" @click="removeAgent(agentToRemove)" text="Confirmar" />
       </template>
     </unnnic-modal>

diff --git a/src/layouts/ChatsLayout/components/FlowsTrigger/index.vue b/src/layouts/ChatsLayout/components/FlowsTrigger/index.vue
@@ -71,14 +71,14 @@
         </template>
       </section>
       <div class="flows-trigger__handlers" v-if="!showSelectFlow">
-        <unnnic-button-next
+        <unnnic-button
           size="small"
-          type="secondary"
+          type="alternative"
           :text="$t('add')"
           :iconLeft="'add-1'"
           @click="openModal"
         />
-        <unnnic-button-next
+        <unnnic-button
           :disabled="this.listOfGroupAndContactsSelected.length === 0"
           :text="$t('continue')"
           type="primary"