From 6f09f20991e28e7305eb72f284454d345869b21c Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Fri, 11 Aug 2023 16:41:01 -0700
Subject: [PATCH] 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.
---
 .../widget/components/AgentTypingBubble.vue      |  2 +-
 .../widget/components/ConversationWrap.vue       | 16 ++++++++++++++--
 .../widget/store/modules/conversation/getters.js |  7 +++++++
 .../message_templates/response_bot_service.rb    |  3 +--
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/app/javascript/widget/components/AgentTypingBubble.vue b/app/javascript/widget/components/AgentTypingBubble.vue
index fffca9f79..cdda7a84c 100644
--- a/app/javascript/widget/components/AgentTypingBubble.vue
+++ b/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')"
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index 1c589488d..c0fa424ba 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/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() {
diff --git a/app/javascript/widget/store/modules/conversation/getters.js b/app/javascript/widget/store/modules/conversation/getters.js
index 74e582348..151694b86 100644
--- a/app/javascript/widget/store/modules/conversation/getters.js
+++ b/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),
diff --git a/enterprise/app/services/enterprise/message_templates/response_bot_service.rb b/enterprise/app/services/enterprise/message_templates/response_bot_service.rb
index 4082c3cb2..01c1eb832 100644
--- a/enterprise/app/services/enterprise/message_templates/response_bot_service.rb
+++ b/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)