fix: Update colors in widget buttons to fix invalid colors (#6033)

Co-authored-by: nithindavid <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/FileBubble.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="file flex flex-row items-center p-3 cursor-pointer">
-    <div class="icon-wrap">
+    <div class="icon-wrap" :style="{ color: textColor }">
       <fluent-icon icon="document" size="28" />
     </div>
     <div class="meta">
-      <div class="title">
+      <div class="title" :style="{ color: textColor }">
         {{ title }}
       </div>
       <div class="link-wrap mb-1">
@@ -12,6 +12,7 @@
           class="download"
           rel="noreferrer noopener nofollow"
           target="_blank"
+          :style="{ color: textColor }"
           :href="url"
         >
           {{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
@@ -23,6 +24,7 @@
 
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   components: {
@@ -51,6 +53,9 @@ export default {
     fileName() {
       return this.url.substring(this.url.lastIndexOf('/') + 1);
     },
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
   },
   methods: {
     openLink() {