Add an intermediate pending state for widget messages (#323)

* Add an intermediate pending state for widget messages

* Remove unnecessary setTimeout

* Rename method

app/javascript/widget/components/ChatMessage.vue

@@ -1,5 +1,9 @@
 <template>
-  <UserMessage v-if="isUserMessage" :message="message.content" />
+  <UserMessage
+    v-if="isUserMessage"
+    :message="message.content"
+    :status="message.status"
+  />
   <AgentMessage v-else :agent-name="agentName" :message="message.content" />
 </template>
 

app/javascript/widget/components/UserMessage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-message">
     <div class="message-wrap">
-      <UserMessageBubble :message="message" />
+      <UserMessageBubble :message="message" :status="status" />
     </div>
   </div>
 </template>
@@ -15,8 +15,12 @@ export default {
     UserMessageBubble,
   },
   props: {
-    message: String,
     avatarUrl: String,
+    message: String,
+    status: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>

app/javascript/widget/components/UserMessageBubble.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="chat-bubble user"
-    :style="{ background: widgetColor }"
+    :style="{ background: backgroundColor }"
     v-html="formatMessage(message)"
   ></div>
 </template>
@@ -16,10 +16,17 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    backgroundColor() {
+      return this.status !== 'in_progress' ? this.widgetColor : '#c0ccda';
+    },
   },
   mixins: [messageFormatterMixin],
   props: {
     message: String,
+    status: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>