feat: fetch suggestions and scroll if required

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -66,6 +66,7 @@
       />
       <conversation-label-suggestion
         v-if="isEnterprise && isAIIntegrationEnabled"
+        :suggested-labels="labelSuggestions"
         :chat-labels="currentChat.labels"
         :conversation-id="currentChat.id"
       />
@@ -151,6 +152,7 @@ export default {
       conversationPanel: null,
       selectedTweetId: null,
       isPopoutReplyBox: false,
+      labelSuggestions: [],
     };
   },
 
@@ -304,6 +306,7 @@ export default {
         return;
       }
       this.fetchAllAttachmentsFromCurrentChat();
+      this.fetchSuggestions();
       this.selectedTweetId = null;
     },
   },
@@ -316,7 +319,7 @@ export default {
   mounted() {
     this.addScrollListener();
     this.fetchAllAttachmentsFromCurrentChat();
-    this.fetchIntegrationsIfRequired();
+    this.fetchSuggestions();
   },
 
   beforeDestroy() {
@@ -325,6 +328,18 @@ export default {
   },
 
   methods: {
+    async fetchSuggestions() {
+      // start empty
+      this.labelSuggestions = [];
+
+      await this.fetchIntegrationsIfRequired();
+      this.labelSuggestions = await this.fetchLabelSuggestions({
+        conversationId: this.currentChat.id,
+      });
+      this.$nextTick(() => {
+        this.scrollToBottom();
+      });
+    },
     fetchAllAttachmentsFromCurrentChat() {
       this.$store.dispatch('fetchAllAttachments', this.currentChat.id);
     },
@@ -370,17 +385,24 @@ export default {
     },
     scrollToBottom() {
       let relevantMessages = [];
+      let labelSuggestions = this.conversationPanel.querySelector(
+        '.label-suggestion'
+      );
+      // if there are unread messages, scroll to the first unread message
       if (this.unreadMessageCount > 0) {
         // capturing only the unread messages
         relevantMessages = this.conversationPanel.querySelectorAll(
           '.message--unread'
         );
+      } else if (labelSuggestions) {
+        relevantMessages = [labelSuggestions];
       } else {
         // capturing last message from the messages list
         relevantMessages = Array.from(
           this.conversationPanel.querySelectorAll('.message--read')
         ).slice(-1);
       }
+
       this.conversationPanel.scrollTop = calculateScrollTop(
         this.conversationPanel.scrollHeight,
         this.$el.scrollHeight,

app/javascript/dashboard/mixins/aiMixin.js

@@ -1,5 +1,6 @@
 import { mapGetters } from 'vuex';
 import { OPEN_AI_EVENTS } from '../helper/AnalyticsHelper/events';
+import OpenAPI from '../api/integrations/openapi';
 
 export default {
   mounted() {
@@ -33,5 +34,30 @@ export default {
         });
       }
     },
+    async fetchLabelSuggestions({ conversationId }) {
+      try {
+        const result = await OpenAPI.processEvent({
+          type: 'label_suggestion',
+          hookId: this.hookId,
+          conversationId: conversationId,
+        });
+
+        const {
+          data: { message: labels },
+        } = result;
+
+        return this.cleanLabels(labels);
+      } catch (error) {
+        return [];
+      }
+    },
+    cleanLabels(labels) {
+      return labels
+        .toLowerCase() // Set it to lowercase
+        .split(',') // split the string into an array
+        .filter(label => label.trim()) // remove any empty strings
+        .filter((label, index, self) => self.indexOf(label) === index) // remove any duplicates
+        .map(label => label.trim()); // trim the words
+    },
   },
 };