From e18f4aeee943e644881c6ae3326f559674de88bb Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Thu, 9 Feb 2023 16:50:11 +0530
Subject: [PATCH] fix: Text color bug on attachment bubble in widget (#6399)

* fix: Text color bug on attachment bubble

* chore: Fix file bubble text color issue

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
---
 .../widget/components/AgentMessage.vue        |  2 +-
 .../widget/components/FileBubble.vue          | 20 +++++++++++++++++--
 .../widget/components/UserMessage.vue         |  1 +
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index 6b1fb782b..d1ce05456 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -24,7 +24,7 @@
         <div
           v-if="hasAttachments"
           class="chat-bubble has-attachment agent"
-          :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-50'))"
+          :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
         >
           <div v-for="attachment in message.attachments" :key="attachment.id">
             <image-bubble
diff --git a/app/javascript/widget/components/FileBubble.vue b/app/javascript/widget/components/FileBubble.vue
index bd406e1c0..44879ad06 100644
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/app/javascript/widget/components/FileBubble.vue
@@ -4,7 +4,7 @@
       <fluent-icon icon="document" size="28" />
     </div>
     <div class="meta">
-      <div class="title" :style="{ color: textColor }">
+      <div class="title" :class="titleColor" :style="{ color: textColor }">
         {{ title }}
       </div>
       <div class="link-wrap mb-1">
@@ -24,12 +24,14 @@
 
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   components: {
     FluentIcon,
   },
+  mixins: [darkModeMixin],
   props: {
     url: {
       type: String,
@@ -43,6 +45,10 @@ export default {
       type: String,
       default: '',
     },
+    isUserBubble: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     title() {
@@ -53,9 +59,19 @@ export default {
     fileName() {
       return this.url.substring(this.url.lastIndexOf('/') + 1);
     },
-    textColor() {
+    contrastingTextColor() {
       return getContrastingTextColor(this.widgetColor);
     },
+    textColor() {
+      return this.isUserBubble && this.widgetColor
+        ? this.contrastingTextColor
+        : '';
+    },
+    titleColor() {
+      return !this.isUserBubble
+        ? this.$dm('text-black-900', 'dark:text-slate-50')
+        : '';
+    },
   },
   methods: {
     openLink() {
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index 4dd0e6e3a..0a1f61ff8 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -29,6 +29,7 @@
               :url="attachment.data_url"
               :is-in-progress="isInProgress"
               :widget-color="widgetColor"
+              is-user-bubble
             />
           </div>
         </div>