[ENGAGE-2394] - Reply messages

package.json

@@ -13,8 +13,8 @@
     "translations:suggest-from-pt-br": "unified-translations --translations-file ./src/locales/translations.json --languages pt-br=./src/locales/pt_br.json,en=./src/locales/en.json,es=./src/locales/es.json --mode build --suggest \"pt-br:pt>en:en\" && unified-translations --translations-file ./src/locales/translations.json --languages pt-br=./src/locales/pt_br.json,en=./src/locales/en.json,es=./src/locales/es.json --mode reverse && unified-translations --translations-file ./src/locales/translations.json --languages pt-br=./src/locales/pt_br.json,en=./src/locales/en.json,es=./src/locales/es.json --mode build --suggest \"pt-br:pt>es\" && unified-translations --translations-file ./src/locales/translations.json --languages pt-br=./src/locales/pt_br.json,en=./src/locales/en.json,es=./src/locales/es.json --mode reverse"
   },
   "dependencies": {
+    "@weni/unnnic-system": "2.20.1-alpha.8",
     "@sentry/vue": "^8.50.0",
-    "@weni/unnnic-system": "^2.20.0",
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "iframessa": "^2.0.0",

src/components/chats/MessageManager/index.vue

@@ -16,9 +16,18 @@
           v-if="isFileLoadingValueValid"
           :value="loadingFileValue"
         />
+        <UnnnicReplyMessage
+          v-if="replyMessage"
+          class="message-manager__reply-message"
+          :replyMessage="replyMessage"
+          showClose
+          messageType="received"
+          @close="clearReplyMessage()"
+        />
         <TextBox
           v-if="!isAudioRecorderVisible"
           ref="textBox"
+          class="message-manager-box__text-box"
           :modelValue="textBoxMessage"
           @update:model-value="textBoxMessage = $event"
           @keydown.stop="onKeyDown"
@@ -136,7 +145,7 @@
 <script>
 import isMobile from 'is-mobile';
 
-import { mapActions, mapState } from 'pinia';
+import { mapActions, mapState, mapWritableState } from 'pinia';
 
 import { useQuickMessageShared } from '@/store/modules/chats/quickMessagesShared';
 import { useQuickMessages } from '@/store/modules/chats/quickMessages';
@@ -201,10 +210,11 @@ export default {
   computed: {
     ...mapState(useQuickMessageShared, ['quickMessagesShared']),
     ...mapState(useQuickMessages, ['quickMessages']),
-    ...mapState(useRooms, ['canUseCopilot']),
+    ...mapState(useRooms, ['canUseCopilot', 'activeRoom']),
     ...mapState(useDiscussions, {
       discussionId: (store) => store.activeDiscussion?.uuid,
     }),
+    ...mapWritableState(useRoomMessages, ['replyMessage']),
 
     isMobile() {
       return isMobile();
@@ -273,6 +283,19 @@ export default {
     },
   },
 
+  watch: {
+    'activeRoom.uuid'() {
+      this.clearReplyMessage();
+    },
+    replyMessage(newReplyMessage) {
+      if (newReplyMessage) this.$refs.textBox.focus();
+    },
+  },
+
+  mounted() {
+    this.clearReplyMessage();
+  },
+
   methods: {
     ...mapActions(useDiscussionMessages, [
       'sendDiscussionMessage',
@@ -292,6 +315,9 @@ export default {
         this.$refs.textBox.focus();
       });
     },
+    clearReplyMessage() {
+      this.replyMessage = null;
+    },
     clearAudio() {
       this.$refs.audioRecorder?.discard();
       this.audioMessage = null;
@@ -321,7 +347,7 @@ export default {
 
       if (event.key === 'Enter') {
         if (event.shiftKey) return;
-        this.sendTextBoxMessage();
+        this.send();
         event.preventDefault();
       }
     },
@@ -363,23 +389,28 @@ export default {
     stopRecord() {
       this.$refs.audioRecorder?.stop();
     },
-    send() {
+    async send() {
+      let repliedMessage = null;
+      if (this.replyMessage) {
+        repliedMessage = { ...this.replyMessage };
+        this.replyMessage = null;
+      }
       this.$refs.textBox?.clearTextarea();
-      this.sendTextBoxMessage();
-      this.sendAudio();
+      await this.sendTextBoxMessage(repliedMessage);
+      await this.sendAudio(repliedMessage);
     },
-    async sendTextBoxMessage() {
+    async sendTextBoxMessage(repliedMessage) {
       const message = this.textBoxMessage.trim();
       if (message) {
         this.clearTextBox();
         if (this.discussionId) {
           await this.sendDiscussionMessage(message);
         } else {
-          await this.sendRoomMessage(message);
+          await this.sendRoomMessage(message, repliedMessage);
         }
       }
     },
-    async sendAudio() {
+    async sendAudio(repliedMessage) {
       if (this.audioRecorderStatus === 'recording') {
         await this.stopRecord();
       }
@@ -403,6 +434,7 @@ export default {
       const sendPayload = {
         files: [audio],
         updateLoadingFiles,
+        repliedMessage,
       };
 
       if (this.discussionId) {
@@ -425,6 +457,7 @@ export default {
     },
     updateAudioRecorderStatus(status) {
       this.audioRecorderStatus = status;
+      console.log(this.audioRecorderStatus);
     },
   },
 };
@@ -439,21 +472,40 @@ export default {
   gap: $unnnic-spacing-stack-xs;
   align-items: end;
 
-  &-box__container {
-    position: relative;
+  :deep(.reply-message) {
+    box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.1);
+  }
 
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
-    border-radius: $unnnic-border-radius-sm;
-    background-color: $unnnic-color-neutral-snow;
+  &-box {
+    &__container {
+      position: relative;
 
-    height: 100%;
+      height: 100%;
+
+      display: flex;
+      flex-direction: column;
+      gap: $unnnic-spacing-nano;
+
+      &.focused {
+        border-color: $unnnic-color-neutral-clean;
+      }
+
+      &.loading {
+        border-radius: 0 0 $unnnic-border-radius-sm $unnnic-border-radius-sm;
+      }
 
-    &.focused {
-      border-color: $unnnic-color-neutral-clean;
+      &.recording {
+        border: $unnnic-border-width-thinner solid
+          $unnnic-color-neutral-cleanest;
+        border-radius: $unnnic-border-radius-sm;
+        background-color: $unnnic-color-neutral-snow;
+      }
     }
 
-    &.loading {
-      border-radius: 0 0 $unnnic-border-radius-sm $unnnic-border-radius-sm;
+    &__text-box {
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
+      border-radius: $unnnic-border-radius-sm;
+      background-color: $unnnic-color-neutral-snow;
     }
   }
 
@@ -480,7 +532,11 @@ export default {
 
     justify-content: flex-end;
 
-    padding-right: $unnnic-spacing-stack-sm;
+    padding: 10px;
+
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
+    border-radius: $unnnic-border-radius-sm;
+    background-color: $unnnic-color-neutral-snow;
 
     :deep(.audio-player) {
       width: auto;

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

@@ -61,6 +61,11 @@
                 :status="messageStatus({ message })"
                 :title="messageFormatTitle(new Date(message.created_on))"
                 :signature="messageSignature(message)"
+                :enableReply="enableReply"
+                :replyMessage="message.replied_message"
+                @reply="
+                  handlerMessageReply({ ...message, content_type: 'text' })
+                "
               >
                 {{
                   isGeolocation(message.media?.[0])
@@ -90,6 +95,18 @@
                   :status="messageStatus({ message })"
                   :title="messageFormatTitle(new Date(message.created_on))"
                   :signature="messageSignature(message)"
+                  :enableReply="enableReply"
+                  :replyMessage="message.replied_message"
+                  @reply="
+                    handlerMessageReply({
+                      ...message,
+                      content_type: isImage(media)
+                        ? 'image'
+                        : isVideo(media)
+                          ? 'video'
+                          : 'audio',
+                    })
+                  "
                   @click="resendMedia({ message, media })"
                 >
                   <img
@@ -131,6 +148,14 @@
                   :status="messageStatus({ message })"
                   :title="messageFormatTitle(new Date(message.created_on))"
                   :signature="messageSignature(message)"
+                  :enableReply="enableReply"
+                  :replyMessage="message.replied_message"
+                  @reply="
+                    handlerMessageReply({
+                      ...message,
+                      content_type: 'attachment',
+                    })
+                  "
                   @click="documentClickHandler({ message, media })"
                 />
               </template>
@@ -176,7 +201,7 @@
 </template>
 
 <script>
-import { mapState } from 'pinia';
+import { mapState, mapWritableState } from 'pinia';
 import { useDashboard } from '@/store/modules/dashboard';
 
 import moment from 'moment';
@@ -192,6 +217,7 @@ import FullscreenPreview from '@/components/chats/MediaMessage/Previews/Fullscre
 import ChatFeedback from '../ChatFeedback.vue';
 import ChatMessagesStartFeedbacks from './ChatMessagesStartFeedbacks.vue';
 import ChatMessagesFeedbackMessage from './ChatMessagesFeedbackMessage.vue';
+import { useRoomMessages } from '@/store/modules/chats/roomMessages';
 
 export default {
   name: 'ChatMessages',
@@ -215,6 +241,10 @@ export default {
       type: Array,
       required: true,
     },
+    enableReply: {
+      type: Boolean,
+      default: false,
+    },
     messagesNext: {
       type: String,
       required: true,
@@ -291,6 +321,7 @@ export default {
 
   computed: {
     ...mapState(useDashboard, ['viewedAgent']),
+    ...mapWritableState(useRoomMessages, ['replyMessage']),
     medias() {
       return this.messages
         .map((el) => el.media)
@@ -332,6 +363,9 @@ export default {
   },
 
   methods: {
+    handlerMessageReply(message) {
+      this.replyMessage = message;
+    },
     isMediaOfType(media, type) {
       return media && media.content_type?.includes(type);
     },

src/components/chats/chat/RoomMessages.vue

@@ -12,6 +12,7 @@
     :tags="room?.tags"
     :isLoading="isLoading"
     :isClosedChat="!!room?.ended_at"
+    :enableReply="room?.is_active"
     @scroll-top="searchForMoreMessages"
   />
 </template>

src/layouts/ChatsLayout/index.vue

@@ -243,7 +243,7 @@ section.chats-layout {
 
     height: 100%;
 
-    background-color: $unnnic-color-background-carpet;
+    background-color: rgba(253, 245, 233, 0.25);
   }
 
   .quick-message {

src/locales/en.json

@@ -36,6 +36,14 @@
   "waiting_for": {
     "minutes": "1 minute waiting | {n} minutes waiting"
   },
+  "chat_message": {
+    "reply_message": {
+      "you": "You",
+      "video": "Video",
+      "image": "Image",
+      "audio": "Audio message"
+    }
+  },
   "details": "Details",
   "doubts": "Doubts",
   "finance": "Finance",
@@ -64,6 +72,10 @@
   "undo": "Undo",
   "redo": "Redo",
   "record_audio": "Record audio",
+  "select_all": "Select all",
+  "image": "Image",
+  "video": "Video",
+  "audio_message": "Audio message",
   "audio_recorder": {
     "discard_button": "Discard"
   },

src/locales/es.json

@@ -36,6 +36,14 @@
   "waiting_for": {
     "minutes": "Esperando por un minuto | Esperando por {n} minutos"
   },
+  "chat_message": {
+    "reply_message": {
+      "you": "Tú",
+      "video": "Vídeo",
+      "image": "Imagen",
+      "audio": "Mensaje de audio"
+    }
+  },
   "details": "Details",
   "doubts": "Dudas",
   "finance": "Financiero",
@@ -65,6 +73,9 @@
   "redo": "Rehacer",
   "record_audio": "Grabar audio",
   "select_all": "Seleccionar todo",
+  "image": "Imagen",
+  "video": "Vídeo",
+  "audio_message": "Mensaje de audio",
   "audio_recorder": {
     "discard_button": "Descartar"
   },

src/locales/pt_br.json

@@ -36,6 +36,14 @@
   "waiting_for": {
     "minutes": "Aguardando há 1 minuto | Aguardando há {n} minutos"
   },
+  "chat_message": {
+    "reply_message": {
+      "you": "Você",
+      "video": "Vídeo",
+      "image": "Imagem",
+      "audio": "Mensagem de áudio"
+    }
+  },
   "details": "Detalhes",
   "doubts": "Dúvidas",
   "finance": "Financeiro",
@@ -65,6 +73,9 @@
   "redo": "Refazer",
   "record_audio": "Gravar áudio",
   "select_all": "Selecionar todos",
+  "image": "Imagem",
+  "video": "Vídeo",
+  "audio_message": "Mensagem de áudio",
   "audio_recorder": {
     "discard_button": "Descartar"
   },