diff --git a/app/javascript/widget/components/FileBubble.vue b/app/javascript/widget/components/FileBubble.vue
index 0a5d545ea..3731bd027 100644
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/app/javascript/widget/components/FileBubble.vue
@@ -32,6 +32,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    widgetColor: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     title() {
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index ffdf5685d..9663e4932 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -2,12 +2,17 @@
   <div class="user-message-wrap">
     <div class="user-message">
       <div class="message-wrap" :class="{ 'in-progress': isInProgress }">
-        <UserMessageBubble
+        <user-message-bubble
           v-if="showTextBubble"
           :message="message.content"
           :status="message.status"
+          :widget-color="widgetColor"
         />
-        <div v-if="hasAttachments" class="chat-bubble has-attachment user">
+        <div
+          v-if="hasAttachments"
+          class="chat-bubble has-attachment user"
+          :style="{ backgroundColor: widgetColor }"
+        >
           <div v-for="attachment in message.attachments" :key="attachment.id">
             <file-bubble
               v-if="attachment.file_type !== 'image'"
@@ -32,6 +37,7 @@ import UserMessageBubble from 'widget/components/UserMessageBubble';
 import ImageBubble from 'widget/components/ImageBubble';
 import FileBubble from 'widget/components/FileBubble';
 import timeMixin from 'dashboard/mixins/time';
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'UserMessage',
@@ -48,6 +54,10 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
+
     isInProgress() {
       const { status = '' } = this.message;
       return status === 'in_progress';
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index 03fac6601..2a3e84836 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -3,33 +3,29 @@
     class="chat-bubble user"
     :style="{ background: widgetColor }"
     v-html="formatMessage(message)"
-  ></div>
+  />
 </template>
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import { mapGetters } from 'vuex';
 
 export default {
   name: 'UserMessageBubble',
   mixins: [messageFormatterMixin],
   props: {
-    message: String,
+    message: {
+      type: String,
+      default: '',
+    },
     status: {
       type: String,
       default: '',
     },
-    computed: {
-      ...mapGetters({
-        widgetColor: 'appConfig/getWidgetColor',
-      }),
+    widgetColor: {
+      type: String,
+      default: '',
     },
   },
-  computed: {
-    ...mapGetters({
-      widgetColor: 'appConfig/getWidgetColor',
-    }),
-  },
 };
 </script>