feat: Update bot typing indicator based on the conversation status (#7714)

- Show the indicator if the last message is incoming and the conversation is in pending status.
- Remove list of articles displayed in the bot response.

app/javascript/widget/components/AgentTypingBubble.vue

@@ -2,7 +2,7 @@
   <div class="agent-message-wrap">
     <div class="agent-message">
       <div class="avatar-wrap" />
-      <div class="message-wrap">
+      <div class="message-wrap mt-2">
         <div
           class="typing-bubble chat-bubble agent"
           :class="$dm('bg-white', 'dark:bg-slate-50')"

app/javascript/widget/components/ConversationWrap.vue

@@ -16,7 +16,7 @@
           :message="message"
         />
       </div>
-      <agent-typing-bubble v-if="isAgentTyping" />
+      <agent-typing-bubble v-if="showStatusIndicator" />
     </div>
   </div>
 </template>
@@ -27,7 +27,7 @@ import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
 import DateSeparator from 'shared/components/DateSeparator.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
-
+import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
@@ -54,14 +54,26 @@ export default {
   computed: {
     ...mapGetters({
       earliestMessage: 'conversation/getEarliestMessage',
+      lastMessage: 'conversation/getLastMessage',
       allMessagesLoaded: 'conversation/getAllMessagesLoaded',
       isFetchingList: 'conversation/getIsFetchingList',
       conversationSize: 'conversation/getConversationSize',
       isAgentTyping: 'conversation/getIsAgentTyping',
+      conversationAttributes: 'conversationAttributes/getConversationParams',
     }),
     colorSchemeClass() {
       return `${this.darkMode === 'dark' ? 'dark-scheme' : 'light-scheme'}`;
     },
+    showStatusIndicator() {
+      const { status } = this.conversationAttributes;
+      const isConversationInPendingStatus = status === 'pending';
+      const isLastMessageIncoming =
+        this.lastMessage.message_type === MESSAGE_TYPE.INCOMING;
+      return (
+        this.isAgentTyping ||
+        (isConversationInPendingStatus && isLastMessageIncoming)
+      );
+    },
   },
   watch: {
     allMessagesLoaded() {

app/javascript/widget/store/modules/conversation/getters.js

@@ -16,6 +16,13 @@ export const getters = {
     }
     return {};
   },
+  getLastMessage: _state => {
+    const conversation = Object.values(_state.conversations);
+    if (conversation.length) {
+      return conversation[conversation.length - 1];
+    }
+    return {};
+  },
   getGroupedConversation: _state => {
     const conversationGroupedByDate = groupBy(
       Object.values(_state.conversations),

enterprise/app/services/enterprise/message_templates/response_bot_service.rb

@@ -61,9 +61,8 @@ class Enterprise::MessageTemplates::ResponseBotService
   end
 
   def create_messages(response, conversation)
-    response, article_ids = process_response_content(response)
+    response = process_response_content(response)
     create_outgoing_message(response, conversation)
-    create_outgoing_message_with_cards(article_ids, conversation) if article_ids.present?
   end
 
   def process_response_content(response)