feat: Add RTL Support to Widget (#11022)

This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code.

Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget

https://github.com/chatwoot/chatwoot/issues/9791

Other PR: https://github.com/chatwoot/chatwoot/pull/11016

app/javascript/widget/components/ImageBubble.vue

@@ -29,8 +29,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'widget/assets/scss/variables.scss';
-
 .image {
   display: block;
 
@@ -40,11 +38,7 @@ export default {
     max-width: 100%;
 
     &::before {
-      background-image: linear-gradient(
-        -180deg,
-        transparent 3%,
-        $color-heading 130%
-      );
+      background-image: linear-gradient(-180deg, transparent 3%, #1f2d3d 130%);
       bottom: 0;
       content: '';
       height: 20%;
@@ -61,12 +55,7 @@ export default {
   }
 
   .time {
-    font-size: $font-size-small;
-    bottom: $space-smaller;
-    color: $color-white;
-    position: absolute;
-    right: $space-slab;
-    white-space: nowrap;
+    @apply text-xs bottom-1 text-white ltr:right-3 rtl:left-3 whitespace-nowrap absolute;
   }
 }
 </style>